본문 바로가기

javascript13

스크롤 이벤트로 와이즐리 헤더 만들기 탐나는 와이즐리 홈페이지의 헤더 이벤트 한때 와이즐리 사용자로서 이벤트를 하길래 오랜만에 들어와봤다. 옛날과 달리 홈페이지가 엄청 깔끔하고 보기에 편해진 것 같다. 그 중 와이즐리의 헤더 UI가 너무너무 신기했다. '이 UI 탐난다. 따라해봐야지' 생각하고 바로 실행에 옮겨봤다. 먼저 와이즐리의 헤더에 발생하는 이벤트를 정리해보자. 스크롤을 내리면 헤더의 배경 색상이 바뀐다. (transparent -> #fff) 조금 더 내리면 헤더가 올라간다. (translateY 사용) 스크롤을 올리면 헤더가 내려온다. (translateY 사용) 스크롤이 맨 위에 도착하면, 헤더의 배경 색상이 바뀐다. (#fff -> transparent) HTML, CSS 헤더의 기능 구현에 목적을 두어서 페이지는 간단하게 만.. 2021. 8. 22.
다크모드 구현과 로컬스토리지 페이지가 닫혀도 다크모드가 유지되도록 구현하기 다크모드는 눈 보호, 배터리 절약 등의 장점으로 많이 보편화 되어 있는 것 같다. 이렇게 자주 쓰이는만큼 내가 설정 해놓은 다크모드가 나중에 들어오거나 탭을 닫은 후에도 유지 되었음 좋겠다. 이렇게 지속적으로 필요한 데이터의 경우 로컬스토리지를 사용함으로써 문제점을 해결 할 수 있다. Window.localStorage Window.localStorage는 현재 출처(origin)의 로컬 저장 공간의 Storage 객체에 접근할 수 있게 해준다. 이 속성을 사용해서 현재 도메인의 로컬 Storage 객체에 접근한 후, 키-값 형태의 항목을 추가하거나 읽고, 제거까지 할 수 있다. 항목 추가 localStorage.setItem('darkMode', 'enab.. 2021. 8. 21.
[JavaScript] var, let, const ES6의 등장 전후 블록 스코프를 갖지않는 var ES6가 나오기 전에는 var로 변수선언을 했습니다. var는 재선언과 재할당이 가능하고 블록 스코프를 갖지않습니다. // 재선언 및 값의 재할당 가능 { // 블록 스코프를 갖지 않음 var name = '개발 전용'; } console.log(name); // "개발 전용" (블록 스코프 영향 X) var name = '개발자 전용'; name = 'only dev'; console.log(name); // "only dev" var 호이스팅 일반적으로 변수를 선언한 후 값을 할당하지만 var는 '호이스팅'으로 인해 선언부가 최상단으로 끌어올려지고 'undefined'로 값이 초기화되기 때문에 변수를 선언하기전에도 값을 사용 할 수 있습니다. cons.. 2020. 12. 21.
[JavaScript] 배열을 제대로 알아보자 1. 배열 선언 const array1 = new Array(); const array2 = new Array(1, 2, 3); const array3 = [1, 2, 3]; console.log(array1); // [] console.log(array2); // (3) [1, 2, 3] console.log(array3); // (3) [1, 2, 3] 2. 인덱스 위치 const books = ['부의 추월차선', '잡스의 기준', '레버리지']; // 배열 출력 console.log(books); // (3) ["부의 추월차선", "잡스의 기준", "레버리지"] // 배열의 길이 출력 console.log(books.length); // 3 // 배열의 해당 인덱스의 요소만 출력 console.l.. 2020. 12. 18.
[JavaScript] 필수 배열함수 10가지 정리 1. join() join() 메서드는 배열의 모든 요소들을 합해서 하나의 문자열로 반환합니다. 필요한 경우, 배열의 각 요소를 구분할 구분자를 사용할 수 있습니다. 생략하면 요소들이 쉼표로 구분 됩니다. { const laptop = ['맥북', '그램', '플렉스']; const result = laptop.join(); console.log(result); // 맥북,그램,플렉스 } { const laptop = ['맥북', '그램', '플렉스']; const result = laptop.join(''); console.log(result); // 맥북그램플렉스 } { const laptop = ['맥북', '그램', '플렉스']; const result = laptop.join(', '); con.. 2020. 12. 17.
다사다난한 Open API와 CORS - 1 새로운 프로젝트를 시작했습니다. 지난 날씨 API를 이용한 프로젝트에 이어서 공공데이터인 코로나 API를 불러와서 한국 코로나 현황을 알려주는 프로젝트를 만들어보려고 합니다. 이번엔 약간의 목적을 갖고 프로젝트를 시작했고, 그 목적은 다음과 같습니다. HTML/CSS/JavaScript를 통한 프론트 엔드 개발 능숙도 처음보는 API의 공식 문서를 읽어보고, 구조 파악 및 사용해보기 만드는 과정에서의 공학적 사고 역량 제한된 시간 안에서 완성하기 (일주일) 처음 시작은 무난했습니다. 첫 날은 프로젝트 자체에 고민을 굉장히 많이 했습니다. 일주일이란 시간 안에 완성해야하기 때문에 'Open API를 사용해서 어떻게 재밌고 심플한 웹 사이트를 만들 수 있을까'에 중점을 두고 고민을 했습니다. 그 와중에 국내.. 2020. 11. 29.
[JavaScript] 기온별 옷차림 추천하기 - 3 지난 2편에 이어서 날씨 API로 받아온 기온별로 옷차림을 추천해주는 기능을 만들었습니다. [JavaScript] 날씨 API 사용하기 - 2 지난 1편에 이어서 웹 페이지에 JSON data를 렌더링 해보겠습니다. CSS 작업까지 조금은 해놓은 상태입니다. [JavaScript] 날씨 API 사용하기 - 1 개인 프로젝트 첫 단계 시작 🏃🏻‍♂️ 개인 프로젝트 onlydev.tistory.com 나름대로 디자인에 신경을 썼지만 역시 갈 길이 멉니다. 불러온 날씨 온도에 범위를 정해서 온도에 따라 옷차림을 추천해주는 코드를 짜보았습니다. 온도 범위를 정하자 처음 온도 범위를 정할 때 고민이 많았습니다. '삼항 연산자나 선택지가 한 두개인 경우가 아닌 5 ~ 9라는 범위를 어떻게 정해야할까' 라는 생각이 .. 2020. 11. 25.
[JavaScript] 날씨 API 사용하기 - 2 지난 1편에 이어서 웹 페이지에 JSON data를 렌더링 해보겠습니다. CSS 작업까지 조금은 해놓은 상태입니다. [JavaScript] 날씨 API 사용하기 - 1 개인 프로젝트 첫 단계 시작 🏃🏻‍♂️ 개인 프로젝트인 기온별 옷차림(가제, 假題) 첫 단계를 시작했습니다. 제일 먼저 해야할 일은 날씨 API를 사용하는 것이라고 생각했습니다. API를 처음 onlydev.tistory.com 1. HTML 구조 이렇게 간단한 구조도 몇번이고 수정을 거듭한지 모르겠습니다. JavaScript로 DOM 조작을 하기 위해 각 자리에 들어갈 class를 정해주었습니다. 2. JavaScript Code 1편에 만들었던 코드를 토대로 alert가 아닌 loadWeather(data) 함수를 만들어 보겠습니다. .. 2020. 11. 19.
[JavaScript] 날씨 API 사용하기 - 1 개인 프로젝트 첫 단계 시작 🏃🏻‍♂️ 개인 프로젝트인 기온별 옷차림(가제, 假題) 첫 단계를 시작했습니다. 제일 먼저 해야할 일은 날씨 API를 사용하는 것이라고 생각했습니다. API를 처음 사용해봤고, 기록해두고 공유하면 좋을 것 같아서 글을 씁니다. 이 프로젝트를 만든 이유는 개발자의 입장에서 본 기온별 옷차림 글에서 보실 수 있습니다. 😁 개발자의 입장에서 본 기온별 옷차림 요즘 날씨가 워낙 일교차가 크고 날마다 달라지다보니 기온별 옷차림이란 키워드가 실시간검색에 자주 노출이 되는걸 보게 되었습니다. 그래서 문득 '날씨 앱이나 웹 페이지에 바뀐 온도마다 onlydev.tistory.com OpenWeather API 날씨 API는 OpenWeather API를 사용합니다. 다른 날씨 API도 많았.. 2020. 11. 17.
반응형