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

❗❗ 데브코스 30일차 (09.10) 어제에 이어 고양이 사진첩 만들기(2)를 진행했다. 어제 기본 로직을 모두 수행하여, 오늘은 API 로딩 처리, 현재 위치 경로 표시 및 경로 클릭시, 해당 경로로 옮기는 로직을 수행했다. ✅ 로딩 처리 API 통신시에 딜레이가 발생하면 기다리는 동안 화면에 로딩중임을 표시하는 로직을 이번에 학습하게 됐다. 일반적인 사이트 이용시 마우스 커서가 동글동글 돌아가는 것도 일종의 로딩 처리이다. 로직은 매우 간단하다. API 컨트롤 하는 컴포넌트에서 state값에 로딩 표시를 의미하는 변수 추가(isLoading) 값이 true일때 로딩 처리 의미 API 요청 함수가 불릴때 해당 함수 안에서 API요청이 호출되기 전에 setState를 통해 isLoading값을 true로..

❗❗ 데브코스 29일차 (09.09) 오늘 다룰 주제는 "고양이 사진첩 만들기" 이다. 구현 요구사항 고양이 API를 통해 사진과 폴더를 렌더링 한다. 폴더를 클릭하면 내부 폴더의 사진과 폴더가 보여진다. 현재 위치한 폴더의 경로도 렌더링 해준다. 루트 경로를 제외한, 나머지 경로에서 뒤로가기 버튼 추가 이미지 클릭하면 모달창으로 이미지 보여줌 esc를 누르거나 이미지 밖을 클릭하면 모달창 닫기 API 로딩시 로딩 중임을 알리는 처리를 해준다. ✅ Modal 창 이벤트 예전에 과제테스트를 한번 경험삼아 본 적이 있었다. 요구 사항 중 하나가 이미지 클릭시 Modal 창으로 표현하고, 이미지 밖을 클릭하면 해당 모달창을 닫는 요구사항이었다. 그 당시에는 어떻게 구현해야할지 감이 안와서 그냥 지나쳤다. 하지..

❗❗ 데브코스 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를 함께 사용하다 보니 처리해야 하는..