겨리의 개발일기

최근 react-hook-form과 MUI를 함께 사용했던 경험이 있었는데 이에 관한 내용을 정리해보려한다. 왜 raect-hook-form을 사용할까? 🤔 리액트를 사용해서 폼을 다룰 땐 유효성 검사를 위해 제어 컴포넌트를 사용하는 경우가 많다. 즉, 사용자가 입력하는 값들을 모두 state로 관리하고 업데이트 한다. 하지만 이와 관련하여 몇 가지 문제점이 있다! 제어 컴포넌트를 사용할 때 문제점 1. 렌더링 이슈 react에서 컴포넌트 리렌더링이 발생하는 조건 중 하나는 state의 값이 변했을 때이다. 모든 값이 state로 연결 되어 있기 때문에 하나의 값이 변하더라도 많은 리렌더링이 발생하게 된다. 2. 코드의 가독성 리액트에서는 제어 컴포넌트로 폼을 다루게 된다. 이를 위해 각 요소마다 sta..

Programming/React 2023. 12. 14. 17:30

https://school.programmers.co.kr/learn/courses/30/lessons/12945?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 피보나치 수는 F(0) = 0, F(1) = 1 일 때, 1 이상의 n에 대하여 F(n) = F(n-1) + F(n-2)가 적용되는 수 입니다. 예를 들어, F(2) = F(0) + F(1) = 0 + 1 = 1 F(3) = F(1) + F(2) = 1 + 1 = 2 F(4) = F(2) + F(3) = 1 + 2 = 3 F(5) = F(3) + F(..

Programming/Algorithm 2023. 11. 28. 19:20

✍ 이진트리 DFS 관련 문제 ✅ 문제 철수는 그의 바둑이들을 데리고 시장에 가려고 한다. 그런데 그의 트럭은 C킬로그램 넘게 태울 수가 없다. 철수는 C를 넘지 않으면서 그의 바둑이들을 가장 무겁게 태우고 싶다. N마리의 바둑이와 각 바둑이의 무게 W가 주어지면, 철수가 트럭에 태울 수 있는 가장 무거운 무게를 구하는 프로그램을 작성하세요. ✅ 입력설명 첫 번째 줄에 자연수 C(1 sum) sumWeights.push(sum); } else { DFS(L + 1, sum + weightList[L]); DFS(L + 1, sum); } }; DFS(0, 0); return Math.max(...sumWeights); } console.log(solution(259, [81, 58, 42, 33, 61]..

Programming/Algorithm 2023. 11. 5. 02:11

며칠 전 개인 프로젝트 배포를 위해 Netlify를 사용했는데 이와 관련된 내용을 정리해보고자 한다! ✔ Netlify 선택 이유 내가 진행한 프로젝트는 정적인 웹 사이트이기 때문에 Netlify를 사용하여 배포를 하는 게 적당하다고 판단했다. ✔ 시작하기 로그인 후 Sites 쪽을 보면 이런 화면이 보일 것이다. ✅ 여기서 Import an existing project를 클릭 ✅ Github에 올린 프로젝트를 배포할 것이니 Deploy with Github 클릭 ✅ 프로젝트 목록 중 배포할 프로젝트를 클릭한다. ✅ 빌드 관련 세팅하기 그럼 설정 페이지가 나오는데 여기서는 빌드를 위한 기본적인 설정을 해주면된다. 1) Branch to deploy 배포할 브랜치를 선택할 수 있다. 2) Build co..

Programming/기타 2023. 10. 10. 00:59

👾 문제 개인 프로젝트 개발 중 콘솔창에 에러가 찍히는 걸 발견했다. Warning: Each child in a list should have a unique"key"prop 라는 에러 ! 오잉 난 key에 값을 지정해줬는데..?!?! 🤔🤔🤔 뭘까 하고 찾아보니 금방 원인을 찾을 수 있었다. 일단 코드를 보자! 코드를 보면 map 함수 바로 아래에 Fragment( ) 로 묶어줬는데 이 부분에 key를 지정해주지 않아서 에러가 발생한 거였다! 어찌보면 당연한 것...상단에 Fragment로 묶어줬으니 그 부분이 반복적으로 생길 거니까 key 지정은 그 부분에 해줬어야함 😵‍💫 🧐 참고 ✅ key에 index를 지정해주는 건 웬만하면 지양하는 것이 좋다. ✅ 리액트 공식문서에서도 유니크한 값을 지정하는 ..

Programming/React 2023. 8. 30. 00:59

React와 TypeScript 기반의 프로젝트에 Tailwind CSS 를 설치하는 과정에서 에러를 발견했다. 나중에 비슷한 일이 생기면 참고하기위해 기록해둔다. 일단 Tailwind CSS 설치하는 방법부터 시작! Tailwind CSS 설치하기 ✅ 터미널을 열어 설치 명령어를 입력해준다. npm install -D tailwindcss ✅ 설치가 완료되면 init 명령어를 입력한다. → tailwind.config.js 파일을 생성하기 위함 npx tailwindcss init tailwind.config.js 파일이 생겨서 확인해보니... 에러가 났다! 'module' is not defined' 검색을 해보니 ESlint 설정시 env 쪽에 node를 설정해주지 않아서 나타나는 현상이라고 한다...

Programming/기타 2023. 7. 14. 15:43

브라우저의 렌더링 과정 브라우저는 크게 네가지 단계를 거쳐 렌더링을 수행한다. 1. 요청 ✅ 브라우저가 서버에게 필요한 리소스를 요청하는 단계 2. 렌더트리 생성 ✅ HTML을 파싱하여 DOM Tree를, CSS를 파싱하여 CSSOM(CSS Object Model) Tree를 만든 후 두 트리를 조합하여 렌더트리를 구성한다. ✅ 렌더 트리는 화면에 나타나는 요소들을 결정하는 트리이다. → 어떤 요소들이 보여야하는지, 어떤 스타일이 적용되어야 하는지, 어떤 순서로 나타낼 것인지를 명세하는 트리이다. 3. 레이아웃(리플로우) ✅ 렌더 트리 구성이 끝나면 레이아웃 단계가 이어지는데, 이 단계에서는 렌더 트리에서 계산되지 않았던 노드들의 크기와 위치, 레이어 간 순서와 같은 정보를 계산하여 좌표에 나타낸다. ✅..

Programming/기타 2023. 7. 5. 21:11

React Query란? ✅ 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리. ✅ 클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어졌다. server state와 clinet state server state ✅ 서버는 특정 시점에 클라이언트 요청에 대해 데이터데이스에서 유저 정보를 가져와 서버의 상태값을 만들어낸다. ✅ 데이터베이스에 있는 값을 그대로 클라이언트에게 전달할 수도 있고, 요청에 담긴 특정 값을 이용해 정보를 가공하여 메모리에 들고있다. 그리고 이 정보를 클라이언트에게 전달한다. clinet state clined state는 크게 두 가지로 나눌 수 있다. ✅ client에서 자체적으로 만드는 state(최초..

Programming/React 2023. 7. 4. 19:51