프로그래머스 데브코스 프론트엔드 3기 ✓ TIL DAY - 29~30 🗓 6주차 마무리.. vanilla JS 강의는 끝이 났고 4일간의 CSS학습의 중간(2일 차 수강 완료)에 왔다. 팀원들과 나름 친해지기도 하고 과제를 마무리하여 월드컵 첫 경기를 관람하는 여유(?)를 누렸다. 경기가 끝나고 깃허브를 확인하니 멘토님께서 코드 리뷰를 남겨주셨고 주말을 활용해서 노션 클로닝 프로젝트 리팩토링과 팀원들의 6주 차 과제 코드 리뷰를 진행할 예정이다. 늘 새로운 CSS CSS 강의를 시작하며 로토님과는 다른 스타일의 강의에 적응하고 있다. 영웅님의 강의 스타일은 정반대의 느낌이다.😅 강의 속도가 빨라 짧은 시간 안에 많은 내용들을 배우게 되는 것 같다. 그동안 CSS를 등한시한 경향이 있었는데 우선순위라던지 ..
프로그래머스 데브코스 프론트엔드 3기 ✓ TIL DAY - 28 🗓 오늘은... Drag Event 간단한 drag & drop 기능을 활용한 프로젝트를 진행했고 다양한 이벤트들이 있다는 것은 알고 있었지만 사용해본 적 없는 drag 이벤트를 활용법을 배우게 되어 간략하게 정리하려고 한다. 이번 강의에서 학습한 내용은 어떠한 요소를 drag & drop하여 해당 객체로 이동하는 간단한 프로젝트로 3가지 단계를 거쳤다. dragstart 목표로하는 요소를 드래그를 시작하면 실행되는 이벤트 해당 부분에서 e.datatransfer.setData를 이용하여 값을 저장한다. dragover 드롭이 가능한 부분에 올라갔을 때 실행 e.preventDefault()를 통해 drag를 허용해야 한다. e.datatr..
프로그래머스 데브코스 프론트엔드 3기 ✓ TIL DAY - 27 🗓 오늘은... 고양이 사진들을 많이 봐서 힐링하는 느낌 오늘은 강의를 통해 검색기를 구현했다. 자동완성 API와 디바운스를 활용하였고 상태 값이 바뀔 때만 setState를 한다던지 방향키로 목록을 고를 수 있는 기능들을 구현해보았다. 반복적이라고 느껴지기도 하지만 소소하게 새로 배울 점들이 생겼다. 이전에 구글 클론하며 여러 기능을 사용해보았는데 vanilla JS로 구현하는데 큰 의미가 있다고 느꼈다. 여전히 상태 관리가 어렵긴 하지만 프로젝트 리팩토링을 통해 더 학습해보려고 한다. 6주 차 과제 마무리 오늘 배운 내용들을 참고하며 과제를 마무리 지었다. 이번 과제에서는 예외처리와 상태 값의 타입을 체크하는데 시간을 들였고 valida..
프로그래머스 데브코스 프론트엔드 3기 ✓ TIL DAY - 26 🗓 오늘은... 새로운 팀, 새로운 과제 오픈 미팅 이후부터 새로운 팀에 속하게 되었다. 이번 팀은 4명으로 구성되었고 짧게 인사를 나누고 서로 이전 팀에서 진행했던 내용들을 공유하며 좋은 점만 가져오려고 노력했고 이후 아이스브레이킹용 캐치마인드 같은 게임을 하면서 조금은 친해질 수 있었다. 새롭게 시작된 것은 팀뿐만이 아니라 과제도 있는데 다행히도 이번에는 0부터 만드는 것은 아니고 강의를 통해 학습한 내용을 보완하고 기능을 추가하는 프로젝트를 진행하게 되었다. 바로 브랜치를 만들고 강의 내용부터 커밋을 시작했다. 지난 프로젝트를 통해 성장하긴 했구나.. 이번 강의에서 배운 내용들이 지난 노션 클로닝 프로젝트 이전에 공부했다면 좋았겠다는 ..
프로그래머스 3주 차 과제 회고 Simple Todo List 리팩토링까지 완료 후 작성하는 3주 차 과제 회고 다행히도 리팩토링은 노션 프로젝트 PR을 한 이후에 진행하게 되어 바쁘지 않게 진행할 수 있었습니다. 이번 회고에서는 프로젝트를 진행하며 궁금했던 점들이나 어떤 식으로 코드들을 개선했는가에 대해 작성해보려고 합니다. 자칭 Todo List 장인..? 이전에도 Vanilla JS와 리액트를 이용한 미니 Todo list 프로젝트를 진행한 경험이 있어서 프로젝트 초기에는 자신감이 넘쳤다. 물론 컴포넌트 방식으로 진행해본 건 처음이지만 강의를 통해 방법을 이미 학습하고 난 후 진행하여 혼자서도 잘 만들 것이라고 생각했으나.. 아마 선행했던 강의 코드를 참고하지 못했다면 시간이 더 필요했을 것 같기도..
프로그래머스 데브코스 프론트엔드 3기 ✓ TIL DAY - 25 🗓 오늘은... 무한 스크롤 구현과 궁금했던 문제 해결 처음 강의 이름을 들었을 때는 어떠한 오류를 해결하는 내용인 줄 알았다.😅 무한 스크롤은 SNS(페북, 트위터, 인스타...)에서 주로 보이듯 모든 사진이나 글들을 표시해놓고 보여주는 기법이 아닌 스크롤이 아래쪽에 닿을 때 새로운 사진들을 로드해 첫 로드 지연 시간을 단축시켜주는 방법이다. 두 가지 방법이 있었고 각 방법마다 장점이 있었다. scroll event를 이용하여 계산하는 방법 로드되어진 페이지의 height를 계산하여 아래쪽에 도달할 때 새로운 데이터를 불러오는 방식 단점으로는 스크롤이 발생할 때마다 이벤트가 발생하고 계산이 이뤄진다는 점이 비효율적이다. intersecti..
🚀 새로운 블로그로 이전했습니다.
살펴보러 가기
