개발이 하고싶은, 첼시를 좋아하는

프로그래머스/데브코스 프론트엔드

[TIL] 2022-05-27 / 50일차(React - Hook 1)

오늘 배운 내용 Day 50의 강의는 여러 컴포넌트를 생성하는 방법(Storybook을 이용한)이었다. 재사용이 가능한 컴포넌트를 생성하고, Storybook에서 결과를 확인하는 식의 방식이었다. Text, Header, Spacer, Image, Spinner 등 자주 사용될 만한 컴포넌트를 생성하는 내용이었고, 각 컴포넌트를 생성하는 함수 내부에서 Hook을 종종 사용했었다. 이전 강의(Day 48, 49)에서 '분기와 반복' 그리고 '상태와 이벤트 바인딩'에 대한 내용을 다루면서 Hook을 사용하기 시작했다. 그때 당시에는 대략적인 이해만을 하고 넘어갔었다. 사용 사례 강의나 재사용이 될만한 여러 컴포넌트를 생성하는 것에 대한 강의를 보면서 Hook에 대한 이해가 없이는 무의미하다 싶어 Hook에 ..

프로그래머스/데브코스 프론트엔드

[TIL] 2022-05-25 / 48일차(React)

오늘 배운 내용 React를 공부하는 방법? 라이브러리는 개발을 돕기 위해 여러 기능을 모아둔 모듈이다. 라이브러리, 프레임워크를 사용할 때 깊은 depth까지 제대로 파고들어야 잘 활용하거나 제대로 활용할 수 있다는 생각에 깊게 공부하는 바람에 어렵게 느껴질 수 있다고 한다. 기능의 구체적 원리, 코드를 알기 위해 깊게 파고들기보다는(나중에 천천히 공부하는 방향성을 갖고) 천천히 공부해 가는 것을 추천한다고 한다. 파일 구조 – React A JavaScript library for building user interfaces ko.reactjs.org 우선 '컴포넌트 자체만'을 열심히 생각하는 자세로 첫 시작을 해야 한다고 한다. 재사용성, 확장성을 미리 생각하고 개발을 하는 것은 쉬운 일이 아니라고..

프로그래머스/데브코스 프론트엔드

[TIL] 2022-04-29/05-01 / 29, 30일차

오늘 배운 내용 CSS CSS: Cascading Style Sheets | MDN Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌 developer.mozilla.org CSS float float 속성은 과거 수평 정렬을 위해 많이 사용했는데, 최근 1차원 레이아웃 구조를 만들 때 flex 기술이 있어 수평 정렬을 위해 float 속성을 사용하는 빈도가 많이 줄었다. 과거에 작성된 프로젝트에 float으로 수평 레이아웃이 짜인 프로젝트가 종종 있을 수 있다. float 요소를 사용하기 위해서는 float..

프로그래머스/데브코스 프론트엔드

[TIL] 2022-04-28 / 28일차

오늘 배운 내용 오늘도 어김없이 하루 지나 작성하는 TIL. 과제를 다 끝내고 PR 날린 후에 작성하려 했는데, 어쩌다 보니 과제를 시간에 빡빡하게 맞춰 제출하게 되어 하루 지나 TIL을 작성하게 되었다. URL() 생성자 지금 구현된 코드에서는 state에 대한 정합성 체크를 전혀 하지 않는데, 이 부분을 보충해주세요. 고양이 사진첩 만들기 강의를 듣고, 해당 코드에서 위와 같은 요구사항을 추가해 과제를 진행하는 것이 있었다. 필요한 state들이 있는지, state들의 값이 올바르게 들어가 있는지 체크하는 내용이다. 그래서 현재 프로젝트에서 어떤 state를 사용하는지 확인한 후, state 정합성 체크를 진행했다. App.js : [ isRoot, isLoading, nodes, paths, sel..

프로그래머스/데브코스 프론트엔드

[TIL] 2022-04-26 / 27일차

25일 월요일 강의를 듣고, 오후 7시 30분 로토(김태희 강사)님 특강 세션이 있어 오프라인을 다녀왔다. 지난 오프라인 때 참석 못했는데, 이번에 처음 참여하게 되어 너무 재밌었다. 구 찬희팀(임시팀) 분들과 만나서 인사도 나누고 현 요한팀 분들과 만나 밥도 먹고 간단한 얘기도 나누고 했었다. 특강 끝나고 집에오니 12시가 다 되어 다른 일은 못하고 강의만 듣고 하루를 마무리했다(아침에 부지런할 필요가..). 그 덕에 26일 차 TIL은 또 생략되었다...😥 오늘 배운 내용 오늘 하루 일정을 코드 리뷰로 시작했고, 리뷰가 끝난 후 지난번에 노션 클론 프로젝트를 AWS S3로 배포한 것을 cloudfront까지 접목해 배포했다. AWS cloudfront로 배포하기 https://docs.aws.amaz..

프로그래머스/데브코스 프론트엔드

[회고] 노션 클론 프로젝트 회고 / 2022-04-21 / 25일차

금요일 TIL은 14일부터 20일까지 진행한 노션 클론 프로젝트에 대한 회고다. 블로그에 따로 작성하려 했는데, 금요일에 팀 별 회고를 진행해달라고 해 노션으로 작성했던 내용을 적는다. 들어가기에 앞서 김태희(로토) 강사님의 바닐라 자바스크립트를 통한 기본 역량 강화 강의 내용을 바탕으로 노션 클론 프로젝트를 진행하게 되었다. 프론트엔드(자바스크립트)는 처음으로 공부해보는 것이라 강의 내용을 따라가기도 벅찼고(코로나로 강의를 제대로 듣지 못한 부분도 있었다), HTML, CSS 기본 구조도 없이 처음부터 끝까지 해야 한다는 것에 막막했던 게 사실이다. 구현 내용 순수 바닐라 자바스크립트로 노션의 기능을(일부분) 구현하는 것이다. API를 통해 데이터를 관리(새로운 데이터를 서버에 저장, 기존 데이터를 수..