Jeden Tag, aufrichtig und lustig.

1. 프로젝트를 하게 된 배경 리액트를 공부하는 용도로 youtube api를 활용해서 youtube를 구현해보았다. 다른 작업과 병행하다보니 기획부터 배포까지의 총 작업기간은 6일정도 소요되었다. 2. 배운 점 및 느낀 점 이번 프로젝트를 통해 새롭게 배우고 경험한 것은 크게 6가지다. youtube api 활용 mock 데이터 생성 및 활용 React에서의 테일윈드 CSS 적용 폴더구조와 url 구조 기획 MVP 형태 개발 .env 활용 프로젝트에서는 아래의 4가지 api를 활용하였다. 인기 동영상 데이터 검색 키워드에 따른 데이터 연관된 동영상 데이터 채널 데이터 일목요연하게 api가 정리 되어 있어서 필요한 api를 쉽게 찾을 수 있고, 필요한 데이터 수도 간편하게 지정할 수 있다. 다만 불편한 ..

기존에 진행한 프로젝트의 성능을 개선 할 수 있는 방법을 찾는도중 디바운싱 개념을 알게되었다. 나중에도 유용하게 사용할 수 있을 것 같아 정리해보았다. 1. 개념 및 사용 이유 디바운싱은 연속적으로 함수 실행 요청을 하는 경우 가장 마지막 요청만 수행하는 것을 의미한다. 디바운싱은 연속적으로 함수를 실행하는 것은 서버에 부담을 줄 수 있기 때문에, 이 부담을 경감하기 위해 사용 될 수 있다. 2. 적용 예시 아래 코드는 계정을 검색 할 수 있게 만들어주는 코드다. useEffect(() => { if (userInput) { getSearchUser(userInput) .then((data) => { setUserArr(data); }) .catch((error) => { console.log(error..

1. axios interceptors란? axios interceptors는 axios가 then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있다. 2. 사용하게 된 이유 투두리스트를 리액트로 만들면서 로그인 후 할일 목록이 나타나는 페이지로 이동하도록 하고, axios를 활용해서 할일목록을 get하는 로직을 구성했다. const access_token = localStorage.getItem("signInToken"); export const axiosAuthApi = axios.create({ baseURL: BASE_URL, headers: { Authorization: `Bearer ${access_token}`, "Content-Type": "application/json", },..

Front-end vs Back-end 개발자가 되기로 결정했으면, 프론트엔드와 백엔드 중에서 어떤 분야의 개발자가 될 지 선택해야한다. 최종적으로는 두 분야의 지식을 둘 다 겸비한 풀스택 개발자가 되어야 하지만 갓 배우기 시작한 단계에서는 한가지 분야를 정하고, 먼저 그 분야의 전문가가 되어야 한다. 오늘은 프론트엔드와 백엔드의 차이점을 소개해 보고자 한다. Front-end ? 프론트엔드는 쉽게 말하자면 웹브라우저에서 보여지는 화면 부분을 얘기한다. 이 때 html-css-java script가 유기적으로 사용된다. 프론트엔드 개발자는 화면 부분을 개발하는만큼 예술적인 감각이 있으면 업무를 할 때 도움이 될 수 있다. 하지만 필수적인 요건은 아니다. 프론트엔드 개발자가 하는 업무는 크게 다음과 같다...