[Day 27] 고양이 사진 검색기 만들기
2022. 11. 22. 20:12
데브코스
고양이 사진 검색기 만들기 요구사항 검색 키워드를 입력하면 추천 검색어 API를 이용해 추천 검색어를 보여줌 검색어 입력 후 엔터키 등의 추가 액션 없이도 검색어 목록을 보여줌 키보드 혹은 마우스로 추천 검색어 선택 가능 esc를 누르면 검색창 닫힘 키보드의 위, 아래를 누르면 추천 검색어 하이라이트가 옮겨지고 엔터를 누르면 하이라이트 처리된 검색어가 반영됨 마우스로는 클릭한 검색어가 반영됨 검색된 결과에 따라 고양이 사진이 화면에 렌더링 더보기 더보기 import App from "./App.js"; const $target = document.querySelector(".App"); new App({ $target }); 더보기 const END_POINT = "..."; export const re..
[Day 26] 고양이 사진첩 만들기
2022. 11. 22. 01:03
데브코스
고양이 사진첩 만들기 요구사항 고양이 사진 API를 통해 사진과 폴더를 렌더링 폴더를 클릭하면 내부 폴더의 사진과 폴더를 보여줌 현재 경로가 어디인지도 렌더링 루트 경로가 아닌 경우, 파일 목록 맨 앞에 뒤로가기를 넣음 사진을 클릭하면 고양이 사진을 모달창으로 보여줌 esc를 누르거나 사진 밖을 클릭하면 모달을 닫음 API를 불러오는 중인 경우 로딩 중임을 알리는 처리 더보기 더보기 import App from "./App.js"; const $target = document.querySelector(".App"); new App({ $target }); 더보기 const API_END_POINT = "..."; export const request = async (url) => { try { const..
[Day 25] 무한 스크롤 구현하기
2022. 11. 21. 19:23
데브코스
무한 스크롤 컨텐츠를 페이징하는 기법 중 하나로, 스크롤하다 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식이다. 구현 방식 두 가지 window의 scroll 이벤트를 통해 스크롤이 일어날 때마다 화면 전체의 height와 스크롤 위치를 통해 스크롤이 컨텐츠의 끝에 도달했는지 체크해서 처리하는 방식 intersection observer 방식 (지정한 DOM 객체가 보고 있는 시야에 닿았는지 체크) 실습 컴포넌트 구조 App - 데이터 불러오고 PhotoList 컴포넌트 생성, 불러온 데이터를 pothoList라는 이름으로 내려줌 PhotoList - 스크롤이 끝에 도달하면 onScrollEnded 콜백을 호출하는 식으로 App 컴포넌트 쪽에 제어권을 넘김 Scroll Event -..
[Day 24] 프로젝트 배포
2022. 11. 17. 16:45
데브코스
Project Deploy 프론트엔드 프로젝트를 배포해서 서비스를 해주는 곳은 많다. 기본적으로 history API 기반의 SPA를 배포하려면 해당 서비스에서 404에러에 대해 처리할 수 있는 옵션이 필요하다. 🔎 SPA에서 뒤로가기, 새로고침 시 404 Not Found 404에러는 SPA(Single Page Application)를 사용하면 발생하는 문제이다. SPA는 일반적으로 웹 브라우저에서 액세스 할 수 있는 하나의 색인 파일(index.html)만 사용하는데 사용자가 새로고침 버튼을 누르거나 하면 url에 해당하는 html 파일을 찾으려고 한다. 예를 들어서 https://.../posts/18에서 새로고침을 하면 https://.../posts/18/index.html을 찾으려고 하는 것..
[Day 16] 디바운싱, 커스텀 이벤트
2022. 11. 9. 14:10
데브코스
디바운싱 (debouncing) 이벤트 발생을 지연시키다가 마지막으로 이벤트가 발생하고 일정 시간이 지나면 지연했던 이벤트를 실행시키는 것이다. 이벤트 발생횟수를 줄임으로써 서버 부하를 줄여 성능 최적화에 도움이 된다. 이벤트는 setTimeout()과 clearTimeout()으로 지연시킬 수 있다. setTimeout()은 실행을 하면 양의 정수값을 반환하는데 이를 이용하여 clearTimeout()으로 초기화하는 것이 가능하다. let timer = null; new Editor({ $target, initialState: post, onEditing: (post) => { if (timer !== null) { clearTimeout(timer); } timer = setTimeout(() => ..
[Day 15] Todo App, 이벤트 위임, 낙관적 업데이트
2022. 11. 7. 22:18
데브코스
To do App 만들기 요구사항 Users API를 통해 사용자 목록을 불러오고, 클릭하면 해당 사용자의 todo 목록을 가져옴 할일을 추가하면 화면에 추가되고, API 호출을 통해 서버에도 추가 TODO를 추가하고 삭제하는 동안 낙관적 업데이트를 사용 서버와 통신하는 동안 서버와 통신중임을 알리는 UI 처리 더보기 더보기 import App from "./App.js"; const $target = document.querySelector("#app"); new App({ $target, }); 더보기 const storage = window.localStorage; export const setItem = (key, value) => { try { storage.setItem(key, JSON.st..
[Day 14] history API
2022. 11. 6. 20:30
데브코스
history api 브라우저에서 페이지 로딩을 하면 세션 히스토리를 가진다. 세션 히스토리는 페이지를 이동할 때마다 쌓이며, 이를 통해 앞으로 가기나 뒤로 가기가 가능하다. pushState, replaceState 함수로 '화면 이동 없이' 현재 url를 업데이트할 수 있다. pushState: 세션 히스토리에 새 url 상태를 쌓는다. replaceState: 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다. → SPA(Single Page Application) 구현 가능 history API를 사용하면 hashbang으로 했던 url을 바꿔줄 수 있다. / → HomePage /list → ListPage /detail/1 → DetailPage 일반 url 형식을 따르기 ..
[Day 13] fetch API
2022. 11. 5. 21:34
데브코스
fetch api 비동기 http 요청을 좀 더 쓰기 편하게 해주는 API XMLHttpRequest를 대체 Promise 기반으로 동작 fetch api 사용하기 fetch("http request를 날릴 URL") .then((res) => { return res.json(); // response는 json이나 text로 바꿔서 사용해야 함 }) .then((data) => { // 조회된 json 데이터가 들어옴 console.log(data); }); fetch api 특징 1. fetch의 기본 응답 결과는 Response 객체이다. 따라서 Response 객체를 얻은 뒤에는 응답을 json으로 바꾸거나 text로 바꾸는 등의 처리가 필요하다. + 참고로 Response에는 json, text..
[Day 12] Module, callback, Promise, async/await
2022. 11. 5. 14:27
데브코스
ES6 Module 모던 브라우저(2019.11~)에서는 흔히 말하는 웹팩, 즉 번들러없이 ES6 모듈을 쓸 수 있다. import export 키워드로 내보내진 변수, 함수 등을 불러올 수 있는 키워드이다. // module-name 내에 export default로 내보내진 것을 가져온다. import defaultExport from "module-name"; // module-name 내에서 export된 모든 것을 모두 가져온다. // as 이후 이름은 중복되지 않으면 자유롭게 정할 수 있다. import * as allItems from "module-name"; // module-name 내에서 export된 것 중에 특정 값만 가져온다. import { loadItem } from "mod..
[Day 11] TodoList 만들기, Local Storage
2022. 11. 4. 13:08
데브코스
컴포넌트 방식으로 생각하기 컴포넌트란? 표현하는 부분을 추상화한 것으로 독립적이며, 다른 곳에 영향을 미치지 않아야 한다. 그럼으로써 추후에 재사용이 가능하다. 즉 추상화란 어떤 독립적인 부분들을 묶어서 단위를 생성한다고 할 수 있다. 만일 투두 리스트를 만든다고 한다면 Header, TodoForm, TodoList 3개의 컴포넌트로 나눌 수 있다. 그리고 3개의 컴포넌트를 생성하고 관리하는 App 컴포넌트까지 총 4개의 컴포넌트로 동작하는 구조를 가지게 된다. TodoList 만들기 TodoList 컴포넌트 생성 // params.$target - 해당 컴포넌트가 추가가 될 DOM 엘리먼트 // params.initialState - 해당 컴포넌트의 초기 상태 function TodoList(para..