1월 넷째 주를 보내며 설 연휴를 보내고 프로젝트로 정신없이 바빴던 한 주!.. 이번 프로젝트에서는 해보고 싶었던 부분들을 꽤 하고 있어서 즐겁다. 팀원들도 다들 재밌기도 하고~ 👀 Fact 챌린지팀에 합격했다!! 세션스토리지를 이용해서 회원가입, 로그인 기능을 구현했다. 검색 기능을 구현했다. 프로젝트 마무리를 향해 달리는 중! 거의 끝자락이다. 구현해보고 싶었던 기능들을 구현했다. (회원가입의 비밀번호 검증.. 헤더 변경.. 등등) 🙂 Feeling 다른 시도나 해보고 싶은 것들을 해보고 있어서 즐겁다! 원인을 찾아서 오류나 버그를 해결할 때의 쾌감은 여전하다. 이번 프로젝트도 나름 완성도를 높인 것 같다는 생각이 들어 좋다. 다른 팀원들을 기능 구현을 같이 고민하면서 여러 로직을 생각해 볼 수 있어..

Today, What I learned? 이번 프로젝트에서 검색기능을 구현했던 과정을 기록한다. 완성한 기능은 이렇다. 이미지가 너무 작지만!.. 한글, 영어 대문자, 소문자가 모두 검색이 가능하도록 구현했다. 검색기능을 구현하기 앞서서, 이번 프로젝트의 검색 기능은 앞서했던 프로젝트와는 조금 다른 성격의 검색 기능을 구현해 보기로 했다. 우리 프로젝트는 저 때 20명 정도의 아티스트 목록을 가지고 있었고, (며칠 사이 조금 더 늘었음) 어떤 단어와 일치하는 결과를 찾아내기 보다는, 해당 아티스트의 유튜브 목록 페이지로 바로 넘어가는 게 더 좋지 않을까? 싶어서 그렇게 해보기로!.. 검색창 외부 클릭 감지 이번에는 아이콘을 클릭했을 때 검색창이 나오는 UI를 구현해 보았다. 헤더 안의 다른 영역을 클릭하..

Today, What I learned? 팀원 분의 SOS로!.. 리덕스로 구현되어 있던 API 불러오는 로직을 redux-toolkit과 redux-thunk로 리팩토링 하는 과정을 같이 고민하게 되었다. 고민의 시간이 길었던 이유는 우리 프로젝트는 타입스크립트로 구성된 프로젝트였기 때문이다!.. 타입스크립트에서의 createAsyncThunk API를 가져오는 과정에서, 필요한 선택적 매개변수가 3개나 되었기 때문에 좀 더 어려웠던 것 같다. 아래는 완성된 로직이다. payload에 해당하는 부분을 구조분해할당으로 가져와서 사용하고 있다. export const getSearchVideos = createAsyncThunk( 'getSearchVideos', async ({ channelId, ord..

Today, What I learned? 파이어베이스로 소셜로그인 기능을 추가하던 중 구글과 깃허브는 쉽게 되었지만, 애플은 애플 개발자에 등록이 되어있어야 하고.. 카카오는 카카오 인증 후 파이어베이스로 보내서 파이어베이스의 토큰을 받아올 수 있도록 해야 하고.. (시간이 좀 더 여유로울 때 도전해보고 싶음) 트위터를 추가해 보자! 싶어서 트위터를 추가하는 과정을 기록해 본다. 파이어베이스 인증 부분에 트위터 추가 먼저 파이어베이스 로그인 제공업체에서 트위터를 사용설정으로 추가해 주기. 아래 파이어베이스 공식 문서에 따라 하나하나 해가면 되는데, 일단 사용할 웹(혹은 앱)을 트위터 개발자 애플리케이션에 등록해주어야 한다. https://firebase.google.com/docs/auth/web/twi..

Today, What I learned? 이번 프로젝트에서는 로그인 여부에 따라서 헤더를 다르게 노출해야 하는 기능이 있다. 이 부분의 로직을 어떻게 짤 것인 가에 대한 얕은 고찰... 구현해야 하는 부분 로그인이 되어 있지 않다면 아래와 같이 로그인 버튼이 보이는 헤더를, 로그인이 되었다면 검색과 마이페이지로 들어갈 수 있는 아이콘이 있는 헤더를 보여주어야 한다. 참고로 우리 프로젝트에서는 파이어베이스를 통해 로그인이 이루어진다. 첫 시도 처음에는 useState를 이용해서 isLoggedIn 이라는 boolean 값의 상태로 관리를 하려고 했다. const [isLoggedIn, setIsLoggedIn] = useState(false); ... useEffect(()=>{ authService.on..

1월 셋째 주를 보내며 타입스크립트를 익혀보며 이제 최종 프로젝트 전 마지막 프로젝트가 시작된 한 주!.. 👀 Fact 타입스크립트 문법 강의를 들었다. 전에 리덕스로 만들었던 투두리스트를 리덕스 툴킷과 타입스크립트로 리팩토링 했다. 문자열 문제 이긴 하지만 프로그래머스 2단계 문제를 풀었다! 새로운 프로젝트를 시작했다. 챌린지팀 인터뷰를 봤다. 🙂 Feeling 타입스크립트로 리팩토링 하면서 생각보다 많은 에러에 당황했다. 그래도 생각보다 검색했을 때 자료가 많아서 다양한 에러를 어렵지 않게 해결할 수 있어 좋았다. 이번엔 그간 담당하지 않았던 기능을 맡아서 좋다. (회원가입, 마이페이지 쪽) 🔍 Finding 타입 스크립트 기초 문법 기존 리액트 프로젝트를 타입스크립트로 마이그레이션 리액트에서 이전 ..

Today, What I learned? 타입스크립트로 기존 프로젝트를 리팩토링하는 것이 아니라 새로운 프로젝트를 생성하는 과정을 글로 남겨보려고 한다. 프로젝트 생성 CRA를 통해 새로운 프로젝트를 시작한다. npx create-react-app 프로젝트명 --template typescript 이 때 --template을 꼭 넣어주어야 처음부터 타입스크립트로 파일들이 실행된다. --template없이 typescript만 넣을 경우에는 자바스크립트 파일로 CRA가 되어서 다시 프로젝트를 생성해야 할 수 있다. 정상적으로 명령어가 실행되었다면 이렇게 ts, tsx로 파일들이 만들어져 있고, tsconfig.json까지 기본적으로 포함되어 있을 것이다. react-app-env.d.ts ? 일반적인 리액..

Today, What I learned? 타입스크립트를 익히면서 생각보다 쉽지 않음을 많이 느끼는 중..! 특히 헷갈리는 몇몇 개념을 좀 정리해보려 한다. JS와 TS 자바스크립트는 동적타입. 프로그램이 실행될 때, 즉 런타임에 변수의 타입이 결정된다. 반대로 타입스크립트는 정적타입. 컴파일 타임에 변수의 타입이 결정된다. 이것은 즉 프로젝트가 실행되기 전에 미리 IDE에서 발생할 오류를 알 수 있다는 것! any 타입 any 타입은 모든 타입을 포함하는 타입이다. (자바스크립트의 모든 변수도 any 타입이라고 할 수 있다.) 자바스크립트 프로젝트를 타입스크립트로 리팩토링하는 경우 임시로 사용하며 점진적으로 타입을 차차 바꿔나갈 때 유용하다. 하지만 모든 타입을 포함한다고 해서 무분별하게 사용하면 타입스..

Today What I learned? 어제에 이어 리덕스 툴킷 투두리스트를 타입스크립트로 마이그레이션 하며 해결한 많은 오류들을 기록해 본다..!! 어찌어찌 모든 에러를 해결하고 정상 작동이 되고 있다.. 🥺 🚧 버튼 컴포넌트에서 발생한 오류 해결 Type '' is missing the following properites from type ~~ Type '' is missing the following properites from type ~~ 암만 봐도 버튼 컴포넌트에 다른 함수 props가 없다는 얘기 같다. 기존 코드는 저 함수들 중 하나만 넣어주어 버튼 컴포넌트를 공통으로 쓰고 있는 상태였기 때문에 꼭 모든 함수 props를 받을 필요가 없었다. 그렇다면 선택적으로 들어가야 하니 타입 속성에..

Today, What I learned? 일차적으로 투두리스트를 redux-toolkit으로 리팩토링 한 후에 본격적으로 타입스크립트로 마이그레이션에 들어가며 만나게 된 오류들을 기록해본다. 에러가 꼬리에 꼬리를 물고 발생해서 모든 에러가 완전 해결된 것은 아니고 현재 진행형이다.. 😇 내일쯤엔 다 완성하기 않을까!.. 🚧 useRef()의 focus 관련 에러 Property 'focus' does not exist on type 'string' Property 'focus' does not exist on type 'string' useRef()의 타입이 제대로 정해져있지 않아 발생한 에러.. 찾아보니 useRef를 DOM 조작 용도로 사용하려면 아래와 같이 HTML태그를 지정해줘야 한다고.. 지역변..