프로그래머스 데브코스 프론트엔드 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 - 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기 ✓ TIL DAY - 21 ~ 24 🗓과제 마무리, Vanilla JS 심화 내용 시작 노션 클로닝 개선, 그리고 PR까지 우선 이번 수요일에 노션 클로닝을 마무리하였지만 아쉬움이 많이 남는다. 초기에는 완벽하게 이해하지 못하고 시작하여 방향을 잘 못 잡기도 하였고 마감 시간을 맞추는 게 목표였기 때문에 한 번은 다시 작성하려다가 포기하고 원래 내용으로 돌아왔다. 화요일부터는 어느 정도 방향성을 알게 되고 내가 놓치고 있었던 부분들이 보이기 시작했다. PR을 작성하며 만약 내가 다시 만든다면 고려할 방향들에 대한 질문을 많이 남겼고 초기 내가 목표로 하던 방향에 대해 작성했다. 이제 리팩토링을 진행하며 남들에게 자신 있게 보여줄 수 있는 수준의 클론을 만드려고 한다..
프로그래머스 데브코스 프론트엔드 3기 ✓ TIL DAY - 5 🗓오늘은... 벌써 1주차를 마무리하는 TIL을 작성하게 되었다. 주어진 강의를 듣고 실습 문제를 풀기만 해도 시간이 금방 지나갔다. 오늘 학습한 내용은 다양한 자료구조 (그래프, 트리, 힙, 트라이, 정렬, 이진 탐색)의 내용과 그래프 실습, 정렬 실습, 이진 탐색 실습 문제를 풀이하였다. 예전에 조금씩은 간략하게 공부했었는데 그 점이 도움이 조금 되었다. 해당 자료구조를 안다고 해서 문제를 해결할 수 있는 것은 아니라는 점을 느꼈고 다양한 문제를 접하고 그 자료구조를 많이 사용해 봐야 할 것 같다. 비교적(?) 간단한 과제인 최소 힙과 이진 탐색에 대한 과제를 늦게까지 하고 있었는데 매니저님께서 작은 선물을 보내주셨다.. (너무 감사합니다..
