목록프로그래머스 데브코스_FE (56)

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

[VanillaJS] 고양이 사진첩 만들기

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

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

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

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

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

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