profile
알아가는 재미
post-thumbnail

React Query에 대한 정리

React Query는 리액트 애플리케이션에서 서버 상태(Server State)를 가져오고, 캐싱, 동기화, 업데이트 작업을 쉽게 만들어주는 라이브러리이다.공식 문서에서 기존 상태관리 라이브러리(redux, mobX..)는 비동기 또는 Server State 작업에는

2022년 7월 24일
·
0개의 댓글
·
post-thumbnail

Nginx proxy_pass 및 rewrite 설정

브라우저에서 바로 API 서버로 통신을 할 수 없기 때문에 React(Nginx)는 Express 서버와 통신을 해야한다.Express 컨테이너의 Cluster IP를 알아야 브라우저에서 Express 서버로 요청을 프록시하여 전달할 수 있는데, 여기서 proxy_pa

2022년 6월 27일
·
0개의 댓글
·
post-thumbnail

Gitlab CI 구축을 위한 Gitlab Runner 설치하기(Windows)

GitLab Runner 파일 다운로드 (Windows)GitLab에서 해당 프로젝트의 Runner Setting에 들어가서 GitLab 서버 URL, Token 을 복사 후 CMD 창에 붙여넣기한다.Gitlab-Runner를 받은 경로에 가서 파일명.exe regis

2022년 5월 6일
·
0개의 댓글
·
post-thumbnail

React Hooks, useRef()에 대한 정리

useRef는 함수형 컴포넌트에서 DOM node에 직접적인 접근을 가능하게 해주는 Hook이다.클래스형 컴포넌트에서는 createRef를 사용한다.예를 들어서, 페이지가 처음 로드됐을 때 input에 포커스를 줄 수 있다. 아래 코드는 input 태그만 화면에 띄우는

2021년 9월 19일
·
0개의 댓글
·
post-thumbnail

Vanilla JavaScript로 SPA구현하기

Vanilla JavaScript로 SPA구현하기 > 본 포스트는 [ dcode - YOUTUBE](https://www.youtube.com/watch?v=6BozpmSjk-Y&t=1009s) 를 참고하였습니다. React, Angular, Vue와 같은 프레임워크

2021년 9월 1일
·
0개의 댓글
·
post-thumbnail

Github Repository public/private 변경하기

Github에서 생성한 Repository를 private 또는 public으로 변경하는 방법을 알아보자.처음 Repository를 생성할 때 설정이 가능하지만 실수로 public인데 private로 했다거나 코드를 올리고 나서 private로 바꾸고 싶을 때도 있을

2021년 8월 30일
·
0개의 댓글
·
post-thumbnail

프론트엔드 개발자 기술면접 질문 정리(3)

본 포스트는 React Interview Questions and Answers (2021) 를 참고하여 작성하였습니다.React를 사용하면 어떤 장점이 있나요?(2. JSX란 무엇인가요?(3. 함수형 컴포넌트와 클래스형 컴포넌트의 차이점이 무엇인가요?(4. virtu

2021년 8월 26일
·
0개의 댓글
·
post-thumbnail

프론트엔드 개발자 기술면접 질문 정리(2)

이벤트 루프에 대해 설명( 실행 컨텍스트에 대해 설명( 호이스팅에 대해 설명( CORS에 대해 설명, 해결 방법( RESTful API란(이벤트 루프를 한 문장으로 설명하면 다음과 같다."The event loop job is to look at the stack a

2021년 8월 25일
·
0개의 댓글
·
post-thumbnail

프론트엔드 개발자 기술면접 질문 정리(1)

브라우저가 렌더링 되는 과정사용자가 사용자 인터페이스의 주소표시줄에 URI를 입력하여 브라우저 엔진에 전달한다.브라우저 엔진은 먼저 자료 저장소에서 전달된 URI에 대한 정보를 찾고, 있다면 해당 데이터를 렌더링 엔진으로 전달한다.없으면 렌더링 엔진 - 통신 레이어로

2021년 8월 23일
·
0개의 댓글
·
post-thumbnail

이벤트 버블링과 캡처링에 대한 정리

이벤트 버블링과 이벤트 캡처링에 대해서 알아보자.이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다.버블링 예제 코드를 보

2021년 8월 6일
·
0개의 댓글
·
post-thumbnail

DOCTYPE 을 선언하는 이유

html 문서의 제일 위에 보면 `` 이라는 코드를 볼 수 있는데, 이게 무엇이고 왜 사용하는지 알아보자. `` 을 DTD(Document Type Definition)이라고도 한다.

2021년 8월 6일
·
0개의 댓글
·
post-thumbnail

React Redux, Ducks Pattern 적용하기

Ducks pattern 을 적용하기 전에 redux의 폴더 구조를 action, reducer, actionTypes(Action type은 Action과 Reducer에서 둘 다 쓰이기 때문에 따로 분리해서 관리하기도 함) 폴더로 나누어서 관리를 했다.이런식으로 C

2021년 7월 28일
·
0개의 댓글
·
post-thumbnail

React Hooks, useMemo로 최적화하기

useMemo 는 useCallback과 유사한 방식으로 최적화에 사용된다.useCallback 은 메모이제이션 된 함수를 반환하는 반면에 useMemo 는 메모이제이션 된 값을 반환한다.다음의 예제를 보자.Counter One 버튼을 누르면 counterOne 변수가

2021년 7월 17일
·
0개의 댓글
·
post-thumbnail

React Hooks, React.memo와 useCallback으로 최적화하기

리액트는 컴포넌트를 렌더링 한 뒤 이전 렌더링된 결과와 비교하여 DOM 업데이트를 결정한다. 만약 렌더링 결과가 이전과 다르다면 DOM을 업데이트한다.React.memo() 로 컴포넌트를 감싸면 리액트는 컴포넌트를 렌더링하고 그 결과를 메모이제이션한다. 다음 렌더링 시

2021년 7월 16일
·
0개의 댓글
·
post-thumbnail

React Hooks, Custom Hook 만들기

공식 문서의 custom hook 설명 자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있습니다.이전 게시글 (useEffect)에서 작성한 코드를 보자.여기서 resize하는 로직, document.title, 그리고 이름을 입력하는 부분 을

2021년 7월 15일
·
0개의 댓글
·
post-thumbnail

React Hooks, useEffect()에 대한 정리

useEffect Hook 을 사용하면 함수형 컴포넌트에서도 side effect 를 수행할 수 있다.side effect 란?React 컴포넌트가 렌더링 된 후 비동기적으로 처리해야 하는 작업들을 말한다.예를 들어서 API를 호출하는 경우 데이터를 비동기적으로 가져와

2021년 7월 14일
·
0개의 댓글
·
post-thumbnail

React Hooks, useState()에 대한 정리

React Hooks가 나오기전에는 컴포넌트의 상태 관리를 하기 위해서는 클래스 기반으로 컴포넌트를 작성해야 했다. 아래의 코드는 간단한 name, surname 입력을 할 수 있는 컴포넌트이다.클래스 컴포넌트의 this.state 에 name, surname 을 저장

2021년 7월 13일
·
0개의 댓글
·
post-thumbnail

Netlify로 React 프로젝트 배포 시 API KEY 설정 방법

Netlify로 React 프로젝트를 배포할 때Failed to load resource: the server responded with a status of 401 ()이러한 오류가 발생했다.API KEY를 받아오지 못해서 오류가 발생하는 것인데 Netlify 에서

2021년 7월 5일
·
0개의 댓글
·
post-thumbnail

React 페이지 이동 시 스크롤 맨 위로 오게 하는 방법

React 웹앱을 만들던 중에 사소한 문제가 발생했는데, 페이지 이동 시 스크롤의 위치가 전 페이지의 위치 그대로 있는 문제였다.구글에 검색을 해보니 여러 블로그에도 해결법이 나오고 react-router 문서에서도 해결책을 알려주고 있었다.Scroll Restorat

2021년 7월 3일
·
0개의 댓글
·
post-thumbnail

Styled-Components 에서 createGlobalStyle 사용하기

Styled-Components에서 margin: 0, padding: 0, font-family 같이 Global한 속성들을 적용시킬 수 있게 해주는 방법이 있다.우선 createGlobalStyle 을 import 해준다.그 다음 GlobalStyle 을 생성해준다

2021년 6월 4일
·
0개의 댓글
·