본문 바로가기
반응형
코딩 실력이 늘었다고 생각할 때(feat. 리팩토링) 기능은 그대로 유지 보수는 ⬆️ 요즘은 예전에 만들었던 프로젝트 리팩토링을 하는 것에 시간을 많이 쏟고 있다. 어쩌다 구경을 하게 되었는데 고칠 점이 너무 많아 보여서 리팩토링을 하기로 결심했다. 하다보니 재밌기도 해서 시간이 잘간다. 먼저 간략하게 표현한 예전 코드는 다음과 같다. // 📂 main.js // XHR 설정 const getJSON = function(url, callback) { // ...XHR } // API 호출 getJSON( 'http://api.openweathermap...', function (err, data) { if (err면) { alert() } else { // 성공이면 데이터 표시 loadWeather(data); todayClothes(data); loadI.. 2021. 8. 28.
import, export, export default 이해하기 지식 늘리기 VS 내가 당장 필요한 것 처음 ES Module을 사용할 때가 강의를 통해 클론코딩을 했을 때였다. 코드 이해하기에도 바쁘고 모듈화까지 하려니 그저 배워야하는 또 하나의 지식으로 느껴졌다. (그러니 다 까먹을 수밖에..) 그렇게 시간이 지나고 포트폴리오 사이트를 제작하던 중에 내 예전 프로젝트들을 보게 되었다. 그 중 스스로 만든 날씨와 옷차림을 알려주는 프로젝트의 코드를 보았는데 main.js라는 파일 안에 모든 코드를 다 쏟아낸 것이 아닌가..이걸 보고나서 리팩토링을 하고싶은 욕구가 솟아났다. 그 중 ES Modules를 '필요로' 하다 보니 스스로 해당 내용을 찾게 되고 '아~이래서 이게 안됐었던 거구나' '이런식으로도 되네?' 라는 공감도 하게 되면서 좀 더 재미있게 진행하게 되었다.. 2021. 8. 26.
스크롤 이벤트로 와이즐리 헤더 만들기 탐나는 와이즐리 홈페이지의 헤더 이벤트 한때 와이즐리 사용자로서 이벤트를 하길래 오랜만에 들어와봤다. 옛날과 달리 홈페이지가 엄청 깔끔하고 보기에 편해진 것 같다. 그 중 와이즐리의 헤더 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 문제 풀이 같은 이름을 가진 의상은 존재하지 않습니다. -> 의상 이름 중복 X, 의상 종류 포커스 스파이는 하루에 최소 한 개의 의상은 입습니다. -> 의상을 모두 입지 않을 경우를 제외하자 예제 1번 clothes return [["yellowhat", "headgear"], ["bluesunglasses", "eyewear"], ["green_turban", "headgear"]] 5 예제 1번처럼 입을 수 있는 2가지의 의상 종류(headgear, eyewear)가 있다고 가정해보자. 풀이를 할 때 다음과 같은 경우를 고려해야한다. 해당 종류의 옷을 입지 않고 다른 종류의 옷을 입은 경우 - 기본값 1 해당 종류의 옷을 입었을 경우 - 값 +1 올리기 해당 종류의 다른 옷을 입었을 경우 - 값 +.. 2021. 8. 17.
API 이해하기(feat. 드림코딩) API..API..API!! 프로그래밍을 공부하다보면 API란 단어를 자주 접한다. 그러다보면 API에 대해 검색도 해보고 어느정도 뜻을 알게되는데 또 다른 API를 보면 '이게 내가 알던 API의 의미가 맞나?' 생각이 들 정도로 다양한 범위에서 사용되는 것 같다. 그렇게 정확하게 알지 못하고 혼란을 겪다가 API를 사용하게 된 이유와 역사를 통해 나름 정의를 내릴 수 있게 되었다. 1964년 API(Application Programming Interface)란 단어는 1964년 36비트 컴퓨터 시스템을 사용할 때부터 등장하기 시작했다. 이때는 기종에 관계없이 모든 종류의 컴퓨터에서 사용이 가능하도록 하는 하드웨어의 독립성(Hardware Independence)을 위해 주로 사용 되었다. 예를 들어.. 2021. 8. 17.
[프로그래머스] 멀쩡한 사각형 | JavaScript 문제 풀이 프로그래머스에서 알고리즘 문제를 풀다보면 수학적인 문제가 나올 때가 꽤 있는 것 같다. 이번 문제에선 대각선에 의해 잘라진 사각형의 개수를 구해서 풀 수 있었는데, 초등학교 5학년 경시대회 문제에서 답을 얻었다. 대각선과 만나는 격자점과 잘라진 사각형의 개수 대각선에 의해 잘라진 사각형의 개수는 격자점의 개수와 연관이 있다. 먼저 작은 수부터 차례대로 나열하여 규칙을 찾아보자. 대각선과 만나는 격자점이 존재하는 (2), (5), (6)번 같은 경우 1보다 큰 가로와 세로의 최대공약수가 존재한다. (2)번의 최대공약수는 2, (5)번의 최대공약수는 3, (6)번의 최대공약수는 3이다. 여기서 규칙을 찾을 수 있는데 격자점이 존재하지 않는 (1)번, (3)번, (4)번은 '(가로) + (세로) -.. 2021. 8. 15.
반응형

티스토리툴바