YG - 96년생 , 강아지 있음, 개발자 희망

설치 1. eslint, prettier 패키지 설치 npm install -D eslint prettier 2. airbnb eslint 설정 패키지 설치 npx install-peerdeps --dev eslint-config-airbnb 3. prettier eslint 플러그인 및 설정 패키지 설치 npm install -D eslint-config-prettier eslint-plugin-prettier eslint-plugin-prettier: prettier 규칙을 생성하는 eslint 플러그인 eslint-config-prettier: eslint와 prettier간 충돌나는 규칙을 비활성화해주는 eslint 설정 4. package.json 을 git discard 해주기 discard ..

graphQL이란? 그래프 QL은 페이스북이 2012년에 개발하여 2015년에 공개적으로 발표된 데이터 질의어이다. 그래프 QL은 REST 및 부속 웹서비스 아키텍처를 대체할 수 있다. 클라이언트는 필요한 데이터의 구조를 지정할 수 있으며, 서버는 정확히 동일한 구조로 데이터를 반환한다. 장점 1. Overfetching을 없앨 수 있다. 예를 들어 모든 사용자 이름을 GET으로 가져오는데 사용자 이름과 더불어 프로필 사진, 전화번호, 이메일 등 필요한 정보보다 더 많이 서버로부터 받는 것을 Overfetching이라고 하는데 graphQL을 사용한다면 필요한 정보만 가져올 수 있어서 Overfetching을 막을 수 있다. 2. UnderFetching을 막을 수 있다. UnderFetching이란 화..

https://accounts.google.com/signin/v2/identifier?service=cloudconsole&passive=1209600&osid=1&continue=https%3A%2F%2Fconsole.cloud.google.com%2Fapis%2Fcredentials%2Fconsent%3Fproject%3Dwolrdcup&followup=https%3A%2F%2Fconsole.cloud.google.com%2Fapis%2Fcredentials%2Fconsent%3Fproject%3Dwolrdcup&flowName=GlifWebSignIn&flowEntry=ServiceLogin Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud ..

Redux 리덕스는 data를 관리하는 걸 도와주는 역할을 함. 설치 방법 npm i redux Redux Store,Reducer,getState() Store redux의 Store는 데이터를 저장하는 곳을 의미합니다. Store을 생성하는 방법은 createStore(reducer) 입니다. const countStore = createStore(countModifier); Reducer CreateStore는 reducer을 요구합니다. 사용방법은 const countModifier=(data=default value, action)=>{ return data } 으로 사용할 수 있습니다. 첫번째 인자에 data 값의 default 값을 지정해주어야 합니다. 그렇지 않으면 undefined 가 나..

문제점 페이지 1과 페이지 2의 데이터를 합치려고 하였으나 ...Spread Operator (전개연산자) 를 사용하였을 때 20개의 값밖에 나오지 않았다. 이유는 오브젝트 안에 오브젝트를 전개하려고 하여서인지 정확히는 잘 모르겠다. const newPages123 = [{ ...page1.data?.results, ...page2.data?.results }]; 해결 방법 const newPages: IMovie[] = []; console.log(newPages); page1.data?.results.map((item) => newPages.push(item)); page2.data?.results.map((item) => newPages.push(item)); 20개의 배열안에 20개의 오브젝트가 ..

Array.from 똑같은 오브젝트 2개를 합쳐야하는데 0~19까지의 결과물이 같아 오브젝트를 합쳐도 결과값이 40개가 아닌 20개만 나오게 되었습니다. 이러한 일을 피하기 위해 2번째 오브젝트를 20~39의 이름으로 새롭게 오브젝트를 만들어 합치려고 하였으나 배열 [20,21,22,23,24 ... 39] 까지 손으로 코딩하기 너무 비효율적인 것 같고 좋은 방법이 아닌 것 같아 배열을 원하는 숫자에서 1씩 계속 늘려나가는 방법을 찾았습니다. const newPage2 = Array.from({ length: 20 }, (v, i) => i + 1); Array.from 을 사용하였습니다. const newPage2 = Array.from({ length: 20 }, (v, i) => i + 20); 이..

forEach function forEach(predicate, thisArg) { // 임의로 작성된 forEach 작동원리 for (let i = 0; i < a.length; i++) { predicate(a[i], i); } } a = [10, 11, 12, 13, 14, 15]; a.forEach( function (v, i) { console.log(v, i, this); }, [1, 2] ); 출력 및 결론 forEach는 for 문 대신 사용하는 정도이다. map function map(predicate, thisArg) { //임의로 작성된 map 작동 원리 let list = []; for (let i = 0; i < a.length; i++) { list.push(predicate(a..

HTML 1 2 3 4 5 HTML 에서는 슬라이더를 보여줄 5가지의 개체들과 화살표를 추가했습니다 CSS body{ border:0px; padding:0px; margin: 0px; } .slider{ display: flex; flex-direction: column; align-items: center; justify-content: center; } .slider-item{ height: 400px; width: 100%; text-align: center; font: 800; font-size: 40px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans'..