HTTP 헤더 (Header) HTTP 헤더 해더는 콜론 ' : ' 으로 구성되는 key - value 형태로 설정됩니다. HTTP요청을 할 때 3가지의 헤더인 일반헤더, 요청헤더, 응답헤더가 자동으로 생깁니다. 여기서 서버에서 설정하는 헤더 : 응답헤더 클라이언트에서 설정하는 헤더 : 요청해더 일반헤더 (General) 요청한 UR, 요청 메서드, 해당 자원을 요청할 때 해당 자원의 출처를 나타내는 URL을 노출시킬지 말지를 정하는 보안정도가 있는 Referrer Policy 등이 들어갑니다. 요청헤더 (Request Header) 요청헤더는 클라이언트가 서버에 요청할 때 클라이언트가 설정하는 또는 자동으로 설정되는 헤더 메서드, 클라이언트의 OS, 브라우저 정보 등이 담깁니다. 응답헤더 (Response Header) 응답헤더는 .. www.daum.net을 주소창에 치면 무슨 일이 일어날까? www.daum.net을 주소창에 치면 무슨 일이 일어날까? 리다이렉트, 캐싱, DNS, IP라우팅, TCP 연결 구축을 거쳐 요청, 응답이 일어나는 TTFB(Time To First Byte)가 시작되고 이 후 컨텐츠를 다운받게 되고 이 후 브라우저 렌더린 과정을 거쳐 다음이라는 화면이 나타나게 됩니다. 1. 리다이렉트 리다이렉트가 있다면 리다이렉트를 진행하고 없다면 그대로 해당 요청에 대한 과정이 진행됩니다. 2. 캐싱 해당 요청이 캐싱이 가능한지 가능하지 않은지를 파악합니다. 캐싱이 이미 된 요청이라면 캐싱된 값을 반환하며 캐싱이 되지 않은 새로운 요청이라면 그 다음 단계로 넘어갑니다. 캐싱은 요청된 값의 결과값을 저장하고 그 값을 다시 요청하면 다시 제공하는 기술입니다. 이는 브라우저 캐시와 공유.. CI / CD CI / CD ( Continuous Intergration / Delivery & Deployment ) 개발자가 코드를 짰다면 그 다음 해야할 일은 무엇일까요? 지속적으로 코드를 합치고 코드를 배포해야 합니다. 이를 CI / CD 라고 합니다. 저는 한번도 이러한 걸 해본적이 없어서... 다음 토이 프로젝트를 만들거나 할때 테스트코드 입력하고 테스트 실행하는것, 그리고 이 CI/CD까지 해보려고 합니다. 후아 개발자들 화이팅 git actions, jenkins, AWS code deploy, travis, Amplify, heroku (Elastic Beanstalk -> 문제점: platform 환경이 종종 deprecated되는 상황들이 많이온다, 파이프라인 코드구축부터 시작해서 배포까지의 일련.. API API ( API, Application Programming Interface ) api는 둘 이상의 컴퓨터 프로그램이 서로 통신하는 방법이자 컴퓨터 사이에 있는 중계 계층을 의미 ex) 프로토콜, 메서드, 데이터 타입 등이 정의된 중계 계층 API는 과거부터 발전되어온 용어로 라이브러리 및 프레임워크를 설명하는 명세서, 웹상에서 WEB API, Web Socket API 등을 가리키는 데 현재를 기준으로 API라고 할때 보통 WEB API를 기준으로 설명합니다. 장점 제공자는 서비스의 중요한 부분을 드러내지 않아도 됩니다. 예를들면 DB설계 구조나 원치않는 데이터를 빼고 드리내고 싶은 부분만 드러낼 수 있습니다. 사용자는 해당 서비스가 어떻게 구현되는지 알 필요없이 필요한 정보만을 받을 수 있습니다... 디자인 패턴 디자인 패턴이란? 반복적으로 나타나는 프로그래밍 문제를 해결하기 위한 해결책입니다. 쉽게 말해 개발자들끼리 협업을 잘할 수 있도록 코드들의 패턴을 짬과 코드의 질, 효율성을 높히는 것이라 부를 수 있다는 것을 알 수 있다. 많은 예시중 각각 몇개씩만 소개하려고 한다. 장점 개발자 간의 원활한 의사소통 소프트웨어 구조 파악 용이 재사용을 통한 개발 시간 단축 설계 변경 요청에 대한 유연한 대처 불필요한 리소스 낭비 방지 단점 객체지향 설계/구현 위주로 사용된다. 초기 투자 비용 부담 *생성패턴 1. 싱글톤 패턴 (Singleton Pattern) 하나의 클래스에 오직 하나의 인스턴스만을 가지는 패턴. 하나의 클래스를 기반으로 여러개의 개별적인 인스턴스를 만들 수 있지만, 그렇게 하지않고 하나의 클래스를 기.. this의 용법을 아는대로 설명하시오 요약 This는 함수를 호출할 때 결정되는 것이다. (동적) 전역범위에서 사용될 때 this는 전역객체를 가르킨다. 함수를 기본으로 사용될때 this는 전역객체를 가르킨다. 객체의 메서드, 생성자함수의 메서드, bind, call, apply로 함수를 호출하면 this가 바뀐다. (호출하는 객체나 인자로 넣은 객체) 화살표함수에서 bind는 호출한 함수의 this 보다 위스코프 함수의 this를 가리키게 된다. (고정) 함수 호출 방식과 this 바인딩 자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다. 다시말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 .. GET, POST 방식 차이 HTTP 메소드 중 GET방식과 POST 방식 차이 get 방식이든 post 방식이든 둘 다 브라우저가 서버에 요청하는 것입니다. GET 방식 GET은 요청을 전송할 때 필요한 데이터를 Body에 담지 않고, 쿼리스트링을 통해 전송합니다. URL을 끝에 ?와 함께 이름과 값으로 쌍을 이루는 요청 파라미터를 쿼리스트링이라고 부릅니다. 만약, 요청 파라미터가 여러개면 &로 연결합니다. 쿼리스트링을 사용하게 되면 URL에 조회 조건을 표시하기 때문에 특정 페이지를 북마크할 수 있습니다. 쿼리스트링을 포함한 URL 샘플은 아래와 같습니다. 여기서 요청 파라미터명은 name1, name2 이고, 각각의 파라미터는 value1, value2 라는 값으로 서버에 요청을 보내게 됩니다. www.example-url.c.. 함수선언문과 함수표현식의 차이 함수 - 함수는 여러 개의 인자를 받아서, 그 결과를 출력한다. - 파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 발생하지 않는다. 만약, 파라미터 1개가 정의된 함수를 부를 때, 인자의 개수를 0개만 넣어 실행하면 이미 정의된 파라미터(매개변수)는 undefined이라는 값을 갖게 된다. 이는 변수는 초기화됐지만, 값이 할당되지 않았기 때문이다. - 자바스크립트에서는 함수도 객체이다. 따라서 다른 객체와 마찬가지로 넘기거나 할당할 수 있다. 함수를 객체 프로퍼티에 할당할 수도 있다. const o = {} o.f = testFunc o.f() // test!! const arr = [1, 2, 3] arr[1] = testFunc arr[1]() // test!! 원시값 매개변수 vs 객체 매.. 호이스팅에 대해서 설명해 보세요. 목표 호이스팅(Hoisting)이란 무엇인지 이해한다. 함수선언문과 함수표현식에서의 호이스팅 차이를 이해한다. - let/const와 var 변수 선언에서의 호이스팅 예시 같은 이름의 var 변수 선언과 함수 선언에서의 호이스팅에 대해 이해한다. 호이스팅(Hoisting)의 개념 - 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 {} 안에서 유효하다. - 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. 실제로 코드가 끌어올려지는 건 아니며, 자바스.. 클로저는 무엇인가요? 원리와 왜 사용하는지 설명해 주세요. 클로저란? MDN에서는 클로저를 다음과 같이 정의하고 있다. 클로저는 독립적인 (자유) 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 ‘기억한다’. 외부 함수가 반환된 후에도 외부 함수의 변수 범위 체인에 접근할 수 있는 함수이다. 전역 변수의 사용을 억제하고, 정보를 은닉하기 위해 사용한다. 흔히 함수 내에서 함수를 정의하고 사용하면 클로저라고 한다. 하지만 대개는 정의한 함수를 리턴하고 사용은 바깥에서 하게 된다. function getClosure() { var text = 'variable 1'; return function() { return text; }; } var closure = getClosure(); console.log(closure()); // 'va.. 브라우저는 어떻게 동작하는가? 목표 브라우저 주소 창에 naver.com을 입력했을 때 어떤 과정을 거쳐 네이버 페이지가 화면에 보이게 되는지 알게 되기 브라우저 렌더링 원리 - DOM, CSSOM 생성: 가장 첫번째 단계로 서버로부터 받은 HTML, CSS를 다운받는다. --> 단순한 텍스트인 HTML, CSS 파일을 Object Model로 만든다. HTML은 DOM으로, CSS는 CSSDOM으로 만들어진다. (html이 여기서 파싱된다.) DOM Tree, CSSOM Tree가 만들어진다. - Render Tree 생성: DOM Tree, CSSOM Tree 가 만들어졌으면 그 다음으로는 이 둘을 이용하여 Render Tree를 생성한다. 랜더 트리는 스타일 정보가 설정되어있고, 실제 화면에 표현되는 노드들로 구성된다. - La.. 이전 1 다음
