전체 글
1년차 주니어 프론트엔드 개발자 이직 준비 및 후기 (서류, 코테, 사전과제, 면접까지)
이직 후기 나도 언젠가 멋드러지게 써야지 했는데 11월에야 쓰게 되었다! 전 회사에서 한 달 정도의 인수인계 기간을 가지고 쉬지 않고 다음 회사로 출근을 하였고 출근한지 일주일이 되었다. 일이 더 바빠지기 전에, 또 휘발되기 전에 쓰는게 좋을 것 같아서 조금씩 후기를 써보려고 한다. 예상보다 빨리 이직 준비를 하게 되다첫 회사에 입사한지 6개월도 되지 않아, 모종의 이유로 예상치 못하게 이직을 결정하게 되었다. 다들 벌써? 라는 의견이 있었지만 대학 시절 알바도 한 곳에서 4년을 했기 때문에 단순히 지겨워서, 새로움을 찾기 위해, 끈기가 부족해서가 아님을 자부했다. 여러 다른 이유도 있기야 하겠지만 가장 큰 이유는 성장, 커리어에 대한 고민이었다. 전 회사에서는 정확한 기획이나 디자인이 없이 웹개발을 진..
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