[인프런 워밍업클럽 스터디 FE 0기] 후기

0.반년을 일하면서 어떻게든 잘 버티고 있다고 생각했다."간단하게 인풋에 키랑 아이디 넣고 버튼 누르면 삭제되는 html이면 될 것 같아요."새폴더 > index.htmlvs code의 빈 공간이 이렇게나 낯설고 막막하게 느껴질 줄은 몰랐다. 1.나도 나를 잘 모르지만, 얼마나 게으른 사람인지는 잘 안다.어떻게든 날 밀어붙일 계기가 필요하다 생각하고 이것저것 알아보다가 인프런에서 진행하는 스터디를 알게 됐다.무작정 신청하고 들어온 스터디엔 생각보다 많은 사람이 있었고 그만큼이나 열심히 노력하시는 러너님들이 가득했다. 2.사실 스터디 초반엔 이미 다 알고 있는 부분이라 생각해 적당히 강의를 봤던 적도 있었다.그리고 첫 과제를 진행하는 순간 내가 왜 이 스터디를 신청했던 건지 몸소 느낄 수 있었다.생각보다 과제는 하루이틀만에 끝낼 수 없었고 남은 기간 동안 얼마나 할 수 있을지 계산적으로 생각하기도 했지만, 이게 무슨 의미인가 싶어 반쯤은 체념하고 대신 열심히만 하자고 마음을 먹었다.그런데 적당히 포기하고 마음을 놓으니 오히려 오기가 생겼던 것 같다.그 뒤로부터 출근하면서 강의 보고, 퇴근하면서 강의 보고, 집에 와서 과제하고, 주말에는 더 몰아서 강의 보고 과제하고...며칠, 몇 주를 그렇게 지냈다. 3.퇴근하고 디스코드에 들어가면 늦은 시간에도 늘 접속해 계셨던 몇몇 러너님들이 계셨는데 하루쯤 쉴까 싶은 날에는 그런 러너님들을 보며 나를 바로잡곤 했다.그중 한 러너님께서 사이드 프로젝트 인원을 모집한다는 글을 올리셨고, 또다시 나를 밀어붙이기 위해 과감하게 연락을 드려 좋은 기회를 가지게 됐다.이번 워밍업 스터디를 신청하길 잘했다고 가장 크게 느꼈던 점은 정말 많은 분들이 개발에 대해 공부하고 있고 실천하고 있다는 걸 눈으로 확인하고 몸소 느꼈던 부분이 아닐까 싶다.게다가 생각지도 못 했던 우수 러너가 되었다..!나를 선정해주신 코치님에게 감사한 마음과 그만큼 앞으로 더 잘해야겠다는 다짐을 다시 한번 하게 됐다.우연한 기회에 만난 인프런, 그리고 스터디가 내게 많은 전환점이 될 수 있을 것 같아 감사하다는 말씀을 전하고 싶다. 4.사실 원동력의 팔할은 나보다 더 노력하는 러너님들을 향한 시샘과 존경이었다.

[인프런 워밍업 클럽 FE 0기] 과제 총정리

미션1 - 음식 메뉴 앱깃허브 : 🍝food-recipe-app블로그 : https://www.inflearn.com/blogs/6660미션2 - 가위 바위 보 앱깃허브 : 👊Rock-🖐Paper-✌Scissors-app블로그 : https://www.inflearn.com/blogs/6742미션3 - 퀴즈 앱깃허브 : 🤔 quiz-app블로그 : https://www.inflearn.com/blogs/6860미션4-1 - 책 리스트 앱깃허브 : 📚 book-list-app블로그 : https://www.inflearn.com/blogs/6877미션4-2 - GitHubFinder 앱깃허브 : 🔍 github-finder-app블로그 : https://www.inflearn.com/blogs/6914미션5 - 비밀번호 생성 앱깃허브 : 🔐 Password Genrator블로그 : https://www.inflearn.com/blogs/6950미션6 - 타이핑 테스트 앱깃허브 : ⌨ Typing Test APP블로그 : https://www.inflearn.com/blogs/6967미션7 - 예산 계산기 앱깃허브 : 💸 Budget Calculator APP블로그 : https://www.inflearn.com/blogs/7104미션8 - 디즈니 플러스 앱깃허브 : 🎞 Disney Plus APP블로그 : https://www.inflearn.com/blogs/7168미션9 - 포켓몬 도감 앱깃허브 : Pokemon App

[인프런 워밍업 클럽 FE 0기] 3주차 발자국

미션8 - 디즈니 플러스 앱깃허브 : 🎞 Disney Plus APP블로그 : https://www.inflearn.com/blogs/7168미션9 - 포켓몬 도감 앱깃허브 : Pokemon App

[인프런 워밍업 클럽 FE 0기] 미션8 - 디즈니 플러스 앱

🎞 Disney Plus APP GitHub 🎞 Disney Plus APP DemoRecord by ScreenToGif 개요인프런 워밍업 클럽 FE 0기의 여덟 번째 미션인 '디즈니 플러스 앱' 입니다. 따라하며 배우는 리액트 섹션 4~5(리액트로 Netflix 앱 만들기) 목표swiper 라이브러리 커스텀해보기react-oauth/google 로 구글 로그인 연동해보기 구현swiper 라이브러리 커스텀해보기// LoginPage import "swiper/css/effect-fade"; {...} // Row.tsx import "swiper/css/mousewheel"; {...} 2024년 3월 10일의 디즈니 플러스 메인 페이지를 그대로 옮겨보고자 swiper 라이브러리를 커스텀해봤다.로그인 페이지에서는 좌우로 넘기는 슬라이드가 아닌 fade-in-out의 슬라이드를 구현하기 위해 swiper에 EffectFade 모듈을 추가하고 fadeEffect 속성을 추가했다.이 fadeEffect가 제대로 작동하기 위해선 반드시 해당 이펙트의 css를 추가해야 한다.다른 모듈이나 컴포넌트를 추가할 때처럼 자동으로 추가되지 않으니 주의해야 한다. (이걸 몰라서 한참을 찾았다. 😥)Row 컴포넌트는 마우스 휠에 따라 움직이는 슬라이드를 만들기 위해 Mousewheel 모듈과 속성을 이용했다.이렇게 슬라이드 속성을 정한 뒤에 swiper가 렌더링하는 요소의 class를 찾아 CSS에서 원하는 디자인으로 변경하면 된다.이때 라이브러리의 CSS와 겹치는 속성이 있을 수 있기 떄문에 '!important'를 붙이는 게 좋다. react-oauth/google 로 구글 로그인 연동해보기// index.js // App.jsx const navigate = useNavigate(); const [isLogin, setIsLogin] = useState( localStorage.getItem("user") ? true : false ); useEffect(() => { isLogin ? navigate("/") : navigate("/login"); }, [isLogin]); {isLogin ? ( }> } /> } /> } /> ) : ( } /> )} react-oauth/google는 구글 로그인을 지원하는 라이브러리로, 사전에 구글의 Cloud에서 API 등록을 하고 Client ID를 발급받아야 사용할 수 있다.먼저 프로젝트의 최상위에 GoogleOAuthProvider로 감싸준다.그리고 사용자의 로그인 여부에 따라 페이지를 이동시키기 위해 라우터를 설정한 App 컴포넌트에서 관련 코드를 작성했다.페이지가 렌더링 될 때 로컬 스토리지에 저장된 유저 정보를 받아오고 만약 없다면 로그인 페이지로 보내도록 했다. // loginPage const googleLogin = async (credentialResponse) => { localStorage.setItem( "user", JSON.stringify(jwtDecode(credentialResponse.credential)) ); setIsLogin(true); }; googleLogin(credentialResponse)} /> GoogleLogin 컴포넌트는 react-oauth/google 라이브러리에서 지원하는 버튼 컴포넌트로 디자인 및 로그인 관련 함수가 내장되어 있다.onSuccess는 사용자의 로그인이 성공했을 때 실행되는 콜백 함수이며, 인자로 로그인한 유저의 정보를 담은 데이터를 갖는다.여기서 credential이라는 값은 유저의 정보를 담고 있는 토큰으로 암호화되어 있기 때문에 jwt-decode 라이브러리를 이용해 디코딩하여 사용해야 한다.여기서 받은 picture는 사용자의 프로필 이미지 링크를 포함하고 있어서 Nav 컴포넌트에서 사용해 로그인한 유저의 프로필 이미지로 변경했다. 회고'Netflix 앱 만들기'를 하면서 사용했던 기술이 대부분이라 오래 걸리지 않을 것 같았지만...라이브러리 알아보고 문서 읽고 실행해보고... 하는 데 너무 오래 걸린 것 같다.배너 하단의 카테고리 부분은 이전에 같은 과제를 하셨던 분의 깃허브를 참고했다. (https://github.com/kimneighbor/clone-disney-plus-app)로그인 페이지는 따라하기 싫어서 현재 디즈니 플러스 홈페이지를 보고 참고했다.그대로 하면 얼마 안 걸릴 거라 생각했는데 생각보다 라이브러리 커스텀에서 좀 애를 먹었다. 😅with_networks: "2739" 2739는 TMDB에서 디즈니 플러스 방송사(networks) 코드라서 axios의 instance 기본 값에 추가했다.몇몇 요청은 해당 파라미터가 통하지 않거나 오류를 보내기도 해서 완벽하진 않다.디즈니 플러스에서 API를 제공했다면 더 알맞게 페이지를 구현할 수 있었을 텐데 하는 아쉬움이 남는다.한편 영화 정보 API를 제공해주는 TMDB(The Movie Database) 같은 곳이 있어 감사하고 다행이라는 생각이 들었다.프론트엔드 공부하는데 API를 제공해주는 곳이 아예 없었다면 혹은 매번 일정 비용을 지불해야 했다면 얼마나 힘들었을까로그인도 사실 좀 더 좋은 라우팅 구조나 상태 관리 라이브러리를 공부하고 사용해보고 싶었지만...계속 욕심만 커지는 것 같아 최대한 간단하게 구현하려 했다.(사실 과제 밀려서 조바심에 아무것도 못 했다... 😂)

[인프런 워밍업 클럽 FE 0기] 2주차 발자국

미션4-2 - GitHubFinder 앱깃허브 : 🔍 github-finder-app블로그 : https://www.inflearn.com/blogs/6914미션5 - 비밀번호 생성 앱깃허브 : 🔐 Password Genrator블로그 : https://www.inflearn.com/blogs/6950미션6 - 타이핑 테스트 앱깃허브 : ⌨ Typing Test APP블로그 : https://www.inflearn.com/blogs/6967미션7 - 예산 계산기 앱깃허브 : 💸 Budget Calculator APP블로그 : https://www.inflearn.com/blogs/7104

[인프런 워밍업 클럽 FE 0기] 미션7 - 예산 계산기 앱

💸 Budget Calculator APP GitHub 💸 Budget Calculator APP DemoRecord by ScreenToGif 개요인프런 워밍업 클럽 FE 0기의 일곱 번째 미션인 '예산 계산기 앱' 입니다. 따라하며 배우는 리액트 섹션 0~3(To-Do 앱) 목표의존성 배열(Dependency Array) 을 이용해 함수 실행하기state 를 전역 변수처럼(?) 사용해보기 구현구조|-- App | |-- Form | |-- Lists | | |-- List 의존성 배열(Dependency Array) 을 이용해 함수 실행하기// App.jsx const [budgetList, setBudgetList] = useState( JSON.parse(localStorage.getItem("budgetList")) || [] ); useEffect(() => { localStorage.setItem("budgetList", JSON.stringify(budgetList)); }, [budgetList]); const totalCost = useCallback(() => { return budgetList.reduce((acc, cur) => acc + cur.cost, 0); }, [budgetList]); 최상위 컴포넌트인 컴포넌트에서 만든 'budgetList'이라는 state를 useEffect와 useCallback의 의존성 배열에 추가했다.useEffect에서는 해당 state가 변경되면 로컬 스토리지의 budgetList를 최근의 리스트로 변경한다.이렇게 하면 일일이 setBudgetList가 호출되는 곳마다 함수를 사용하지 않아도 된다.다음은 예산의 총 금액을 반환하는 함수가 리스트가 변경될 때마다 실행되도록 useCallback으로 감싸고 의존성 배열에 state를 추가했다.// Form.jsx const budgetNameRef = useRef(); const [budgetName, setBudgetName] = useState(""); const [budgetCost, setBudgetCost] = useState(0); useEffect(() => { if (isEdit) { setBudgetName(budget.name); setBudgetCost(budget.cost); budgetNameRef.current.focus(); } }, [isEdit]); 컴포넌트에서는 useEffect에 'isEdit'이라는 state를 의존성 배열에 추가했다.사용자가 예산을 수정하기 위해 list의 Edit 버튼을 클릭하면 해당 budget의 name과 cost를 최근 state로 불러오고, useRef를 이용해 name을 입력하는 요소에 focus 상태가 되도록 했다.state 를 전역 변수처럼(?) 사용해보기// App.jsx const [currentBudget, setCurrentBudget] = useState({ isEdit: false, budget: {}, }); // List.jsx const handleEdit = () => { setCurrentBudget({ isEdit: true, budget: list, }); setHandleStatus({ type: "edit", message: "Editing..." }); }; // Form.jsx const handleBudgetSubmit = (e) => { const newBudget = { id: Date.now(), name: budgetName, cost: budgetCost, }; // isEdit의 값에 따라 새로 추가할지 수정할지 결정 if (isEdit) { setBudgetList((prevBudgetList) => { const newBudgetLists = [...prevBudgetList]; const index = newBudgetLists.findIndex(({ id }) => id === budget.id); newBudgetLists[index] = newBudget; return newBudgetLists; }); setCurrentBudget({ isEdit: false, budget: {} }); setHandleStatus({ type: "submit", message: "Edit Success!" }); } else { setBudgetList((prevBudgetLists) => [...prevBudgetLists, newBudget]); setHandleStatus({ type: "submit", message: "Submit Success!" }); } // submit 종료 시 input의 데이터를 초깃값으로 설정 setBudgetName(""); setBudgetCost(0); }; 배웠던 To Do 앱은 List의 Edit 버튼을 클릭했을 때 해당 List의 요소를 input 요소로 변경시키고 수정을 했다.하지만 과제는 클릭을 했을 때 List의 요소를 변경시키는 게 아니라 Form의 input에 해당 예산의 데이터를 전달해야 했다.그래서 마치 전역 변수처럼 사용할 'currentBudget'이라는 state를 생성하고 'isEdit'이라는 boolean 값과 수정할 예산의 데이터를 담을 'budget'이라는 값을 설정했다.'isEdit'의 상태 값이 true일 때 수정하기와 삭제하기 요소를 disabled로 변경한다.또한 submit 함수는 새로운 입력 값을 budgetList에 추가하지 않고 해당 예산의 index를 찾아 수정하고 리스트를 변경한다.이렇게 하니 onSubmit과 onEdit 처럼 비슷한 기능을 하는 함수를 여러 개 만들지 않아도 되었다. ⚠ setTimeout 렌더링const { type, message } = handleStatus; const handleStyle = useCallback(() => { if (type === "edit") { return "text-gray-500 block"; } else if (type === "none") { return "hidden"; } else { // 2초 뒤에 실행 --> App - Form - Status 1번 더 렌더링 setTimeout(() => { setHandleStatus({ type: "none", message: "" }); }, 2000); if (type === "submit") { return "text-green-400 block"; } else { return "text-red-400 block"; } } }, [type]); 추가, 삭제, 수정의 완료 및 진행 중 상태를 보여주는 컴포넌트를 만들었다.App에서 만든 'handleStatus'라는 state를 전달하고 메세지가 나타난 뒤에 사라지게 만들고 싶어서 setTimeout() 메서드를 이용해 2초 뒤에 상태를 초기화했다.하지만 이 상태가 App과 Form 컴포넌트에서 참고하다 보니 나타나고 사라질 때마다 렌더링이 발생했다.CSS의 opacity로 처리하기엔 state의 값을 변경해야 했기에 알맞는 방법은 아니라 생각했다.뭔가 컴포넌트 내부에서만 렌더링이 일어나게 하고 싶었는데 아직 다른 방법을 찾지 못했다.😢😢😢 회고다른 컴포넌트의 클릭 이벤트로 변경된 state를 이용하는 부분이 생각보다 오래 걸렸다.처음엔 콜백 함수처럼 App 컴포넌트에서 함수 만들고 prop으로 넘겨봤지만 List와 Form은 종속적인 관계가 아니라 힘들었다. 😢그래서 생각해낸 게 state를 이용해서 상태의 변경을 이벤트처럼 사용하는 것이었다.pub-sub 혹은 observer 패턴 같다는 생각도 했지만, 이렇게 최상위에서 선언한 state가 이곳저곳 돌아다니는 게 좋은 방법은 아닐 것 같다는 생각이 들었다.규모가 커지면 렌더링 관리도 힘들고 props를 쫓아다녀야 하기 때문이다.이래서 상태 관리 라이브러리가 나왔나 보다. 🤔