본문 바로가기

전체 글

 (188)
Node.js - 1 [설치 (express)] Node js - 기존의 javaScript는 웹 브라우저에서만 사용했다면 node.js가 나옴으로서 JAVA, python등과 같이 서버사이드에서도 사용가능하게 되었다. Express JS - node js를 이용해서 더 쉽게 무언가를 만들어내는 framework이다. node js는 React 설치 부분에 설치 과정이 나와있기 때문에 생략하겠습니다. node js 설치 자신이 만들고 싶은 부분에 package를 만들기 위해서 폴더를 만들고 npm init으로 package를 만들겠습니다. 폴더를 만들고 npm init을 하면 version이 깜빡이는데 엔터를 쳐주면서 기본값을 넣다가 author부분에 자신의 이름을 넣어주고 모조리 yes를 눌러주며 기본 package를 생성합니다. 이제 자신이 원하는..
React - [컨디셔널 렌더링, Router의 url로 변수 넘기기, React Hook Form, Context] 컨디셔널 렌더링 - 조건부 렌더링이라고도 하며 삼항연산자, if else 구문등으로 특정 조건을 만족하면 컨포넌트의 렌더링을 다르게 구현하는 방식이다. - 페이지와 코드를 줄이며 일부분만 렌더링 함으로서 페이지를 꾸밀수 있는 SPA(Single Page Application)을 지향한다. 이러한 삼항 연산자로 조건부 렌더링을 통해 다른 화면을 노출시킬수 있다. Router의 url로 변수 넘기기 - Router의 url에 key를 넣고 Link to = 'url'로 변수를 넘기면 해당 Router로 연결되는 컴포넌트에 해당 변수가 넘어가서 기능하게 된다. index.js에서 해당 url에 :page라는 key를 붙여놓고 HeaderLogin.js 컴포넌트에서 Link to로 url을 연결할 때 key(:..
크리스마스 여행 10시 연세대학교 무학학사 접선 -> 이동시간 1시간 인천 차이나 타운 태화원 - 12:00 m.blog.naver.com/PostView.nhn?blogId=turnup1991&logNo=221192845570&proxyReferer=https:%2F%2Fwww.google.com%2F [인천 차이나타운 맛집] 태화원 / 메뉴 가격 / 사천짜장 / 볶음밥 [인천 차이나타운 맛집] 태화원 / 메뉴 가격 / 사천짜장 / 볶음밥전화 032-766-8688 영업 매일 11:00 - 21:... blog.naver.com 차이나타운 돌아다니면서 사진 찍다가 태화원 들어가서 동파육!! 월미도 rumbing.tistory.com/717 인천 월미도 나들이, 서울에서 가까운 바다 여행 인천 월미도 여행, 월미도 나들..
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..

티스토리툴바