목록KDT 프로그래머스 (50)

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

[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
[프로그래머스 데브코스_FE] TIL Day-16

❗❗ 데브코스 16일차 (08.23) 벌써 4주차 시작이다. 역대급으로 시간이 빨리 흐르는 것 같다. 오늘은 history api학습에 앞서 이것이 나오게 된 계기인 SPA (Sing Page Application)에 대해서 먼저 학습을 진행했다. 일반적인 정적인 웹페이지의 경우 HTML 파일들로 페이지가 구성된다 URL이 파일 경로와 이름이 된다. URL상 파일명이 없을 경우 index.html을 찾을려고한다. 하지만 웹 애플리케이션과 같은 하나의 페이지에서 여러개의 화면을 처리해야하는 상황이 많이 발생하면 SPA가 대두되기 시작했다.(facebook과 같은 사이트) ✅ SPA의 경우 서버는 API만 처리하고 모든 랜더링 과정을 클라이언트에서 하는 방식 클라이언트에서 html 파일은 index.html..
프로그래머스 데브코스_FE/TIL 2021. 8. 24. 01:33
[프로그래머스 데브코스_FE] TIL Day-15

❗❗ 데브코스 15일차 (08.20) 저번시간에 비동기 학습에 이어서 오늘은 fech api를 활용한 수업을 진행했다. fech api로 데이터 정보를 받아와서 필요한 요구사항에 맞게 화면에 랜더링을 구현하였다. ✅ fetch api란 비동기 http 요청을 좀 더 쓰기 편하게 해주는 API XMLHTTPRequest을 대체합니다. Promise기반으로 동작합니다. fetch("http://~~~") .then(data => { return data.json() }) .then(list => { console.log(list); }) 대략적인 사용법은 위와 같은 방법으로 사용된다. Promise기반으로 사용되기 때문에 then을 이용하여 Promise를 처리해준다. 그리고 fetch의 기본 응답 결과는 ..
프로그래머스 데브코스_FE/TIL 2021. 8. 24. 00:55
[프로그래머스 데브코스_FE] 회고록

✍ 3주간 회고록 작성 타임 ✏️내가 하고자 했던 것 강의를 밀리지 않고 학습하고 이해하기 CS 공부 VanillaJS 이해하기 TIL, Article 작성하기 뒤쳐지지 않고 잘 따라가기 과제 제때 잘 수행하기 체력관리를 위해 운동 다시 시작하기 ✏️보완해야 할 점 시간관리를 잘못하여 해야할 일을 미뤘다.( TIL, Article 작성, 강의듣기 등) 앞으로는 시간관리나 선택과 집중을 정확히 기준을 세워 미루지 않도록 해야겠다. 생각보다 알고리즘, CS에 대한 지식이 부족하여 많은 학습이 필요하다는 것을 느꼈다. CS 스터디를 활용하여 몰랐던 지식을 학습하고 팀원들에게 공유하도록 해야겠다. 과제 수행시, 변수명에 대한 지적을 많이 받았다. 평소 마음대로 짓는 습관이 있었는데 앞으로 주의해서 작성해야겠다...
프로그래머스 데브코스_FE/TIL 2021. 8. 20. 17:37
Prev 1 ··· 3 4 5 6 7 8 9 Next