Let's Begin Programming

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://www.acmicpc.net/problem/1018 1018번: 체스판 다시 칠하기 첫째 줄에 N과 M이 주어진다. N과 M은 8보다 크거나 같고, 50보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에는 보드의 각 행의 상태가 주어진다. B는 검은색이며, W는 흰색이다. www.acmicpc.net 브루트 포스 문제는 모든 경우의 수를 시도하면서 결과를 구하는 것을 말한다. 모든 알고리즘 문제가 그렇지만 이 문제가 브루트 포스 알고리즘 문제라고 생각하면 쉽지만 만약에 사전에 주어진 것 없이 문제만 나왔다면 더 효율적인 방법이나 알고리즘을 찾으려고 괜히 더 생각했을 것 같다. 물론 더 좋은 방법이 있을 것이다. 내가 푼 방법은 모든 경우의 수를 시도해 보는 방법이다. 문제에서 준 힌트는..

개발 공부 (알고리즘) 2021. 1. 18. 05:19

[참고]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