오늘 한일 로그인/ 로그아웃/ 회원가입 API 들을 연결 시켜 주었다. 로그인 부분에서 많은 시간을 보내었다. 각 페이지 마다 로그인이 되면 해당 유저의 이름을 보여주려고 했다. 그래서 App.js 에서 값을 내려주는게 좋다고 생각하여 App.js 에서 login 함수를 만들어 내려주었다. 하지만 email을 작성할때 계속 페이지가 새로 render가 됐다. App.js 의 state 값이 변하는 것 이기 때문에 App.js 자체가 render가 되면서 페이지가 계속해서 render가 되어 버리는것 같았다. 그래서 token 을 사용하기로 하였다. singin.js 에서 로그인을 하고 받은 token로 App.js에서 해당 유저의 name 값을 받아와 뿌려주는 방법을 사용해보기로 하였다. 그런데 이 to..

오늘한일 프론트 디렉토리 구조를 대략적으로 만들어 보았다. 기본적인 Route를 걸어주고 UI 라이브러리로 무엇을 사용할지 고민했다. 사용해본 경험이 있는 엔트 디자인을 써볼까 했는데 엔트 디자인은 나의 css실력이 부족해서 인지 기본 디자인에서 변경을 하기가 어렵고 뭔가 유연하지 못하다는 느낌을 많이 받았다. 머테리얼UI, 시멘틱UI 등을 고민하다가 bootstrap을 사용해 보기로 하였다. bootstrap을 적용하면 자동으로 반응형 웹으로 구현이 되었다. 그리고 reactstrap이라는 라이브러리가 있는데 Bootstrap 컴포넌트별로 React 컴포넌트가 구현되어 더욱 React스러운 개발이 가능하다고 한다. reactstrap 설치/기본 설정 설치 방법 npm install --save boot..

오늘 한일 API에서 container와 card를 한 번에 불러오도록 만들어야 했다. sequelize 쿼리문에서 include를 사용하여 join을 시킬 수 있었다. containers.findAll({ include: [ { model: cards, attributes: ['cd_name'] } ] }); cards 부분의 컨테이너 이동에 대한 API 가 조금 부족한 것 같다. front 부분을 만들어서 직접 실행시켜 보면서 수정을 해야 될 것 같다. 프런트 플로우를 만들었다. overflow라는 툴을 사용해 보았다. 이 툴을 처음 사용해 보았는데 내가 항상 찾아 헤매던 것이었다. 어떻게 구현을 해야 될지 의문이 있는 부분이 있어 검색을 통해 알아보아야 할 것 같다.

오늘 한일 Rest API를 나는 endpoint 만 보고도 이 API가 어떤 역할을 하는지 알 수 있게 만드는 것이라고 생각하고 있었다. users/add , users/delete 이런 식으로 명시하면 된다고 생각했지만 이것을 잘못된 방법이였다. URI는 행위가 나타나면 안 되고 동사보다는 명사로 지정해야 한다고 한다. REST(REpresentational State Transfer)란, "웹에 존재하는 모든 자원(이미지, 동영상, DB 자원)에 고유한 URI를 부여해 활용하는 것이다. HTTP 메서드 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE 등)로 표현한다. URI는 정보의 자원을 표현해야 한다. (리소스명은 동사보다는 명사를 사용) GET – 조회 PUT..

오늘한일 JWT를 사용한 사용자 인증을 구현하였다. 1.jwt.sign jwt.sign( {email: user.dataValues.u_email}, jwtKey.secret, {expiresIn: '20m'} ) 로그인을 할 때 jwt의 sign 함수를 사용한다. sign 함수는 기본 값으로 HMAC SHA256 알고리즘을 사용한다. 첫 번째 인자 => payload 즉 내용을 작성하면 된다. 하지만 claim에 대한 정보는 암호화하지 않기 때문에 중요한 정보는 작성하지 않는 것이 좋다. 두 번째 인자 => secret key를 전달한다. 세 번째 인자 => 토큰에 대한 정보를 객체로 전달한다.(토큰 시간 등) 암호화된 토큰을 https://jwt.io/ 이 사이트에서 확인해 볼 수 있다. 토큰 값을 ..

오늘 한일 crpyto 코드의 길이가 길어 모듈화를 하려고 했지만 짧게 사용할 수 있는 방법을 찾아서 바로 적용 시켜 주었다. let Password = body.password; let salt = Math.round((new Date().valueOf() * Math.random())) + ""; let hashPassword = crypto.createHash("sha512").update(Password + salt).digest("base64") salt 값은 현재 시간에 랜덤 값을 곱해서 생성된 문자열로 지정해 주었다. salt 값이 랜덤하기 때문에 로그인시 비밀번호가 똑같은지 확인하기 위해서는 salt값을 저장할 필요가 있다. 그래서 user table에 salt 값을 저장하는 콜럼을 만들어..