개발 기록 남기기✍️

빠르다 빨라 프론트엔드 개발 트렌드! ⏰최근 들어서 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..

💥 Issue 마주친 상황은 다음과 같습니다. ☝🏻 다음 버튼은 기본적으로 화면 하단에 위치하고, 키패드가 등장하면 버튼은 줄어든 화면만큼 키패드와 함께 올라가야 해요 뭐야~ 레이아웃 컴포넌트의 height를 100vh로 설정하면 끝나는거 아님? 모바일 환경에서는 높이를 100vh로 설정하더라도 동적 툴바(주소, 네비게이션바)로 인해 스크롤이 발생하기 때문이죠! 해당 현상은 다음 속성을 통해 해결할 수 있습니다. .fill-screen { width:100vw; height: 100vh; /* 새 단위를 지원하지 않는 소수의 브라우저를 위해 */ height:100dvh; } dvh(Dynamic Viewport Height) : svh/lvh 사이에서 탭의 유무에 따라 동적으로 변화 svh(Small ..

패킷(packet) IP(Internet Protocol)은 인터넷에서 데이터(정확히는 패킷)를 주고받을 때 사용하는 통신 규약이다. 패킷은 소포를 의미하는 단어로, 데이터를 작은 조각으로 쪼갠 것을 의미한다. 데이터를 패킷으로 쪼개는 이유는, 무거운 데이터를 그대로 보내면 가는 도중 회선에 문제가 생겼을 때 다시 전송하기 위해 많은 자원을 낭비할 수 있기 때문이다. 예를 들어 과자 한 박스를 택배로 보낸다면 과자에 이상이 있거나 잘못된 장소에 도착했을 때 다시 한 박스를 만들어 보내야 하는데, 같은 양을 각 한 봉지씩 보내면 그중 한 봉지에 문제가 생겼을 때 그만큼의 과자만 새로 보내면 되는 것과 같은 원리이다. 이렇게 패킷을 이용해 정보를 교환하는 방식을 패킷 교환 방식이라고 부른다. 패킷 교환 방식..

🔍 OSI 7계층이란? OSI 7 계층은 국제표준화기구(ISO)에서 1984년에 개발한 모델로, 통신이 일어나는 과정을 크게 7단계로 구분한 것이다. 아래 그림에서 아래부터 1계층(물리 계층) ~ 7계층(응용 계층)으로 구성되어 있다. 또 그림과 같이 각 계층을 지날 때마다 각 계층에서 Header가 붙게되고 수신측은 역순으로 헤더를 분석하게 된다. ❓ OSI 7계층이 생긴 이유 약 반세기 전, 컴퓨터 네트워크라는 개념이 생겨나고 학교, 군대 등 한정된 그룹에 속한 소수의 사람만이 인터넷을 사용할 때만 해도 네트워크 통신에 필요한 장치나 시스템은 서로 호환되지 않는 경우가 많았다. 네트워크가 생긴지 얼마 되지 않았을 당시에는 사용자가 많지 않았기 때문에 큰 문제가 되지 않았지만, 1980년대 초 개인용 ..

🚪 똑똑. 에러 왔습니다. input에 검색어를 입력하면 추천 검색어 리스트가 나오고, 상하 방향키를 누를 때마다 포커스가 이동해야 한다. 그런데, 처음 방향키를 누를 때 이벤트핸들러가 두 번 호출되어 "건강"을 건너뛰고 "강아지"가 바로 포커싱 되는 문제가 발생했다. 검색을 해보니 한글 입력 시, 입력 중인 글자에 밑줄이 생기는데, 밑줄이 있는 상황에서 키보드 이벤트 발생 시 이벤트 핸들러가 두 번 호출된다고 한다. 한글의 경우 자음과 모음의 조합으로 한 음절이 만들어지는 조합 문자이기 때문에 글자가 조합 중인지, 조합이 끝난 상태인지를 알 수 없기 때문이다. 유독 한글에서만 이러한 문제가 발생되는건 IME 때문이다. IME는 영어가 아닌 한글, 일본어, 중국어와 같은 언어를 다양한 브라우저에서 지원하..

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

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