BAEK'space

• 

  웹 페이지 렌더링 방식 이해: CSR, SSR, SSG, ISG 웹 페이지를 표시하는 방법페이지를 렌더링 하는 방법에는 CSR, SSR, SSG, ISG 가 있다.React를 처음 배울 때 CSR, SSR의 기본적인 차이점에 대해서 공부했었고, 이때의 개념으로 CSR, SSR을 사용해 왔다. 하지만 Next를 공부하면서 SSG, ISG에 대한 개념을 접하게 되었고 이 부분에 대해서 미흡하여 글을 작성했다.1. CSR : 클라이언트 사이드 렌더링특징모든 렌더링 작업이 사용자 브라우저에서 진행된다.페이지 로딩 후 필요한 데이터만 서버로부터 비동기적으로 불러와서 처리한다.장점사용자 인터랙션이 매우 빠르고, 애플리케이션의 동적인 부분을 효과적으로 처리할 수 있다.단점초기 로딩 시 모든 스크립트를 불러와야 해서 시간이 오래 걸릴 수 있다검색 엔진 최적화(SEO)에 불리하다.보.. 2024.07.10

• 

  Formik 이쁘게 사용하기 목차Formik이란?Formik과 React-Hook-Form하지만 난 Formik을 쓴다.그렇다면 어떻게 해야 할까?  Formik이란?formik은 React 애플리케이션에서 폼 상태 관리를 쉽게 도와주는 라이브러리이다.복잡한 폼 입력, 검증, 폼의 제출 처리를 위한 로직을 간단하게 구현할 수 있도록 설계되어 있다.최근에 개발자들은 React-Hook-Form과 비교하여 사용 중이다.  Formik과 React-Hook-FormFormik과 React-Hook-Form(이하 'RHF')의 큰 차이점은 상태를 이용하여 관리하는가? 아닌가?로 나뉘는 것 같다.Formik은 React의 State를 통해서 관리하고, RHF은 'uncontrolled components'를 사용하여 성능을 최적화한다. 그렇.. 2024.06.17

• 

  웹페이지 성능 최적화 - 웹사이트 로딩시간을 6.3초에서 0.6초로 줄이기 목차 1. 문제 2. 분석 및 해결 3. 결과 문제 프론트엔드 개발에서 사용자 경험은 매우 중요하다. 이를 향상시키기 위해서 'Lighthouse'라는 도구를 활용할 수 있다. 이 도구는 현재 구현 중인 웹사이트를 분석하여 개선이 필요한 부분을 알려주고, 어떤 점을 개선해야 할지 알려준다. (성능 참.. 처참하다...) 결론을 먼저 보여주자면 단순히 숫자로 보면 성능점수가 2배로 증가했다. 다른 것보다 LCP가 6.3초에서 0.6초로 끌어올렸다. 분석 및 해결 사실 앞의 문제와 결론을 보면 약간의 어그로성이 있다..^^ 누군가는 나랑 비슷한 상황이 있을 것 같아서, 이런 방법을 초기에 생각하지 못해서 도움이 될까 블로그에 작성했다. 환경 Next v13.5.6 tailwind S3 - 이미지 관리 위에 .. 2024.04.19

• 

  Mockoon을 활용한 프론트엔드 개발 효율성 향상: 가상서버 및 Proxy 설정 1. Mockoon이란? Mockoon은 로컬 환경에서 REST API 모킹을 설계하고 실행할 수 있는 가장 간편하고 빠른 방법을 제공한다. 또한 시간을 절약할 수 있고, OpenAPI 사양과 호환이 되는 완벽한 도구이다. (출처 : https://mockoon.com/) Mockoon을 사용하는 이유 문제 발생 시작은 개발을 진행하면서 일반적인 플로우는 아래와 같을 것이다. (2~3번이 바뀔 수 있고, 같이 진행될 수 있지만...) 하고 싶은 말은 백엔드가 만들어져야 프론트엔드가 확실하게 만들어진다. 이다. 현재 우리 팀은 프론트엔드는 백엔드가 작업을 할 때 퍼블리싱을 하고, json파일을 만들어서 필요한 데이터를 임시로 만들어서 작업을 한 후 백엔드가 완료가 되면 프론트에서 API를 연결하여 실제 백.. 2024.03.03

• 

  TypeScript - Utility Types 1. keyof interface User{ id:number name:string age:number gender:"M" | "F" } type UserKey = keyof User // "id" | "name" | "age" | "gender" const uk:UserKey = "id" const uk2:UserKey = "score" // 오류 발생 keyof를 이용해서 객체 타입의 모든 키를 문자열 또는 숫자 리터럴 유티온 타입으로 추출할 수 있게 해 준다. keyof 예시 1 객체의 키를 매개변수로 받는 함수를 정의할 때, 해당 객체 타입의 keyof를 이용하여 타입 안전성을 보장할 수 있다. interface Person { name: string age: number } type Person.. 2024.02.23

• 

  231109 - Monorepo를 이용한 Next.js 프로젝트 구성하기 (feat. pnpm) Monorepo를 이용한 Next.js 프로젝트 구성하기 (feat. pnpm) 모노레포를 위한 pnpm 설치 해당 모노레포의 패키지는 pnpm을 이용한다. pnpm : https://pnpm.io/ko/installation pnpm은 npm과 비슷한 패키지 매니저이다. 하드 링크와 심볼릭 링크를 사용하여 중복된 패키지를 여러 프로젝트에서 재사용한다. ( 디스크 공간 절약 ) 즉, npm은 패키지를 중복해서 설치하지만 pnpm은 패키지를 공유한다. pnpm은 패키지를 병렬로 설치하기 때문에 npm보다 빠르다. # homebrew로 설치 $ brew install pnpm # Powershell $ iwr https://get.pnpm.io/install.ps1 -useb | iex # npm으로 설치 .. 2023.11.09

• 

  브라우저 탭간 통신하기 : BroadCast Channel API ( feat. Next.js) 브라우저 탭 사이에 데이터 공유하기 프론트 작업을 하면서 A태그의 target:_blank를 이용해서 새 탭을 열어서 작업을 하는 과정이 있었다. 기존에 열고 있던 페이지가 (A) 새로운 탭이 (B)라고 했을 때, A와 B는 동일한 오리진으로 로컬 스토리지를 공유할 수 있었다. 현재 로컬 스토리지에서 Access Token을 관리하는 로직으로 프로젝트를 만들고 있다. 그래서 처음 진입을 하는 과정에서는 액세스 토큰을 사용할 때 문제가 없었다. 하지만 B에서 작업을 하던 중 Access Token의 만료로 다시 재발급을 받아 로컬 스토리지를 바꿨을 때 A에서는 아직 기존에 있는 Access Token을 들고 있었고 어떠한 작업을 할 때 Access Token이 필요하지만 과거의 Access Token을 가.. 2024.01.16