gaori

전에 디자인 했던 NEVER에는 로그인에서 회원가입페이지로 이동하는 작업만이 가능합니다 이제 회원가입기능과 로그인기능을 넣겠습니다 apollo-boost에서 gql을 불러옵니다 gql은 백엔드에서 graphql로 작성한 mutation이나 query 코드를 가져오게 하는 코드입니다 import해서 불러 와도 되지만 vsc는 작성하면서 자동으로 불러와 줍니다 먼저 회원가입 코드를 불러오겠습니다 백엔드에서 만들때 회원가입을 하기위해 이메일,비밀번호,이름을 받아 생성하기 때문에 위에 방식으로 작성합니다 백엔드 코드와 비슷하면서 다릅니다 자세한 내용은 graphql에서 확인하세요 이제 저 코드를 사용하려면 useMutation을 사용합니다 query를 사용하려면 useQuery를 사용해야합니다 useMutati..

진짜 네이버로 들어가서 전체적인 부분을 확인한다 일단은 크게 로그인화면과 회원가입화면을 나눈다 전에 라우트 확인용으로 만들어둔 Auth.js를 삭제하고 Login.js 와 SignUp.js를 만든다 로그인 화면과 회원가입화면을 만들면 된다 화면이 두개로 늘어났으니 Routes.js의 구성도 바꿔줘야한다 LogOut에는 Auth.js 만 있었지만 이제 Login 과 SignUp을 넣어준다 주소는 로그인은 기본주소이고 회원가입의 주소는 signup으로 설정해 준다 다시 진짜네이버로 와서 어떤 componet가 필요한지 확인한다 로그인 화면이나 회원가입화면은 간단하게 title 과 input, button 으로 구성되어있다 만들어야 할 componet를 확인했으니 만들어준다 AuthButton.js 과 Aut..

전에 BackEnd에서 만든 회원가입과 로그인을 React로 가져오기 위해서 몇가지 설정을 해줘야 한다 설정하기 앞서 css를 초기화 하는 작업을 한다 yarn add로 패키지를 받는다 초기화하는 방법에는 많은 방법이 있지만 styled-reset 패키지 방법을 이용하면 쉽고 빠르게 할 수 있다 src에 GlobalStyles.js를 만들어서 styled-components에 createGlobalStyle과 styled-reset의 reset를 가져온다 createGlobalStyle 은 페이지의 전체적인 css를 설정할 수 있다 reset 은 css를 초기화 한다 코드를 보면 createGlobalStyle 안에 reset 을 넣은것을 볼 수있다 body에 배경색을 네이버 로그인 배경색을 넣어준다 위..

회원가입에서 create.graphql파일과 create.js 파일을 만들었다 로그인도 똑같은 형식으로 login.graphql 과 login.js 파일을 만든다 login.graphql은 회원가입과 똑같은 형식으로 한다 create.graphql를 모두 복사해서 몇개만 고쳐도 되지만 직접 써보면서 익숙해지는게 중요하다(직접) login.graphql에는 email과 password만 받는다 (로그인은 다른 사이트에서도 그렇게 하니까) 회원가입의 반환값은 참, 거짓이었지만 login은 jsonwebtoken을 반환해야 하므로 String을 반환값으로 준다 로그인 하기위해서는 모든 사이트에서 그렇듯 email(id) 이랑 password를 받아서 email(id)가 존재하는지 찾고 password가 일치하..

단순하게 로그인 화면만 하려고 했지만 로그인을 하려면 회원가입이 있어야 하니까로그인과 1+1이라고 할 수 있는 회원가입을 먼저 해본다 역시 동일 하게 그린포털사이트를 따라한다 아이디, 비밀번호,이름만 가지고 회원가입을 해본다 그린포탈사이트에는 위에 네가지 말고 핸드폰번호,성별,이메일(선택)이 더 있다 하지만 NEIGHBER는 안한다Backend 테이블 기존 User에는 id 와 name뿐 이지만 email과 password가 필요하니 넣어준다datamodel 의 형식은 prism docs에 나와있다 간단하게 설명하면 String은 문자열이고 !(느낌표)는 "필수" 라는 뜻이다 prisma 의 datamodel 말고도 graphql 모델도 만들어야 한다 그래야 서버에서 알아들으니까api 폴더 안에 mode..

Prisma2가 나와 Prisma의 데모서버는 사용할 수 없게 되었습니다 간단한 로그인화면 그냥 만들면 재미없으니까 그린포털사이트를 따라해본다 일단은 이런느낌으로 가는데 더 간단하게 만들자 이름은 NEIGHBER 기본 개발환경 yarn 아니면 npm 둘중 하나 git에 저장하려면 git 이랑 git 저장소(github,Bitbuckit...) 아이디 vsc(Visual Studio Code) - 코드편집 Frontend Setting 원하는 폴더로 이동후 npx create-react-app 으로 다운받는다 뒤에 이름은 오직 로그인만 구현해 볼것이기 때문에 대충 직독직해로 only-login npx를 안쓰려면 npm이나 yarn 으로 create-react-app을 전역으로 설치해준다 npx를 쓰는 이유..

JavaScript Class의 특징들은 다음과 같다 1. 기존 라이브러리에 class를 가져다가 쓰는경우가 대다수 이다 2. class를 사용하면 재사용이 용이하다(선언만 하면 같은걸 여러번 생성이 가능) 3. 클래스는 더 좋은 객체 처럼 생겼다 class 선언 선언은 세가지 방법이 있다 class MySelf { constructor(age, height) { this.age = age; this.height = height; } } 바로 클래스를 선언 const MySelf = class MySelf { constructor(age, height) { this.age = age; this.height = height; } } 변수에 클래스를 선언 const MySelf = class { constr..

변수는 쉽게 말해서 데이터를 나중에 쓰기 위해 컴퓨터에 a=3이라고 알려주는 것이다. c언어나 java에서는 int나 float, char... 자료형을 함께 선언하지만 JavaScript 에서는 var, const, let 으로 선언합니다. 예를 들면 c언어는 int num = 10; //숫자 char line = "C"; //문자열 이런식으로 자료형을 같이 써준다. JavaScript var num = 10; //숫자 const line = "JavaScript"; //문자열 let array = []; //배열 자바스크립트는 변수선언으로 var, const, let 이 있다 var은 예전부터 있었지만 단점때문인지 let, const 가 es2015에 새롭게 추가되었다 자바스크립트에서 자료형은 뒤에만..

영화 리뷰를 가지고 하나하나 리뷰를 명사로 추출하고 추출한 명사로 워드 클라우드를 만들었습니다 이번에는 영화 리뷰를 가지고 좀 더 리뷰를 쓸모 있게(?) 하기 위해 하나하나 리뷰를 감성사전으로 감성을 분석해 보겠습니다 데이터 준비 먼저 감성 분석을 하기 위해서는 데이터가 필요합니다 데이터는 이전에 영화리뷰를 크롤링한 데이터로 하겠습니다 R 기본으로 크롤러 만들기 데이터가 준비되면 데이터와 비교할 사전이 필요합니다 깃허브에 있는 군산대 감성사전을 쓰겠습니다 https://github.com/park1200656/KnuSentiLex 군산대 감성사전 다운로드 들어가게 되면 이런 화면이 뜨는데 저는 neg_pol_word.txt 와 pos_pol_word.txt 파일을 사용합니다 다운로드 받고 보기 좋게 ne..

이전 글에서 웹크롤링으로 가져온 텍스트 데이터를 가공해보겠습니다 그 전에 텍스트 데이터가 필요하니 이전 R 기본으로 크롤러 만들기 글을 보고 따라하면 됩니다 먼저 파일이 잘 있는지 확인을 합니당 패키지 준비 이제 R 으로 가서 필요한 library를 넣어줍니다 1 2 3 4 5 library(KoNLP) library(dplyr) library(stringr) library(RColorBrewer) library(wordcloud) cs 없다면 install.package로 다운받고 넣어줍니다 이어서 KoNLP의 사전불러오는 함수인 1 useSejongDic() cs 입력하면 몇초 후 다운로드가 됩니다 1 setwd("C:/원하는 폴더") cs 원하는 폴더를 지정해 놓아야 아래서 파일을 불러오기 쉽습니다..