FrontEnd

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 를 호출하거나 속..

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

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

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

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

CSS에서 레이아웃을 구성하는 2가지 방법 : Flex & Grid

회사 프로젝트 내에서 한 화면에 많은 컴포넌트와 데이터를 담아야 할 일이 많아 레이아웃에 대해서 깊게 고민해보게 되었다. 복잡한 레이아웃을 쉽게 구축할 수 있게 해주는 CSS Grid와 Flex에 대해서 알아보자. 1. CSS Grid grid는 2차원으로 아이템을 배치할 수 있는 레이아웃으로 행과 열을 제어할 수 있다. 구성 요소 그리드 컨테이너 : 전체 그리드를 담고 있는 요소 그리드 아이템 : 그리드 컨테이너의 자식 요소 그리드 라인 : 그리드 컨테이너 내부의 자식 요소들을 나누는 선 1-1) Grid 부모 컨테이너 속성 display : 그리드 컨테이너를 정의 grid-template-columns : 명시적 열의 크기를 정의 grid-template-rows : 명시적 행의 크기를 정의 grid..

[React] button onClick 시 onSubmit 이 실행되는 문제 해결

다음과 같이 회원가입 기능을 개발하던 중 인증코드와 인증코드 확인을 누르면 이 form 을 감싸고 있는 곳에 선언해둔 onSubmit 이 실행되어 비밀번호를 입력하지 않았다고 뜨는 문제가 발생하였다. 인증코드 전송버튼과 인증코드 확인 버튼은 onClick을 통해 이벤트를 발생시키도록 하였고 폼 전체의 전송은 onSubmit을 통해 이벤트가 발생한다. button 에 onClick 발생 시 onSubmit이 발생하는 이유를 Stack overflow 를 통해 찾아봤더니 onsubmit의 제일 밑에 기본이 되는 함수가 onClick 이어서 라고 한다. 이를 해결하기위해 으로 만든 버튼을 으로 변경해주면 된다고 한다. 나는 button을 styled-components를 통해 만들었기 때문에 이부분을 inpu..

[React] 환경변수가 undefined일 때 (process.env undefined)

axios baseURL에 ip주소를 직접 넣는 것이 아니라 .env에 환경변수를 설정해서 넣었다. 그러나! process.env_REACT_SERVER_URL이런 식으로 넣어줬더니 인식을 못하고 콘솔에 찍어봤더니 undefined였다. .env는 최상위 루트에 만들어줬어야 했는데 src 파일 안에 만들어서 undefined가 났었다. 이렇게 src밖으로 옮겨주니 바로 잘 작동하였다!

[React] 오늘의 에러 - Too many re-renders. React limits the number of renders to prevent an infinite loop.

const getGroups = useCallback(async () => { const user_email = localStorage.getItem("email"); await api .get(`/${user_email}/groups`, { headers: { access_token: localStorage.getItem("jwt_accessToken"), }, }) .then((response) => { console.log(response); setGroups([]); setGroups(response.data.groups); groups.forEach((v) => { groupName.push(v["group_name"]); }); setGroupNames([]); setGroupNames(gro..