공부를 끄적끄적 공부를 끄적끄적

이전 포스팅을 통해 프로젝트를 생성하고 기본 레이아웃을 구성하였습니다. 이번 포스팅에서는 React Route를 이용하여 Route를 설정하겠습니다. 1. 패키지 설치 및 디렉토리 생성 npm install react-router-dom yarn add react-router-dom 1) 폴더 생성 - /src/routes 2) 파일 생성 - /src/routes/index.js : 라우트에 필요한 모든 컴포넌트를 한 파일로 관리 - /src/routes/router.js : 실제 라우트 설정 파일 1) index.js 1 2 export { default as home } from '../components/home'; export { default as about } from '../component..

기존에 만들던 리액트 블로그 프로젝트를 이어받아 나만의 홈페이지를 만드는 프로젝트를 시작하겠습니다. 그 사이에 리액트와 각 라이브러리가 많이 업데이트 되었고, 티스토리 또한 많이 변경되어 새로 시작합니다. 기본 디자인으로는 Ant Design과 Styled Components를 사용할 예정입니다. 포스팅은 주기적으로 업데이트 하겠습니다. 감사합니다. 1. Project 만들기 & Package 설치 - create-react-app을 사용하여 프로젝트를 만들고 필요한 package를 설치합니다. 1) create-react-app my-home(프로젝트 이름) 2) styled-components 3) ant-design 4) react-router-dom 5) 나머지 패키지는 작업하면서 설치 2. 불필..

-JAVA-1) 객체지향 프로그래밍(OOP)- 어떤 데이터와 그 데이터에 관련되는 동작을 변수와 메소드로 정의하여 이를 객체라 칭하고 이러한 객체들의 상호작용을 통해 프로그램이 동작하는 것 2) JVM- 자바를 OS에 상관없이 동작하도록 해주며, 가비지 컬렉터를 이용하여 메모리를 자동으로 관리해줌 3) 가비지 컬렉터- 자바에서는 사용자가 직접 메모리를 관리하지 않고 가비지 컬렉션을 통해 자동으로 메모리를 관리해줌- 자바 메모리영역은 클래스, 스택, 힙영역으로 구성되어 있음- 그 중에서 new()와 같은 동적 할당으로 객체가 생기면 힙 영역에 저장이 되는데 가비지 컬렉터는 힙 영역을 관리함- 객체가 생성되고 사용된 다음 더 이상 사용되지 않으면 가비지 컬렉터가 모니터링 하고 있다가 메모리를 해제시킴- Yo..

1. pivot값이 처음 값인 경우 let arr = [1,4,5,2,3,6]; function Quick(arr) { const len = arr.length; if(len == 0) return []; let left = []; let right = []; const pivot = arr[0]; for(let i=1; i

React로 블로그 만들기 #10 - 로그인 구현(7) 프론트엔드 연동 - 1. ApolloClient- 앞서 만든 백엔드(GraphqQL, MongoDB)와 프론트엔드(React)를 연동하기 위해 ApolloClient를 사용함.- 간단하게 백엔드 uri만 적으면 클라이언트를 자동으로 생성해준다.- 패키지 설치 : yarn add react-apollo apollo-boost- 참조 : http://www.apollographql.com/docs/react/ 1) src/apollo.js- apolloclient를 생성한 뒤, now를 통해 배포된 백엔드 주소를 입력해줌. import ApolloClient from 'apollo-boost'; const client = new ApolloClient(..

now.sh가 2.0 버전으로 업데이트 된 후 배포하는 방식이 바뀜 기존 1.0버전에서는 now 명령어 하나를 통해 별다른 설정없이 알아서 배포해줬지만... 그런데 알 수 없는 오류로 계속 배포가 되지 않았음. 별에 별거 다 해봤지만 안됐는데 드디어 해결 방법을 찾았음 오류 해결 방법 1) 기존 now 제거2) 새로운 now 설치3) brew cask reinstall now4) yarn upgrade5) yarn cache clean 2.0버전에서는 now.json 파일 생성 후 버전, 타입 등을 설정할 수 있음. 더불어 now를 하면 자동으로 주소를 복붙해줌... 근데 아직도 version2 사용법 모르겠음... 고로 now.json 생성 후 version 1로 사용. { "version": 1}

React로 블로그 만들기 #9 - 로그인 구현(6) GraphQL, MongoDB - 1. GraphQL- 소셜로그인으로 받은 정보를 서버에 저장하기 위해 GraphQL과 MongoDB를 사용- 패키지 설치 : yarn add global graphql-cli- graphql create blogql(프로젝트 이름) 후 node-minimal 선택- src에 resolver.js 와 typeDefs.js 생성 1) src/index.js- graphql-yoga를 이용하여 graphql server를 생성하고 연결한다.import { GraphQLServer } from 'graphql-yoga';import resolvers from './resolvers';import typeDefs from '...

React로 블로그 만들기 #8 - 로그인 구현(5) 새로고침 후 로그인 유지 - 1. 로그인 유지- 로그인을 한다고 해도 자동으로 로그인 상태가 유지되지 않는다. - 브라우저를 닫거나 새로고침할 시 스토어 값이 초기화되므로 페이지에 다시 들어왔을 때 로그인을 유지하는 로직이 필요하다.- TodoApp에서는 쿠키를 이용하여 로그인을 유지하였지만, 블로그 앱에서는 HTML5에서 제공하는Web Storage API를 사용한다.- 또한 로그아웃 시 소셜로그인으로 발급받은 토큰을 제거하도록 로직을 추가해야함. 2. localStorage vs sessionStorage - Key와 Value 값으로 저장.- 문자열이 아닌 객체도 저장이 가능하며 5MB까지 저장 가능함.- 쿠키와 다르게 만료기간을 지정할 수 없으..