코드노트

최근 프로젝트를 하면서 vercel로 CI/CD로 작업을 하고 팀 레포를 사용하다보니 유료로 사용했었다. 머니브릿지 프로젝트는 실제 서비스가 진행되는 프로젝트다보니 기업과 의논후 AWS로 배포를 옮기는 과정에서 Amplify를 사용하여 배포를 하기로 최종 결정하였다. Amplify를 사용한 이유는 Next.js로 작업을 진행했고, github와 연동 후 빌드, 배포 과정을 통해서 SSR적용이 가능하기 때문이다. vercel로도 CI/CD를 사용해봤지만 Amplify도 사용법이 그렇게 어렵지 않다. github Action을 사용해서 ec2에 배포하는거에 비하면 정말 쉬웠다! - 우선 웹 앱 호스팅을 누르고 GitHub를 선택해서 계속을 진행한다. - 다른 레포를 사용중이라면 다른것으로 하면 된다. - 나..

리액트는 가상 돔을 사용하여 실제 돔에 업데이트 시킨다. 여기서 나오는 가상돔이 무엇인지 정리를 해보려고 한다. 리액트 Virtual DOM에 관련해서는 면접 질문에서도 자주 나오게 된다. Virtual DOM에서 DOM이 무엇인지 알아보자. DOM - DOM은 Document Object Model의 약어로 웹 페이지를 프로그래밍 언어가 이해할 수 있는 구조로 표현한 것이다. DOM은 문서의 구조를 트리 형태로 나타내는데. 이트리의 각 노드는 객체를 나타낸다. HTMl 문서가 웹 브라우저에 로드되면 브라우저는 HTML 태그들을 파싱하고 DOM 요소를 생성한다. 이렇게 생성된 DOM은 자바스크립트를 통해 조작이 가능하다. DOM API - 자바스크립트는 DOM API를 사용하여 웹페이지 내의 요소들을 선..

현재 개인프로젝트를 리팩토링...? 아니 마이그레이션을 하고 있다. 처음에 React를 사용하여 작업을 했었지만 Next.js를 사용하여 프로젝트를 진행중이다. 이번 프로젝트를 진행하면서 Optimistic UI를 적용한 방법을 정리해보려고 한다. Optimistic UI - 사용자 요청을 서버에서 처리되기전 성공할 것을 가정하여 성공한 결과를 미리 보여주는 것이다. 사용자가 API요청을 보내게되면 서버에 요청을 하고 값을 받아서 변경된 값을 보여주어야하는데 그 값이 변하는게 오래걸린다면 사용자 경험에 있어서 좋지 않은 경험을 받게 된다. UI 시각적으로 우선 보여주고 그 뒤에 백그라운드에서 실제 작업이 실행된다. 그럼 아무곳에서나 사용해도 될까? - 아니다. 사용자에게 즉각적으로 피드백이 중요한 상황에..

ReactDOM.createPortal(child, container) - createPortal은 리액트에서 DOM트리 의 다른 위치에 컴포넌트를 렌더링을 할 수 있는 기능 - 기본적으로 컴포넌트는 컴포넌트 트리의 노드로 렌더링이 되지만, 컴포넌트를 루트 DOM요소 밖의 다른 위치에 렌더링해야 할때 사용할 수 있다. - 간단하게 말하면 첫번째 인자는 자식요소, 두번째 인자는 자식요소를 렌더링할 DOM요소 ex) 모달, 툴팁, 독립적인 컴포넌트 등등 이번 프로젝트에서 모달을 사용하면서 css를 사용하여 z-index를 조절하여 모달을 만들었는데 createPortal을 사용하는것이 좋다고 한다. 아니 맞는것 같다. - 모달은 기존 컴포넌트 구조와 격리되어야한다. - 컴포넌트와 상호작용하는 문제가 발생할 ..

리덕스는 전역 상태관리 라이브러리이다. 리액트쿼리, SWR, zustand, recoil 등 여러 상태관리 라이브러리가 있지만 기본으로 알고가야하는 라이브러리가 리덕스라고 생각한다. 리덕스의 구조와 Flux패턴에 대해서 정리를 해보려고 한다. 리덕스의 구조를 알아보기전 MVC패턴과 Flux패턴을 알아보자 MVC 패턴 MVC 패턴은 Flux 패턴이 등장하기전 사용되던 디자인 패턴이다. Model : 데이터 보관 및 정의 Controller : 데이터에 대한 수정, 조회 등의 역할 View : 데이터를 화면에 보여주는 역할 - Model에 데이터를 정의해 두고, Controller를 이용해서 Model 데이터를 생성, 조회, 수정, 삭제 등을 하여 변경된 데이터를 View에 출력하여 사용자들에게 보여줄 수 ..

이번 개인프로젝트에서 OAuth 소셜 로그인을 등록하면서 구글, 카카오, 네이버를 모두 연결하였는데 Next.js 에서 사용할 수 있는 방법을 정리해 놓으려고 한다. Next.js 13 버전을 사용하고 있기 때문에 NextAuth.js 에서 자세하게 설명이 되어있다. 사용방법은 어렵지 않다. 13버전에서 이제는 app 폴더에서 사용할 수 있다. Initialization | NextAuth.js The main entry point of NextAuth.js is the NextAuth method that you import from next-auth. It handles different types of requests, as defined in the REST API section. next-aut..

Headless CMS(Content Management System) - Headless는 직역하면 머리가 없다는 뜻이다. 즉 웹사이트에서 프론트부분이 아닌 백엔드의 데이터 부분이라고 볼 수 있다. - 컨텐츠를 저장하고 있는 저장소라 볼 수 있으며, 프론트엔드가 없는 데이터 저장 관리시스템이다. - Headless CMS의 작동 방법 * 컨텐츠 편집자와 개발자가 완벽히 분리될 수 있다. 컨텐츠 편집자는 GUI로 컨텐츠를 추가/수정/삭제 할 수 있다. * 개발자는 Headless CMS에 Restful API를 통해서 데이터에 접근 가능하다. 기존 CMS와 Headless CMS의 차이 CMS - Monolithic 모놀리틱 : 기존 CMS는 하나의 서비스에 설치된 형태로 사용되어야 했다. - 서비스와 ..

LocalStorage, sessionStorage는 사용해봤지만 CacheStorage는 사용해볼 경험이 없었다. 현재 원티드 프리온보딩 인턴십에 참여하면서 매주 과제를 하고 있는데 4주차 과제에서 라이브러리 없이 API호출별로 로컬에 캐싱을 구현하는게 구현 목표중에 있었다. 검색을 할때마다 검색어에 맞는 요청URL별로 응답값을 캐싱하여야 한다. 지금까지 여러 프로젝트를 하면서 axios, react-query를 사용하면서 캐싱이 되도록 사용했었는데 라이브러리 없이...? 방법을 찾던 중 CacheStorage를 사용하여서 캐싱시키는 방법을 사용하기로 했다. 여기서 알고 넘어가야하는 것 HTTP 캐싱 - 이전에 가져온 리소스들을 재사용함으로써 네트워크 트래픽을 줄여 리소스를 보여주는데 필요한 시간을 줄..

현재 진행하고 있는 사이트에서 푸터 컴포넌트를 넣었다. 모든 페이지에서 보여주지 않고 특정 페이지에서는 보여주지 않게 하고 싶었다. Next.js 13버전을 사용하고 있었고, 서버컴포넌트를 사용하려고 했지만 현재경로를 가져오려면 클라이언트 컴포넌트를 사용해야했다. 푸터는 변화가 없기 때문에 특정 페이지의 path만 얻어올 수 있으면 SSR을 사용하는게 맞다고 판단하였다. 그럼 어떻게 SSR에서 use 훅을 사용하지 않고 들고올 수 있을까? [Next 13] Server Component + Layout.tsx - Can't access the URL / Pathname · Issue #43704 · vercel/next.js Verify canary release I verified that the is..

어떻게 보면 마지막 파이널 프로젝트를 위해 부트캠프를 시작한것인지도 모르겠다. 부트캠프를 통해서 협업을 경험하기위해 온것인 만큼, 기업과의 연계를 통해 실제 현업에서 어떻게 프로세스가 진행되고 실제 기획부터 참여하며 협업을 통한 경험을 얻고 싶었다. 결과적으로는 협업을 하기는 했지만 정말 매운맛 프로젝트 경험을 하게 되었다. 담당 멘토님 또한 현업에 가게 되더라도 이정도로 매운맛을 보지는 않을것이니 걱정하지마라고 하셨다... 그만큼 열악한 상황에서 우리들은 큰 사건사고없이 프로젝트를 마무리할 수 있었다. 이번 프로젝트에서도 팀장을 하게 되었다. 일정 조율 및 프로젝트 진행을 하면서도 부족한 점들이 많이 있었지만 1인분이상을 해주며 마무리까지 완주한 우리 프론트엔드 팀들에게 박수👏🏻를 쳐주고 싶다. 특히 ..