TIL(2019)

Today I Learn... React state Fragment = 안에 를 쓰게 될 경우 함수형 사용 ref : DOM에 직접 접근할 때 (=) 할 때 마다 를 불러온다 (성능최적화에 신경쓸 것) 클래스형 컴포넌트 vs 함수형 컴포넌트 -> -> React Hooks 간결함...

Today I Learn... webpack 웹팩으로 빌드하기 webpack.config.js 파일 생성(설정) 자동 빌드 설정 package.json 실행 설정(추가하기) => To-Do 기존 리액트 코드 Hooks로 전환하기

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

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

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

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

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

Today I Learn... Context API 깊은 곳에 위치하는 컴포넌트에게 여러 컴포넌트를 거쳐서 함수를 전달해야 하는 일이 있다면 Context API 를 사용 새로운 Context 를 만드는 방법 내보내기/불러오기 immer 라이브러리 데이터의 구조가 복잡해져서 불변성을 유지하면서 업데이트하려면 코드가 복잡해지...

Today I Learn... Sass Syntactically Awesome Style Sheets (.scss/.sass 문법 지원) node-sass 라이브러리 : Sass 를 CSS 로 변환해주는 역할 버튼 사이즈 조절 또는, 또는, classnames 라이브러리 문법 + & ...

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

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

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

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

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

Today I Learn... 리액트 라우터 설치 적용 Route: 특정 주소에 컴포넌트 연결하기 Link: 누르면 다른 주소로 이동시키기 리액트 라우터를 사용할 때에는 Link 컴포넌트를 사용한다. (앵커태그 X) 파라미터와 쿼리 일반적으로는 파라미터는 특정 id 나 이름을 가지고 조회를 할 때 사...

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

Today I Learn... Redux DevTools redux-logger redux-thunk 액션 객체가 아닌 함수를 디스패치 할 수 있습니다. 함수를 디스패치 할 때에는, 해당 함수에서 와 `getState` 를 파라미터로 받아와주어야 합니다. 주로 비동기적으로 처리해야 할 작업 Ajax Web API 요청 : 만약 서버...

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

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

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

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

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

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

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

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

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

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

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

Today I Learn... OAuth 타사의 사이트에 대한 접근 권한을 얻고, 그 권한을 이용하여 개발할 수 있도록 도와주는 프레임워크 Google log-in service 만들기(생활코딩) To-Do 자바스크립트 개발자라면 알아야 할 33가지 개념(참고문서 1) 프론트엔드 면접 질문 모음 관련 사이트 읽어보기(참고문서 2) 코어 자바스크...

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

Today I Learn... Bootstrap Semantic UI Google maps API API 키 발급 현재 위치 찾기 마크 찍기 To-Do 자바스크립트 개발자라면 알아야 할 33가지 개념(참고문서 1) 프론트엔드 면접 질문 모음 관련 사이트 읽어보기(참고문서 2) 코어 자바스크립트 / 리액트를 다루는 기술...

Today I Learn... 비디오 인터뷰 To-Do 자바스크립트 개발자라면 알아야 할 33가지 개념(참고문서 1) 프론트엔드 면접 질문 모음 관련 사이트 읽어보기(참고문서 2) 코어 자바스크립트 / 리액트를 다루는 기술 읽기 참고문서 https://velog.io/@jakeseo_me/2019-03-15-2303-%EC%9E%91%EC%84%B...

Today I Learn... jQuery 라이브러리 CDN 불러오기 문법 이벤트 처리 정리 브라우저 호환성을 고려하지 않아도 되는 편리함은 있다. 하지만, 순수 자바스크립트로 코딩한 것보다 현저히 느리다. 개발자라면 제이쿼리 없이도 순수 자바스크립트로 같은 기능을 구현할 줄 알아야한다. ...

Today I Learn... 직무 관련 인적성검사(사람인) HTML/CSS - Input 입력모드 ime-mode : IE에서만 지원 (웹표준이 아니다. 제이쿼리 사용으로 다른 브라우저 호환 가능케는 할 수 있다.) replace() + 정규표현식 패턴 + 정규표현식 To-Do 자바스크립트 개발자라면 알아야 할 ...

Today I Learn... 리눅스 우분투 설치 (듀얼 부팅) To-Do 자바스크립트 개발자라면 알아야 할 33가지 개념(참고문서 1) 프론트엔드 면접 질문 모음 관련 사이트 읽어보기(참고문서 2) 참고문서 https://velog.io/@jakeseo_me/2019-03-15-2303-%EC%9E%91%EC%84%B1%EB%90%A8-rmjta...

Today I Learn... 우분투 환경에서의 git workflow Agile(애자일) 애자일 개발 선언문(참고문서3) 협력 + 피드백 애자일에서는 불확실성이 중요하다? (전통적 방법론 vs 애자일 방법론) To-Do 자바스크립트 개발자라면 알아야 할 33가지 개념(참고문서 1) 프론트엔드 면접 질문 모음 관련 사이...

Today I Learn... JEST 페이스북에서 사용되는 리액트 애플리케이션을 포함한 모든 자바스크립트 테스트 도구 설치 Using Matchers 실행 코드 리뷰 To-Do 자바스크립트 개발자라면 알아야 할 33가지 개념(참고문서 1) 프론트엔드 면접 질문 모음 관련 사이트 읽어보기(참고문서 2) TDD(테스트주도...

Today I Learn... JS This Github Conflict 해결 이슈 IO 도메인은 무슨 의미일까? (참고문서3) To-Do 자바스크립트 개발자라면 알아야 할 33가지 개념(참고문서 1) 프론트엔드 면접 질문 모음 관련 사이트 읽어보기(참고문서 2) 깃헙 merge, branch 참고문서 https://velog.io/...

Today I Learn... 1. Object OOP(Object Oriented Programming)가 무엇인지? 객체 지향 프로그래밍을 의미. 컴퓨터 프로그램을 “객체(Object)"들의 모임으로 파악하고자 하는 프로그래밍의 패러다임 현실 세계를 리모델링 특성 추상화 캡슐화(은닉) 상속성, ...

Today I Learn... instantiation Patterns(상속패턴) git workflow 연습

Today I Learn... 1. Linked List 연결 리스트는 일련의 원소를 배열처럼 차례대로 저장하지만, 원소들이 메모리상에 연속적으로 위치하지 않는다는 점이 다르다. image.png 다음과 같은 특징이 있다. 연속되는 항목들이 포인터로 연결된다. 마지막 항목은 Null을 가리킨다. 프로그램이 수행되는 동안 크기가 커지거나 작아질 수 ...