profile
아름다운 것과 퇴근 후 마시는 맥주를 좋아하며 사람과의 소통을 중요히 여기는 개발자

Closure

클로저는 내부 함수와 밀접한 관계를 가지고 있는 주제입니다. 내부 함수는 외부 함수의 지역변수에 접근 할 수 있는데 외부 함수의 실행이 끝나서 소멸 된 이후에도 내부 함수가 외부 함수의 변수에 접근 할 수 있습니다.이러한 메커니즘을 Closure이라고 합니다.예제를 보

4일 전
·
0개의 댓글

RESTful API & GraphQL

Representational State Transfer의 약자입니다.REST라고 하면 좁은 의미로 HTTP를 통해 CRUD를 실행하는 API를 뜻합니다.REST는 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을 활용 할 수 있는아키

5일 전
·
0개의 댓글
post-thumbnail

크로스 브라우징(Cross Browsing)

웹 페이지 제작시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업입니다.HTML, CSS, JavaScript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도 된 대로 보여지는 기법이기도 합니다.

6일 전
·
0개의 댓글
post-thumbnail

Context API

주로 애플리케이션에서 전역적으로 데이터가 사용되야 할 때 사용 됩니다.이를테면 사용자 로그인 정보, 애플리케이션 설정, 테마 등 여러 종류들이 존재 합니다.기존의 Context API도 전역적으로 데이터를 관리하는 용도로 사용 할 수는 있었지만, 사용성이 불편해서 자주

2020년 7월 2일
·
0개의 댓글

React Hooks #5-2

전 포스팅에 이어 useReducer에 대해 좀 더 다루어 보도록 하겠습니다. 인풋 상태 관리하기 이번에는 useReducer를 사용하여 인풋 상태를 관리 해 보겠습니다. 기존에는 인풋이 여러 개여서 useState를 여러 번 사용했는데, useReducer를 사용

2020년 7월 2일
·
0개의 댓글

React Hooks #5

useReducer useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해 주고 싶을 때 사용하는 Hook입니다. 리듀서는 현재 상태, 그래고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달 받아 새로운 상

2020년 7월 2일
·
0개의 댓글

LifeCycle Methord의 이해

LifeCycle은 총 3가지 Mount, Update, Unmount 카테고리로 나눕니다. 어떤 것들이 있는지 간단히 알아보고 큰 흐름을 이해한 후 하나씩 살펴보겠습니다. Mount DOM이 생성되고 웹 브라우저상에 나타나는 것을 Mount라고 합니다. 이때 호출

2020년 7월 2일
·
0개의 댓글

클래스형 컴포넌트와 함수형 컴포넌트

클래스형 컴포넌트의 형태입니다.클래스형 컴포넌트에서는 state 및 LifeSycle 기능을 사용 할 수 있다는 점과 임의 메서드를 정의 할 수 있다는 특징이 있습니다.클래스형 컴포넌트에는 render 함수가 반드시 있어야하고, 그 안에서 보여주어야 할 JSX를 리턴

2020년 7월 2일
·
0개의 댓글

CSR & SSR

클라이언트 사이드 렌더링은 UI 렌더링을 브라우저에서 모두 처리하는 것입니다.즉, 자바스크립트를 실행해야 만든 화면이 사용자에게 보입니다.서버와 클라이언트 사이의 데이터 양과 트래픽이 현저히 감소합니다.연속 된 렌더링으로 인한 과부하를 줄일 수 있습니다.검색 엔진 최적

2020년 7월 1일
·
0개의 댓글

로컬, 세션 스토리지, 쿠키

로컬스토리지와 세션스토리지의 차이점은 데이터의 영구성입니다. 로컬스토리지는 사용자가 데이터를 삭제하지 않는이상 브라우저에 계속 남아있으며, 세션스토리지는 윈도우나 브라우저 탭을 닫을경우 데이터가 사라집니다. 지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지에

2020년 7월 1일
·
0개의 댓글

Hoisting(호이스팅)

Hoisting이란? var 키워드로 생성된 변수 혹은 함수를 javascript 엔진이 스코프 최상위까지 끌어올리는 것을 말합니다. 선언문만 호이스팅이 되며 할당이 있는경우는 되지 않습니다. 또한, let, const는 호이스팅 되지 않습니다. 예시를 들어보겠습니

2020년 6월 30일
·
0개의 댓글

Promise

콜백헬을 개선시키기 위해 등장한 패턴입니다. Promise는 향후 언젠가 사용하게 될 값을 생산해내는 객체입니다. fullfiled, pending, rejected 상태가 있습니다. fullfiled는 비동기처리가 성공적으로 수행된 상태, rejected는 비동기처리

2020년 6월 29일
·
1개의 댓글

React Hooks #4

useCallback은 useMemo와 상당히 비슷한 함수입니다. 주로 렌더링 성능을 최적화 해야 하는 상황에서 사용합니다.이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성 할 수 있습니다.앞에서 구현한 Average 컴포넌트를 보겠습니다.onChange와

2020년 6월 14일
·
0개의 댓글
post-thumbnail

React Hooks #3

useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있습니다. 먼저 리스트 숫자를 추가하면 추가 된 숫자들의 평균을 보여주는 함수형 컴포넌트를 작성 해 보겠습니다.src 디렉토리에 Average.js 파일을 생성합니다.다음으로 App에서 컴

2020년 6월 13일
·
0개의 댓글
post-thumbnail

React Hooks #2-2

지난 포스트에 이어 useEffect에 대해 좀 더 다루어 보도록 하겠습니다.useEffect를 사용 할 때, 특정 값이 변경 될 때만 호출하고 싶을 경우도 있습니다. 이럴 때 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 됩니다.useEffect

2020년 6월 4일
·
0개의 댓글
post-thumbnail

React Hooks #2

useEffect 이번 포스트에서 useEffet에 대해 다루어 보겠습니다. useEffect는 컴포넌트가 렌더링 될 때 마다 특정 작업을 수행하도록 설정 할 수 있는 Hook 입니다. Class 형 컴포넌트의 componentDidMount 와 componentD

2020년 6월 3일
·
0개의 댓글
post-thumbnail

React Hooks #1

React Hooks 에는 여러가지 종류가 있습니다.첫번째로 useState를 다뤄 보겠습니다.먼저 src 디렉토리에 Say.js라는 파일을 생성하고 다음 코드를 작성합니다.useState 함수의 인자에는 상태의 초기값을 넣어 줍니다.값의 형태는 자유롭게 넣을 수 있습

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

Next.js #2

Clean URL로 동적 페이지 만들기 이전 사용했던 쿼리 스트링을 사용한 방법은 URL이 깔끔하지 않았습니다. 그렇다면 URL을 깔끔하게 만들어 동적 페이지를 구성하는 방법을 알아보겠습니다. pages 디렉토리에 p라는 디렉토리를 생성하고 내부에 [profile]

2020년 5월 31일
·
3개의 댓글
post-thumbnail

Next.js #1

React를 기반으로 SPA를 빠르게 빌드 할 수 있다록 도와주는 프레임워크입니다.SPA의 환경을 하나씩 잡고 빌드하려면 높은 러닝커브가 필요한 반면 Next.js를 사용하면 빠르게 빌드 할 수 있습니다.Next.js의 장점 중 하나는 매우 간단하면서도 커스터 마이징이

2020년 5월 30일
·
0개의 댓글

Data Structure 4. tree

tree 일반적으로 대상정보의 각 항목들을 계층적으로 연관되도록 구조화 시키고자 할 때 사용하는 비선형 자료구조 데이터 요소들이 단순한 나열이 아닌 부모-자식 관계의 계층적 구조로 표현 됨. tree 는 그래프(Graph)의 한 종류이며 사이클이 없다. tree 자료

2020년 5월 10일
·
0개의 댓글