
[1人 프로젝트] 트위터 클론코딩 9회차(完)
2022. 1. 30. 22:08
프로 젝트/트위터
🎉 성과 완성한 부분 구글 로그인의 경우 해당 email과 닉네임 그리고 프로필 사진을 불러와 화면에 표시했다. ✨ 느낀점 👍 알게 된 점 user정보에서 데이터 가져오기 로그인 한 유저의 데이터에서 displayName, email, photoURL 데이터를 통해 구글에 입력한 정보를 화면에 표시할 수 있다. 💬 나의 다짐 학원 신청 길고 길었던 React 토이 프로젝트가 끝났다. 끝나면 속이 시원해야하는데 그렇지가 않다. 작년 6월에 전역하고 오늘까지 공부만 하니 삶에 의욕이 없는거 같다. 학원없이 혼자서 공부하고 취업하겠다는 계획은 철회하고, 늦었지만 지금이라도 학원을 신청해야겠다.

[공부] 노마드 코더 React 5회차(完)
2022. 1. 17. 22:31
공부/프론트엔드
✨ 느낀 점 👍 알게 된 점 영화API 크롤링하기 const getMovies = async() => { const json = await ( await fetch( `url주소` ) ).json(); } 위의 코드로 url주소에 있는 데이터를 json이라는 변수에 넣었다. json을 콘솔창에 띄우면 data안에 내가 찾고자 하는 movies 가 있다. 찾는 방법은 다음과 같다. const [movies, setMovies] = useState([]); . . . . setMovies(json.data.movies); json에서 data키값안에 movies키값을 전부 movies에 넣게 되었다. map함수로 빼낸 데이터 중, 값이 있는것만 선별하기 내가 찾는 genres의 데이터가 없으면 에러가 뜨는 ..
[공부] 원티드 프리온보딩 프론트엔드 사전과제 (Slider)(完)
2022. 1. 16. 13:21
공부/프론트엔드
✨ 느낀 점 ❓ 궁금한 점 className이 변수인 경우 css를 어떻게 적용시키지? css파일을 통째로 import 해서 적용시켰다. 어찌어찌 css를 적용시켰지만, 그 결과로 코드는 난잡해졌다. 💢 어려웠던 점 라이브러리 없이 슬라이드를 도저히 못 만들겠다. 라이브러리를 이용하여 캐러셀을 만들어보려고 시도한 게 10번은 넘은 거 같다. 그 시간 동안 많은 시행착오를 겪었지만, 결과적으로 라이브러리를 사용하여 이미지 슬라이드를 만들게 되었다. JavaScript를 이용해 이미지 슬라이드를 만드는 방법은 이해했는데 React로 만드는 방법은 모르겠다. 정교한 반응형 웹을 어떻게 만들지? 반응형 웹에 대해 내가 배운 것은 단 한가지였다. 내가 배운 대로 Navigation 배너는 순조롭게 개발을 완료했지..

[1人 프로젝트] 키즈가오 클론코딩 2회차(完)
2021. 12. 17. 22:58
프로 젝트/키즈가오
모두의 HTML5 & CSS3 - 교보문고 16일 만에 배우는 웹 사이트 제작 기초 | 누구나 16일이면 웹 사이트를 만들 수 있다!Day 01-03 | 웹 사이트 설계를 위한 HTML 기초 익히기웹 사이트 제작에 필요한 배경 지식 및 기본적인 레이아웃의 www.kyobobook.co.kr 🎉 성과 완성한 부분 HTML, CSS로 제작한 웹사이트에 애니메이션 효과 적용 완성한 이유 HTML과 CSS도 익숙하지 않아 어렵게 작업했는데, 애니메이션 부분은 더 어렵기 때문에 애니메이션 효과 넣기 전까지 완료했다. ✨ 느낀점 🧡 좋았던 점 기초 개념을 잡는데 도움 애니메이션 효과를 넣는 방법에 대해 모르고 있었는데, 실습을 통해 animation과 @keyframe의 이용방법을 습득 할 수 있었다.특히, -we..