🎈 프로그래머스 데브코스 6주차

6주차는 지금까지 JS의 기본기를 마무리하는 한 주였다. 고양이 사진첩 만들기, 고양이 사진 검색기 만들기, Drag & Drop 실습을 통해 지금까지 학습한 JS를 실습을 통해 다시 한번 복기하였다. 6주차부터 CSS 심화에 들어갔다.

Week6 - Day 1.

고양이 사진첩 만들기 실습은 폴더와 파일로 구성하였고, 폴더 안에 폴더, 폴더 안에 사진 파일 등 운영체재의 폴더 형식으로 구현했다. 폴더 형식이다 보니 breadcrumbs 또한 같이 구현했고, api를 불러오는 동안 loading 창을 보여줬다.

breadcrumbs, loading, esc와 backspace 이벤트

Week6 - Day 2.

고양이 사진 검색기 만들기 실습은 input에 단어를 입력하고 입력한 단어를 포함한 모든 검색어 목록을 list 형태로 보여주고 검색 list는 화살표 버튼과 엔터를 통해 원하는 검색어로 이동하여 해당 사진을 가져올 수 있도록 구현했다.

자동 완성 검색, 화살표로 list 이동

Week6 - Day 3.

기존에 만들었던 TodoList에 Drag & Drop 기능을 추가하는 실습을 하였다. 완료 Todo와 미완료 Todo 를 구분하고 Drag & Drop을 통해 완료, 미완료 TodoList에 변화를 주었다. 다양한 Drag & Drop 이벤트를 접하였고 라이브러리로만 사용했던 D&D를 직접 JS로 구현하니 흥미로웠다.

Drag & Drop

Week6 - Day 4.

CSS 첫날이었다. CSS의 기본은 알고있다는 전제하에 수업이 시작되었다. 간단한 속성들이 아닌, 심화 속성들을 배웠고 평소에 잘못알고 있던 CSS 지식을 다시 배워보았다.

Float, Position, Flex, Grid

Week6 - Day 5.

다섯 째날에는 Grid에서 사용되는 functions들과 Grid Item의 심화부분과 Transform 3D 3차원에 대해 배웠다. 또한 CSS에서 쓰이는 함수들에 대해서 자세히 배웠다.

Grid Item, Grid Fucntions / Units, Transform 3D, columns, Filter

회고

이번주를 끝으로 JS가 끝나고 CSS가 시작되었다. 아직 JS가 미흡하다고 생각된다. 주말마다 JS를 다시 복습하는 시간을 가져야 Vue나 React를 배울 때, 큰 어려움이 없지 않을까 싶다.
CSS를 제대로 배우는 건 이번이 처음이여서 방대한 양을 머리 속에 다 넣지 못했다. CSS는 간간히 프로젝트를 하면서 찾아보면서 손과 눈에 익혀야겠다 생각이 든다. 그래도 대략적인 큰틀은 빠르게 머리속에 집어넣야겠다.