Web.d 썸네일형 리스트형 [React] Why Naming component is Hard? 저는 개발을 해나가며 많은 시간을 네이밍을 고민하는 데에 씁니다. 높은 퀄리티의 코드를 작성하기 위해서입니다. 일련의 코드를 작성하고 모두에게 이해되게끔 제목을 짓는 일은 참 어렵습니다. (모든 코드가 단일책임을 만족하며 쓰인다면 다행이지만요.) 코드가 가진 정체성을 식별해야 알맞은 이름을 부를 수 있게 되고, 그것들을 조립하여 논리적인 해법으로 문제를 풀어낼 수 있게 됩니다. 저만의 네이밍을 바라보는 시각을 정리해보려 합니다. 같은 고민을 해오신 분들에게 뜬구름같던 개념이 조금이라도 정립될 수 있을 것이라 생각합니다. 목차 1️⃣ Naming things 2️⃣ Component, React module 3️⃣ The process of Naming component 4️⃣ Conclusion 1️⃣ .. 더보기 [React][TypeScript] Generic Props on Functional Component 타입스크립트와 리액트에서, 제네릭 props를 가진 컴포넌트에 대하여 설명합니다. 타입스크립트에 대해 기초적인 개념이 있다면 글을 읽기에 좀 더 수월합니다 :) 목차 1️⃣ 서론, Generic Props? 2️⃣ Table Component without generic 3️⃣ Table Component with generic 4️⃣ Cons of Generic Props on Functional Component 5️⃣ 글을 줄이며 1️⃣ What is Generic Props? React에서 컴포넌트 설계는 가장 중요한 개념 중 하나입니다. 컴포넌트는 코드의 재사용성을 극대화하고, 핵심 로직은 유지하며 다양한 유형에 대응할 수 있도록 합니다. 컴포넌트를 사용할 때에는 props라는 인터페이스를 이용.. 더보기 [Web][Network] About URI Encoding & Decoding 목차 1️⃣ 서론 2️⃣ URI와 URL 3️⃣ Encoding은 어떤 동작인가요? 4️⃣ JavaScript에서의 URI Encoding(, Decoding) 5️⃣ 글을 줄이며 1️⃣ 서론 URL은 웹 개발에 빼놓을 수 없는 페이지 정보의 주소값입니다. URL에 우리가 설정하는 Domain이 녹아있을 수 있고, 라우팅을 위한 path 정보, Permalink를 위한 query string 등 페이지 정보의 이름표 역할을 하죠. 로그인 로직을 처리하는 웹 서버에서 query string에 다음 페이지 링크인 next 정보를 담으며 Redirect를 위한 URL을 주고받는 로직을 구현하였습니다. (예를 들어, "https://www.domain.com/login?next=%2Fproducts%2F8LN9.. 더보기 [Web][Network] Session vs Token Authorization [ 2023/10 ] 2022/01에 작성한 내용을 보충하여 재발행합니다. 세션과 토큰, 백엔드와 프론트엔드가 용어를 이해하는 영역이 다르다. 그 말은 즉슨, 엔지니어 간에 제대로 소통하기 위해서는 양쪽에서의 올바른 이해가 필요하다. Authorization 과정에 대한 Session 과 Token의 차이점을 살펴보자. 세션 (Session) 세션으로 로그인하는 과정을 살펴보자. Client) user가 브라우저에서 로그인 폼을 제출한다. 이로 인해 로그인 정보로, HTTP 통신이 일어난다. Server) user 정보로, Session을 생성하여 DB에 저장한다. session에 해당하는 session ID를 Response로 반환한다. Client) session ID를 Cookie에 저장한다. (F.. 더보기 [GraphQL] How to use GraphQL Properly 목차 1️⃣ GraphQL이란? - GraphQL, - vs REST 2️⃣ GraphQL 주요 문법 - ... 3️⃣ GraphQL을 제대로 쓰기 위해 - Fragment Driven Development - Data Masking 1️⃣ GraphQL이란? - GraphQL, GraphQL은 하나의 쿼리 언어이다. 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오기 위한 목적을 가지고 페이스북에서 고안하였다. API의 데이터를 알기 쉽게 문서로써 제공하고, 클라이언트에서 필요한 것을 정확히 요청할 수 있는 권한을 제공하며, API를 더 쉽게 확장하고 유지관리 할 수 있게끔 제공한다. 이를 통해, FE 개발자는 nested한 연관된 데이터들을 한 번에 요청이 가능해 코드적으로나 네트워크적으로나 큰 .. 더보기 이전 1 2 3 4 ··· 10 다음
