Page 17

20 POSTS

#react#redux#testing
리액트 면접 질문 모음 (2)
[목차](/2019/08/13/reactjs-interview-questions/) # table of contents ```toc tight: true, from-heading: 2 to-heading: 3 ``` ## React Router ### What is React Router? React Router는 리액트 최상단에 있는 강력한 라우...
2019-08-2130분
#react#javascript#frontend
리액트 면접 질문 모음 (1)
[목차](/2019/08/13/reactjs-interview-questions/) ```toc tight: true, from-heading: 2 to-heading: 3 ``` ## Core React ### What is React 리액트는 오픈소스 프론트엔드 자바스크립트 라이브러리로, 특히 싱글 페이지 애플리케이션의 사용자 인터페이스 구축을...
2019-08-2164분
#typescript
타입스크립트 타입 단언
타입스크립트의 타입 단언
2019-08-205분
#react#career
리액트 면접 질문 모음
[원문-reactjs-interview-questions](https://github.com/sudheerj/reactjs-interview-questions) [1. Core React](/2019/08/13/reactjs-interview-questions-1/) [2. React - Router, Internationalization, Redux,...
2019-08-131분
#browser
브라우저는 어떻게 동작하는가? - 모던 웹브라우저가 동작하는 방법
### 🚧작성중 🚧 [원문-How Browsers Work: Behind the scenes of modern web browsers](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) > 이 글을 요약/번역한 더 좋은 글이 [네이버 d2](https://d2.naver.com/...
2019-08-1220분
#nextjs#typescript#boilerplate
koa-nextjs-react-typescript-boilerplate
[github repository](https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate) nextjs와 react 만 깔끔하게 쓰고 싶지만, 그러기엔 현실적인 문제가 몇가지 있다 ...
2019-08-121분
#react
React Hooks Api (2)
### useReducer ```javascript const [state, dispatch] = useReducer(reducer, initialArg, init); ``` `useState`의 대체 함수다. 다수의 하윗 값을 만드는 복잡한 로직, 혹은 다음 state가 이전 state의 의존적인 경우에 쓴다. 뭐가 뭔지 모르겠으니까 예제를 보자. ...
2019-08-123분
#react
React Hooks Api (1)
# Hooks API Hook은 react 16.8에서 추가된 개념으로, Hook을 시용하면 class를 갖성하지 않아도 state관리와 같은 react의 기능을 사용할 수 있다. ## 기본 Hook ### useState ```javascript const [state, setState] = useState(initialState); setStat...
2019-08-094분
#devops#backend
HAProxy
## 로드밸런서 > 로드 밸런싱이란, 부하 분산을 위해서 가상 IP를 통해 여러 서버에 접속하도록 분배하는 기능을 말한다. 로드 밸런싱에서 사용하는 주요 기술은 - NAT(Network Address Translation): 사설 IP 주소를 공인 IP 주소로 바꾸는 데 사용하는 통신망의 주소 변조기이다. - DSR(Dynamic Source Rout...
2019-08-073분
#docker#devops
Docker와 ECR, ECS 경험
제법 규모가 있었던 전 회사에서는 특별하게 인프라에 대해 고민을 별로 할 필요가 없었다. 많은 부분이 자동화되어 있었고, 또 적당한 툴로 잘 만들어져 있었기 때문에 개발에 온전히 집중할 수 있었다. 하지만 새롭게 온 스타트업은 (당연하게도) 그런게 없으므로, 회사에서 사용하고 있는 AWS 인프라와 배포 시스템에 대해서 직접 공부할 필요가 있었다. 그 중에서...
2019-08-067분
#javascript
Javascript Reduce
멍청이라 그런지 `reduce` 함수가 잘 이해 되지 않았다. ## Reduce ```javascript const list = [1, 2, 3, 4, 5]; const initValue = 10; const totalSum = list.reduce( (accumulator, currentValue, currentIndex, array) => { ...
2019-07-222분
#javascript
Javascript Set 그리고 Map
## 근데 사실.. 컬렉션 필요없지 않을까 자바스크립트에서 일반적인 Object는 key-value쌍을 끊임 없이 추가할 수 있는 형태로 구성되어 있다. 그래서 사실 컬렉션이 필요하지 않은 것 처럼 보일 수도 있다. 그러나 이따금씩 object로 부족할 때가 있다. - key 충돌 위험이 존재하는 경우 - 문자열/심볼 이외의 키 값이 필요한 경우 - 객...
2019-07-186분
#javascript
Javascript Symbol
## Javascript Primitive 기존에 자바스크립트는 6가지의 primitive가 있었다. - Object - string - number - boolean - null - undefined 그러나 es6가 들어서면서 `symbol`이라는 7번째 primitive가 추가되었다. ## Symbol ```javascript const hel...
2019-07-184분
#javascript#browser
javascript event bubbling & capturing
![image](https://miro.medium.com/max/1200/1*Et5UjVPGLfF1L43T7ErrxQ.png) ## Javascript Event Capturing https://codepen.io/yceffort/pen/GbVaaY Event Capturing은 특정 요소에서 이벤트가 발생했을 때, 최상위 요소에서 부터 이벤트를 탐...
2019-07-172분
#javascript
javascript class
# Class 클래스는 기본적으로 이렇게 생겼다. ```javascript class Member { getName() { return "이름"; } } let obj = new Member(); console.log(obj.getName()); ``` ## 특징 ### 1. strict 모드에서 실행 딱히 `'use strict'...
2019-07-103분
#browser#web-performance#javascript
Intersection Observer
## Intersection Observer Intersection Observer는 엘리먼트가 viewport에 노출되고 있는지 여부를 확인해주는 API다. 간단히 말해 브라우저의 어떤 요소가 화면에 노출되고 있는지 안되고 있는지를 확인해주는 라이브러리라고 생각하면 될 것 같다. 이 라이브러리가 없이 엘리먼트가 노출중인지 확인하려면 어떻게 해야할까? 이...
2019-06-244분
#nextjs#frontend#typescript
Typescript, React, NextJs, Koa, Styled Component 로 프론트엔드 환경 만들기
이 문서는 더 이상 업데이트 하지 않을 생각이다. 대신 https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate 여기에서 계속 해서 만들어 가고 있다. ## 사용한 오픈소스 ### React 자세한 설명은 생략 한다 ### Nextjs [NextJs](https://nextjs.org...
2019-06-214분
#typescript
Typescript Type, Enum, Partial, Record로 글로벌 변수 관리하기
## 고민지점 - Global 로 관리하는 Colorset Red, Blue, Green, Black이 있다. - 이 색들은 각각 지정된 칼라코드가 있다 - 그러나 때로는 그 컬러코드에 맞게 안쓰는 경우도 있다 - 그러나 때로는 저 네개를 다 안쓰고 1~3개만 쓰는 경우가 있다. ## Union types [Union Type](https://www....
2019-06-185분
#react
React 공부하기 7 - 컴포넌트 라이프 사이클
## React Component Life Cycle 라이프 사이클은 총 10가지다. `Will`접두사는 어떤 작업을 작동하기전에 실행하는 메소드가, `Did`는 어떤 작업을 한 후에 실해오디는 메서드다. 이 메서드들은 컴포넌트 클래스에서 덮어써서 선언하여 사용할 수 있다. 라이프사이클은 총 3가지 카테고리로 나눌 수 있는데, `mount`, `unm...
2019-05-215분
#react
React 공부하기 8 - 함수형 컴포넌트
### 함수형 컴포넌트 ```javascript import React from 'react'; function Hello(props) { return ( <div>hello {props.name}</div> ) } ``` 함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등의 기능을 제거한 상태이므로 메모리 사용량이...
2019-05-211분

Page 17

리액트 면접 질문 모음 (2)

리액트 면접 질문 모음 (1)

타입스크립트 타입 단언

리액트 면접 질문 모음

브라우저는 어떻게 동작하는가? - 모던 웹브라우저가 동작하는 방법

koa-nextjs-react-typescript-boilerplate

React Hooks Api (2)

React Hooks Api (1)

HAProxy

Docker와 ECR, ECS 경험

Javascript Reduce

Javascript Set 그리고 Map

Javascript Symbol

javascript event bubbling & capturing

javascript class

Intersection Observer

Typescript, React, NextJs, Koa, Styled Component 로 프론트엔드 환경 만들기

Typescript Type, Enum, Partial, Record로 글로벌 변수 관리하기

React 공부하기 7 - 컴포넌트 라이프 사이클

React 공부하기 8 - 함수형 컴포넌트