fullfish의 개발자 도전기

google map에 마커 여러개 찍기 원래는 가계부에서 하나의 물건에 대한 위치만 구글 맵에서 확인이 가능했다 변경 후에는 하나의 카드(하나의 구매내역)의 지도를 확인시 해당 구매한 위치를 중심으로 띄우며 모든 구매한곳의 마커를 한번에 볼 수 있게하였다. 코딩도중 애먹은점 우선 현재 google map관련된 script는 Helmet태그로 감싸져있다 Helmet태그로 감싸지않으면 Functions are not valid as a React child 라는 에러가 뜨는데 구글링해보면 해당에러는 함수를 실행시켜주지 않았기 때문이며 router부분에서 ()를 뒤에 붙여줘서 함수실행을 시켜줘야한다고 한다 하지만 현재 구글 맵은 따로 페이지를 만든것이아닌, modal창을 사용한것이라 실행이란 개념이 없다 그래..

현재의 문제점 현재 user의 password는 Bcrypt에 의해 hashing되어져서 보관되고 있으므로 복호화가 불가능하다 그래서 user가 password를 잊어먹었을 경우에는 찾을 방법이 없다 만약에 mysql에서 password를 직접적으로 바꾼다고 하더라도 로그인시 digest와 검증하게끔 로직이 이루어져 있기에 안된다 그렇기에 많은 사이트들이 비밀번호찾기시 비밀번호를 알려주는것이 아닌 이메일로 임시 비밀번호를 발급해주거나, 새비밀번호를 생성하는것이 아닌가 싶다 해결법 nodemailer를 이용해서 임시비밀번호를 email로 보내준다 (원래 EmailJS를 쓰려고 했으나 nodemailer로 바꿈) nodemailer에 대해서 내가 쓴 글 코드 메인 코드 find: { post: async (..

환율 적용을 위해 trip 테이블에 base_currency, exchage_rate, target_currency를 넣어줌 예를들어 base_currency는 한화(원), exchage_rate는 1200, target_currency는 미화(달러)라면 10달러는 12000원이다 원형 그래프에서 몇달러를 썼고 그것이 한화로 얼마인지를 볼 수 있다.

한것 카이사르 암호화와 모노 알파베틱 암호화를 RSA와 함께 적용했다 (회원가입, 로그인, 비밀번호 변경) 내가 쓴 카이사르와 모노알파베틱 암호화 카이사르 암호(Caesar cipher) 카이사르 암호란 각 글자를 n만큼 shift시킨 간단한 치환암호 예 : 'abz'를 +1만큼 shift -> 'bca' 코드화 문자열의 각 문자를 유니코드화 -> 각 유니코드에 원하는 shift만큼 더해줌 -> 이 때 'z' 다음에는 ' fullfish.tistory.com 모노 알파베틱 암호화 (Monoalphabetic Cipher) 앞선 카이사르 암호화와 마찬가지로 치환암호 26자의 알파벳을 각기 다른 알파벳으로 치환시킴 코드화 알파벳이 오름차순된 ('abcd...') 문자열과 랜덤으로 뒤섞인 문자열을 준비해서 각..

클라이언트단에서 서버단으로 정보보낼 때 중간에 password 탈취에 대응하기위해 RSA를 적용해서 password 암호화를 해주었다 RSA에 대해 내가 쓴 글 RSA RSA란? 현재 SSL/TLS에 가장 많이 사용되는 공개키 암호화 알고리즘 전세계 대부분의 인터넷 뱅킹에서 사용 대칭키가 아닌 공개키와 개인키가 한 쌍을 이룸 공개키로 암호화한 내용은 개인키로만 fullfish.tistory.com 회원가입 흐름 클라이언트에서 email과 nickname 그리고 createKey: true(키 생성위해)를 보냄 서버에서 이메일 중복확인 중복이면 중복 에러 중복아니면 키를 생성 서버에서 첫 요청시와 그 다음 요청시에 값을 다 입력했는지 검증 db에 d,e,N저장 (email과 nickname ,d , e, ..

Bcrypt에 대해 내가 쓴 글 https://fullfish.tistory.com/123?category=1054038 Hash와 Salt 그리고 Bcrypt 기본 용어 hash : 다양한 길이를 가진 데이터를 고정된 길이의 데이터로 매핑하는것 digest : hash에 의해 암호화된 데이터 avalanche(눈사태) 효과 : 작은 변화에도 결과가 완전히 달라짐 rainbow 공격 : fullfish.tistory.com 주요 개념을 위에 정리해뒀으며 서버단에서 적용은 // signUp bcrypt.genSalt(13, async function (err, salt) { bcrypt.hash(password, salt, async function (err, hash) { userInfo.password..

trip 정보 새로고침시에만 나오는것 해결 -> 처음 정보 받아올 때 header부분에 token정보 안 받아 오고있었음 로그인정보나 토큰정보같은것들이 localstorage에 있길래 sessionstorage로 옮김 왜냐하면 해당 정보들은 영구적일 필요가없고 탭을 닫으면 소멸해야할 정보기에 리프레쉬토큰 적용. 서버에서 엑세스토큰이 온다면 클라이언트단의 sessionstorage의 토큰정보를 업데이트함

수료이후 팀원들과 함께 부족한 부분을 리펙토링하기로 했다 우선 기본적인 계획을 세웠다.

클라이언트 주소 https://just-moment-trip.ml/ just-moment-trip just-moment-trip.ml Git https://github.com/codestates/just-moment-trip GitHub - codestates/just-moment-trip Contribute to codestates/just-moment-trip development by creating an account on GitHub. github.com 사이트 맵 Wire frame https://wireframe.cc/pro/pp/31bd8a1dd539807 Home - Wireframe.cc Preview Lorem ipsum dolor sitammet quam Lorem ipsumdolo..

한것 프론트에서 axios 분기 만듦 리벤슈타인 거리 값 추가 및 하이라이트 적용 axios분기 예시(accountGet)일 경우 export function accountGet(trip_id) { console.log('어카운트 겟요청 됨'); let url = `${endpoint}/account?trip_id=${trip_id}`; return axios.get(url, { headers: tokenHeader(), 'Content-Type': 'application/json', }); } 불러오는 tokenHeader() export default function tokenHeader() { const user = JSON.parse(localStorage.getItem('user')); if (..