개발이 하고싶은, 첼시를 좋아하는

프로그래머스/데브코스 프론트엔드

[회고] 노션 클론 프로젝트 회고 / 2022-04-21 / 25일차

금요일 TIL은 14일부터 20일까지 진행한 노션 클론 프로젝트에 대한 회고다. 블로그에 따로 작성하려 했는데, 금요일에 팀 별 회고를 진행해달라고 해 노션으로 작성했던 내용을 적는다. 들어가기에 앞서 김태희(로토) 강사님의 바닐라 자바스크립트를 통한 기본 역량 강화 강의 내용을 바탕으로 노션 클론 프로젝트를 진행하게 되었다. 프론트엔드(자바스크립트)는 처음으로 공부해보는 것이라 강의 내용을 따라가기도 벅찼고(코로나로 강의를 제대로 듣지 못한 부분도 있었다), HTML, CSS 기본 구조도 없이 처음부터 끝까지 해야 한다는 것에 막막했던 게 사실이다. 구현 내용 순수 바닐라 자바스크립트로 노션의 기능을(일부분) 구현하는 것이다. API를 통해 데이터를 관리(새로운 데이터를 서버에 저장, 기존 데이터를 수..

프로그래머스/데브코스 프론트엔드

[TIL] 2022-04-21 / 24일차

오늘 배운 내용 AWS S3 AWS S3는 Simple Storage Service의 약자로 파일 서버의 역할을 하는 것이다. 일종의 파일만 저장하는 서비스로(html, css, js, img 등등) 프론트엔드의 정적인 요소들을 S3에 올리는 것으로(클라우드 서버를 거치지 않고) 다른 사람들이 이용할 수 있게 배포가 가능해진다. 아마존 콘솔에서 S3로 접속한 후 버킷을 생성해 사용할 수 있다. 버킷은 파일을 저장할 폴더라고 생각하면 된다. 버킷에 파일들을 올린 후 퍼블릭으로 전환해주면 url로 접속할 수 있게 된다. 그러나 실제 서비스에처럼 특정 도메인으로 연결하는 방식이 아니라 제공해준 url로 접속하게 된다. AWS S3로 배포하기 강의에서는 AWS Cloudfront와 S3를 같이 사용했지만, Cl..

프로그래머스/데브코스 프론트엔드

[TIL] 2022-04-19 / 22일차

오늘 배운 내용 하루가 지나서 적는 TIL. 어제 작성하려 했는데 정리하다 보니 하루가 다 지났다.. 글을 작성하는 오늘, 노션 클로닝 프로젝트를 PR해야 하기 때문에 보너스 요구사항에 대한 기능 구현은 힘들 것 같아 구조를 개선하고자 했었다. 그러나 처음 과제를 시작했을 때(이미 한번 리셋을 했음에도) 컴포넌트 구조를 잘 못 짠 것 같아 리팩터링이 쉽지 않다(개선점이나 엣지 케이스를 잘 파악하지 못한 것도 있다). 처음 과제를 시작하기 전에 컴포넌트 설계를 미리 해두고 시작했으면 어땠을까 하는 아쉬움도 있다. 그렇다고 손 놓고 가만히 있을 순 없기 때문에 어떻게 개선을 해야 할지 파악하기 위해 현재까지 작성한 상태로 컴포넌트 구조를 그려보고 파악해 보았다. 구현을 하기 전에 구조를 그리지 않고, 어느정..

프로그래머스/데브코스 프론트엔드

[TIL] 2022-04-18 / 21일차

오늘 배운 내용 History API 하나의 페이지로 주소가 바뀌고 원하는 내용이 바뀌는 것을 SPA라고 한다. React를 이용하면 SPA(Single Page Application)을 만드는 것이 쉽다고 한다(안 해봐서 모르겠다..). 순수 바닐라 자바스크립트로 SPA를 구현하기 위해서 사용하는 것이 History API이다. 해쉬 뱅 대신 브라우저에서 제공하는 API를 이용해 주소를 바꾸는 게 History API이다. 기본적으로 History는 Stack 구조로 이루어져 있다. window 객체를 통해 History에 접근해 사용할 수 있다. History API - Web API | MDN DOM의 Window 객체는 history 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공..

프로그래머스/데브코스 프론트엔드

[TIL] 2022-04-12/13 / 17, 18일차

오늘 배운 내용 커스텀 이벤트, dispatch event 간단한 에디터를 만드는 강의에서 처음 등장한 개념이다. "커스텀 이벤트". 말 그대로 사용자 지정의 이벤트 함수이다. 이미 제공하고 있는 "click", "submit" 등 외에도 사용자가 이벤트를 직접 만들어 사용할 수 있다. 강의 내용을 빌리자면, 에디터 편집 화면에서 글 목록으로 돌아가는 버튼을 누르는 요청이 들어오면 history api를 수정하고 라우팅을 호출하는 이벤트를 호출해야 한다. 함수는 한 가지 일만 하도록 작성해야 하는데, 클릭 이벤트 함수에 history api를 수정하고 라우팅을 하는 것은 적절하지 않다(라고 생각합니다.. 맞는진 모르겠으나). 이 동작을 제어하는 특정 함수를 따로 호출하고 싶을 때 커스텀 이벤트를 사용하는..

카테고리 없음

[TIL] 2022-04-11 / 16일차

오늘 배운 내용 fetch fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); 첫 번째 인자로 url 주소를, 두 번째 인자로 option 객체를 받고, HTTP response 객체를 래핑 한 Promise 타입의 객체를 반환한다. Promise로 래핑 되어 있기 때문에 then()을 사용해 resolve 한 객체를 전달받을 수 있다. option 객체에서 method에 쓰이는 것들은 'GET', 'POST', 'PUT', 'DELETE' 등이 있다. GET : 자원을 요청 fetch(url) .then((response) => re..