[데브코스] WEEK6🚀

프로그래머스 데브코스 프론트엔드 26일차

CSS 넘어 CSS ~~ 💗

데브코스 6주차가 시작되었다. 강의 영상 준비로 인해 오늘은 먼저 CSS를 듣게 되었는데 최근 만들었던 송송노션에서 가장 어려웠던 점이 프로젝트 설계부분, CSS... 였기 때문에 주말내내 html와 CSS를 어떻게 공부해야할지에 대해 고민했었다. 많이 만들어보는것이 중요하다고 했지만 뭘 알아야.. 뭘 어떻게 짜야 좋은건지 알아야 짤 수 있다는 생각에 머뭇머리고 있었는데, 딱 마침 귀에 쏙쏙 들어오는 CSS 설명과 orange, royalblue, tomato를 좋아하시는 강사님덕에 레이아웃을 짜는 CSS 요소에 대해 알게 되었다. 또한 데브코스만의 네트워크⭐에서 CSS를 더 연습해볼 수 있는 정보를 갓챠- 했고! 그걸 이용해 차근차근 부족한 부분을 채우고 싶다.

데브코스 + 막학기 + α? 🤪

얼마 전 개강을 했댜...... 벌써 강의가 밀려있댜... 교수님들... 존경합니다...
아직 개강 첫주. 종강이 너무 너무 간절하지만, 나는 할 수 있어요!!!! 그리고 틈틈이 연휴를 틈 타 포트폴리오 만들기를 도전해볼까한다. 우선, 쉴 때 다른 사람들의 포트폴리오를 보고 영감을 얻고 추석연휴나 대체 공휴일처럼 데브코스 수업이 없을 때 만들어보기로 했다. 화이팅!

프로그래머스 데브코스 프론트엔드 27일차

내 자식 나만 볼 수 없지 🎉

어제 CSS를 뒤로 하고 다시 바닐라JS 역량심화2로 넘어왔다. 가장 먼저 만난 주제는 배포를 어떻게 하나? 였다. 몇가지 서비스를 알려주시고 각각 SPA에서 겪는 404에러를 어떻게 처리해야하는지에 대해 배웠다. 처음 본것도 있고 멘토님께 추천 받았던 툴도 있었다. 열심히 로컬에서 만들어도 혼자밖에 볼 수 없다면 매력적이지 않다. 그리고 배포를 해보고, 직접 운영을 통해 얻는것도 많다고 하시기 때문에 이번에 만들었던 송송노션을 배포해볼까! 고민중이다.

사부작 사부작 배포 🚐

배포는 어려워 배포는 어려워 하다가 github pages를 이용해 배포를 해보았다. github을 이용한 이유는, 1) 깃헙은 무료다. 2) 나머지 도구를 이용해보기엔 마음이 조급하다. 3) 충분히 정적이라고 생각한다. 정도로 들 수 있다. gh-pages 브랜치를 이용해 만들고, 브랜치를 이용해 수정 및 배포를 하는 식의 방법으로 진행했다. 원래 만들어두었던 깃헙 블로그가 있었고, 또 배포를 해보고 싶었기 때문에 repo 이름을 달리 설정했고, depth 문제를 맞딱뜨렸다. 하지만 라우팅과 history API 쪽의 url를 하드코딩식으로 수정했더니 오류는 뚝딱! 잡혔다. 몬가 휘뚜루마뚜루 되고 있지만 마음에 들지 않는다.. 😭 하지만 그걸 고칠 수도 없지.. 😭 그래도 내가 만든 내 자식이 이 세상에 보여진다는 것 자체가 매-우 뿌듯하다.

• 송송노션-내자식이에오

프로그래머스 데브코스 프론트엔드 28일차

에옹이를 보고 싶다면 스크롤을 굴리시라구욧~ 😸

어제 배포 강의를 뒤로 하고 마치 프론트엔드 지원하면 만날 수 있는 개발 과제 같은 너낌의 바닐라 자바스크립트 ~ 가 시작되었다. :) 오늘 첫번째로 만난 프로젝트는 무한스크롤 만들기! 이미지의 Path를 제공하는 API와 연결해 스크롤하면서 에옹이 사진을 볼 수 있는 프로젝트다. 스크롤의 포인트는 컨텐츠 마지막 요소를 볼 즈음 다음 컨텐츠를 불러오는 방식 이라고 할 수 있다. 이를 구현하기 위해선 2가지 접근 방법이 있다. 1) scroll 이벤트 이용하기 2) intersection observer 이용하기. 이 두가지를 이용해 무한 스크롤 프로젝트를 완성했다-

사실 예전에 공부를 하면서, scroll 이벤트에 대해선 실습을 해본 경험이 있었다. 하지만 scroll 이벤트 발생 + 거기에 따른 API fetch + setState를 하는 과정과 더 이상 불러올 이미지가 없는 경우 처리 + 가장 마지막 이미지가 화면에 들어왔을 때 감지 하는 기능까지 추가되어 더 효율적이고 사용감이 편한 무한 스크롤 프로젝트는 처음이었다. 노션 프로젝트를 하면서 굉장히 반복적이다? 라고 느꼈던 건 경기도 오산...! 이번주는 계속해서 요론조론 기능들을 만드는 시간이 이어질텐데 많이 기대된다. 😊

프로그래머스 데브코스 프론트엔드 29일차

캣캣 사진첩 만들기 📁

오늘 배운 주제는 고양이 사진첩 만들기!! 간단하게 얘기하자면, API를 이용해 여러 디렉토리와 파일로 이루어져 있는 사진첩을 구현하는 것! 핵심 구현 내용은 트리 구조로 되어있는 사진첩을 표현하기와 이미지 외 부분 클릭시 닫기 으로 나눌 수 있다. 우선, 노션 프로젝트를 하면서 API에게 페이지 id를 보내기 위해 재귀적으로 id의 부모와 그 위치를 찾아주는 작업을 했다. 이때 로직이 한참 떠오르지않아 서터레스 받았던 기억 때문인지, API 호출로 쉽게 해결되는 사진첩을 보고 쓰린 속이 쏴아ㅏ~ 하고 내려가는 기분을 느꼈다. 여태 강사님과 함께 했던 컴포넌트 방식 바닐라 JS로 구현하기 이기 때문에 사진첩 또한 컴포넌트 형식으로 나누고 state 관리를 통해 의존성이 낮고 모듈의 독립성이 높은 멋짐 폭발하는 방식으로 구현했다.
데브코스에 들어오기 전엔 바닐라 JS 잘한다 = 나는야 javascript 백과사전~? 이라는 편견이 있었고, 들었던 강의나 책의 예제에서도 컴포넌트식으로 짜는 방법에 대해 배우진 않아서 생소했지만 App.js에서 state를 관리하고 하위 컴포넌트들은 그저 내려준 데이터를 가지고 랜더링하는 방식으로 사용한다는 것이 너-무 효율적이고 익숙해진 것 같다. 어느새 눈감고(?)도 기본적인 틀을 타이핑하는 나를 칭찬해… ⭐

프로그래머스 데브코스 프론트엔드 30일차

복작복작 고양이 😸

늦게 쓰는 TIL라 기억이 안나요..

바닐라 JS로 구현하는 복작복작 여러기능을 4번째! 이번에는 고양이 사진 검색기에 대한 강의가 이어졌다. 이제는 컴포넌트방식으로 구현하는 방법이 많이 익숙해진 것 같다. 하지만 새로운걸 배우면 늘 너무 새롭게 때문에 ㅎㅋㅎㅋㅎㅋ 갈길이 멀다 - !
새롭게 알게 된 것은 옵션 창에 대해서 키보드 상하 버튼으로 선택 메뉴를 변경하고, 엔터와 같은 키로 검색에 대한 키워드를 입력하는 방법! 역시나 디바운스 처리로 서버에 대한 요청을 간소화하고, 효율적인 프로그램을 만들 수 있었고 컴포넌트로 다 분해해 각자 주어진 일을 서로 영향주지 않고 뚝딱뚝딱 만들어냈다.
컴포넌트 방식으로 바닐라 JS만을 사용해 여러 기능을 만들어보면서 느낀 것은, 명령형보다 뭔가 멋지다- 라는 것이었다. 물론 명령형 처음 배울 땐 이렇게 또 멋질수가 없었다. ㅎㅋㅎㅋ 하지만 제 각기 간단하게 기능을 하나하나 만들고 하나로 합쳐졌을 때 원하는 기능을 뙇!!! 하고 가져온다는 것이 너-무 마음에 든다. 그래서 후에 배울 리액트나 뷰 같은 프레임워크가 너무너무 기대되는 중 - !