gaori

단어입력은 되지만 한 사람이 여러번 입력이 가능하고 중복단어가 되는 문제가 있었습니다 이 기능을 추가하기 위해 데이터 베이스가 있으면 좋지만 그럼 너무 커지기 때문에 오로지 서버에서만 데이터를 관리하도록 하겠습니다 계속 진행을 하다보니 클라이언트에서 socket.id가 메세지를 보낼때 마다 바뀌는 문제를 발견해서 처음 접속을 했을때만 소켓아이디를 사용하도록 하겠습니다 중복방지 중복을 방지하는 것을 쉽게 가능합니다 App.js에서 word 를 담는 list가 있었는데 onValid 함수 안에 if (checkedWord === word) { if (list.find((w) => w === wordInput)) { alert("중복단어입니다"); return; } } 인풋 함수에서 배열.find 함수를 써서..

이번에 추가할 내용을 server.js랑 App.js를 나눠서 정리해보면 server.js Map → mdn const userSocketIdMap = new Map(); const wordMap = new Map(); 배열말고 map을 사용해서 데이터를 저장해줄겁니다 데이터베이스에다가 하면 더 편하고 쉬울텐데 너무 커질까바 서버에서만 데이터 저장합니다 socket io.on("connection", (socket) => { socket.on("join", (userId) => { if (userSocketIdMap.size === 0) { userSocketIdMap.set("user1", userId); io.emit("join", `hi user1 ${userId}`); } else { userSo..

계획 코로나 시국에 친구를 자주 만나지 못해서 엄청 간단한 초성게임을 하고 싶다는 생각을 해서 계획하게 되었습니다 javascript만으로도 되지만 react를 배우는 겸 react로 진행하겠습니다 전체적인 구성 CHOSUNG-GAME ├─ .gitignore ├─ node_modules/ ├─ public/ ├─ server/ -서버 └─ index.js ├─ src/ ├─ components/ └─ . . . ├─ utilities/ -초성 검사, 랜덤초성만들기 .. ├─ styles/ └─index.tsx ├─ package.json └─ tsconfig.json 1. 서버에서 react build를 해서 나온 정적인 index.html 파일을 socket.io를 쓸수있게 해서 서버를 구동합니다 들..

전에 디자인 했던 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를 쓰는 이유..