Server와 Client가 특정 Port를 통해 실시간으로 양방향 통신을 하는 방식연결지향형 방식이기에 실시간 통신이 필요한 경우에 자주 사용됨.웹 페이지의 한계에서 벗어나 실시간으로 상호작용하는 웹 서비스를 만드는 표준 기술웹에서 사용하는 HTTP 프로토콜은 클라이

컴퓨터 네트워크 통신을 7개의 계층으로 나눈 것계층을 분리함으로 각 계층은 독립적인 역할을 할 수 있다.특정 계층의 문제가 생겼을 경우 문제가 생긴 계층을 파악 할 수 있다.각 계층은 하위계층을 포함한다, 따라서 최상위 계층은 아래계층 모두를 포함한다.전기적인, 기계적

연관 배열 구조로 Key, Value가 1:1로 연결되어 있다.Key를 이용해 Value를 알아낼 수 있다.Key고유한 값, has function의 input값Key 자체로 저장할 경우 Key의 길이가 다양하기에 일정한 길이의 Hash로 변경Hash functionK

Next.js는 더 나은 성능과 SEO를 위해서 페이지를 미리 랜더링하는데 대표적으로 getServerSideProps 와 getStaticProps가 있다. 이번 시간에는 getServerSideProps에 대해서 자세히 다뤄보자.서버 사이드 랜더링(SSR) 방식서버

Next.js? React 에서

google.com을 DNS서버에서 검색해당 도메인 이름에 해당하는 IP주소를 찾아 사용자가 입력한 URL정보와 함께 전달웹 브라우저는 웹 서버에 해당 웹사이트에 맞는 HTML 문서 요청WAS와 데이터베이스에서 웹페이지 작업을 처리WAS에서 처리 결과를 웹 서버로 전송

CSS 전처리기로 전처리기를 통해 쉽게 입력하고 CSS로 변환시키는 것이다.static : 기본값, 원래 있어야 하는 위치relative : 원래 있어야 하는 위치에서 상대적인 배치absolute : 배치 기준을 상위 요소 에서 찾고 상위 요소로 가면서 static이

웹페이지에 생동감을 불어넣기 위해 만들어진 객체기반의 스크립트 프로그래밍 언어컴파일 과정이 필요없어 빠른시간안에 스크립트 코드를 작성 할 수 있고 웹에 특화된 기술이기에 운영체제나 플랫폼에 상관없이 잘 작동하고 확장성이 높다.브라우저에서 실행되기에 보안상의 제약이 있다

리액트는 라이브러리 이다.라이브러리와 프레임워크 둘다 공통의 기능을 사용해서 결과물을 만들어낸다는 점은 비슷하지만 어플리케이션의 제어 흐름 권한을 누가 가지고 있느냐에 달려있다.프레임워크는 프레임워크가 내 코드를 호출하고라이브러리는 내 코드가 라이브러리를 호출한다.리액

리액트 프로젝트를 진행하며 달력을 통해 일정을 보여줘야 할 필요가 있었고FullCalendar 라이브러리가 필요한 기능을 제공하고 있고 많은 확장 기능들이 있어 사용했다.아래와 같은 형식으로 작성 할 수 있다.프로젝트 실제 적용 화면이고, 각 이벤트마다 배경 색을 줄

자유로운 설문 플랫폼 리버티폼 팀 프로젝트가 마무리된지 2달이 지났다.2달동안 카카오 엔터프라이즈 현직 멘토님의 지도 아래 많은 멘토링을 받았다.멘토링을 받고 리버티폼 프로젝트를 다시 열어봤고, 정말로 수정할 부분이 많았다.리버티폼 프로젝트는 프론트엔드 멘토링 없이 진

HTML 태그 안에 스타일 속성을 추가할때 쓰는 방법중 하나아래와 같이 적용할 스타일이 많지 않은 경우 인라인 스타일을 즐겨쓰곤 했다.그리고 무엇보다 편하다성능에 좋지 않다인라인 스타일을 사용하게 되면 재랜더링 이슈가 발생한다.리액트가 재랜더링을 할때, 인라인스타일의

리액트를 경험했다면 아래와 같은 메세지를 무조건 한번은 경험했다고 생각한다.map함수를 사용하지만 key값을 주지 않은경우 출력하는 메세지다.key props를 지정하지 않으면 페이지는 불필요한 랜더링을 진행한다.리액트는 내용이 바뀔 때 랜더링을 진행한다.만약 key값

프로젝트 개발을 진행하며 폰트가 울렁울렁, 깜빡깜빡하게 보였다.이러한 문제점을 해결하기 위해서 검색을 했고 FOUT이라는 문제라는 것을 알았다.Flash of Unstyled Text 의 약자로 커스텀 폰트를 사용했을 때 페이지를 불러오게 되면 순간 깜빡거리는 것처럼

비동기적 통신과정에서 불가피 하게 생기는 로딩처리를 어떻게 하느냐에 따라 사용자의 경험이 달라 질 수 있습니다. Skeleton Spinner, Progress-BarBlank체감상 Skeleton이 가장 효과적인 모습을 보인다.Mui에서 제공하는 Skeleton을 사

프로젝트를 진행하며 드래그앤드롭으로 ITEM들을 이동을 드래그앤드랍으로 구현하기로 하고라이브러리 없이 구현라이브러리를 사용한 구현두가지를 고려하였고, 현재 진행하고 있는 프로젝트의 멘토님에게 드래그앤드롭 성능면에서 어느 선택을 하면 좋을지 질문을 드렸다.멘토님은 많은

IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API많은 양의 구조화된 데이터를 클라이언트에 저장할 수 있다.Javascript 기반의 객체지향 데이터베이스이다.트랜잭션을 사용하며 Key-Value 데이터베이스이

MSW(Mock Service Workder)는 서비스 워커(Service Worker)를 이용해서 네트워크 호출을 가로채는 API 모킹 라이브러리네트워크 단에서 모킹이 발생하여 실제 통신과 가장 유사REST API, GraphQL API 모킹 지원백엔드 개발과 프론트

최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드ReactTypescriptviteeslintprettierreact-router-domstyled-componentsrecoil다음과 같은 기술스택을 가진 리액트 프로젝트 보일러플레이트를 생성

프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다.모듈은 웹 애플리케이션을 구성하는 모든 자원을 포함한다. HTML, CSS, Javascript, Images, Font 등 파일 하나하나가 모듈이다.웹 애플리케이션을 구성하는 모듈들을 하나의 파일로 병합 및