개발 기록 남기기✍️

빠르다 빨라 프론트엔드 개발 트렌드! ⏰최근 들어서 Feature Sliced Design(a.k.a FSD)라는 아키텍처가 뜨는 추세인 것 같은데.. 매번 봐도 봐도.. 헷갈린단 말임..?FSD의 개념에 대해 확실하게 정리하고, 요걸 Next.js 프로젝트에 어떻게 적용할 수 있을지를 정리하고자 합니다. 🤔 그래서 FSD 그게 뭔데 씹덕아 공식문서를 한 번 봐봅시다. Overview | Feature-Sliced DesignFeature-Sliced Design (FSD) is an architectural methodology for scaffolding front-end applications. Simply put, it's a compilation of rules and conventions o..

Next.js 공식문서에서 getServerSideProps를 보다가 문득..// pages/index.tsimport type { InferGetServerSidePropsType, GetServerSideProps } from 'next'type Repo = { name: string stargazers_count: number}export const getServerSideProps = (async () => { ...}) satisfies GetServerSideProps // 🔥 satisfies라는 키워드가 보이더군요. 흐음?게다가 Vercel의 구성원 중 한 명인 Lee Robinson은 다음과 같이 말합니다. TypeScript 4.9는 Next.js에 거대한 영향을 미칠 것입니다...

🚨 마주한 문제 공통코드를 템플릿 리터럴 타입으로 다음과 같이 정의했어요. type Integer = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; type CODE = `CODE${Integer}${Integer}${Integer}`; 그 중 공통코드 일부를 키로 갖는 객체를 만들려고 했어요. const 예시객체: Record = { CODE001: '테스트', }; 그랬더니 다음과 같은 에러가 터집니다. 예시객체는 CODE000 부터 CODE999까지의 키를 모두 보유한 객체가 되어야 한다는 오류입니다. 1️⃣ 1트 const 예시객체: Partial = { CODE001: '테스트', }; Partial로 Record를 감싸주면 타입에러는 발생하지 않지만, value에 und..

🚨 마주친 문제 Record 형태의 객체를 만들어서 Object.keys() 또는 Object.entries()를 실행했을 때 key의 타입은 ('a' | 'b')[] 형태가 아닌 string[]이 됩니다. 이 때문에 다음과 같이 Object.keys()로 추출한 객체의 키로 객체에 접근하려고 할 때 에러가 발생하게 됩니다. type Person = { name: string, age: number, id: number, } declare const me: Person; Object.keys(me).forEach(key => { // 🚨 Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to inde..

서버의 event를 클라이언트로 보내는 4가지 방법이 있는데, 미니 프로젝트를 진행하면서 실시간 알림 기능 구현을 위해 SSE(Server Sent Events)를 활용했다. 각각의 방법을 살펴보고, 왜 내가 SSE를 채택하게 되었는지에 대해서 기술하고자 한다. 🔔 Polling 클라이언트가 주기적으로 서버에 데이터 요청을 보내는 프로세스이다. 이 방식으로 클라이언트는 최신 정보를 유지할 수 있다. 폴링은 이해하고 구현하기 쉬운 단순한 형태이며, HTTP 같은 범용적인 프로토콜을 사용하기 때문에 다양한 플랫폼과 기기에서 활용하기 좋다. 폴링을 사용하는 예시로는, IoT 장치가 있다. IoT 장치들은 주로 센서를 통해 데이터를 수집하고 이를 중앙 서버나 클라우드에 전송한다. 스마트 홈에서 폴링을 활용하여 ..

인증이 필요한 이유 쿠키와 세션을 이해하기 위해서는 HTTP 프로토콜에 대한 이해가 필요하다. HTTP 프로토콜은 비연결성과 무상태성을 가진 프로토콜이다. Connectionless(비연결성) : 클라이언트가 서버에 요청을 하고 서버가 클라이언트에게 응답을 보내면 접속을 끊는다. Stateless(무상태성) : 통신이 끝나면 상태 정보를 유지하지 않는다. Connectionless하고 Stateless한 HTTP 프로토콜을 사용하면서 서버가 클라이언트를 식별할 수 있는 방법이 필요했고 쿠키와 세션을 사용하게 되었다. HTTP는 Stateless하기 때문에 로그인 상태 정보를 유지하지 않아서 쿠키와 세션을 사용하지 않으면 게시판이나 메일을 확인할 때 페이지를 이동할 때마다 로그인 해야 한다. 인증과 인가 ..

🔍 Babel이란 바벨은 ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환시켜 IE나 다른 구형 브라우저에서 동작할 수 있도록 하는 역할을 한다. 바벨 공식 사이트에서 "Babel is JavaScript compiler"라고 소개한다. 바벨은 같은 언어를 다른 실행 환경에서도 돌아갈 수 있도록 형태만 바꾸는 작업을 진행하는 트랜스 파일러이다. // ES6 화살표 함수와 ES7 지수 연산자 [1,2,3].map(n => n ** n); IE와 다른 구형 브라우저에서는 이 두 가지 기능을 지원하지 않을 수 있다. Babel을 사용하면 위 코드를 아래와 같이 ES5 이하의 버전으로 변환할 수 있다. "use strict"; [1,2,3].map(functi..

Next.js 13버전을 사용하면서 Server Component와 Client Component의 존재에 대해서 알게 되었는데, SSR, CSR 등과의 지식이 섞이니까 헷갈린다..! 파이널 프로젝트 시작 전 확실히 짚고 넘어가보자.🏃‍♀️ 📌 클라이언트 컴포넌트란? 클라이언트 사이드 컴포넌트는 클라이언트(브라우저)에서 렌더되고 fetch되는 컴포넌트이다. 클라이언트 컴포넌트는 브라우저의 자바스크립트 번들을 포함하고 있는 일반적인 리액트 컴포넌트이다. 클라이언트 컴포넌트는 다음과 같은 특징을 갖는다. 클라이언트 컴포넌트는 onClick 같은 상호작용성(인터랙션)을 포함한다. 클라이언트 컴포넌트는 클라이언트라고 불리는 브라우저에서 렌더된다. 클라이언트 컴포넌트는 "use client"라고 선언함으로써 클라..

🗂️ 용어 정리 ❓렌더링이란? 렌더링이란 렌더링 엔진에 의해 HTML 문서 요소를 실제 화면에 그리는 작업을 의미하기도 한다. 하지만, 해당 글에서의 렌더링은 화면에 보일 HTML 문서를 완성하는 작업을 의미한다. ❓TTV & TTI TTV : Time To View ➡️ 유저가 사이트를 볼 수 있는 시간 TTI : Time To Interact ➡️ 유저가 인터랙션을 할 수 있는 시간 화면이 그려지고 유저가 확인할 수 있는 상태가 되는 시간을 TTV라고 하며, 클릭을 비롯한 브라우저에서의 상호작용이 가능해지는 시간을 TTI라고 한다. 웹 개발시 중요한 포인트 중 하나가 바로 TTV와 TTI를 줄이는 것이다. ❓SEO Search Engine Oprimization: 검색 엔진 최적화 웹 사이트 제작 시..

🍪 Cookie 쿠키는 웹 페이지 방문 시 방문 기록, 서버 응답 데이터 등의 정보를 담은 임시 파일이다. 쿠키는 key/value 형태의 문자 데이터로 구성되어 있으며, 최대 4KB, 300개까지 데이터 저장이 가능하다. 쿠키는 웹 브라우저를 이용하고 있는 컴퓨터에 저장되며, 브라우저에서 서버에 요청을 보낼 때 브라우저에 해당 서버의 쿠키 정보가 있다면 기본적으로 쿠키를 담아서 요청을 보낸다. Cookies는 사이트에서 방문한 페이지를 저장하거나 유저의 로그인 정보를 저장하는 등 다양한 방법으로 사용된다. 많은 보안 웹사이트들은 로그인을 한 후 Cookies를 사용해 유저의 신원을 확인하여 모든 페이지에서 재인증을 거치지않아도 되게 된다. Cookies의 또 다른 용도는 사이트에서 제한된 인터넷 사용 ..