늭시 공부 정리할거 setDescriptionKey(e.target.value)} /> 대신에 onChange에 이벤트를 바로 걸어버리면 리액트는 비동기식 렌더링으로 처리하기 떄문에 타점을 정확히 지정해줄 수 없음 그래서 하단에처럼 onChange 이벤트를 밖으로 빼줘서 const onChangeModalInput = useCallback((e: React.ChangeEvent) => { const {value} = e.target; console.log(value) setDescriptionKey(value); }, [setDescriptionKey]) 이렇게 따로 관리해줘야함 또한 마지막 , []) 여기에 , 컴포넌트 밖에서 가져온 것들을 넣어줘야함 이게 바로 의존성 배열 { console.log(d..
분류 전체보기
platwright 은 E2E테스트 를 위한 자동화 도구이다.E2E란, 개발물을 사용자 관점에서 처음부터 끝까지 검증하는 테스트인데 직관적으로는 브라우저를 직접 제어해서 사용자의 동작을 프로그램으로 구현하는 테스트라고 이해하면 쉽다.그 테스트를 위한 도구들중 platwright 를 사용하게 되었다.(cypress 라는 유명한 툴도 있는데 병렬 테스트는 유료화되었다고 한다) platwright은 공식 사이트에 사용하기 쉽게 각 예제를 만들어놨기 때문에 활용하기가 생각보다 쉬웠다(https://playwright.dev/docs/api/class-playwright)웬만한건 사이트에서 참고하면 사실 블로깅할 이유가 없지만나는 입사 두달차 신입이였기 때무네 . . . 테스트 코드 자체를 처음 짜는 사람이였기..
프로젝트를 진행해오면서 당연히 로그인할때 쿠키를 발행하며 써왔던 jwt. 왜 써야하는걸까 ? jwt (JSON Web Tokens) 인증과 인가를 관리하는데 사용되는 방법론이다. 클라이언트와 서버간의 인증 정보를 안전하게 전송하기 위한 방법 중 하나이다. JSON 형식으로 정보를 표현하며, 서명(signature)을 사용하여 데이터의 무결성을 검증한다 서버에서 발급된 토큰은 클라이언트에 저장되며, 서버는 토큰을 검증하여 인증한다 토큰은 클라이언트 측에서 관리되므로 서버의 부하를 줄일 수 있다 사용하는 방법은, 클라이언트는 토큰을 받아서 보관하고 , 필요한 요청에 토큰을 첨부하며 서버에 전송한다 그렇다면 , jwt 말고 다른건 없을까 ? 세션 (Session) 세션은 서버 측에 정보를 저장하고 관리하여 클..
리사이징을 어느 시점에서 할지 고민을 많이 해 본 결과 , aws s3에 올라가기전에 리사이징을 해주는것이 현 프로젝트에서 서는 더 좋은 방향이라 결론이 났다. 우선적으로 서버비용을 아낄 수 있고 , 기존에 있던 에러도 해결할 수 있으며, 현 프로젝트의 데이터 전송량이 적기 때문이다. 프론트단에서 리사이징을 하는 것은 데이터 전송량이 많아지면서 프로토콜 응답이 느려질 수도 있다고 한다. 보통은 백단에서 처리하는 경우가 많은 것 같다. 당근 마켓도 그렇게 하고 있다고 한다. 기존 s3 미들웨어 upload 코드에서 조금만 수정해주면 리사이징을 할 수 있을것 같아 multer-s3-transform 으로 sharp 패키지를 사용하기로 했다. Lamda라고 함수코드를 만들어서 리사이징 하는 방법이 있긴 한데 ..
다중이미지 업로드를 구현하면서 많이 고민해봤다 이미지가 여러개가 들어가면서 데이터 자료형의 무게만 늘리는게 좋은 방향이 아니라고 느끼고 부터 구글링을 많이 해봤다. bitly 라는 url 단축 서비스를 무작정 사용하기 전에 , 내 이미지 url이 너무 길다는 생각이 들어 코드부터 다시 보기 시작했는데 생각해보니 originalname이 공개적으로 url에 들어가서 사용자에게 노출되는것이 바람직할까 ? 하는 생각에 다달았다 기존 코드부터 보자 const upload = multer({ storage: multerS3({ s3: s3Client, bucket: process.env.AWS_BUCKET_NAME, acl: 'public-read', contentType: multerS3.AUTO_CONTENT..
1. 이미지를 3개 이상 업로드 할시 , 마지막 이미지가 깨져보인다. 들어오는 이미지를 확인해보니 , imageUrl: "https://chatdiet.s3.ap-northeast-2.amazonaws.com/1694191367643_SDSDSD.png, https://chatdiet.s3.ap-northeast-2.amazonaws.com/1694191367643_%C3%AC%C2%8A%C2%A4%C3%AD%C2%81%C2%AC%C3%AB%C2%A6%C2%B0%C3%AC%C2%83%C2%B7%202023-07-18%20093711.png, https://chatdiet." 여기서 끊겨 있었다 . aws s3 버킷에서 확인했을때는 잘 들어가지는데 불러올때 문제가 있는것 같았다. db에 저장되어 있는걸 확..
023-09-07 22:29:30 2023-09-07 22:29:30 > chatdiet@1.0.0 dev / 2023-09-07 22:29:30 > nodemon --exec babel-node init.js 2023-09-07 22:29:30 2023-09-07 22:29:30 [nodemon] 3.0.1 2023-09-07 22:29:30 [nodemon] to restart at any time, enter `rs` 2023-09-07 22:29:30 [nodemon] watching path(s): *.* 2023-09-07 22:29:30 [nodemon] watching extensions: js,mjs,cjs,json 2023-09-07 22:29:30 [nodemon] starting `..
내가 카카오톡 로그인을 구현하면서 생각한 로직은 이하와 같다. 1. 프론트에서 카카오 로그인 API 이용해서 access token 을 발행 받음 -> 이때 email값을 토큰값에 꼭 넣어줘야함 2. 이메일값을 추출해서 백엔드로 넘겨줌 3. 백엔드는 그 값을 받아서 비밀번호 없이 회원가입을 해줌 4. 로그인시에 기존 로컬 회원가입과 마찬가지로 우리 규칙에 맞는 토큰값을 발행해줌 -> 사용자 입장에서는 토큰이 재발행되는것. 우리의 규칙이란 , 토큰값에 userId값을 넣어주는것 카카오톡 API의 설정에 대해 공식문서를 더 깊이 보면 다른 방법이 있을 것 같긴 한데, 제일 간단하고 빠르게 구현하는것을 목적으로 했다. rest api 에서 토큰을 발행받아올 수 있는 방법도 따로 있는데 (백엔드로 받아오는것) ..
