Today I Learned

기본적으로 익숙한 통신 프로토콜은 HTTP 프로토콜이다. HTTP 프로토콜은 서버와 클라이언트(브라우저)의 단방향 통신 프로토콜을 의미하며, 브라우저가 먼저 물어봐야 이에 대해 서버가 응답을 해주는 단방향의 통신 방식이고, 통신이 끝나면 연결은 지속되지 않는 특징을 지니고 있다. 이와 다르게 양방향 통신을 하기 위한 프로토콜이 바로 WebSocket이다. 그리고 WebSocket과 함께 알아두어야 하는 WebRTC에 대해 비교 정리 해보자. WebSocket서버와 브라우저가 서로 양방향/실시간 통신을 하기 위한 프로토콜웹소켓 연결을 맺기 위한 첫 번째 핸드쉐이크 이후 지속적으로 연결이 유지되어, 매번 메세지 전송 시에 새롭게 연결을 맺을 필요가 없어 빠르고 효율적.웹소켓은 TCP 소켓과 이름만 유사할 뿐..

앱 라우터와 페이지 라우터의 차이점? 왜 앱 라우터를 썼나?Next.js에는 App router와 Page router 두 가지 라우팅 방식이 있다. Page router는 기존의 방식이며, 리액트의 최신 기술인Server Component와 Suspense를 사용할 수 있는 App router가 최근에 등장했다. Next13.4부터 App router가 안정화 되었고 많은 변화가 생겼으며, 아래와 같은 자세한 차이점으로 앱 라우터를 쓰는 것이 좋다는 점을 재발견했다. 1. 라우팅 디렉토리 및 파일Next.js가 파일 기반 라우팅 시스템인 점은 동일하나, 페이지 라우터의 page 디렉토리가 app 디렉토리로 바뀌었으며, _app, _document는 layout.js로 대체되었다. layout.js는 중..

이 프로젝트에서 Vanilla-extract를 사용한 이유?Vanilla-extract는 CSS-in-JS 라이브러리의 대안으로, 스타일 시트를 TypeScript 또는 JavaScript에서 작성할 수 있게 해주면서도, 런타임에서 추가 작업 없이 순수 CSS 파일로 컴파일하는 방식을 제공한다. 다음과 같은 주요 이점을 지닌다.1. 타입 안정성: TypeScript를 사용하여 스타일을 작성할 수 있으므로, 스타일과 관련된 속성들에 대한 자동 완성, 타입 검사 등의 이점을 누릴 수 있다.2. 제로 런타임(Zero-runtime): 스타일이 빌드 타임에 CSS 파일로 컴파일되므로, 런타임 시 추가적인 JavaScript 처리가 필요 없어 앱의 성능이 개선된다.3. 스코프 지정: 생성된 클래스 이름은 고유하게..

프로젝트 돌아보기 프로젝트를 시작해보자 취업 준비 과정에서 하고 싶은 것이 하나 생겼다. '프로젝트 돌아보기' 프로젝트. 오늘 운 좋게 커피챗을 통해 모두가 선망하는 기업 중 한 곳에 재직중인 프론트 개발자분께 이력서 & 포트폴리오 피드백을 받았다. (전 직장동료이자 나의 멋진 친구 덕분! 고맙습니다💖) 이제까지 받았던 이력서 피드백 중에 가장 도움이 되는 내용이었고, 결론적으로 이력서&포트폴리오를 수정할 필요가 있겠다는 생각이 들었다. 이력서와 포트폴리오 대공사와 함께 연계된 부분으로써 꼭 해야겠다고 생각이 든 부분이 '프로젝트 돌아보기'이다. 내가 스스로 이력서를 보면서도 계속 든 생각은 'one of them' 같다는 아쉬움이었다. 어떻게 하면 수많은 FE 취준생 중에 '나'를 궁금하게 만들 수 있..

JavaScript, React, Next.js 등 사용하는 기술에 대한 이해도를 높이는 것과 함께 중요한 부분이 CS 지식인 것 같다. 아무래도 비전공자이기 때문에 더욱 약할 수 밖에 없는 부분. 주요한 개념들은 간단하게 정리하며 내 것으로 만들어보자. 시작하기에 앞서, 주요한 개념을 Clip해서 볼 수 있는 자료들이 많지만 전체적인 맥락과 함께 조금 캐주얼하게 IT 배경지식을 접하고 싶으면 책으로 읽어보는 것도 좋은 것 같다. 생각 날때마다 몇 개씩 골라 읽는 용도로 좋은 책을 발견해서 간단히 공유! 기본이 되는 IT의 구성 요소인 하드웨어, 소프트웨어, 통신, 데이터에 대해 심플하게 설명해둔 책이다. 나도 구매하고 이제 슬슬 읽어보려 한다. 다 읽으면 후기를 올려야지. 1일 1로그 100일 완성 I..

🤔 REST API란? REST API, RESTful API, 많이 들어봤지만 너무나도 추상적으로 느껴져서 설명을 하려니 어렵게 느껴져서 다시 간단히 정리해보려 한다. 먼저 API란 Application Programming Interface의 약자로, 애플리케이션이나 디바이스가 서로간 연결하여 통신할 수 있는 방법을 정의하는 규칙 세트라고 생각하면 된다. 즉, 하나의 애플리케이션이나 서비스가 다른 애플리케이션이나 서비스 내의 리소스에 액세스할 수 있게 해주는 매커니즘이다. REST API에서 REST는 REpresentational State Transfer의 약자로, REST한 아키텍처 스타일의 디자인 원칙을 준수하는 API를 의미한다. 그래서 RESTful API라고도 하는 것. REST의 핵심 ..