profile
알아가는 재미
post-thumbnail

React Redux, Ducks Pattern 적용하기

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

7일 전
·
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

Create React App 에서 Jest 사용할 때 오류

Create React App 에는 Jest가 내장되어 있기 때문에 별도의 설치가 필요하지 않다.터미널에서 바로 npm test 를 입력해주면 된다.만약 아래 코드와 같이 설치를 했다면 추가로 설치하기 때문에 npm start 를 입력하면 버전 충돌이 일어나서 에러가

2021년 6월 2일
·
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개의 댓글
post-thumbnail

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

ES6 문법 정리 https://github.com/lukehoban/es6features 와 MDN 을 참고하여 ES6 문법을 정리해보고자 한다. 1. Arrow function arrow function은 화살표 함수라고도 한다. function 키워드 대신 =>

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

CS 정리 운영체제(4)

가상 메모리는 어떤 프로세스를 실행할 때 프로세스 전체가 메모리에 적재되지 않고도 실행이 가능하도록 하는 기법이다. 어떤 프로세스가 차지하는 메모리가 전체 메모리 용량보다 크더라도 지금 당장 필요한 부분만 메모리에 적재되면 실행이 가능하기 때문에 메모리 용량을 초과해도

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

CS 정리 운영체제(3)

프로세스는 서로 메세지를 보내고 프로세스 내부에서는 스레드끼리 자원을 공유하면서 동기화에 대한 문제가 항상 발생할 수 있다. 즉, 공유된 자원에 여러 프로세스, 여러 스레드가 동시에 접근하면서 문제가 발생한다.Critical Section은 멀티 프로세스 환경에서 둘

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

CS 정리 운영체제(2)

스케줄러란 어떤 프로세스에게 자원을 할당할지를 결정하는 운영체제 커널의 코드를 의미한다.스케줄러는 역할과 목적에 따라서 단기 스케줄러, 중기 스케줄러, 장기 스케줄러로 구분할 수 있다.단기 스케줄러는 미리 정한 스케줄링 알고리즘에 따라 실행할 프로세스를 선택한다.CPU

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

CS 정리 운영체제(1)

운영체제(Operation System)란 컴퓨터 시스템의 자원들을 효율적으로 관리하며, 사용자가 컴퓨터를 편리하고 효과적으로 사용할 수 있도록 환경을 제공하는 여러 프로그램의 모임이다.프로세스(process)란 일반적으로 CPU에 의해 처리되는 사용자 프로그램, 시스

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

CS 정리 네트워크(4)

클라이언트가 서버로 요청을 보내는 방법인 HTTP Method에는 크게 두 가지 방법이 있는데 GET 방식과 POST 방식이 있다.GET은 클라이언트에서 서버로 어떠한 정보를 요청하기 위해 사용되는 메소드이다.(ex. 게시판의 게시물을 조회)요청하는 데이터가 HTTP

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

CS 정리 네트워크(3)

네트워크(3) 5. DNS 사람들이 네트워크를 통해 원격의 컴퓨터에 접속하기 위해서는 IP주소를 이용하여야 하지만, IP주소를 일일이 외울 수 없기 때문에 외우기 쉽고 알기 쉬운 도메인 이름을 사용한다. DNS(Domain Name System)는 도메인 이름을 사

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