디자이너 노트

플젝 일지 열심히 쓰려고 했는데 어느덧 일주일이 지나버렸다. 편하게 현재 생각기록이라도 남기는 게 좋을 것 같아 블로그에 방문했다. 일단.. 피하고 피했던 react-query와 recoil을 공부했다. 독학일땐 피해도 상관없었지만, 플젝 들어가니 없어선 안될 개념들이었다. 그래도 공부하니 좋긴 하더라. 북마크 기능 구현중인데, recoil 활용해서 내일 마저 구현해볼 예정이다. 이번주까지 북마크 기능은 마무리하고 싶은데 어떻게 될 지 모르겠다. 또, react-query 배운 이후 초반에 만들었던 코드를 리팩토링했다. 훨씬 깔끔하고 보기 좋았다. react-query 쓰니까 데이터 접근이 훨씬 용이한 느낌이었다. 플젝하니까 개발 공부를 더 열심히하는 것 같다. 재밌다기보단 해결하고 싶어서 물고 늘어지는..

5가지의 배열 변형 메서드 🪄 1. filter 기존 배열에서 조건을 만족하는 요소들만 필터링 하여 새로운 배열로 반환 let arr1 = [ { name: "이정환", hobby: "테니스" }, { name: "이정환", hobby: "테니스" }, { name: "이정환", hobby: "테니스" }, ]; const tennisPeople = arr1.filter((item) => item.hobby === "테니스"); console.log(tennisPeople); 2. map 배열의 모든 요소를 순회하면서, 각각 콜백함수를 실행하고, 그 결과값을 모아서 새로운 배열 반환 let arr2 = [1, 2, 3]; const mapResult1 = arr2.map((item, index, arra..

5가지 요소 순회 및 탐색 메서드 👀 1. forEach 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드 새로운 배열을 반환하지 않고, 배열의 각 요소를 순회하면서 콜백함수를 실행하는데 사용 let arr1 = [1, 2, 3]; arr1.forEach((item, index) => { // console.log(index, item * 2); }); let doubledArr = []; arr1.forEach((item) => { doubledArr.push(item * 2); }); console.log(doubledArr); // [2,4,6] 2. includes 배열의 특정 요소가 있는 지 확인하는 메서드 let arr2 = [1, 2, 3]; let isInclude = ..

공부 계기 🧚 리액트에서 투두리스트를 구현하면서 배열 메서드가 많이 사용되는 걸 배웠다. 그래서 배열 메서드를 주제로 따로 빼서 정리했다. 각각 메서드의 특징과 활용 상황을 이해하여 배열메서드에 대한 두려움을 떨쳐보자! 6가지의 요소 조작 메서드 🕹️ 1. push 배열의 맨 뒤에 새로운 요소를 추가하는 메서드 let arr1 = [1, 2, 3]; const newLength = arr1.push(4, 5, 6, 7); console.log(arr1); // [1,2,3,4,5,6,7] console.log(newLength); // 7 2. pop 배열의 맨 뒤에 있는 요소를 제거하고, 반환 let arr2 = [1, 2, 3]; const poppedItem = arr2.pop(); console...

TodoList 만들기 - 동적 데이터 관리 및 CRUD 구현 - 배열 형태를 다루는 서비스 개발 핵심 기능 1. 오늘의 날짜 자동 출력 (new Date()활용) 2. Todo 추가, 완료 토글, 삭제 기능 구현 3. 상태 데이터 관리 및 Todo 객체 구조 설계 4. useRef를 통한 Todo 객체 Id 지정 CRUD 1. Create: 투두 추가하기 2. Read: 투두리스트 렌더링 하기 3. Update: 투두 수정하기 4. Delete: 투두 삭제하기 결론 TodoList 개발을 통해 배열 형태의 데이터를 처리하는 방법, 상태 관리, CRUD의 개념과 React Hook 활용 능력을 향상시키고, 웹 개발의 실무 경험을 쌓을 수 있었다. CRUD란 무엇인가? CRUD는 'Create, Read,..

공부 계기 🧚 엊그제 좋은 커밋에 대한 글을 읽었다. '리드미 작성법'이 있는 건 알고 있었지만, 커밋에도 작성법이 있는 건 처음 알았다. 앞으로 협업을 하게 될 것을 대비하여 좋은 커밋 작성법을 구체적으로 정리한다. 좋은 커밋 메세지를 작성하는 방법 🔖 1. 커밋의 종류를 명시한다 - feat : 어떤 특정 어플리케이션에 더할 새로운 feature - fix : 어떤 오류 해결(fix) - style: 스타일과 연관된 feature나 업데이트 - refactor: 코드 베이스의 특정 부분을 재정렬(refactoring) - test: 테스트와 관련된 모든 것 - docs: 문서화에 관한 모든 것 - chore: 정규 코드 유지 보수 2. 제목과 본문 사이 빈칸 한 줄을 띄워 구분한다 3. 커밋 메세지는..

useCallback 또한 메모이제이션을 통해 컴포넌트의 성능을 최적화 시켜준다. 인자로 전달한 콜백 함수 자체를 메모이제이션 해주는 것. useMemo는 값을 메모이제이션 해주고, useCallback은 함수를 메모이제이션 해준다. 함수형 컴포넌트 렌더링 → Component 함수 호출 → 모든 내부 변수 초기화 함수형 컴포넌트 속 함수를 useCallback()으로 감싸주면? 렌더링 → Component 함수 호출 → Memoize 된 함수를 재사용 기본 API 함수도 매번 새로운 객체로 만들어진다. 컴포넌트 렌더링 사이에 값을 안정적으로 유지하는데 사용된다. useCallback(() => { return value; }, [item]) 첫번째 인자: 콜백함수 두번째 인자: 의존성 배열

메모이제이션이란? 💭 메모이제이션(memoization)이란 값비싼 함수 호출 결과를 캐싱한 후, 동일한 호출이 발생할때 다시 계산하는 대신, 캐싱된 결과를 반환하는 프로그래밍 기술이다. 여러번 호출되는 함수 또는 컴포넌트가 있을 때 유용하다. 메모이제이션은 메모리에 특정한 값을 저장하는 것이기 때문에 남용하면 오히려 성능을 저하시킬 수 있다. 현업에선 필수지만, 프로젝트 진행 시 성능은 마지막에 고려하는 것으로, 기능을 동작하게 한 후, 고도화 튜닝하고 싶을때 적용할 것을 권장한다. 메모이제이션은 순수 함수 호출을 최적화하고, 중복 계산을 줄이며 성능을 향상시키는 방법을 제공함으로써 함수형 프로그래밍 패러다임을 보완하는 강력한 기술. React에서는 useMemo와 useCallback와 같은 메모이제..

Array.prototype.reduce reduce() 함수는 배열의 모든 요소를 하나의 값으로 축소하는데 사용된다. reduce(콜백함수, 초기값) reduce 메서드의 동작 원리 reduce 메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백함수의 첫번째 인수로 전달하면서 콜백함수를 호출하여 하나의 결과값을 만들어 반환한다. 이때 원본 배열은 변경되지 않는다. const num = [1, 2, 3, 4]; const sum = num.reduce((accumulator, currentValue) => acc + cur, 0); console.log(sum);// 10 accumulator = 현재까지 누적..

useEffect 컴포넌트 생명 주기 이벤트를 등록하기 위한 훅 Mount, Update, Unmount 되었을 때 특정 작업을 처리할 코드를 실행시키고 싶다면 useEffect()를 사용할 수 있다. 인자로는 콜백함수 또는 콜백함수와 배열을 받는다. API useEffect(()⇒{ // 작업… }); ⇒ 컴포넌트가 렌더링 될 때 마다 실행 useEffect(()⇒{ //작업… }, []); ⇒ 컴포넌트가 처음 화면에 렌더링 될 때 실행 useEffect(()⇒{ //작업… }, [value]); ⇒ 컴포넌트가 처음 화면에 렌더링 될 때 실행, value 값이 바뀔 때 실행 API: Clean Up - 정리 useEffect(() ⇒ { // 구독… return () ⇒ { //구독 해지… } },[]..