gaori

이번에 추가할 내용을 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를 쓸수있게 해서 서버를 구동합니다 들..

미스틱 언박싱 제품 구성을 보면 왼쪽부터 hdmi 확장선(저는 쓸 일이 없어서 다시 박스에 넣었습니다) usb처럼 작은 본체 본체에 전원을 연결하는 전원선(옛날 안드로이드 5핀) 전원선과 연결하는 부분 (핸드폰 충전기 같은) 그리고 리모컨입니다 미스틱 연결 리모컨에 건전지를 껴줍니다 이제 본체에 전원선(옛날안드로이드5핀)을 껴줍니다 이렇게 연결을 다 해놓습니다 본체를 티비 hdmi에 연결을 하면 하얀불이 들어옵니다 설정 다음은 이제 화면에서 여러가지 설정을 하는데 언어설정은 맨아래로 내려보면 한국어있습니다 다음은 사는곳 설정인데 한국이 없어서 아무거나 선택하면 됩니다 안드로이드 폰이 있다면 쉽게 와이파이에 연결할수있지만 없다면 직접 연결하면 됩니다 마지막으로 약관동의와 위치전송, 사용내역 전송이 있는데 ..

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

Repl.it 사용하고 있는 컴퓨터 용량에 부담없이 언어를 사용할 수 있는 사이트라고 하면 될까요? 독학이든 교육을 받는 학생이든 처음 공부하는 분들까지 심지어 현재 개발자분들에게도 유용하게 쓰일 수 있을것 같습니다 The world's leading online coding platform Powerful and simple online compiler, IDE, interpreter, and REPL. Code, compile, and run code in 50+ programming languages: Clojure, Haskell, Kotlin (beta), QBasic, Forth, LOLCODE, BrainF, Emoticon, Bloop, Unlambda, JavaScript, CoffeeS..