[Day 31] 변수, @supports, @media, SCSS (1)
2022. 11. 28. 18:28
데브코스
변수 :root { --color-primary: royalblue; --color-danger: red; --color-success: yellowgreen; } .box { width: 200px; height: 70px; border: 4px solid; } .primary { background-color: var(--color-primary); } .danger { background-color: var(--color-danger); } .success { background-color: var(--color-success); } 사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자..
[Day 30] grid, transform, columns, filter
2022. 11. 25. 21:54
데브코스
Grid Items 1 .container { width: 300px; height: 300px; border: 4px solid; display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); } .container .item { border: 2px solid; background-color: orange; font-size: 20px; } 아이템의 위치를 변경하고 싶을 떄 사용할 수 있는 것이 위 그림의 그리드 컨테이너 주변에 있는 저 번호들, 즉 라인이다. 라인은 1부터 시작하는 양수 단위의 숫자와 -1부터 시작하는 음수 단위의 숫자를 동시에 가진다. gird-row / grid-column grid..
[Day 29] float, position, flex, grid
2022. 11. 24. 21:18
데브코스
Float 색상을 따로 입력하지 않으면 그 요소가 가지고 있는 글자 색상을 참고하게 된다. 기본적으로 글자 색상은 검정색이기 때문에 color를 지정하지 않으면 border도 검정이 된다. 기본적으로 HTML의 요소들은 위에서부터 아래로 수직으로 쌓이게 되는데 float을 이용해서 수평 정렬을 시켜줄 수 있다. float을 사용하면서 가장 중요한 것은 float 속성이 더이상 사용되지 않는다는 것을 알려주기 위해 해제(clear)를 해줘야 한다는 것이다. 가상 요소란 가상의 요소를 만든 뒤 거기에 css 요소를 추가할 수 있는 선택자를 의미한다. 가상 요소는 필수적으로 content라는 속성이 있어야지만 동작한다. .clearfix::after { content: ""; display: block; cl..
[Day 28] TodoList Drag&Drop
2022. 11. 23. 17:27
데브코스
TodoList Drag&Drop 더보기 더보기 import App from "./App.js"; const $target = document.querySelector(".App"); new App({ $target }); 더보기 const API_END_POINT = "..."; export const request = async (url, options) => { try { const res = await fetch(`${API_END_POINT}${url}`, options); if (!res.ok) { throw new Error("API 호출 오류"); } return await res.json(); } catch (e) { alert(e.message); } }; 더보기 import { req..
[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..