CodeTech (70) 썸네일형 리스트형 GraphQL- 3 [서버 생성 (nodemon, babel-node,Schema, Resolver, Get, Post, Playground ] nodemon - 코드를 수정하고 서버를 재시작 하는 과정이 귀찮다면 이 패키지를 사용하면 된다. - 이후 코드를 조금이라도 수정하면 알아서 서버를 재시작 해준다. yarn global add nodemon scripts를 추가해주고 yarn start index.js 파일에 뭔가를 적고 수정이 된다면 해당 파일을 저장하는 순간 이렇게 서버가 재실행된다. (react app에서 도 그랬던거 같은데..?) 리액트 앱에서도 nodemon은 없지만 변경시 재시작 되는 react-scripts start 명령어가 nodemon 대신 들어가 있는 것을 확인 할수 있다. babel-node - 일반적인 node.js에서 eslint가 적용되지 않을 때 (예: require대신 import를 적용해서 하고 싶을때) .. GraphQL - 2 [Over-fetching, Under-fetching, Query] Over-fetching - 클라이언트가 데이터를 요구할 때 원하는 영역의 요구보다 훨씬더 큰 영역의 데이터를 받아와서 가공하는 형식 - console.log 쳐가지고 해당 클래스를 구분해서 써야함. 굉장히 비효율적임 Under-fetching - 예를 들어 앱을 실행할 때 로그인을 하려면 사용자명, 비밀번호, 프로필등을 데이터 베이스에서 받아와야 하는데 하나의 기능 (로그인)을 하려고 3가지의 요청을 해야한다는 것이다. 이것을 한 요청을 묶어서 할수 있음에도 3가지 요청을 해서 하나의 기능을 만족시키는 것이 under-fetching이다. Query - 데이터 베이스에 데이터를 요청하는 문장이다. - 즉, 클라이언트가 데이터를 받을 때만 사용가능하다. query { feed: [ { comments l.. GraphQL - 1 [yarn init, graphql-yoga] GraphQL(gql) - 서버사이드 언어로서 백엔드와 클라이언트간의 소통을 원활하게 해준다. - Rest API의 상위 호환이라고 봐도 된다. - 즉, 기존의 API와 graphql을 연결해서 클라이언트와 graphql로 통신하는 것인데, 클라이언트와 서버를 연결시켜서 사용하면서 불편했던 점들을 개선해 놓은 것이 바로 graphql이라서 중간 다리 역할을 놓아 불편했던 점을 완화시키는 작업을 한다. (기존에는 이러한 서버사이드를 RestAPI로 사용하였는데 이 REST API를 grapql로 wrapping해서 사용하는 것도 가능하다) - SQL(Structed Query Language) 과 같이 쿼리 언어이다. - 하지만 언어 구조적으로 큰 차이가 있다. SQL은 백엔드에서 데이터베이스에 저장된 데.. React - [naming] react에서 여러파일을 만들면 반드시 네이밍을 하게 된다. 네이밍에 따라서 여러파일들의 용도와 쓰임 그리고 속성까지도 추측이 가능하고 헷갈리지 않기 때문에 네이밍은 매우 중요하다. React 기준이므로 참고만한다. - 보통 디렉토리 파일명은 소문자로 한다. - CamelCase로 작명한다. - 디렉토리자체가 react 컴포넌트가 바로들어 있는 폴더라면 폴더이름을 대문자로 시작할 것, - 직접적으로 바로 react컴포넌트가 들어있지 않은 간접적인 관계의 폴더라면 소문자 단수로 표기 - loginSection2 같은 불분명한 의미는 짓지 않는다. 명확한 이름으로 표시를 한다. 어쩔수 없이 길어져도 괜찮다. components - 재사용 가능한 컴포넌트 - 다양한 곳에 사용가능한 범용가능한 컴포넌트 comp.. React - [onclick - history] history - 리액트에서 페이지를 이동할 수 있는 이유는 react-router-dom을 이용하여 페이지 기록을 알 수 있기 때문이다. - 리액트에서 Router는 path를 이용해서 라우팅할 컴포넌트를 지정해주는데 이때 라우터는 해당 컴포넌트에게 props로 history를 넘겨준다. 이러한 history는 여러 객체를 담고 있는데 {length: 2, action: "PUSH", location: {…}, createHref: ƒ, push: ƒ, …} action: "PUSH" block: ƒ block(prompt) createHref: ƒ createHref(location) go: ƒ go(n) goBack: ƒ goBack() goForward: ƒ goForward() length: 2.. React Hooks - 1 [useState, useEffect, useRef] React Hook ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org hook이라는 개념이 나온이유 react는 컴포넌트를 재사용하려면 사용자가 어느정도까지 재사용을 할 것인지, 어느 부분을 재사용하는지 명시해 놓지 않는다. 따라서 여러 패턴이 필요하며 패턴을 사용할 때마다 컴포넌트를 재구성하는 것이 필요하고 이렇게 변경된 코드들은 같은 일을 하지만 다른 모습을 하고 있기에 코드를 추적하기어렵다. 특히나 컴포넌트의 생명주기와 관련되어서는 상태변화에 따라서 해당 함수가 만들어진 목적과 다르게 사용되는 경우가 매우 많다. 예) componentDi.. ReactNative - 3 [배포] Expo 배포 ReactNative를 배포하는 것은 expo에서 할수도 있고 app store나 andriod market에서 할수도 있다. 여기서는 expo에서 배포하는 것만 언급하고 추후 app store에 올리는 방법을 설명하겠다. 정말 매우 간단한데, expo 에 회원가입을 하고 아이디가 있으면 위의 보라색 버튼만 누르면 알아서 배포가 된다. 이후에 다른사람들이 이앱을 써보려면 expo 홈페이지에 들어가서 위 사이트를 보면 왼쪽아래 Scan to open 이라는 곳이 있다. 이 코드를 휴대폰 카메라로 스캔하면 해당앱이 열린다. 물론 휴대폰에는 expo가 깔려 있어야 한다. expo.io/@doodream/projects/NativeProject NativeProject on Expo 현재 날씨와 .. ReactNative - 2 [View] Text - 이전까지는 이러한 것들을 써왔다면 React Native에서는를 사용한다. 마찬가지로 View - 이러한 것들은 안에 다 들어와야한다. 브릿지 규칙 때문이다. React Native에서는 css 규칙을 적용할수도 있는데 이는 stylesheet api를 구현해놨기 때문이다. 몇몇 규칙은 적용이 안되지만 대부분은 적용이된다. 안되는 규칙들 같은 경우에는 실제로 해보고 에러메세지를 참고하자 px은 안되서 %로 해보라고 메세지가 뜬다. 그렇게 고쳐보면 적용이 된다. 이런식이다. react styelsheet api에서만 특이하게 적용되는 규칙들을 보면 1 .flexDirection : column - 기본 값이 column으로 들어간다. - 가로로 하고 싶으면 row로 해줘야한다. 원래 css에서.. 이전 1 2 3 4 5 6 ··· 9 다음
