profile
알아가는 재미
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개의 댓글
post-thumbnail

CS 정리 알고리즘(1)

빅오(Big-O) 표기법은 알고리즘의 성능을 수학적으로 표현해주는 표기법이다. 이를 이용해 알고리즘의 시간 복잡도(Time Complexity) 와 공간 복잡도(Space Complexity) 를 나타낼 수 있다.빅오 표기법은 입력 데이터 값(n)이 아주 큰 값으로 들

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

CS 정리 데이터베이스(1)

데이터베이스는 여러 사람이 공유하여 사용할 목적으로 체계화해 통합, 관리하는 데이터의 집합니다.인덱스(index)란 데이터베이스에서 테이블에 대한 동작의 속도를 높여주는 자료 구조를 일컫는다. 인덱스는 말 그대로 책의 맨 처음 또는 마지막에 있는 색인이라고 할 수 있다

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

자바스크립트 ES6 문법 정리(2)

ES6 문법 정리(2) ES6 1편 10. Module 애플리케이션의 크기가 커지면서 파일을 여러개로 분리할 필요가 생긴다. 이 때 분리된 파일 각각을 모듈(Module)이라고 부른다. 모듈에 export, import를 사용하면 다른 모듈을 불러와 불러온 모듈에

2021년 5월 27일
·
0개의 댓글