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

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

[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
[VanillaJS] TodoApp(2)_낙관적 업데이트

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

❗❗ 데브코스 17일차 (08.24) ✏️지금까지 배운 VanillaJS을 활용한 TodoApp만들기 실습을 진행했다. 기본적인 구상은 다음과 같다. 초기 화면에 user들의 정보가 담겨져있는 userList가 나타난다. 이후 user를 클릭하면 user에 해당하는 todoList를 불러와 화면에 랜더링 한다. user에는 user추가 기능이 있고, todoList는 추가, 삭제, 토글 기능이 존재한다. 이 모든 기능은 fetch api 통신으로 처리한다. 또한 각 user.name 기준으로 history api를 이용하여 라우팅 처리를 해준다. ✏️지금까지 배웠던 것을 모두 써보면서 조금 더 데이터 흐름을 어떻게 구성해야하고, 컴포넌트 구성을 어떻게 해야하는지 조금씩 이해하기 시작했다. 또한 낙관적 업..
프로그래머스 데브코스_FE/TIL 2021. 8. 28. 02:44
Prev 1 2 3 4 5 6 7 8 Next