맨 땅에 프론트엔드 개발자 되기

선수지식 CSR 방식에 대한 이해도가 있어야 한다. 리액트를 사용하는 이유 (SPA, CSR, SSR) 리액트를 사용하는 이유 (SPA, CSR, SSR) 많은 개발자들에게 사랑받고 있는 리액트!! 현재, 많은 현업 개발자들에 의해 쓰이고 있고, 프론트엔드 개발에 관심이 있다면 다들 한번씩은 들어봤을 것 같 babycoder05.tistory.com NextJS NextJS는 ReactJS를 기반으로 한 웹 프레임워크다. ReactJS에서 제공하는 기능 외에 추가적으로 SSR(서버사이드렌더링) 및 이미지 최적화 등의 기능을 더한 것이다. ReactJS만 사용해서도 자체적으로 서버를 구성해 SSR 방식을 구현할 수도 있다. 그렇지만 NextJS가 제공하는 기능들이 최적화가 잘 되어 있기 때문에 가장 널리 ..

요즘 우리나라 개발 커뮤니티를 보면 recoil + react-query 조합을 사용하는 것이 최신 트렌드로 자리 잡고 있는 듯하다. (요즘이 아니라 1~2년 된 트렌드 같다. 2023년 기준) 그러나 남들이 사용한다고 다 따라서 사용하면 면접에서 질문을 받을 때 당황할 수 있기 때문에(?)가 아니라 사용하는 라이브러리의 스펙을 정확히 알고 만드는 제품의 성능을 향상시키기 위해 차이점을 알고 사용하면 좋을 것 같아서 한번 정리해보려고 한다. (이 글은 개발 지식이 매우 미천한 자의 미숙한 글이므로 참고만 부탁드리며, 사실이 아닐 경우 정정을 해주시면 매우 감사하겠습니다.) @reduxjs/toolkit vs recoil vs zustand 대표적인 리액트 상태관리 툴인 redux는 이미 너무 많은 사람들..

프론트엔드의 기술은 정말 빨리 변하는 것 같다. 불과 1년 전만 해도 React와 Vue가 프론트엔드 기술 시장의 점유율을 가지고 싸우는 것 같더니 React가 우세한 것 같다가 이제는 Next.js가 대세로 자리잡고 있는 것 같다. (리액트 개발자들이 진화한 걸까?) 웹페이지를 만들 때 SEO(검색엔진 최적화)는 빼놓고 생각할 수 없는 문제라 React에 부가 라이브러리를 설치하는 방법으로 보완하는 방법도 있었지만 (이 글에서 싱글 페이지 어플리케이션이 왜 SEO에 취약한 지는 다루지 않겠다. 많은 설명 글들이 있으니 찾아보시길..) Next.js는 정말 편리하게 서버사이드 렌더링을 지원해주고 다른 부가적인 기능들이 많기 때문에 리액트 좀 다뤄봤던 개발자들은 안 쓸 수가 없는 프레임워크인 것 같다. 시..

회사에서 맡은 프로젝트 중 처음으로 다국어 지원 웹사이트를 만들게 되었다. 관리자 페이지여서 SEO는 따로 필요 없었기 때문에 React로 진행하기로 했고, 그에 따라 react-i18next 사용방법을 정리해보기로 했다. 서버에서 다국어 지원을 제공하는 next-i18next 라이브러리도 있다. 다른 큰 회사에서는 어떤 방식으로 번역문을 관리하는지 모르겠지만 작은 프로젝트 단위에서는 json 방식으로 직접 보관하는 방법을 사용할 수 있다. (더 규모가 큰 프로젝트에서는 개발자가 아닌 번역 담당자가 번역문을 수정할 수 있도록 다른 방법을 찾아봐야 할 것 같긴 하다.) 단계 1: 패키지 설치 우선, 프로젝트 내에 react-i18next와 i18next 패키지를 설치한다. $ npm i react-i18n..

Refresh Token 프론트엔드 보관 위치에 대해 노션 AI에게 물어보았다. => 답변 Refresh token은 보안을 강화하기 위한 인증 시스템에서 자주 사용되는 기술입니다. 이 문서에서는 Refresh token frontend에서 사용하는 방법에 대해 설명합니다. Refresh Token이란? Refresh token은 사용자 인증 토큰이 만료되었을 때, 새로운 토큰을 발급해주는 기술입니다. 이를 통해 사용자는 로그인하지 않아도 서비스를 계속 사용할 수 있습니다. Frontend에서 Refresh Token 사용방법 Refresh Token을 어디에 저장해야 하는지는 상황에 따라 다릅니다. 하지만 일반적으로는 쿠키를 사용하여 저장하는 것이 좋습니다. Frontend에서 Refresh token..

회사가 작다보니 정해진 Git 브랜치 전략이 없었는데 여유가 좀 생긴 시기에 브랜치 전략을 정해보자는 이야기가 나왔다. 나도 이런 협업 규칙들이나 컨벤션에 관심이 많아서 이 기회에 찾아본 것들을 나름대로 정리해보려고 한다. Git Flow 브랜치 네이밍 규칙 master: 제품으로 출시될 수 있는 브랜치 feature: 기능을 개발하는 브랜치 featrue/{구현기능명} (ex. feature/login) develop: 다음 출시 버전을 개발하는 브랜치 release: 이번 출시 버전을 준비하는 브랜치 hotfix: 출시 버전에서 발생한 버그를 수정하는 브랜치 브랜치 관리 규칙 feature: feature 브랜치는 기능의 구현을 담당한다. feature 브랜치는 develop 브랜치에서 생성되며, d..