국비지원 교육 추천 코딩 부트캠프 추천

프로그래머스 데브코스 과정 중 7월 한달간의 회고

7월 한달 동안 데브코스 과정중에 배운 내용은 이렇다.

프로그래머스 스쿨 강의

• VanilaJS
• CSS, SASS(SCSS)
• TypeScript

특강

• 함께 자라기- 김창준님
• 프론트엔드 테스트 - 한재엽님

스터디

• 미니프로젝트 스터디

Vanilla JS

저번 주차에 이어서 JavaScript로만 여러가지 만들어 보았다.

과제 - 고양이 사진 검색기 만들기 PR 링크

VanillaJS 마지막 과제인 고양이 사진 검색기를 만들어 보았다. 개인적으로 지금 까지 과제중에 가장 재미있게 했었다. VanillaJS 만을 사용해서 무언가를 만들어보고 마지막으로 피드백을 받을 수 있어서 그랬던것 같다.

특히 숫자나 문자열을 하드코딩을 최대한 줄이기 위해 constants 파일을 따로 만들어서 상수화처리를 하였고 에러 메시지를 함수형태로 꼼꼼히 만들어 보았다. 하면서도 조금 과한가? 라고 생각이 들었었다. ㅎ

그리고 state에 대한 validation 하는 로직과 각 컴포넌트의 setState함수를 state가 변할 때만 실행되게 현재 state와 nextState를 비교할 수 있게 compare 파일을 만들어서 작성하였고 처음에는 컴포넌트마다 validation 로직과 compare 로직을 따로따로 넣어 주었는데 멘토님의 피드백을 받고 compare 안에서 validation까지 검사를 하게 수정해서 컴포넌트의 코드가 조금 더 깔끔해졌고 관리포인트를 줄일 수 있었다.

CSS,SASS(SCSS)

과제 - SCSS 로만 웹페이지 클론코딩 하기 배포 페이지

프론트엔드 공부를 하면서 CSS를 조금 등한시 하지 않았나 라는 생각이 많이 들었다. 강사님도 그런 얘기를 하셨는데 CSS를 프론트엔드가 안하면 누가하나? 라는 얘기를 듣고 뼈를 맞았다.

CSS는 기본은 알고있었다고 생각했고 SCSS는 처음 사용해보았는데 생각보다 정말 많은 기능이 있었고 CSS를 넘어서 자바스크립트와 유사한 기능도 있다는 생각이 들었다.

과제로 유튜브 메인 페이지를 클론해 보았는데 HTML 태그를 시멘틱 태그를 최대한 활용해 보려고 했고 @media를 활용해서 반응형으로 만들어 보았고 Flex와 Grid를 주로 사용하려고 노력했다. 레이아웃을 만들 때 Flex와 Grid중 어느것을 사용하는 것이 좋냐고 멘토님께 질문했는데 1차원 레이아웃은 Flex, 격자형태를 띄고 있는 2차원의 경우에는 Grid를 사용하시는것을 추천받았다.

유튜브의 모든 반응형 디자인을 다 구현하지는 못했지만 그래도 웹페이지를 만들어보니 뿌듯했고 아직 과제를 배포해본적이 없어서 이번기회에 Vercel을 사용해서 배포해보았다. Vercel을 사용하니까 예상보다 굉장히 편하게 배포가 되어서 조금 놀랐다.

TypeScript

TypeScript는 기본 타입의 종류만 알고 있었고 사실 사용해 본적이 없었다.

강의를 통해서 TypeScript의 기본 문법에 대해 어느정도는 숙지를 한것 같지만 TypeScript를 잘 사용, 활용하는 것은 아직 많이 부족함을 느낀다. 그래서 typescript-exercises에 있는 TypeScript 문제들과 이펙티브 타입스크립트 책을 보면서 꾸준히 공부하려고 하고 써먹어보려고한다.

미니프로젝트 스터디

두 달간의 미니프로젝트 스터디가 끝이 났다. 데브코스를 들어오고 첫 스터디였고 데브코스 외에서도 제대로된 스터디를 하는 것은 처음이었다. 너무 좋은 스터디원들을 만나서 재미있었고 발표도해보며 유익했었고 정말 좋은 기억으로 남을것 같다.

앞으로 하고 싶은 것

• 알고리즘 문제를 안푼지 너무 오래된것 같다. 오랜만에 문제를 풀어보았는데 감이 무뎌진거 같아서 매일 한 문제를 푸는것을 목표로 해봐야겠다.