FrontEnd

Nginx 라는 도구를 살펴보기 앞서, node.js 환경에서 어떤 식으로 웹서버를 만들었는지 기억을 되살려 봅시다.Client가 웹페이지에 접속하기 위해 반드시 필요한 서버입니다. Client는 HTTP 규격에 맞추어 웹페이지 구성에 필요한 파일들을 웹서버에 요청합니

View를 React로 작성하면서, 느낀 점 중에 하나는 브라우저 없이 virtual DOM을 구성할 수 있는 능력은 필연적으로 SSR을 이끌어낸다는 점 입니다. 따라서 React를 십분 활용하려면 SSR에 대한 알아야한다고 생각했습니다. (다수의 의역과 필요한 경우

NAVER 지도 API 중 Web Dynamic Map의 기능입니다.지도 생성DOM 이벤트 만들기지도 컨트톨데이터 레이어마커지도 DOM 요소 지정하기<div id="map" style="width:100%;height:400px;"></div>지도 생성하기c

역시나 새로운 설정은 공식문서에 답이 있는 것 같습니다. 이 설정들은 구글링보다는 공식문서를 따라 진행하시는 것을 추천합니다. Prettier는 코드 포맷터로 정해진 프로그래밍 언어에 따라 일정한 코드 스타일을 강제하는 도구입니다.1\. 설치: npm install -

ESLint 에러는 실행에서의 오류 때문이 아닌, 파일 작성할 때의 패턴과 스타일에 대한 오류입니다. 따라서 ESLint 에러가 생겨도, 실행에는 문제가 없을 수도 있고, 익숙하지 않다면 평소에 볼 수 있는 에러 메시지가 아니기 때문에 해결에 시간을 많이 쏟을 수 있습

CSS-in-JS 중 대표적인 라이브러리 입니다.css 파일을 따로 한곳에 모아서 적용을 하는 기존의 방식과는 달리, JS파일 내부에 컴포넌트와 css요소가 다같이 있는 모습이 인상적이었습니다.익숙한 방식보다 styled-component를 사용하게 된 이유는, Rea

리엑트 컴포넌트들을 배치하기 위해 가장 편하고, 직관적인 방법이라고 생각했습니다.플렉스 박스의 구조는 기본적으로 다음과 같습니다.플렉스 박스 컨테이너 안에 플렉스 박스 요소들이 있는 구조이고, 플렉스 박스 안에 있는 요소들의 위치를 원하는 대로 배치하는 것이 핵심기능입

Apollo Client 부터 쿼리 할 때: loading이 false가 되는 조건에 data를 읽을 수 있습니다. 그렇지 않으면 undefineduseQuery, useMutation 리턴값의 최상단 프로퍼티는 gql 객체의 이름과 같다.DB구조가 배열안의 배열인 경

네이버 인턴쉽을 진행하면서 GraphQL을 상당히 많이 사용했다. React 기반의 view에 필요한 데이터는 GraphQL + Apollo 조합으로 모두 호출했다. 하지만 활용에 비해 근본적인 이해를 하고 있는지 의심이 갔고, 이번 기회에 정리해볼까 한다. Grap