본문 바로가기
반응형
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.
반응형

티스토리툴바