분류 전체보기

React Hook Form + yup 으로 폼 관리 및 개선하기

서비스 개발 시 폼 관리는 항상 중요한 측면 중 하나이다. 사용자 입력을 받고, 유효성을 검사하며, 제출되는 데이터를 처리하는 등의 작업을 수행해야 한다. 이러한 작업들은 복잡성과 함께 코드의 가독성과 유지보수성을 낮추는 요소가 될 수 있는데 React Hook Form을 도입하면 이러한 문제들을 해결할 수 있을 것이라고 생각했다.  React Hook Form + yup 의 조합으로 사내 프로젝트의 폼을 개선하면서 이번 글에서는 React Hook Form이 폼관리에서 해결해준 문제와 그 장점에 대해 정리해보려고 한다.     기존 폼 관리 방법 1. 폼 안의 각각의 Input 의 상태를 useState로 관리하고 onChange 이벤트를 통해 입력 이벤트를 감지      2. 폼 안의 각각의 Inpu..

Next.js 의 시작 - 렌더링 종류 (SSR, CSR)와 Hydration

현재는 B2B 기업에서 웹 개발을 하고 있기 때문에 Next.js 를 딱히 도입해야 할 필요가 없어서 쓸 일이 없지만서비스 프로덕션 환경에서는 Next.js가 필수적이라는 이야기를 많이 듣기도 했고 왜 좋은지 궁금해서 Next.js 공부를 시작했다.  Next.js 를 쓰는 이유, 렌더링 과정 등을 정리하면서 내 머릿속에 다시 한 번 집어 넣기 위해 쓰는 것이기 때문에 예쁘고 보기 좋게 쓰진 못하겠지만!이런 정리가 누군가에겐 도움이 될 거라 생각합니다 ㅎㅎ   먼저 Next.js 를 정리하기 전에 렌더링 종류에 대해서 정리해보자.   렌더링 종류  1. CSR (Client Side Rendering) 우리가 쓰는 React CSR 방식으로 동작한다.CSR은 말 그대도 클라이언트 측에서 렌더링을 담당하는..

npm → pnpm 마이그레이션 시 발생한 type 에러 해결

사내 프로젝트에서 자바스크립트 패키지 매니저를 기존 npm 에서 pnpm으로 마이그레이션 하기로 하면서 발생한 에러를 공유드리려고 합니다. 문제 상황 pnpm install 후 pnpm start로 개발 서버 실행 시 ag-grid와 react-datepicker를 사용하고 있는 모든 컴포넌트에서 type 에러 발생 해결 1. ag-grid 간 버전 일치 시켜 해결 pnpm 으로 @ag-grid-community/core를 다시 설치하면서 버전을 명시하지 않았더니 가장 최신 버전으로 설치되어 생긴 문제였습니다. @ag-grid-community/core 와 @ag-grid-community/react 가 서로 다른 버전을 사용하는 경우 react 컴포넌트 내에서 ag-grid 의 API 를 호출하거나 속..

JavaScript 패키지 매니저 비교 - npm, yarn, pnpm 그리고 Yarn Berry까지

패키지 매니저는 항상 습관적으로 npm을 썼었는데 이번에 사내 신규 프로젝트에서 pnpm을 쓰기로 하면서 여러 패키지 매니저들의 차이와 어떤 상황에서 쓰면 좋을 지에 대해 알아보게 되었다. Package Manager? 패키지 매니저는 개발에 필요한 다양한 패키지를 설치하고 또 수정하고 업데이트하는 등의 작업을 편리하게 도와주는 도구라고 할 수 있다. 자바스크립트로 프로젝트를 진행하다 보면 해당 프로젝트에 필요한 다양한 패키지들이 있고 이 패키지들을 설치하고 또 관리해야 하는 경우가 있는데, 이 패키지들을 의존성 있게 관리해 주는 것이 바로 패키지 매니저다. 많이 쓰이는 것으로 npm, yarn이 있고 pnpm, yarn berry 도 새롭게 출시되었다. 즉, 패키지 매니저는 프로젝트에 사용되는 패키지를..

프로그래머스 lv1. 푸드 파이트 대회 풀이

https://school.programmers.co.kr/learn/courses/30/lessons/134240?language=python3 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 수웅이는 매달 주어진 음식을 빨리 먹는 푸드 파이트 대회를 개최합니다. 이 대회에서 선수들은 1대 1로 대결하며, 매 대결마다 음식의 종류와 양이 바뀝니다. 대결은 준비된 음식들을 일렬로 배치한 뒤, 한 선수는 제일 왼쪽에 있는 음식부터 오른쪽으로, 다른 선수는 제일 오른쪽에 있는 음식부터 왼쪽으로 순서대로 먹는 방식으로 진행됩니다. 중앙에는 물을 배치하..

[Python] 파이썬 리스트 함수 정리

리스트 기본 내장 함수 함수 상세 len(list) 리스트 길이 max(list) 리스트 내 최대 요소 min(list) 리스트 내 최소 요소 list(seq) 리스트로 변환 리스트 메소드 1. append() # 1.목록에 요소 추가 a = [1,2,3] a.append(4) print(a) # >>> [1, 2, 3, 4] # 2.목록에 목록 추가 a = [1,2,3] b = [4, 5] a.append(b) print(a) # >>> [1, 2, 3, [4, 5]] 2. extend() # 리스트에 모든요소를 다른 리스트에 추가 a = [1,2,3] a1 = [4,5,6] a.extend(a1) print(a) # >>> [1, 2, 3, 4, 5, 6] # set a = [1,2,3] a1 = {..

[Python] 프로그래머스 [PCCE 기출문제] 9번 / 이웃한 칸 풀이

https://school.programmers.co.kr/learn/courses/30/lessons/250125?language=python3 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 나의 풀이 def solution(board, h, w): n = len(board) count = 0 dh,dw = [0, 1, -1, 0], [1, 0, 0, -1] for i in range(4): h_check, w_check = h + dh[i], w + dw[i] if 0

[React] 컴포넌트 리렌더링(Re-Rendering) 조건

React의 렌더링 최적화를 필수적으로 해야하는 프로젝트를 하다보니 React에서 리렌더링을 하는 조건에 대해 자세히 공부하게 되었다. 렌더링(Rendering)이란? 사용자 화면에 View(내용)를 보여주는 것을 렌더링이라고 한다. React 엘리먼트를 루트 DOM노드에 렌더링 하려면 둘다 ReactDOM.render()로 전달하면 된다. 초기 렌더링이란 어떠한 UI관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 사용자 화면에 뷰를 보여주는 것을 초기 렌더링이라고 한다. 리액트에서는 렌더링을 다루는 render 함수가 있다. 리렌더링(Re-Rendering)이란? 리렌더링은 사용자가 화면에 뷰를 다시 새롭게 보여준다는 의미인데 이것을 업데이트 과정을 거친다. 또는 조화 과정을 거친다 라고 표현한..