본문 바로가기

분류 전체보기101

9주차 (TypeScript) 초기 세팅 방법 // 1. node js로 세팅 npm init -y // 2. 타입스크립트화 tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true // 1. 프로그램의 소스 파일이 들어가는 경로는 src 디렉토리 --rootDir ./src // 2. 컴파일이 된 파일들이 들어가는 디렉토리는 dist 디렉토리 --outDir ./dist // 3. CommonJS 방식의 모듈을 ES모듈 방식의 import 구문으로 가져오기 --esModuleInterop // 3. package.json script 변경하기 "scripts": { "st.. 2023. 10. 1.
36일차 (미니 프로젝트 마무리) 2주간의 짧고도 긴 미니 프로젝트가 마무리되었다. 기능을 하나씩 추가하고, 기능이 제대로 작동될 때마다 즐거움을 느끼면서 프로젝트를 진행했던 것 같다. 물론 기능적으로나, 코드적으로나 아쉬운 점도 많지만. 이번 글에서는 프로젝트 피드백을 바탕으로 추석 때 해야할 일들에 대해 정리해보고자 한다. useState의 작동원리 상태를 관리하고, 상태의 변경을 할 때 무의식적으로 useState를 사용했던 것 같다. 작동 원리를 알고 useState의 기능에 대해 더 배운다면 조금 더 효율적으로 사용할 수 있을 거라는 생각이 든다. component 분리 이 문제는 항해99를 시작하면서 다양한 프로젝트를 진행하면서 가져왔던 고민이다. 컴포넌트가 하나씩 늘어날수록, 다양한 라이브러리를 사용할수록 폴더구조를 어떻게 .. 2023. 9. 27.
35일차 (소셜 로그인: KaKao) 소셜 로그인 기능을 구현할 때 프론트엔드의 역할은 비교적 간단하다. REST_API와 REDIRECT_URL을 백엔드 담당자에게 받은 뒤 해당하는 URL로 이동하는 버튼만 만들면 된다. 맨 처음 아래와 같은 링크에 {REST_API}와 {REDIRECT_URL}를 해당하는 자리에 넣어주면 된다. (window.location.href = "https://kauth.kakao.com/oauth/authorize?client_id={REST_API}&redirect_uri={REDIRECT_URL}&response_type=code") } > 위의 과정이 성공적으로 수행되면 완료 메시지가 나오는 페이지가 나오는데, 그 페이지 주소에 해당하는 컴포넌트를 만들어 필요한 정보를 저장하면 된다. function K.. 2023. 9. 26.
34일차 (트러블 슈팅: 소셜 로그인 시 token 저장 및 삭제 문제) 오류는 발생하지 않았지만, 원하는 동작을 수행하지 못하는 문제를 직면했다. 그것은 소셜 로그인 시 발생하는 문제였는데, 로그인 이후 수동 세로고침을 하기 전까지 token 값이 저장되지 않아서 발생하는 문제였다. useEffect를 사용해서 문제를 해결해보고자 했지만, 뜻대로 되지 않았다. 거의 하루를 고민한 뒤, 기술매니저님의 도움으로 해결할 수 있었다. 수정 전 코드 // kakao.jsx const { isSuccess, isLoading, isError, data } = useQuery("kakao ", () => kakaoLogin(codeParam) ); useEffect(() => { navigate("/"); }, [navigate, codeParam]); 원인은 token 값이 들어오기도.. 2023. 9. 26.
728x90