user-thumbnail
@bathingape
Front-End 개발을 위해 공부하고 있습니다.
SERIES

TIL

2019-10-23

2019년 10월 23일

Today I Learn... * React * state * Fragment * React Hooks * 간결함 * useState * useRef (+current) * setState들을 한번에 모아서 처리(비동기) * 비구조할당/구조분해할당 (번역차이) * Babel * 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못함...

2019-10-24

2019년 10월 24일

Today I Learn... * webpack * 웹팩으로 빌드하기 To-Do 1. 기존 리액트 코드 Hooks로 전환하기

2019-10-25

2019년 10월 25일

Today I Learn... * React * import vs require * map() : key설정(고유한 key) / index로 하면 성능 최적화에 문제 발생할수도.. * 컴포넌트 분리 1. 가독성 2. 재사용성 3. 성능 최적화 * props - 부모 컴포넌트에서 받아온 properties - 자식 컴포넌트에서 바꾸면 X (바꿔야 할 때에는 ...

2019-10-28

2019년 10월 28일

Today I Learn... * React * 클론코딩 + webpack 빌드 * 클래스형 컴포넌트 라이프 사이클 * componentDidMount: 컴포넌트가 첫 랜더링 된 이후 * componentDidUpdate: 리랜더링 된 이후 * componentWillUnmount: 컴포넌트가 제거되기 직전 * Hooks * useEffect: 클래...

2019-10-29

2019년 10월 29일

Today I Learn... * React * 자식컴포넌트는 pureComponent사용(데이터가없거나 화면에만 보이는 경우) Higher-order Component (HOC) : 컴포넌트를 인자로 받아서 컴포넌트를 반환하는 함수를 뜻한다. Hooks * 최상위에 상수를 선언하자(조건문안에 넣지 않기) * 선언해주는 순서(실행순서) 중요 * u...

2019-10-30

2019년 10월 30일

Today I Learn... * React * useReducer * reducer, action, dispatch 관계 * 얕은 복사(...) To-Do 1. immer 라이브러리(가독성해결) 2. Redux

2019-10-31

2019년 10월 31일

Today I Learn... * 리액트 * 리액트 프로젝트 만들기 $ npm install -g create-react-app react-study $ cd react-study $ npm start * 불변성 * 리액트에서 객체를 업데이트하게 될 때에는 기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서, 새 객체에 변화를 주어야 한다....

2019-11-02

2019년 11월 2일

Today I Learn... * Context API * 깊은 곳에 위치하는 컴포넌트에게 여러 컴포넌트를 거쳐서 함수를 전달해야 하는 일이 있다면 Context API 를 사용 * 새로운 Context 를 만드는 방법 * produce 함수를 사용 할 때에는 첫번째 파라미터에는 수정하고 싶은 상태, 두번 째 파라미터에는 어떻게 업데이트하고 싶을...

2019-11-03

2019년 11월 3일

Today I Learn... * Sass * Syntactically Awesome Style Sheets (.scss/.sass 문법 지원) * node-sass 라이브러리 : Sass 를 CSS 로 변환해주는 역할 * 버튼 사이즈 조절 * 문법 * + * & * ...rest To-Do 1. 벨로퍼트와 함께하는 모던 리액트 문서 2. S...

2019-11-06

2019년 11월 6일

Today I Learn... * AWSome Day 온라인 컨퍼런스 To-Do 1. 벨로퍼트와 함께하는 모던 리액트 문서 2. CSS module

2019-11-07

2019년 11월 7일

Today I Learn... * CSS module * css파일의 확장자를 `.module.css 로 바꾸면 된다. * className 을 설정 할 때에는 styles.Button 이렇게 import로 불러 온 styles` 객체 안에 있는 값을 참조하면 된다. * 클래스 이름에 대하여 고유한 이름들이 만들어지기 때문에, 실수로 CSS 클래스 ...

2019-11-08

2019년 11월 8일

Today I Learn... * 웹 개발자 포트폴리오를 위한 10가지 팁 (참고문서 1) * 33concepts-of-javascript (참고문서 2) * 자바스크립트 개발자라면 알아야 할 33가지 개념 1 콜스택 To-Do 1. 벨로퍼트와 함께하는 모던 리액트 문서 2. Dialog 만들기( + 트랜지션효과) / 코드리뷰 3. 투두리스트 ...

2019-11-11

2019년 11월 11일

Today I Learn... * 투두리스트 만들기(클론코딩) * 벨로퍼트와 함께하는 모던 리액트 문서 中 3장. 멋진 투두리스트 만들기(참고문서2) * https://codesandbox.io/s/mashup-todolist-pn3ch?fontsize=14 * 비동기 처리 (Promise, async/await) * 콜백 함수: 함수 타입의 값을...

2019-11-13

2019년 11월 13일

Today I Learn... axios 라이브러리 조회 * REST API (Representational State Transfer API) * HTTP 주요 메서드 * GET: 데이터 조회 * POST: 데이터 등록 * PUT: 데이터 수정 * DELETE: 데이터 제거 * REST API 설계 시 가장 중요한 항목 1. ...

2019-11-14

2019년 11월 14일

Today I Learn... * 리액트 라우터 * 설치 * Link: 누르면 다른 주소로 이동시키기 * 리액트 라우터를 사용할 때에는 Link 컴포넌트를 사용한다. (앵커태그 X) * 파라미터와 쿼리 * 일반적으로는 파라미터는 특정 id 나 이름을 가지고 조회를 할 때 사용하고, 쿼리의 경우엔 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵...

2019-11-15

2019년 11월 15일

Today I Learn... * 리액트 라우터 부가기능 * history 객체: 컴포넌트 내에 구현하는 메소드에서 라우터에 직접 접근을 할 수 있다. (뒤로가기, 특정 경로로 이동, 이탈 방지 등) * withRouter HoC: 라우트 컴포넌트가 아닌곳에서 match / location / history 를 사용해야 할 때 사용 * Switch:...

2019-11-16

2019년 11월 16일

Today I Learn... * Redux DevTools 와 `getState` 를 파라미터로 받아와주어야 합니다. * 주로 비동기적으로 처리해야 할 작업 * Ajax Web API 요청 : 만약 서버쪽에서 데이터를 받와아야 할 때는, 요청을 하고 서버에서 응답을 할 때 까지 대기를 해야 되기 때문에 작업을 비동기적으로 처리합니다. * ...

2019-11-17

2019년 11월 17일

Today I Learn... * JSON을 활용한 간단한 깊은 복사 * 호이스팅(hoisting / 참고문서2) * 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. * 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. * 실제로 코드가 끌어올려지는 건 아니...

2019-11-18

2019년 11월 18일

Today I Learn... * 프로미스를 다루는 리덕스 모듈을 다룰 땐 다음과 같은 사항을 고려해야 한다. 1. 프로미스가 시작, 성공, 실패했을때 다른 액션을 디스패치 해야한다. 2. 각 프로미스마다 thunk 함수를 만들어주어야 한다. 3. 리듀서에서 액션에 따라 로딩중, 결과, 에러 상태를 변경해주어야 한다. * 가짜 API 서버 * j...

2019-11-19

2019년 11월 19일

Today I Learn... * Typescript * 프로젝트 생성 * 클래스 * 함수 * 제네릭 * 열거형 * 타입 추론 * VS code 단축키 `Ctrl + Space : Trigger suggestion - 자동완성 기능 ctrl + alt + 위/아래 화살표` : Add Cursor Above / Below - 커서늘리기 * 페...

2019-11-22

2019년 11월 22일

Today I Learn... * 타입스크립트로 리액트 상태 관리하기 * 카운터 만들어보기 * 인풋 상태 관리하기 * e 객체의 타입 확인 = 커서를 올리면 어떤 타입을 해야하는지 알려준다. * useReducer 사용해보기 * 스코프/클로저 * 안에서는 바깥이 보이지만, 바깥에서는 안이 보이지 않는 한방향 유리(one-way glass)라고 생각...

2019-11-25

2019년 11월 25일

Today I Learn... * 코딩테스트 연습 * 기본 문법 연습(JavaScript Basic) * 메서드(MDN 문서 참조) `concat() : 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. filter() :배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해, callback이 true로 강제...

2019-11-26

2019년 11월 26일

Today I Learn... * 코딩테스트 연습 * 메서드(MDN 문서 참조) `split() : String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다. Math.abs() : 주어진 숫자의 절대값을 반환합니다. Math.round() / Math.ceil() / Math.floor()` : 주어진 숫자를 반올림 / 올림 / ...

2019-11-30

2019년 11월 30일

Today I Learn... * 코딩테스트 연습 * underscore.js * Scope * Closure To-Do 1. 자바스크립트 개발자라면 알아야 할 33가지 개념(참고문서 1) 2. 코어 자바스크립트 / 리액트를 다루는 기술 읽기 - 참고문서 1. https://velog.io/@jakeseo_me/2019...

2019-12-03

2019년 12월 3일

Today I Learn... * 코딩테스트 연습 * underscore.js * Prototype * Recursion * Method To-Do 1. 자바스크립트 개발자라면 알아야 할 33가지 개념(참고문서 1) 2. 코어 자바스크립트 / 리액트를 다루는 기술 읽기 3. 코딩테스트 - 참고문서 1. https://ve...

2019-12-04

6일 전

Today I Learn... * 코딩테스트 연습 * flatten 함수 만들어 보기 * suffle 함수 만들어 보기 (참고문서 3) * 클로저 * 프론트엔드 면접 질문 모음 (참고문서 2) To-Do 1. 자바스크립트 개발자라면 알아야 할 33가지 개념(참고문서 1) 2. 코어 자바스크립트 / 리액트를 다루는 기술 읽기...

2019-12-06

4일 전

Today I Learn... * 자기소개서 및 성향 평가 To-Do 1. 자바스크립트 개발자라면 알아야 할 33가지 개념(참고문서 1) 2. 코어 자바스크립트 / 리액트를 다루는 기술 읽기 3. 프론트엔드 면접 질문 모음 관련 사이트 읽어보기(참고문서 2) 4. 코딩테스트 - 참고문서 1. https://velog.io/...

2019-12-07~08

2일 전

Today I Learn... * 코딩테스트 * 코드 리뷰 To-Do 1. 자바스크립트 개발자라면 알아야 할 33가지 개념(참고문서 1) 2. 코어 자바스크립트 / 리액트를 다루는 기술 읽기 3. 프론트엔드 면접 질문 모음 관련 사이트 읽어보기(참고문서 2) - 참고문서 1. https://velog.io/@jakeseo...