저번에 로컬 DB와 연동하여 로그인과 회원가입을 구현했었다. 당시 로그인을 구현할 때, 미들웨어 passport 를 통해서 로그인을 시도한 사람이 인증된 사람인지를 검사했었다. 이 외에도 passport 의 편리한 점은 여러 소셜 로그인의 인증 절차를 지원해준다는 점에 있다. 사실 다른 사이트에서 로그인을 진행할 때 소셜로그인(카카오, 구글 등)이 있으면 회원가입을 하지 않아도 되니 편리함을 느끼게 된다. 이번에는 쇼설로그인 중 구글 로그인을 구현해보고, 이를 통해 passport 의 인증 과정에 대해서 학습해보겠다. 로그인 시 기존 DB(User) 내 소셜 아이디가 저장되어야 한다 소셜 로그인을 구현하기 전 이미 난 로컬 로그인 과정을 구현하였다. 로컬 로그인 과정을 진행할 때 쿠키에 의한 세션 id ..
리엑트를 사용하기만 했지... 프로젝트를 진행하면서 가장 많이 사용한 라이브러리(요새는 거진 프레임워크라 해도 될..)는 리엑트이다. 많이 사용하는 만큼 항상 사용하는 hook 과 패턴에 의존하는 편이 있어서 좀 더 리엑트에 대해 공부를 하고자, 다시 공식문서를 참고하며 여럿 유명하신 개발자분들의 의견들을 참고하고 있다. (감사합니다!) 그저 당연하게 사용해왔던 라이브러리의 동작 원리에 대해서 할 수 있는만큼 알아보는것이 좋겠다 생각이 들어서, 검색과 강의를 참조하여 아주 간략하게 리엑트를 구현해보았다. 구현하는 과정과 이를 통해 리엑트에서 제안하는 규칙에 대해서 다뤄보도록 하자. 이 포스팅은 김민태: React로 구현하는 아키텍쳐와 리스크 관리법을 참고하였습니다. 간략하게 기본 셋팅 자바스크립트로 구현..
개인 프로젝트를 진행하면서 공부한 내용을 포스팅하기에, 어느부분은 정확하지 않을 수 있습니다.. 예전에 기본 셋팅을 마무리 하고, Login 페이지를 설계 및 구현하기 위해 고려해야 할 부분들에 대해서 생각해보았다. 기본적으로 회원가입을 통해서 가입이 가능해야 한다. 로그인이 되었다면, 로그인 페이지로는 이동이 불가능해야하며, 반대로 로그인되지 않았다면 메인페이지로 이동이 되지 말아야 한다. 아이디를 분실하였다면 그 아이디를 찾을 수 있어야 한다. 패스워드를 분실할 경우, 인증 절차를 통해 새로운 비밀번호 생성이 가능하여야 한다. 우리가 주로 사용하는 구글이나 카카오 중 한 군데를 선택하여 로그인을 구현하여야 한다. 고려할 부분에 대해 한번에 구현하지는 못하겠지만, 우선적으로 기본적인 회원가입과 로그인,..
mysql workbench 에서 테이블을 확인하려고 백엔드 서버를 npm run dev 를 실행하였을 때, 오류가 발생하였다. 되던게 왜 갑자기 안될까 하다가, 문득 저번에 우분투에서 발생한 오류 고치려다가 되려 애먼 내 맥북의 mysql plugin 을 초기화 했던 기억이 났다. 물론 이것때문인지는 잘 모르겠다만, 조작한 게 이것뿐이니 아마 이것때문이 아닐 까 싶었다. 무엇이 되었던 오류 메세지를 잘 살펴보자 일단은 오류메세지를 살펴보니 mysql.infoschema@localhost 로 정의된(지정된) 사용자가 존재하지 않는다는 말이었다. 사용자가 존재하지 않는것이니 우선 mysql 에서 user 를 살펴보아야 할 것 같다. mysql 을 실행하고 use mysql select user, host ..
... Failed! error: SET PASSWORD has no significance for user 'root'@'localhost' as the authentication method used doesn't store authentication data in the MySQL server. Please consider using ALTER USER instead if you want to change authentication parameters. 우분투에 mysql 을 설치하는 과정에서, mysql_secure_installation 과정에서 새로운 비밀번호를 설정할 때 위와같은 오류가 발생하였다. root 권한으로 비밀번호를 설정하라는 것 같다. (애초에 비밀번호 설정을 못해 들어가질 못하..
서버와 통신을 하다 보면, 누구나 한번쯤은 보게 되는 에러메세지가 있다. 빨간 글씨가 가득해서 당황하게 만드는 문구이지만, 사실 이 문구는 이러한 오류를 해결하는것에 대한 해결책을 얘기해주고 있는 메세지라고 보면 된다. 이러한 메세지를 해석하기 위해서는 몇가지 선수적으로 알고 있어야 하는 지식들이 있다. Origin 이란 Origin 을 해석해보면 출처라는 단어가 나온다. 출처.. 마치 어떠한 데이터가 전송이 될 때 이 데이터는 어디의 출처에서 보내지는 것입니다 라고 하면 출처라는 단어가 조금 와닿을 듯 하다. 브라우저, 프론트엔드 서버, 백엔드 서버 모두 이러한 출처를 가지고 있고, 출처를 확인할 수 있는 방법 중 하나는 실제 사이트의 URL 부분을 확인해보면 가능하다. URL 의 구성은 아래 예시 처..
예전부터 궁금했던 부분인데, 알고리즘 문제를 풀이하면서 이용하게 되어 그런김에 한번 포스팅해보고자 한다. 그리구 앞으로도 좀 문제들을 풀다가 배운 내용이 있으면, 배운 정도에 한해서 블로그 포스팅을 해보는게 좋겠다 싶어서 다른 내용들도 곧 포스팅 해보겠다. Map은 객체와 다른가? 알고리즘 문제를 풀다보면 시간복잡도를 신경쓰지 않을 수가 없다. 그리고 시간복잡도가 가장 민감하게 다뤄지는것은 결국 반복업무인데, 예를 들어서 배열 [1, 2, 3, 4, 5] 에서 1을 찾고 싶을 때, 가장 배열 앞에 존재하기 때문에, 하나를 찾고 바로 반복문을 나오게 된다면(break) 시간복잡도는 O(1) 이겠지만, 5를 찾는 경우 처음부터 끝까지 검색을 해야하기에, 배열의 길이 n 만큼의 시간복잡도 O(n) 이 나오게 ..
Memoization : '이미 계산해 놓은 값을 메모리상에 저장해놓고 필요시 다시 재사용하는 기법' 이전에 (시간이 좀 흘렀지만..) 컴포넌트를 최적화 하는 과정에서, 전달하는 props 의 변화가 없을 경우 다시 렌더링 되는 것을 막아주는 기법으로 리엑트의 메모이제이션을 이용한다고 언급한적이 있고, 그에 대한 방법으로 React.memo 에 대해서 포스팅 하였다. 당시 예시를 통해서도 설명하였겠지만, props 로 함수 객체가 전달이 되었을 때는, 그 함수에 변화가 없더라도 매번 랜더링 시 새로운 객체로 생성되어 전달됨을 알 수 있었고, 그에 따라 React.memo 가 제대로 작동하지 않음을 알 수 있었다. 그 당시 같이 활용해 주었던 hooks 이 useCallback 이었는데, 이에 대해서 좀 ..
