프로그래머스 데브코스 프론트엔드 3기 ✓ TIL DAY - CSS (SCSS, autoprefixer) 🗓 CSS 강의를 마치며 생각보다 똑똑한 CSS (:root, @support, @media) 이전 강의에 이어 CSS 변수와 @support, @media 기능 쿼리에 대해 학습하였다. 변수를 선언하는 것은 이전에 사용해본 적이 있다. 변수 선언 :root 선택자 안에 --color-muted와 같은 형태로 변수를 선언하여 사용할 때에는 var(--color-muted)로 사용 가능하다. 문서의 루트 트리에 변수를 지정하는 것으로 html의 루트 요소는 html로 root 선택자와 같지만 명시도가 더 높기에 root를 사용하여 변수를 지정한다. @support 기능 쿼리 사용자의 브라우저가 어떠한 조..
프로그래머스 데브코스 프론트엔드 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 프로젝트를 진행한 경험이 있어서 프로젝트 초기에는 자신감이 넘쳤다. 물론 컴포넌트 방식으로 진행해본 건 처음이지만 강의를 통해 방법을 이미 학습하고 난 후 진행하여 혼자서도 잘 만들 것이라고 생각했으나.. 아마 선행했던 강의 코드를 참고하지 못했다면 시간이 더 필요했을 것 같기도..
