728x90 반응형 Learn to Code62 HTTP/1.1 vs. HTTP/2 이전 포스팅에 HTTP에 관한 전반적인 개요를 공부하고 정리하였으나, HTTP의 발전 중 큰 변화가 있었던 HTTP/2가 이전 버전과 어떻게 다른지에 대하여선 공부하지 않았었다. 그래서 이번 포스팅엔 HTTP/2가 HTTP/1.1과 비교해서 어떤 점들이 다른지 돌아보고 정리한 내용을 담으려고 한다. 이전글: 2021.10.01 - [Learn to Code] - HTTP란? HTTP란? 본 포스팅은 HTTP에 대해 좀 더 자세히 공부하고자 MDN 문서를 기반으로 공부한 내용을 정리한 글입니다. HTTP란? HTTP는 HTML 문서와 같은 리소스를 가져올 수 있게 해주는 프로토콜이다. 웹에서 발생 seo-tory.tistory.com 개요 HTTP/1.1은 90년대에 나온 버전으로, 20년도 더 된 아주 .. 2021. 10. 24. [JS] apply, call, bind apply(), call(), 그리고 bind()는 모두 함수의 프로토타입 메소드이다. apply, call, 그리고 bind... 함수 프로토타입 메소드로 존재한다는 것은 알고 있었지만 실상 많이 써보지 못해서 사용법을 숙지하지 못하고 있던 함수들이었다. 그나마 bind 같은 경우엔 리액트의 class component에서 필수로 사용해줘야 하는 메소드라서 몇 번 사용해봤지만, 그 리액트에서 마저도 class component가 아닌 function component만 계속 사용해왔기에 사용법을 잊고 있었다. 🥲 그렇게 어느덧 이 셋은 나의 기억 속에서 잊혀진 메소드들이 되어버렸다... 하지만 최근 이 셋을 다시 돌아봐야겠다는 굳은 결심(!!!)이 들었고, 다시 한번 이들을 활용할 수 있는 능력을 각성.. 2021. 10. 21. [JS] 클래스(class): 정적 메소드(static method)와 프로토타입 메소드(prototype method)의 차이 클래스(Class)는 ES6에서 도입된 기능이다. class 키워드를 사용하여 정의하며, 내부 몸체에 3가지 종류의 메소드를 사용할 수 있다. 이 세가지 종류가 바로 생성자, 프로토타입 메소드, 그리고 정적 메소드이다. class Character { // 1. 생성자 constructor(name) { this.name = name this.level = 1 this.job = "adventurer" } // 2. 프로토타입 메소드 introduce() { return `Hello, I'm ${this.name} and my level is ${this.level}.` } // 3. 정적 메소드 static complain() { return `Oh man! What is that smell?` } }.. 2021. 10. 4. [TIL] 갑자기 달력이 만들고 싶어졌다 (바닐라JS) 오늘도 Pinterest에서 예쁜 UI가 없나 찾아보다가 캘린더를 봤다. 그리고 갑자기 달력이 만들고 싶어졌다! 그래서 바닐라 자바스크립트로 달력을 만들었다. 🌱 Github Vanilla Javascript Calendar 위 핀터레스트 이미지와 비슷하게 아래와 같이 만들었다: 회색과 핑크의 조합은 진리이기 때문에 오늘의 날짜는 핑크색으로 표시되도록 했다. 날짜 위에 마우스를 올리면 핑크색으로 표시가 된다. prev와 next를 클릭하면 이전 달 또는 다음 달의 캘린더를 볼 수 있다. 추가하고 싶은 사항들 - 달별 컬러 적용 - 투두리스트와 합치기 2021. 10. 3. [JS] 정규표현식 (2) 최근에 코딩테스트를 보았는데, 이메일 유효성 검사를 구현해야했었다. 그런데 문제는... 정규표현식을 안써본지 너무 오래되서 도대체 기억이 나지 않는다는 것이었다 ㅠ_ㅠ.... 시간은 흐르지, 기억은 안나지, 게다가 시험 시작하고 15분 이후부터 왜 그렇게 화장실은 가고 싶은지 ㅠ_ㅠ... 총체적 난국에 그냥 코드로 길게 풀어서 구현하고 얼른 submit한 뒤 화장실로 달려갔었다. (코딩테스트 과정을 녹화해야 했는데 나의 시급함이 정말 말그대로 15분부터 영상에 그대로 나왔다...ㅋㅋㅋ....ㅋㅋㅜㅜ...🥲) 그래서 이번 기회에, 다음에 비슷한 문제를 또 겪게 되더라도 화장실 급함의 정도가 얼마나 위대한지에 영향받지 않고 정규표현식을 예쁘게 작성할 수 있게 되기 위해 다시 한번 정규 표현식을 되돌아보려고 .. 2021. 10. 2. [JS] 제너레이터란(Generator)?! 최근 한 인터뷰에서 자바스크립트의 yield를 알고 있는지 물어보셨다. 그런데 너무 당황스럽게도 6개월이 넘는 자바스크립트 공부 기간 동안 yield라는 키워드는 단 한번도 들어본적이 없었다!!!! (왜냐!! 왜 때문이냐!!?? 나란 개발자는나쁜 개발자더냐??) 🥲 그래서 인터뷰가 끝나자마자 yield를 검색해보았더니... yield 키워드는 제너레이터 함수를 멈추거나 다시 시작하게 하는데 사용되는 키워드라고 한다. 이 한 줄 설명을 보고 내가 yield 키워드를 못들어봤던 이유를 클리어하게 알게 되었다. 왜냐면 난 제너레이터 함수가 뭔지도 모르기 때문이다 🥲. (멈추거나 다시 시작하게 하는 대상이 무엇인지도 모르는데 그 키워드를 어찌 알았겠어...) 그래서 제너레이터 함수가 무엇인지부터 이해하고 그 이.. 2021. 10. 2. HTTP란? 본 포스팅은 HTTP에 대해 좀 더 자세히 공부하고자 MDN 문서를 기반으로 공부한 내용을 정리한 글입니다. HTTP란? HTTP는 HTML 문서와 같은 리소스를 가져올 수 있게 해주는 프로토콜이다. 웹에서 발생하는 데이터 교환 행위의 근간이라고 할 수 있다. HTTP는 클라이언트-서버 프로토콜이며, 이는 즉 데이터를 받는 측 - 주로 웹 브라우저 - 가 요청을 시작하는 측이라는 것을 뜻한다. 클라이언트로부터 전송된 메시지는 요청(request)라고 부르고, 서버가 그에 대한 답변으로 보낸 메시지는 응답(response)라고 부른다. 클라이언트는 주로 웹 브라우저이지만, 구글 검색 크롤러 같은 로봇일 수도 있다. HTTP는 1990년대 초반에 디자인되었고, 그 이후로 꾸준히 발전해왔다. HTTP는 TCP.. 2021. 10. 1. [JS] 스코프(Scope)란? 스코프(Scope)란? 스코프란 변수 이름이나 함수 이름과 같은 식별자(identifier)의 수명을 결정하고 확인할 수 있는 범위를 뜻한다. 변수나 함수와 같은 모든 식별자들은 어느 위치에서 선언되었느냐에 따라 다른 코드가 자신을 참조할 수 있는지 여부가 결정되며, 이를 스코프라고 하는 것이다. 즉, 스코프는 변수나 함수가 유효할 수 있는 범위를 뜻하는데, 그렇기 때문에 스코프는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙으로 작용한다. 이와 같이 특정 시점에서 참조할 변수를 결정하는 것을 식별자 결정(identifier resolution)이라고 한다. 식별자(Intentifier) 어떤 값을 구별해서 식별할 수 있는 고유한 이름 (출처). 스코프의 종류 스코프는 전역(global)과 지역(.. 2021. 9. 30. [JS] 웹팩(Webpack)과 바벨(Babel): 바닐라 자바스크립트에 처음부터 적용시켜보기 최근 바닐라 자바스크립트로 과제를 만들 기회가 있었다. 요즘 계속 React를 많이 사용했었기 때문에 JSX의 편리함에 익숙해져있던 편이었지만 다행히도 바닐라 자바스크립트를 사용해서 코딩하는 것 자체는 별 어려움이 없었다. 다만, 계속 create-react-app으로 만들어진 프로젝트들을 했었기 때문에 한번도 Webpack이나 Babel을 직접 인스톨해본 적이 없다는 것을 새삼스레 깨달았다. 그래서 이번 기회에, 아주 옛날 HTML, CSS, 그리고 자바스크립트를 혼자 공부했던 시절 진행했던 Front-End Mentor의 챌린지 과제 중 하나에다가 시험삼아 Webpack과 Babel을 인스톨해보고 설정을 직접하는 연습을 해보려고 한다. 오늘의 실험 대상은 무려 작년(!?)에 만들었던, 정말 내 Git.. 2021. 9. 9. [프로젝트] React component: 마운트(mount)될 때와 언마운트(unmount)될 때 각기 다른 애니메이션 적용하기 (feat. onanimationend 프로퍼티) 멋진 웹사이트들을 보면 메뉴 버튼을 클릭했을 때 촤라락~🌼하면서 나왔다가 촤라락~🌼하면서 사라지는 경우를 자주 볼 수 있다. 내 프로젝트에도 메뉴가 토글될 때 그러한 애니메이션을 적용하고 싶어서, 가장 처음 시도했던 건 아래와 같이 slide-in 애니메이션을 만들어서 토글되는 메뉴에 적용시키는 것이었다. // Styled-Components의 keyframes이다. // 토글되는 메뉴의 width 길이 만큼 오른쪽에 숨겨놨다가 나오도록 했다 const slideIn = keyframes` from { right: -500px; } to { right: 0; } `; 그런데, 이렇게 단순히 slideIn 애니메이션만을 추가하면, 한가지 문제가 발생한다. 바로, 메뉴를 토글해서 메뉴 컴포넌트가 마운트될 때.. 2021. 9. 1. [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (2) (feat. getBoundingClientRect()) 본 포스팅은 전편 [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1)에 이어서 작성한 글입니다! 전편: 2021.08.25 - [Learn to Code] - [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) 요즘 파이널 프로젝트로 만든 사각사각을 전면 개편하고 있다. 처음 개발 당시 UI와 기능 구현에 급급해 큰 신경을 써주지 못했던 최적화라던가 좀 더 세밀한 기능 구현이라던가와 같은 부분들 seo-tory.tistory.com 지난번 편에선 Drag & Drop API를 사용해서 ⬅️요쪽에서 ➡️요쪽으로 (??) 옮기는 코드를 어떻게 작성하면 되는지 그 단계를 살펴보았다. 이번엔.. 2021. 8. 26. [프로젝트] React Drag&Drop: 투두리스트를 칸반 보드로 (1) 요즘 파이널 프로젝트로 만든 사각사각을 전면 개편하고 있다. 처음 개발 당시 UI와 기능 구현에 급급해 큰 신경을 써주지 못했던 최적화라던가 좀 더 세밀한 기능 구현이라던가와 같은 부분들을 업데이트하고 있다. Hoxy 프로젝트가 뭐였는지 궁금하시다면... ☺️ >>> 2021.07.21 - [Learn to Code] - [프로젝트] 실시간 화상채팅앱을 개발했어요! (feat. Socket.IO & WebRTC) [프로젝트] 실시간 화상채팅앱을 개발했어요! (feat. Socket.IO & WebRTC) 🎞 YouTube 발표 영상 GitHub: https://github.com/codestates/sagaksagak-client Wiki: https://github.com/codestates/sagak.. 2021. 8. 25. 이전 1 2 3 4 5 6 다음 728x90 반응형
