본문 바로가기

전체 글94

클로저(Closure) 이해하기 클로저(Closure)란? 함수는 중첩이 가능한데, 내부 함수 객체가 생성되면 이 객체는 자신을 생성한 외부 함수에 대한 활성 객체의 참조를 가지게 된다. 이를 클로저(closure)라 한다. 즉, 클로저를 통해 내부 함수에서 외부 함수의 스코프에 접근 할 수 있다. ✅ 자바스크립트는 함수가 호출되면 활성 객체(activation object)가 만들어진다. 이것은 숨겨진 데이터 구조로써 호출된 함수의 반환 주소와 실행에 필요한 정보를 저장하고, 이를 호출된 함수에 바인딩 해준다. 렉시컬 스코핑(Lexical scoping) 이해하기 활성 객체(Activation object) 이해하기 클로저는 함수와 그 함수가 선언된 주변 객체에 대한 참조(렉시컬 환경)와의 조합이다. 렉시컬 스코핑(Lexical sc.. 2021. 9. 17.
HTTP 이해하기 나는 HTTP 통신에 대해 알고 있을까? 프로그래밍 공부를 하다보면 자주 접하는 단어지만 모호한 개념만 안 채로 찝찝하게 지나치는 경우가 있다. 그 중 하나가 HTTP이다. 그리고 내 머리는 며칠 내에 까먹을 것이 분명하다..! 어떻게 인터넷상에서 정보를 공유할 수 있을까? 🌐 당시 저는 우리가 정보를 다루는 방식에 새로운 틀을 짜보고 싶었습니다. 그래서 고안해 냈던 것이 월드와이드웹(WWW)이었죠. - Tim Berners-Lee · TED2009 HTTP(HyperText Transfer Protocol)에 대해 알기 전에 우리가 인터넷상에서 정보를 공유하는 방식에 대해 먼저 알아보자. 우리가 인터넷에 연결이 되어 있다면 웹이라는 거대한 서비스 공간에서 서로의 정보를 공유할 수 있다. 그 이유는 웹이.. 2021. 9. 13.
304 Not Modified 이해하기 HTTP 상태코드를 공부하던 중, 내 포트폴리오 사이트의 상태코드를 확인해보니 304가 뜨는 것을 확인했다. 왜 200번대의 성공 상태코드가 아닌 300번대의 리다이렉션 상태코드가 뜬 것일까? 304 not modified란 요청한 자원이 변경되지 않았으므로 클라이언트에서 캐시*된 자원을 사용하도록 권하는 상태코드다. 간단히 말하면 서버에서 요청된 자원을 재전송할 필요가 없음을 나타내는 것이다. 클라이언트가 캐시된 자원을 사용하게 하게 되면 연결을 통해 다시 전체 자원을 전송하는 것보다 효율적이다. 💡 HTTP는 성공(200번대)인 경우라도 요청의 결과가 변경될 수 있는 조건부 요청(conditional requests)을 갖고 있다. 이런 요청으로 캐시의 내용과 쓸데없는 제어를 검증 및 제한하고 다운로.. 2021. 9. 9.
코딩 실력이 늘었다고 생각할 때(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.
반응형