Let's Begin Programming

nomadcoders.co/typescript-for-beginners/ All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co Typescript는 처음 접했다. 1. yarn init 2. yarn (global) add typescript 3. tsconfig.json 작성 - Typescript 컴파일할 때 옵션을 설정 4. 터미널에 tsc 입력 - .ts파일을 컴파일해서 .js 파일과 .js.map 파일을 만들어 준다. 5. package.json 파일에. start, prestart 추가 - yarn start를 실행하면 "tsc" 명령을 실행한 이후에 "node index.js"를 실행하도록 설정한다. ..

개발 공부 (Nomadcoders) 2021. 1. 22. 01:08

GraphQL 사용법 1. 서버 만들기 프로젝트 폴더 생성 yarn init (git repository 연결) yarn add graphql-yoga yarn global add nodemon (파일 수정 -> 자동 서버 재시작) package.json 수정 "scripts": { "start": "nodemon" } (babel) - 최신 JS 사용을 위해서 yarn add babel-node --dev yarn global add babel-cli --ignore-engines package.json 수정 "scripts": { "start": "nodemon --exec babel-node index.js" } .babelrc 파일 생성 (babel 환경설정) { "presets": ["env",..

개발 공부 (Nomadcoders)/GraphQL 2021. 1. 19. 23:31

[참고] https://nomadcoders.co 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! nomadcoders.co REST의 단점 1. Overfetching : 현재 필요한 정보 이외의 당장 필요없는 데이터까지 fetch받는 경우 2. Underfetching : 애플리케이션 시작할 때 데이터를 받기 위해 많은 요청을 함 => GraphQL의 장점 : 위의 문제들을 해결 여러 개의 URL(end point)가 아닌 하나의 end point만 존재. 하나의 쿼리에 필요한 모든 데이터를 object형태로 담아서 통신 간단한 영화 정보 API를 구현하면서 느낀 점은 메소드에 대한 고민이 없어진 것이었다. R..

개발 공부 (Nomadcoders)/GraphQL 2021. 1. 19. 21:59

[참고]https://nomadcoders.co 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! nomadcoders.co Redux 개선 문제 : 과연 Redux를 사용했을 때 코드가 줄었을까? 더 복잡해 보인다. 해결 : Redux Toolkit yarn add reduxjs/toolkit 1. createAction reducer에 Action을 보낼 때 직접 action Object를 정의해서 보내주던 과정을 createAction을 사용해서 정해진 형태로 바꿀 수 있다. {type: "", payload: ""} 2. createReducer Reducer 함수를 switch - case문 없이 단순하게 ..

개발 공부 (Nomadcoders)/Redux 2021. 1. 13. 22:40

React에서 Redux를 사용하기 [참고] 노마드코더 https://nomadcoders.co 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! nomadcoders.co yarn add react-redux react-router-dom 리액트의 각 컴포넌트에서 Store에서 관리하는 데이터를 읽고 쓰기 위해서 connect() 함수를 사용. [참고]https://react-redux.js.org/api/connect Connect | React Redux connect() react-redux.js.org connect(mapStateToProps?, mapDispatchToProps?, mergeProps?,..

개발 공부 (Nomadcoders)/Redux 2021. 1. 13. 06:14

Redux를 이용해서 TODO 리스트 만들기 [참고] https://nomadcoders.co 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! nomadcoders.co 이전에 Vanila Javascript를 이용해 만들어 보았던 TODO List를 Redux를 사용해서 구현. - State Mutation (state 변형) 금지 => State에 직접 접근하여 변형하는 것이 아니라 새로운 State를 Return TODO 추가 - input에 사용자가 입력한 값을 reducer 함수에 전달 => "text" 키 값으로 store.dispatch()를 통해 전달 - 기존의 TODO 배열에 직접 값을 넣는 것이 ..

개발 공부 (Nomadcoders)/Redux 2021. 1. 13. 02:45

[참고]노마드코더(https://nomadcoders.co) 노마드 코더 Nomad Coders 코딩은 진짜를 만들어보는거야!. 실제 구현되어 있는 서비스를 한땀 한땀 따라 만들면서 코딩을 배우세요! nomadcoders.co Redux 사용을 위해 yarn add redux 또는 npm install redux 1. Add, Minus 버튼으로 카운트 바꾸기 Vanila JS Redux let count 변수를 선언해 값을 저장 store에 데이터를 저장 직접 만든 event handler 함수내에서 count 변수를 변화 store 생성 시 지정한 reducer 함수를 dispatch()함수 호출을 이용해 호출하면서 state를 변화 listener가 호출될 때 HTML을 업데이트하는 함수를 직접 호..

개발 공부 (Nomadcoders)/Redux 2021. 1. 13. 01:00