일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 알고리즘
- 부트캠프
- JS예제
- useEffect
- 의사클래스
- 부트캠프 #스파르타코딩클럽 #개발일지# #TIL #Javascript #confirm #location.href
- appendChild
- 부트캠프 #CSS #개발일지 #TIL
- 깃허브오류
- ㅜㄹㄹ
- 부트캠프 #스파르타코딩클럽 #개발일지# #html
- querySelector
- 리액트
- 개발일지
- 부트캠프 #개발일지 #TIL #FlexboxFroggy #displayflex #flexbox
- 결합선택자
- React
- 부트캠프 #CSS #개발일지 #TIL #박스모델
- 부트캠프 #개발일지 #TIL #Position #위치
- useState
- js
- textContent
- 부트캠프 #코딩 #개발일지 #프론트엔드 #CSS #TIL
- 개발일지 #TIL #프론트엔드 #HTML
- 부트캠프 #개발일지 #TIL #그리드 #CSS
- CSS
- 템플릿스트링
- 부트캠프 #개발일지 #TIL #CSS속성 #float #clear
- Til
- 특성선택자
- Today
- Total
목록전체 글 (156)
나의 개발일지
react-memo memo(React.memo) : 컴포넌트를 캐싱 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트는 모두 리렌더링 되는데 자식 컴포넌트는 바뀐 것이 없는데 리렌더링이 된다면 너무 비효율적임 이러한 문제점을 돕는 게 바로 memo다 src > App.jsx import { useState } from "react"; import Box1 from "./components/Box1"; import Box2 from "./components/Box2"; import Box3 from "./components/Box3"; function App() { console.log("App 컴포넌트가 렌더링되었습니다"); const [count, setCount] = useState(0); const o..
useContext의 필요성 props-drilling의 문제점을 개선 하기 위해 필요하다 useContext는 전역 데이터 관리를 할 수 있게 되었다 주의할 점 useContext를 사용할 때, provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링이 되기 때문에 value부분을 항상 신경써줘야 한다! 할아버지가 손자에게 어떠한 정보를 주기 위해서 거쳐야 하는 과정은 App → GrandFather → Father → Child 이다 단순한 정보이면 모를까 전달해야 할 데이터가 100가지가 넘는다면 너무나도 복잡하고 비효율적일 것이다 Props-drilling 적용 코드 src > App.jsx import GrandFather from "./co..
✔️ 문제 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. ✔️ 제한사항 n은 길이 10,000이하인 자연수입니다. ✔️ 입출력 예 n return 3 "수박수" 4 "수박수박" 💡나의 풀이 function solution(n) { let answer = ""; for (let i = 1; i
staleTime > 0인 경우, 가져온 데이터는 그 시간 만큼 fresh한 것으로 간주 staleTime = 0인 경우, 가져온 데이터는 즉시 stale한 것으로 간주 inActive - 특정 쿼리에 대한 모든 옵저버(observer)가 제거되었을 때 발생 - 해당 데이터를 사용하는 컴포넌트가 더 이상 마운트되지 않거나 해당 쿼리를 구독하는 컴포넌트가 없을 때 이 상태에서는 데이터가 캐시에서 자동으로 삭제되기 전까지 일정 기간 동안 유지 - inActive 에서 다시 fresh 상태가 될 수 있다! : 이전에 사용되었던 쿼리 키를 가진 컴포넌트가 재마운트 되면 해당 쿼리는 다시 활성화가 된다 이때 staleTime이 아직 지나지 않았다면 데이터는 여전히 fresh 상태로 간주된다 staleTime 기본..
✔️ 문제 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. ✔️ 제한사항 s는 길이가 1 이상, 100이하인 스트링입니다. ✔️ 입출력 예 s return "abcde" "c" "qwer" "we" 💡나의 풀이 function solution(s) { var answer = ""; //홀수인 경우 if (s.length % 2 === 1) { // s[인덱스] answer = s[(s.length - 1) / 2]; } else { answer = s[s.length / 2 - 1] + s[s.length / 2]; } return answer; } 감이 잘 안 잡혔는데 인덱스를 구하면 되는 거였다..
🔥 TypeScript 개인과제 🔥 TypeScript버전으로 react-query를 이용하여 TodoList 만들기 (모든 구현 사항은 Typescript로 작성돼야 한다) Todo 항목 추가 하기 - 사용자가 새로운 Todo 항목을 입력하고 추가 할 수 있는 기능. Todo 항목 목록 표시 기능 - 각 Todo 하목은 고유 식별자를 가짐 Todo 삭제 하기 - 삭제 시 사용자에게 삭제 확인 요청 Todo 완료 상태 표시 기능 - 사용자가 Todo 항목을 완료했음을 표시한다 src > api > todos.ts import axios from "axios"; // 조회 const getTodos = async (): Promise => { try { const response = await axios...
✔️ 문제 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. ✔️ 제한사항 arr은 길이 1 이상인 배열입니다. 인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다. ✔️ 입출력 예 arr result [4,3,2,1] [4,3,2] [10] [-1] 💡나의 풀이 function solution(arr) { // 배열 길이가 1이면 [-1] 반환 if (arr.length === 1) { return [-1]; } // 최소값 구하기( 최소값..
✔️ 문제 0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. ✔️ 제한사항 1 ≤ numbers의 길이 ≤ 9 0 ≤ numbers의 모든 원소 ≤ 9 numbers의 모든 원소는 서로 다릅니다. ✔️ 입출력 예 numbers result [1,2,3,4,6,7,8,0] 14 [5,8,4,0,6,7,9] 6 💡나의 풀이 function solution(numbers) { var answer = 0; for (let i = 0; i cur + acc, 0); } 생각도 못한 풀이! 0 - 9 까지의 숫자를 다 더한 값은 45인데 담겨..
// 명시적으로 타입을 지정해주지 않으면 오류 발생 function Todos(props : {items : string[]}) { return ( Learn React Learn TypeScript ) } 리액트에서 props는 언제나 객체 형태이다 정리하자면 props는 객체고, items를 키로 가지며, 문자열 배열을 값으로 갖는다는 것 이런 식으로 매번 지정하는 것은 번거롭다 그래서 제네릭 타입을 이용한다! import React from "react"; // React.FC ==> 이 함수가 함수형 컴포넌트로 동작한다는 걸 명확히 하는 것 // FC 자체가 제네릭 타입이다 안에는 우리가 만든 객체를 집어넣는다 const Todos: React.FC = (props) => { return ( {p..
let age: number age= 12; age = 'a' // 오류 발생(위에서 명시한 건 number, 하지만 문자로 썼음) let userName : string; userName='heewon' let isInstructor : boolean; isInstructor=true; number 과 같은 타입은 소문자로 작성한다. more complex types let hobbies : string[] // let hobbies : number[] // let hobbies : boolean[] hobbies = ['sports', 'cooking', 122] // 오류 발생 (뜬금없이 숫자열이 껴있다) hobbies = ['sports', 'cooking'] ** any : 기본값으로 아무 타입..