1. react-router-dom더보기이번 영상에서는 react-router-dom 사용법에 대해 배울거야 곧 알게 되겠지만, 아주, 아주, 엄청, 쉬울거야 알겠지? react-router-dom을 사용하기 위해서는 우선 몇가지를 import 해야 해 튜토리얼에서 요것들을 복사해서 여기에 붙여넣고 Link는 지워줘. 나중에 다룰거야, 알겠지? BrowserRouter를 import 해 올거야 라우터에는 두 가지 종류가 있는데 하나는 Hash Router고 다른 하나는 Browser Router야 우린 둘 다 살펴볼거니까 걱정하지 말고. 알겠지? 여기에 Router 컴포넌트를 만들어줄게 정말 간단하지 누군가 만들어 놓은 컴포넌트를 그냥 사용하기만 하면 되는 거야. 아주 쉽지 그 다음에는 Switch를 사..

1. To Do List (1)더보기이번 섹션에서는 할 수 있는 한 최대한 많이 연습을 하고 최대한 많은 것들을 만들어 볼거야 우린 State, Effect, props를 연습하면서 우리가 지금까지 배운 모든 것들을 한 번 적용해볼거야 자, 그럼 우선 아주 매우 엄청 간단한 to-do list를 만드는 걸로 시작해보자. 알겠지? 먼저 input을 만들거야 (위와 같이 작성) 아주 간단하지? 이제 한 번 더 연습해볼텐데 input 값을 어떻게 컨트롤 할 수 있을까? 우리가 가장 먼저 해야 하는 것은 useState()를 쓰는 거야 import 도 됐고 기본값으로는 빈 String 을 해줄 거야 그럼 이제 value 를 받아와야 하니까 toDo 랑 그걸 수정하는 함수를 setToDo라고 부를게 이 포지션을 ..

1. Problem더보기React로 작업할 때 마지막으로 가장 중요한 걸 공부할 거야. 우리는 State얘기도 했고, props얘기도 했으니까 이제는 마지막 걸 배워볼 거야. 우리가 이번 섹션에서 배울 게 왜 필요한지 이해하기 위해서는, 먼저 문제를 하나 정의해보자. 좋아, 문제를 정의하기 위해서 ReactJS가 어떻게 작동했는지 상기시켜보자구 괜찮지? 저번에 했던 것처럼 counter를 만들어줄게. useState를 써줄거고. 그걸 react.js에서 import 하면 되지 보다시피 우리가 create react app을 사용하기 떄문에 여기다가 react라고 적어줄 필요는 없어. 우리가 react 점 뭐라고 쓰지 않고 그냥 useState만 import해줄 수 있어. 우린 useState가 반환값으로..

1. State Pracitce (2)const App = () => { const [amount, setAmount] = React.useState(); const [flipped, setFlipped] = React.useState(false); const onChange = (event) => { setAmount(event.target.value); }; const reset = () => setAmount(""); const onFlip = () => { reset(); setFlipped((current) => !current); }; return ( ..

1. Understanding State더보기좋아 모두들, 이번 강의에서는 React.js의 state에 대해 배워볼 거야state는 기본적으로 데이터가 저장되는 곳이야우리가 지금 바닐라 JS로 진행중인 예제를 완성하려면우린 지금 counter를 증가시키고, 그걸 UI에 디스플레이하고 있잖아그걸 state로 만들 수 있어, counter 말이야바뀌는 데이터들 말이야지금부터 배워볼 부분이야어떻게 하면 React.js 어플에 값이 바뀔 데이터를 담아줄수 있을까지난 강의에서는 React Element를 생성하는 방법에 대해 배웠지그리고 나서 좀더 쉬운방법과 JSX에 대해 배웠지거의 HTML과 같지만 편리한 기능들 마저 가지고있는 녀석 말이야또 만약에 React Element를 함수 내에 담으면원하는 만큼 사용..

1. Our First React Element 더보기좋아, 여러분. 이번 강의에서는 React JS element를 어떻게 생성하는지 설명해줄거야 기억해, 우리의 목표는 여기 있는 코드를 React JS로 다시 구현하는거야 자, React JS의 규칙 중 하나는 HTML을 이 페이지에 직접 작성하지 않는다는 거야 그렇게 안할거야 그 대신에, 우리는 Javascript 코드를 사용할 거야 span이든 버튼이든 무엇이든 만들기 위해서 말이지 HTML 코드를 직접 작성하지 않을거야 그 대신, Javascript와 React JS를 이용하여 element를 생성할거야 이건 정말 정말 유용한데 나중에 왜 그런지 알게 될거야 자 이번 비디오에서는, React JS로 element를 생성하는 어려운 방법을 먼저 보..

https://github.com/Daniel-Jeon/project1/commit/7b288ce88bae658e4143189d06b821b1b43494a7export const startKakaoLogin = (req, res) => { const baseUrl = "https://kauth.kakao.com/oauth/authorize"; const config = { client_id: process.env.KAKAO_API_KEY, redirect_uri: process.env.KAKAO_REDIRECT_URI, response_type: "code", }; const parameters = new URLSearchParams(config).toString(); retur..

다시 이 망할 흐름을 살펴볼때가 됐다.API에 나와있듯 사용자의 GET https://github.com/login/oauth/authorize 요청이 필요하므로 버튼을 해당 링크로 이동하게 한다.근데 이대로만 보내면 404가 에러가 뜨는데 url 뒤에 파라미터를 붙여서 보내야 한다.client_id는 필수고 그외 본인이 필요한 파라미터들을 추가하여 보낸다.이 부분을 효율적으로 관리하기위해 라우터와 컨트롤러에 따로 startGithubLogin을 만들어 관리한다.이번 프로젝트에선 메일 주소만 필요하다 생각하여 scope에는 user:email만 추가하였다.URLSearchParams를 사용하여 파라미터를 관리하여 gthub로 유저를 효율적으로 보낸다.유저가 수락하게 되면 Authorization call..

세션은 웹에서 유지되는 정보인데 이걸 통해 유저들의 로그인 관리를 위해 주로 사용된다express-session 모듈을 사용하여 세션 미들웨어를 만들게 되면 이제 페이지를 이동할 때마다 쿠키에 세션이 담겨져 있는걸 관리자 도구에서 확인할 수 있다.간단하게 미들웨어를 만들어 req 내부를 볼수 있는데 중간에 세션이나 세션id도 보이고 하단에 cookie도 볼수있다.초기에는 resave와 saveUninitialized를 true로 주고 모든 사용자의 세션을 생성했지만 그렇게 되면 부하가 발생할 수 있으므로 로그인한 유저만 세션이 생성될 수 있도록 false로 바꾸고 postLogin에서 아이디와 비번체크가 되고나면 세션 객체에 프로퍼티를 추가하여 객체가 변경되면 세션이 생성되록 했다.하지만 이렇게하면 세션..

조인 > 로그인을 진행하면서 했던 것들기본적으로 조인에 필요한 정보가 무엇인지 고려해야함계정명을 이메일로 하고 비밀번호 확인하고 닉네임까지이메일과 닉네임은 중복되지 않아야 하고비밀번호와 닉네임은 submit 되기 전에 이벤트로 구현을 해야하지만 현재는 백엔드에서 확인하고 있음유저 보안을 위해 비밀번호를 해싱화했고 bcrypt라는 라이브러리 사용또한 계정이 생성되기전에 해싱되야 하므로 mongoose의 미들웨어를 사용했음그 미들웨어에 save 훅을 사용했으며 document 미들웨어라서 this를 통해 userSchema의 비밀번호를 대상으로 삼을 수 있음이전에 공부했듯 비밀번호가 업데이트 될때 해싱으로 인한 문제가 발생할 수 있다는걸 기억해야 함로그인을 할때 compare를 사용하지 않고 입력받은 비밀번..