인프런 워밍업 클럽 스터디 1기 FE 과제 (10번)

9번 과제깃허브 저장소 주소: https://github.com/cokeholic-kim/pokemon-library학습 범위: Section 6 ~ 7그냥 포켓몬데이터를 받아서 뿌려준다는 생각으로 접근했는데 생각보다 api구조가 어려웠던것같다.이게 현업분들이쓰는 api수준에서 어떤정도인지는 모르겠지만 나의 개인적인 기준으로는 데이터를 하나찾아서 필요한 정보를 찾아서 또 받아오고 하는 과정들이 반복되어서 시간이오래걸리고 계속 api에서 받아온객체를 뜯어보는 시간이 길었던것같다 . 상세페이지는 아직구현하지않았지만 검색하는데이터에서 필요한 정보는 거의 다 가지고있어서 prop으로만 넘겨주면 빠르게 구현할수있을것같다. 검색을할때 연관검색어가 뜨는건 감도안잡힌다..

인프런 워밍업 클럽 스터디 1기 FE - 2주차 발자국

2주차 후기사실은 복습이었던것 사실 예전에 6개월 국비지원수업으로 프론트과정을 들었던적이있었다. 그때 당시에는 나름 학원반에서 잘하는 편이었는데 이제 다시 해보니 이해도제대로 못하고 그냥 쓰고있었다. 지금은 자바도 공부하고 오니 코드 스타일에 대해서도 조금 더 명확해지고 객체나 메서드에 대한 개념도 더 쉽게 이해할수있게 된것같다 (역시 쓸모없는 공부는 없구나..)어쨋든 한번 경험해봤음에도 거의 반년이 넘게 리액트를 사용하지않다가 다시 공부하는것은 어려웠다. 기억나는 건 상태라는게 있고 이걸 잘 쓰고 관리하는게 리액트 성능에 아주 중요하다는것? 이번 주차를 하면서 간단한 투두리스트, 예산계산기, 넷플릭스 , 디즈니클론을 만들었는데 아직은 감이 잡힐듯 말듯한것같다. 다음 기술을 배우면서 이전기술이 보완되는 경험도있어서 다음 리덕스나 next를 공부하는 것도 기대가된다. 이번에 작성한 프로젝트 중에 괜찮았던건 뽑아서 백엔드를 따로 구성해서 포트폴리오로도 써볼까한다. 앞으로3주차는 리액트에서 중요한 기술들을 배우고 next.js도 배우게되는데 배우는게 많고 어려워진만큼 남은 시간동안 알차게써서 과제도 모두 완료할수있었으면 좋겠다. 리액트를 하고 스프링을 까먹는건아닐까 걱정이된다..ㅠ

인프런 워밍업 클럽 스터디 1기 FE 과제 (9번)

9번 과제깃허브 저장소 주소:https://github.com/cokeholic-kim/react-disney-clone학습 범위: section 4~5넷플릭스와 똑같은 ui라서 금방할것같았는데 생각보다 시간이 오래걸렸다. 조금 더 공부한다는 생각으로 열심히 읽으면 서 옮기긴했지만..css 파일은 styled컴포넌트로 모두 바꿔줬다. 구글 로그인도 생각보다 꽤 많은 시간을 썻는데 로그인하고 리다이렉트는 했지만 토큰을받아오는게 생각보다 어려워서 우선은 로그인처리되는것처럼만 처리해두었다.

인프런 워밍업 클럽 스터디 1기 FE 과제 (8번)

8번 과제깃허브 저장소 주소:https://github.com/cokeholic-kim/budget-calc학습 범위: React 1~3처음에 작성할때는 todoList를 참고해서 React.memo를 사용해서 input되는동안에는 아래 리스트쪽에 리렌더링이 일어나지않았었는데 작성하면서 기능을 추가하다보니 어느새 아래도 같이 리렌더링 되고있었다 . 리액트를 공부를 좀 더해보면 서 useEffect나 useCallback을 사용해서 리렌더링 되지않도록 추후에 리팩토링 해보고싶다.

인프런 워밍업 클럽 스터디 1기 FE 과제 (7번)

7번 과제깃허브 저장소 주소:https://github.com/cokeholic-kim/TypingGame학습 범위: Section 9html로 그려야하는 요소 자체는 간단했는데 자바스크립트 로직이 확실히 어려웠다.최대한 쥐어짜내봤는데 로직을 다짜고 이벤트를 추가하고보니 코드가 지저분해졌다. 백엔드처럼명확하게 클래스를 나누고 메서드를 나눠서 쓸수있으면 좋을것같은데 아직 익숙해지지않아서 그냥 나열하듯이 코드를 짜고같은 코드를 위에서 또 사용하게된다. 리액트 강의를 살짝 맛보고왔는데 클래스처럼 컴포넌트를 나누고 함수를 만들어서 프롭으로 넣어서 재사용하는 부분이 굉장히 좋았다. 지금 어려웠던 부분들은 리액트를 하면서 익숙해지고 나중에 다시 바닐라 자바스크립트를 사용할때 좀 더 클린한 코드를 짤수있게 될것같다.

인프런 워밍업 클럽 스터디 1기 FE - 1주차 발자국

1주차 후기우선 일주일 간 자바스크립트 강의를 모두 보면서 5개의 과제를 클리어한 나와 다른분들에게 박수를보낸다 (짝짝짝) 백엔드 0기를 참여했을때보다 더 힘들고 정신이없었던것같다. 기존에 백엔드를 공부하고있었고 자바스크립트는 이미 기억저편으로 잊혀진지 오래여서 기억을 더듬어가고 오랜만에 검색엔진을 돌리면서 코딩을 하니 시간이 더 오래걸렸다. 이번 프론트엔드 워밍업클럽을 끝내고 백엔드 프론트 모두 내손으로만든 포트폴리오를 뽑아내겠다는 일념으로 참여했는데자바스크립트가 예상보다 어려워서 놀랐다. (왜 오타가 컴파일 에러가 안나지? 같은거?) 자바와 인텔리제이 단축키에 익숙해진 나는 vscode에서 쓸수있는단축키가 ctrl + c , ctrl + v , ctrl + ` 정도 밖에없었다. 지금은 더 찾아보면서 써서 조금 더 편하게 쓰고는 있지만 아직 익숙해질려면 갈길이 먼듯하다.그래도 수정하면서 바로바로 화면에 반영되는건 조금 감동적이었다. 수정해도 터미널에 코드덩어리 밖에 나오지않는 백엔드와는 확실히 다른 재미인것같다. 1주차는 코드를 잘짜는것보다는 돌아가는 바퀴를 만드는데에 집중했던 시간이었다.어떤 코드가 잘 작성한 코드인지 주로 어떻게 작성하는지에 대한 케이스가 없으니 함수를 나열해놓게되고 각 요소들을 그냥 변수로 잡아서 무분별하게 사용했다. 이런점에서는 코드리뷰를 좀 받고 다른분들 코드를 많이 읽으면서 케이스를 쌓아가야할것같다. 앞으로2주차는 리액트를 들어가면서 또 새로운 방법에 적응하는 시간이 필요할것같다. 그리고 스터디도 시작할듯 한데 서로 코드리뷰를 하면서 다른분들 코드에서 좋은점을 보고 배워서 적용해서 점점 나은 결과물이 만들어지는 과정을 즐겨보려한다.

인프런 워밍업 클럽 스터디 1기 FE 과제 (6번) 인프런 워밍업 클럽 스터디 1기 FE

6번 과제깃허브 저장소 주소:https://github.com/cokeholic-kim/PasswordConstructor페이지 주소: https://cokeholic-kim.github.io/PasswordConstructor/학습 범위: Section 7~8이번에는 자바스크립트로 화면에 그려줘야할 요소가 많지않아서 html로 기본화면과 css로 스타일을 모두 한후에 자바스크립트 코드를 만들었다. 비밀번호 로직을 어떻게 해야할지몰라서 이번에는 ai의 힘을 빌렸다. 어려울것같았는데 생각보다 굉장히 간단한 코드가 나와서 놀랐다 각 체크박스를 체크했을때 해당하는 문자열을 비밀번호를 추출할 문자열에 붙여주고 거기서 랜덤으로 비밀번호 길이만큼 하나씩 뽑기만 하면 되는 로직이었다. 한번 간단한 케이스를 봤으니 다음에는 비슷한 문제가 생기면 이런 케이스로 해결해볼수있을것같다. 또 복사를 하면서 알게된 새로운 navigator라는 객체가있었는데 현재 사용하는 브라우저의 정보를 알수있고 클립보드에 접근이 가능한 자바스크립트 객체였다. 이 객체를 이용해서 생성한 비밀번호값을 클립보드에 저장해줄수있었다.

인프런 워밍업 클럽 스터디 1기 FE 과제 (5번)

5번 과제깃허브 저장소 주소:https://github.com/cokeholic-kim/GitApi 학습 범위: Section 5~6api에 요청해서 데이터를 받아온다음 User와 Repository class를 만들도록 해주었다. 받아온 데이터를 객체에서 렌더링 해주게된다. 토큰을 사용했는데 깃허브에 토큰을 푸시하려고하면 에러가난다는걸 알게되었다.

인프런 워밍업 클럽 스터디 1기 FE 과제 (4번)

4번 과제깃허브 저장소 주소:https://github.com/cokeholic-kim/BookList페이지 주소: https://cokeholic-kim.github.io/BookList/학습 범위: Section 5책을 클래스로 만들고 배열에 책객체를 저장해서 만들도록 해주었다.제출버튼을 누를때 책 클래스를 생성해서 배열에 저장해주고 객체를 이용해서 dom요소를 만들어서 append하게 해주었다. delete버튼을 누르면 배열에서 해당 객체를 찾아서 지우고 , 클릭이벤트를통해서 dom요소를 지워주게된다.

인프런 워밍업 클럽 스터디 1기 FE 과제 (3번)

3번 과제깃허브 저장소 주소:https://github.com/cokeholic-kim/QuizGame페이지 주소: https://cokeholic-kim.github.io/QuizGame/학습 범위: Section 4최대한 과제화면과 비슷하게 구현해보았다. 이번에는 문제를 나중에 api로 받아온다는 가정하에 미리 문제를 json파일로 따로저장해놓고 fetch로 데이터를받아와서 사용했다. 문제 갯수를 4개로 다 똑같이했는데 json형식에서 문제를 4개만들고 빈값이 날아오는경우는 그때 그때 블럭을 안보이게 처리해주면 문제갯수도 다르게 구현할수있을것같다.