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

❗❗ 데브코스 32일차 (09.14) 오늘 주제는 Drag&Drop 이벤트 처리에 대해서 학습을 진행했다. 웹사이트를 이용하게 되면 Drag&Drop을 많이 사용해봤을 것이다. 예를들어 이미지를 옮기거나 폴더에서 파일을 옮길때도 Drag&Drop 이벤트가 발생하고, Notion(노션)을 사용할때도 자유롭게 Drag&Drop을 이용해서 컨텐츠 정보 위치를 바꾼다. 위의 예시들은 모두 구현 방법은 제각각이지만, 원리는 동일할 것이다. 여러가지 옵션이 있지만 해당 로직에서는 크게 3가지를 통해 구현했다. 1. dragstart - Drag를 시작했을 때 발생하는 이벤트 $이벤트대상.addEventListener("dragstart", (e) => { //drag 처리할 대상 DOM const $li = e.t..

❗❗ 데브코스 28일차 (09.08) Vanilla JS Part 2과정이 시작됐다. Part2 과정은 조금 더 프론트엔드 과제 테스트에 중점을 두어, 과제 테스트에서 많이 사용하는 유형을 토대로 강의가 이루어졌다. 오늘 다룰 주제는 "무한 스크롤 UI" 구현하기 이다. 유튜브나 페이스북에서 스크롤하면 자동으로 컨텐츠를 불러오는 것을 종종 볼 수 있는데 어떤 원리인지 평소 궁금했는데 이번 기회를 통해 학습할 수 있어서 매우 좋았다. ❓무한 스크롤이란❓ 컨테츠를 페이징 하는 기법 중 하나로, 아래로 스크롤하다 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식. 주로 모바일 환경에서 자주 사용됨. ex) facebook, twitter, instagram 등에서 사용되는 기법이다. ✅무한 ..

❗❗ 데브코스 31일차 (09.13) "고양이 사진첩 만들기" 실습이 끝나고 아주 간단한 과제가 주어졌다. 각각의 컴포넌트에서 상태 변화시 setState에 들어오는 값에 대한 정합성 체크하기 불필요한 render 제거 백스페이스 눌렀을때 이전 경로로 가기 ✅ 정합성 체크 정합성 체크는 방어 코드의 일환으로 상태 값을 컨트롤할 때 항상 방어 코드를 작성하는 습관이 들여있으면 좋을 것 같다. 정합성 체크는 typeof로 판별해 주었다. 각각의 컴포넌트가 사용하는 type (boolean, object) 등에 따라 setState 발생 시, 해당 type을 체크와 값 여부를 체크해 주었다. 잘못된 타입이 들어오게 되면 다음과 같이 에러를 발생시키게 했다. throw new Error("타입 에러"); 정합성..

❗❗ 데브코스 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 처리를 개발자가 신경써줘야한다. 몇몇 클라우드 서비스에서는 자동으로 지..