Today I Learned

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주) 서비스 기획안 및 디자인 시안은..

Presentational & Container 디자인 패턴 Presental & Container 디자인 패턴이란, 로직을 수행하는 컴포넌트와 마크업을 통해 UI를 보여주는 컴포넌트가 분리된 패턴을 의미한다. 이 패턴이 가지는 특징은 아래와 같다. 앱의 기능과 UI에 대한 구분이 쉬워진다. 같은 state를 다른 container에게 props로 내려 상태를 공유할 수 있다. 로직 수행, 마크업을 다른 컴포넌트에서 하기 때문에 유지보수가 쉽고, 재사용성이 뛰어나다. (특히 마크업 변경에 매우 유연하다) 동일한 마크업, 컨테이너 레이아웃(header, footer)는 반복해서 작성하지 않아도 this.props.children 으로 구현할 수 있다. Presental 컴포넌트 사용자가 직접 보고, 조작하..