profile
정리하는 습관

TypeScript Basic #1

TypeScript 의 기본 타입을 알아보자numberbooleanArraytupleundefined / nullunionanyvoidneverobjintersectiontype

약 19시간 전
·
0개의 댓글

우아한 Tech React&TypeScript #5

webpack 은 일반적으로 webpack.config.js 라는 이름의 설정 파일을 갖는다.webpack 은 node 에서 실행되며 작성한 설정 값을 담은 객체를 읽어 처리하게 된다.node 에서 실행되기 때문에 모듈을 사용하기 위해서는 require 를 사용해야 한

1일 전
·
0개의 댓글

우아한 Tech React&TypeScript #5

지난 번 작성 한 Redux 코드를 인용하여 다음과 같이 store / reducer를 생성한다.상태의 변경 사항을 알기 위해 subcribe 메서드를 이용하여 변경 사항을 확인한다.subcribe 메서드의 인자인 콜백 함수는 store 의 상태를 반환하는 getSta

4일 전
·
0개의 댓글

우아한 Tech React&TypeScript #4

react 어플리케이션을 생성한다.index.jsApp.jsApp.js 에서 li 태그 내부에 있는 값들이 상태라고 볼 수 있다.li 태그 내부의 데이터를 index.js 에 분리 해 속성으로 App 컴포넌트에 넘겨 줄 수 있다.index.jsindex.js 수정 해

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

Redux-saga #2

redux-saga 를 사용하여 api 요청을 해 보자.우선 api 를 받아올 공간을 생성하자 src 에 lib 폴더를 생성하고 api.js 를 만든다.modules 디렉터리에 sample.js 생성한다.여기서 GET_POST 액션의 경우에는 api 요청을 할 때 어떤

2020년 9월 10일
·
0개의 댓글
post-thumbnail

Redux-Saga #1

redux-saga 는 비동기 작업 관련 미들웨어이다.redux-thunk 같은 미들웨어도 있지만 redux-saga 를 쓰는 이유는 까다로운 상황에 좀 더 유용하기 때문이다.예를 들어 다음과 같은 상황에서는 redux-saga 를 쓰는 것이 더 유리하다.기존 요청을

2020년 9월 9일
·
0개의 댓글

우아한 Tech React&TypeScript #3

React react 핵심 부분 짚어보기. index.js 위 list 를 기반으로 js로 화면을 그리는 방법은 다음과 같다. rootElement 의 innerHTML 을 이용해 문자열 Element 를 생성하고 직접적으로 넣어 줄 수 있다. app 함수를

2020년 9월 9일
·
0개의 댓글

Redux 편하게 사용하기 #2

리듀서에서 상태를 업데이트 해야 될 때는 불변성을 지켜야 하기 때문에 앞에서는 spread 연산자(...)와 배열의 내장 함수를 활용했다. 그러나 모듈의 상태가 복잡 해 질수록 불변성을 지키기가 까다로워진다.따라서 모듈의 상태를 설계 할 때는 객체의 깊이가 너무 깊어지

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

Redux 편하게 사용하기 #1

리덕스를 좀 더 편하게 사용하는 법에 대해 알아보자.redux-actions 를 사용하면 액션 생성 함수를 더 짧은 코드로 작성 할 수 있다.그리고 리듀서를 작성 할 때도 swich/case 문이 아닌 handleActions 라는 함수를 사용하여각 액션마다 업데이트

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

우아한 Tech React/TypeScript #2

이번 세션에서는 javascript 에 전반적인 흐름을 설명 해 주셨다.기본 값이 있으면 '값' 이라고 정의 된 것들은 변수에 담을 수 있다.(함수, obj, number, string 등).기저에 깔려 있는 법칙을 바탕으로 함수도 변수에 할당이 가능하다.또한 모든 함

2020년 9월 7일
·
0개의 댓글
post-thumbnail

우아한 Tech React/TypeScript #1

대부분의 주니어 개발자들의 가장 큰 고민이지 않을까 싶다.진행하는 프로젝트에 필요한 적정 기술은 무엇인가? 아키텍처는? 향후 유지보수성을 위한 코드품질까지수 없는 고민들을 하지만 이렇다 할 해답을 내리기가 참 어렵다.과거 Hello World 를 콘솔창에 띄우기 위해

2020년 9월 7일
·
0개의 댓글
post-thumbnail

Docker

docker는 컨테이너 기반의 오픈소스 가상화 플랫폼이다.컨테이너라 하면 배에 싣는 화물 수송용 박스를 생각 할 수 있는데 각각의 컨테이너 안에는 옷, 신발, 전자제품 등 다양한 화물을 넣을 수 있고 규격화 되어 선박이나 트레일러 등 다양한 운송수단으로 쉽게 옮길 수

2020년 9월 7일
·
0개의 댓글
post-thumbnail

redux를 쓰기위한 고군분투(5)

전 포스트에 이어 Todos를 만들어 보겠습니다.Todos 컴포넌트를 위한 컨테이너인 TodosContainer 를 작성 해 보겠습니다.이전에 todos 모듈에서 작성했던 액션 생성 함수와 상태 안에 있던 값을 컴포넌트의 props로 전달 해 주었습니다.완성하였으면 A

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

redux를 쓰기 위한 고군분투(4)

전 포스팅에 이어 리덕스를 적용시켜 보겠습니다! 리액트 Application에 리덕스 적용하기 리액트 애플리케이션에 리덕스를 적용하는 방법은 src/index.js 에서 이루어 집니다. 가장 먼저 스토어를 생성합니다. 스토어 만들기 Provider 컴포넌트를

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

redux를 쓰기 위한 고군분투(3)

리덕스 관련 코드 작성하기 프로젝트에 리덕스를 사용 해 보도록 합시다! 리덕스를 사용 할 때는 액션 타입, 액션 생성 함수, 리듀서 코드를 작성해야 하는데, 이 코드들을 각각 다른 파일에 작성하는 방법과 기능별로 묶어 파일 하나에 작성하는 방법이 있습니다. > 일

2020년 8월 5일
·
0개의 댓글
post-thumbnail

redux를 쓰기 위한 고군분투(2)

전 내용 이어서 포스팅 하겠습니다.

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

redux를 쓰기 위한 고군분투(1)

리덕스를 사용하여 상태관리 하는 방법을 알아가보도록 하겠습니다.우선 리덕스를 쓰는 이유부터 알아 봅시다!소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만, 프로젝트의 규모가 커짐에 따라 상태 관리가 번거로워 질 수 있습니다.리액트에서 리덕

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

Closure

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

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

RESTful API & GraphQL

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

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

크로스 브라우징(Cross Browsing)

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

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