Today I Learned

React에서 상태(State)란, 컴포넌트 내에 관리되는 변수 즉, 변하는 데이터를 의미한다. 서비스의 규모가 커질수록 관리해야 할 상태(State)가 많아지고 Prop Drilling이라는 현상이 발생된다. Prop Drilling이란, 하위 컴포넌트로 데이터를 전달하는 과정에서 컴포넌트의 트리 구조 상 중간 과정에 있는 컴포넌트를 거쳐 프로퍼티를 내려주는 것을 의미한다. 중간 과정에 있는 컴포넌트는 전달을 위해 불필요하게 복잡성을 증대시키거나, 프로퍼티 누락 및 변경 복잡성 등 불편함을 야기한다. 이를 체계적이고 효율적으로 관리하기 위해 상태 관리 라이브러리를 사용한다. Redux, MobX, Zustand, Recoil, Jotai 등 다양한 라이브러리가 존재하는데 상태 관리 패턴은 크게 3가지로..

CORS 란? 웹 개발을 하면 꼭 마주하게 되는 에러 메세지, CORS와 CORS 에러에 대해 알아보자. 먼저, CORS는 Cross Origin Resource Sharing(교차 출처 리소스 공유)의 약자로, 서로 다른 도메인 간에 자원을 공유하는 것을 의미한다. 한 도메인의 웹 페이지가 다른 도메인의 리소스에 액세스 할 수 있게 하는 보안 매커니즘을 말한다. 웹 브라우저에서 웹 사이트가 로딩되는 과정에 대해 생각해보자. 1. 프론트엔드 서버에서 HTML, CSS, JavaScript 코드를 받아온다. 2. JavaScript 코드가 백엔드 서버에 리퀘스트를 보내서 데이터를 받아온다. 3. 데이터를 받아서 렌더한다. - 프론트엔드 서버: https://my-service.com - 백엔드 서버: ht..

Next.js? 왜 쓰는 것일까? Next.js는 클라이언트 사이드 렌더링(CSR) 방식인 React를 서버 사이드 렌더링(SSR) 방식으로 구현할 수 있도록 도와주는 프레임워크이다. 리액트를 쓰면서 왜 굳이 또 Next.js 프레임워크를 사용하는 것일까? Next.js를 통해 얻는 가장 큰 장점은, 검색 엔진 최적화(Search Engine Optimization)를 위한 서버 사이드 렌더링(Server Side Rendering)을 가능하게 하기 때문이다. 거기에 프리 렌더링을 통해 미리 데이터가 렌더링 된 페이지를 가져올 수 있게 해주므로 사용자에게 더 좋은 경험을 주는 점도 Next.js를 사용하는 이유이다. 프리 렌더링은 서버 사이드 렌더링(SSR) 뿐만 아니라 정적 사이트 생성(SSG)으로도 ..

타입스크립트의 동작 원리 타입스크립트는 자바스크립트에 '타입'을 부여한 언어를 의미한다. 컴파일 언어이자, 정적인 타입의 타입스크립트가 어떤 원리로 동작되는지 알아보자. 1. 타입스크립트 코드를 작성한다. 2. 작성된 타입스크립트 코드는 '타입스크립트 컴파일러(tsc)'를 통해 파싱되어 '타입스크립트 AST 코드'로 변환된다. 3. '타입 검사기(Typechecker)'를 통해 파싱된 '타입스크립트 AST 코드'의 타입을 체크한다. 4. 타입스크립트 AST 코드를 '자바스크립트 코드'로 변환한다. --- 해당 과정까지는 '타입스크립트 컴파일러(tsc)'에 의해 수행된다 --- 5. 자바스크립트 코드를 '자바스크립트 AST 코드'로 파싱한다. 6. 자바스크립트 AST 코드를 '바이트 코드'로 변환한다. 7..

TypeScript를 사용하는 이유 자바스크립트만 사용하는 것에 비해 타입스크립트를 사용하면 어떤 점이 좋은걸까? 타입스크립트의 특징을 기준으로 정리해보자. 정적 타이핑 타입스크립트는 정적 타입을 제공해 코드 작성 시의 변수, 함수, 객체 타입을 명시해준다. 이는 컴파일 시간에 오류를 발견하고 디버깅을 용이하게 해준다. 자바스크립트는 동적 타입 언어로, 런타임에서만 타입 관련 오류를 발견할 수 있기 때문에 구동 전에 오류를 디버깅할 수 있다는 점이 용이하다. 강력한 객체 지향 프로그래밍(OOP) 지원 타입스크립트는 클래스, 인터페이스, 상속 등의 강력한 객체 지향 프로그래밍 기능을 제공한다. 이를 통해 큰 프로젝트를 더욱 쉽게 관리하고 구조화할 수 있는 장점이 있다. 개발 도구의 향상된 지원 타입스크립트..

개발 공부를 시작하고 처음으로 해본 2주간의 팀 프로젝트! 나는 개발 실력은 현재 매우 부족하나 팀장 포지션이었고, 우리 팀 구성은 나 포함 다섯명. 두 분은 현업 경험이 조금 있는 분들이고 나 포함 나머지 셋은 처음 공부하고 팀 프로젝트 경험이 처음인 경우였다. 기술적 측면의 프로젝트 리드 및 백업을 경험자 두 분이 많이 맡아주셨고, 나머지 인원은 기능 구현 및 각자 맡은 역할에 충실했다. 프론트엔드 과정이라 백엔드, 디자이너는 없이 프론트 5인으로만 구성되어 진행되었다. 🧐 어떤 프로젝트를 만들었나? OPEN MIND라는 서비스로, 익명 기반으로 질문과 답변을 할 수 있는 소통 플랫폼이다. 일정: 2023. 11. 03.(금) ~ 2023. 11. 17(금) (2주) 서비스 기획안 및 디자인 시안은..