프론트엔드 개발자의 기록 공간

❗❗ 데브코스 27일차 (09.07) 오늘은 프로젝트 배포 방법에 대해 학습했다. 프로젝트를 수행하여 해당 정보를 readme.md로 기록하거나, 블로그에 남겨도 좋지만, 제일 좋은 방법은 배포된 사이트를 함께 제출하는 방법이다. 제3의 이용자가 배포된 사이트를 이용하면서 조금 더 확실하게 느낄 수 있고, 면접관분들께도 훨씬 이해하기 쉽기 때문이다. 여러 클라우드배포 방법에는 여러 방법이 있지만, 다음과 같은 방법으로 배포를 하면서 각각의 장단점을 소개할 예정이다. 또한 이 중 하나의 방법을 채택하여 직접 배포를 할 예정이다. 배포를 진행할 프로젝트는 History API 기반의 SPA를 프로젝트로 import 경로, url, 404 처리를 개발자가 신경써줘야한다. 몇몇 클라우드 서비스에서는 자동으로 지..

❗❗ 데브코스 26일차 (09.06) 6주차가 시작됐다. 약간의 일정 변경으로 인해, 오늘 하루는 CSS 심화 과정을 다루게 됐다. 평소 CSS에 관심이 없어서 항상 디자인 프레임워크만 사용해서 CSS 레이아웃에 관해 공부해야지 마음만 먹다가 결국엔 이번 과정을 통해 학습하게 됐다. 왜 나는 항상 프레임워크나 편한 것에 의존하면서 개발했는지 Vanilla JS에 이어 오늘 또 반성하게 됐다.... CSS 레이아웃 방법에는 크게 Float, Position, Flex, Grid가 존재한다. 각각의 특징과 사용법을 간단히 다루어 보자. ✏️ Float float는 "띄운다"라는 의미가 있고, 정렬을 위해 사용되는 속성이다. 가장 흔하게 사용하는 경우가 사진과 텍스트를 함께 나열할 때 사용된다. [float ..

❗❗ 데브코스 21~25일차 (08.30~09.03) 👨‍💻 Notion Clone 프로젝트 5주차는 VanillaJS 개인 프로젝트로 진행되었다. 지난번에 실습한 "자동 저장 편집기 만들기"를 활용하여 Notion clone 과제였다. 기본 요구 사항은 다음과 같다. ✏️ 기본 요구사항 바닐라 JS만을 이용해 노션을 클로닝합니다. 기본적인 레이아웃은 노션과 같으며, 스타일링, 컬러값 등은 원하는대로 커스텀합니다. 글 단위를 Document라고 합니다. Document는 Document 여러개를 포함할 수 있습니다. 화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링합니다. Root Document를 클릭하면 오른쪽 편집기 영역에 해당 Document의 Con..

❗❗ 데브코스 20일차 (08.27) ✏️ 이어서 자동 저장 편집기 만들기 실습을 진행했다. 어제 무작정 line by lien으로 실습을 진행하니 후반부에 들어서서 컴포넌트 간의 관계, 데이터 흐름이 이해가 가지 않았다. 그래서 실습은 잠시 접어두고, 처음부터 강의를 보면서 컴포넌트간의 관계, 데이터 흐름, 기능에 집중하면서 들었다. 필요한 부분은 그림을 그리고 설명을 적으면서 강의를 보다 보니 놓치고 있었던 것들이 하나둘씩 눈에 들어오기 시작했다. 그 후, 전체 강의를 그렇게 듣고 나서 실습을 진행하니 내가 어떤 기능을 추가해야 하고, 데이터를 어떻게 처리해야 하는지 그제야 이해가 됐다. (주말까지 학습을 진행했다) 데이터 편집 시 Local Storage와 API를 함께 사용하다 보니 처리해야 하는..

❗❗ 데브코스 19일차 (08.26) ✏️ TodoApp 실습에 이어서 두번째로 자동 저장 편집기 만들기 실습을 진행했다. 요구사항을 간략하게 표현하자면 다음과 같다. PostsPage - posts를 서버에서 불러와 렌더링하고, 클릭 시 해당 post를 수정하는 곳으로 이동 fetch api를 활용해 post 저장, 불러오기, 수정하기 기능 개발 PostEditPage - post를 생성하고 수정하는 페이지 route처리를 통해 기본 경로로 들어왔을때 컴포넌트, post클릭시 해당 포스터 보여주는 컴포넌트 분리 한마디로, 메모장 기능같이 원하는 텍스트의 제목, 본문을 입력하면 해당 post가 저장이 되고 기본경로에 post의 제목이 list형태로 렌더링 되어 보여지는 기능이다. TodoApp에 비해 처..

❗❗ 데브코스 18일차 (08.25) ✏️ ~~ing 어제에 이어서 To do App을 만드는 실습을 계속 진행했다. 기본적인 fetch api, 데이터 흐름까지는 이해할 수 있었지만 세세한 디테일이나, 낙관적 업데이트, 비동기 처리가 엮기면서 조금씩 이해하기가 힘들어졌다. 강의를 수강 후에, 코드를 보며 컴포넌트 구조를 그려갔다. 이제서야 눈에 보였다... 앞으로 두번 세번 봐야 진짜 내 것이 될 것같았다. 평소 React로만 개발을 했어서 VanillaJS로 개발하는 과정에서 많은 것을 배울 수 있었다. VanillaJS로 구현하다보니 state, props등의 관리가 다소 까다로웠고 왜 React가 나왔고 사용하는지 조금 더 깊게 이해할 수 있었다. 왜 사람들이 기본기를 중요시하고 또 과제테스트를 ..