FrontEngineer JungBam

JavaScript에서 배열을 다루는 데는 여러 가지 메소드가 사용됩니다. 이들 중 일부는 원본 배열을 직접 수정(modify)하는 반면, 다른 일부는 원본 배열을 변경하지 않고 새 배열을 반환(return)합니다. 이러한 차이를 이해하는 것은 중요하며, 때로는 원본 배열을 보존하기 위해 slice() 메소드를 활용하는 방법도 필요합니다. 원본 배열을 수정하는 메소드 push(): 배열의 끝에 하나 이상의 요소를 추가하고, 새로운 길이를 반환합니다. pop(): 배열의 마지막 요소를 제거하고, 그 요소를 반환합니다. shift(): 배열의 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. unshift(): 배열의 시작 부분에 하나 이상의 요소를 추가하고, 새로운 길이를 반환합니다. reverse()..

순수 함수란 결국 외부에서 참조되는 값이 결과에 영향을 미치지 않는 함수를 말한다. const a = 1 const add = (b,c) => a + b + c 위의 코드에서 add함수는 a라는 값을 참조하여 연산한 값을 리턴하는데 이렇다면 다른 곳에 불려갔을 때에는 a값이 없기 때문에 에러가 날 것이다. 즉, 이 함수의 컨텍스트로만 동작했을 때에 함수가 제대로 동작하지 않는 것이다. const add = (a, b, c) => a + b + c 위의 코드에서 함수는 어디에서 불러오더라도 인자가 제대로 들어오는한 문제없이 동작한다. 위 함수는 순수함수이다. 한가지 경우를 더 보자. const add = (a, b) => { const c = 3 return a + b + c } 이 함수 또한 어디에서 불..

max-age와 expires는 쿠키나 cache-control에서 설정하는 것을 본 경험이 있다. 이것이 무엇인지 한번 짚고 넘어가는 시간이 필요할 것 같아서 정리해보겠다. Cache-control 응답헤더에 실려와 HTTP 캐시에 대한 설정을 해주는 옵션 쿠키 HTTP통신의 stateless, connectless 단점을 극복하기 위해 응답이 보내졌을때 연결이 만료되더라도 상태를 저장하고 유지하기 위한 방법 max-age expires 유효 기간 (ms 기준으로의 시간이 들어감.) 유효 일자 (그 값으로 날짜가 들어감.) 두개 모두 설정되어 있다면 max-age가 우선순위를 가져 expires는 무시하게 됨. 해당 기간 / 일자가 되면 데이터는 자동으로 쿠키/캐시에서 삭제되게 됨. 참조 : Expir..

this는 함수가 실행될 때 실행 컨텍스트에 바인딩 된다. 실행 컨택스트 객체에는 변수객체, 스코프 체인, this가 담겨지는데 이때 this는 호출하는 방법에 따라서 다르게 바인딩된다. 1. 화살표 함수에서 this : 화살표 함수는 this가 바인딩되지 않기 때문에 실행 컨텍스트의 스코프 체인의 상위 스코프의 this를 가리킨다. 2. 일반 함수 호출 : 일반 함수로 호출된 경우 this는 전역 객체를 가리킨다. 3. 메소드로 호출 : 메소드로 호출되었을 때에는 자신을 부른 객체를 가리킨다. 4. 전역에서의 호출 : window 객체를 가리킨다. const a = { name: "객체", arrow: function () { const any = () => console.log(this); any()..

매개변수란 함수가 호출될 때 인수로 전달된 값을 함수 내부에서 사용할 수 있도록 해주는 값을 이야기 한다. 인수와 매개변수를 간단하게 짚고 넘어가자. const add = (a, b) => a+b add(1,2) 라고 했을 때 파라미터는 a와 b를 이야기하는 것이고 인수란 1과 2를 이야기 하는 것이다. 그렇다면 arguments란 무엇일까? function으로 불려지게 된다면 들어오는 인수들이 arguments라는 객체에 들어오게 되고 function 내부에서 이 arguments 객체를 통해서 들어온 값에 접근할 수 있다. 예전에 화살표 함수를 공부하면서 arguments가 없다라는 것이 기억난다. 화살표 함수는 fucntion으로 만들어진 친구들과 달리 익명함수이고, this가 바인딩되어 있지 않아..

호이스팅이라는 개념을 알기 위해서는 자바스크립트에서의 변수 선언에 대해서 알 필요가 있다. const a = 1 이라는 코드를 쳤다고 했을 때, 이는 선언과 초기화, 할당을 동시에 진행한 것이다. 선언 : const a 초기화 / 할당: a = 1 왜 이 개념을 먼저 알아야 하냐면 호이스팅이란 자바스크립트 인터프리터가 동작할 때에 선언된 것들을 싹다 끌어올리는 것을 이야기 한다. 중요한 점은 각각이 선언하는 방식에 따라 호이스팅 된 결과가 다르다는 점이다. var로 선언된 변수와 const, let으로 선언된 변수는 각각 다르게 동작하는데 var의 경우에는 호이스팅되어질 때에 undefined로 값을 초기화하기 때문에 값을 할당하는 코드라인 이전에는 undefined가 출력된다. const와 let은 E..

RESTFUL이란 REST API의 설계방식을 따라서 설계된 API 구조를 말한다. RESTFUL이란 결국 정형화된 방식을 준수함으로써 서로 협업하기 쉽게 해주는 것 같다. REST API 설계의 가장 대표적인 방법은 GET, POST, DELETE, PUT, PATCH로 CRUD에 대한 API 설계하는 것이다. 예를 들어 모든 API를 POST로 작성한다고 하더라도 문제될 것은 없으나 단지 RESTFUL하지 않은 설계가 될 뿐이다. 실제 RESTFUL API를 깐깐하게 지키는 곳은 크게 없는 것 같다. 카카오 로그인 API를 보더라도 다 POST로 작성되어 있다.. 결국 RESTFULT한 지키지 않는다고 문제될 것은 없는 취향의 문제? 라는 생각이 든다.

웹 브라우저의 기본적인 구조는 7단계로 나뉜다. ① 유저 인터페이스 : 유저와 상호작용하는 부분 ② 렌더링 엔진 : HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시 ③ 브라우저 엔진 : 유저 인터페이스와 렌더링 엔진을 연결하는 기능 ④ 네트워킹 : 브라우저가 인터넷에서 리소스를 가져올 ⑤ UI 백엔드 파트 : 콤보박스나 윈도우 등 브라우저가 이미 갖고있는 UI들을 그려줌. ⑥ 자바스크립트 인터프리터 : 자바스크립트 코드 실행 ⑦ 데이터 펄시스턴스 : 로컬 스토리지나 쿠키와 같은 보조 기억장치에 데이터를 저장하는 기능 좀 더 깊게 보려면? [Browser] 브라우저의 구조 | Browser Structure "브라우저, 왜 알아야 할까" 브라우저에 내부 동작에 대해 꼭 알아야 할까요? 브라우저는 IE..