본문 바로가기

전체 아티클133

불변성을 유지하려면 어떻게 해야할까? 불변성이란 ? 보통 불변성의 의미는 `상태를 변경하지 않는 것` 이라는 간단한 정의로 설명된다. 그러나 대부분 불변성에 대해 설명을 할 때, 함수 외부의 변수에 접근, 재할당을 해서는 안된다, 함수의 인자를 변경하면 안된다와 같이 상태를 변경하는 행위를 금지하는 예시 정도만 설명하고, 상태를 변경한다는 것이 정확히 무엇을 의미하는지는 자세히 설명을 하지 않는다. (나도 가벼운 예시 정도만 알고, 레퍼런스의 블로그를 통해 자세히 알게 되었다) 불변성이 이야기하는 상태의 변경이라는 것은 단순한 변수의 재할당을 이야기하는 것이 아닌, 메모리에 저장된 값을 변경하는 모든 행위를 의미하며, 여기에 변수의 재할당과 같은 행위도 포함되는 것이다. 우리는 변수를 통해 메모리에 접근을 하고 있다. 우리는 변수를 재할당하.. 2023. 2. 9.
호이스팅에서의 TDZ(Temporary Dead Zone) 호이스팅에서의 TDZ(Temporary Dead Zone) 자바스크립트에서는 `var`, `let`, `const` 세 변수로 이루어진다. 이 세 변수 모두 호이스팅이 일어나며, var은 선언과 동시에 초기화가 되기 때문에 undefined를 반환하지만 나머지 let과 const의 경우 선언만 될 뿐 초기화가 이루어지지 않는다. 이 단계에서 TDZ에 들어가게 된다. name = 'hello' // ReferenceError: Cannot access 'name' before initialization let name = 'hi' 위의 코드를 보자, `name`이 호이스팅 되지 않았다면, 두 번째 `let` 선언에서 already declared 에러가 났었어야했는데, 현실은 초기화 하기 전에 액세스 할 .. 2023. 2. 9.
var, let, const의 차이는 무엇일까? var, let, const의 세가지 차이점 var 선언은 전역 범위 또는 함수 범위이며, let과 const는 블록 범위({})이다. var 변수는 범위 내에서 업데이트 및 재선언이 가능하다. let 변수는 업데이트를 할 수 있지만 재선언이 불가하다. const는 재선언과 업데이트 모두 다 불가하다. 세 변수 모두 최상단으로 호이스팅이 되지만, var 변수만 undefined로 초기화되어지고, let과 const 변수는 초기화 되지 않는다. var과 let은 초기화하지 않은 상태로 선언할 수 있지만 (값을 지정해주지 않으면 undefined), const는 선언 중에 초기화를 해야한다. ES2015(ES6) 등장 전에는 문제점들이 있음에도 불구하고, `var` 로 변수를 선언하는 것이 지배적이었다. 따.. 2023. 2. 9.
Promise와 CallBack 차이 Promise와 CallBack의 차이 콜백 함수는 비동기 로직의 결과값을 처리하기 위해서 callback 안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수가 없다. 하지만, Promise를 사용하면 비동기에서 온 값이 프로미스 객체에 저장되기 때문에 코드 작성이 용이해진다. Promise(프로미스)란 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 비동기 처리란 `특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성`이다. 비동기 처리 방식을 사용하는 이유는 2가지 핵심요소 때문이다. - return value를 이용할 수 있다. - error handling(에러 핸들링)이 동기식 코드와 유사하게 쓰일 수 있다. 프로미스를 사용할 때.. 2023. 2. 9.
Axios Header에 Access Token을 넘기는 방법은? 서론 토이프로젝트에서 Axios 통신을 사용해 Header 부분에 Access Token을 넘겨야하는 상황이 발생했다. 오늘 포스팅에서는 Axios 통신에서 Access Token을 넘기는 방법에 대해 포스팅을 해보려고 한다. 프론트 단에서 백엔드로 어떻게 데이터를 넘길까? Access Token을 header Authorization에 넣어서 * Bearer과 Token을 합쳐 보내줘야 데이터를 가져올 수 있다. 프론트 단에서 header Authorization에 넣어 백엔드로 넘기면, 백엔드에서는 Access Token을 대조하여 걸맞는 정보를 다시 넘겨준다. * Bearer 이란? 정보의 신호 전달을 네트워크 단에서 손실 없이 있는 그대로 전달하는 서비스를 말한다. 베어러 서비스가 종합 정보 통신.. 2023. 1. 7.
요즘 많이 사용하는 JWT는 뭘까? 서론 요즘 웹 개발을 하면서 JWT 라는 기술이 되게 많이 사용된다. 로그인 기능을 구현하면서, 자연스레 프론트 개발을 접하며 백엔드와의 소통시 JWT에 대한 개념이 자주 나오곤하는데, 오늘 포스팅에서는 JWT에 대해서 다뤄볼 예정이다. JWT(JSON Web Token)가 뭘까? JWT는 JSON Web Token의 약자로, 인증에 필요한 정보들을 암호화시킨 Json 형태의 토큰이다. 웹에서 서버에서 클라이언트의 인증 방식으로 토큰 방식 외에 세션과 쿠키 인증 방식이 있지만, 세션과 쿠키 방식을 지원하지 않는 앱 같은 경우에는 이러한 토큰 방식은 필연적이라고 말할 수 있다. JWT를 통한 인증 방식은 JWT 토큰(Access Token)을 HTTP 헤더에 실어 서버가 클라이언트를 식별하는 방식이다. J.. 2023. 1. 5.
프론트엔드 실무 면접 준비해보기 https://xiubindev.tistory.com/119 (출처) 실제로 받은 프론트엔드 개발자 면접 질문 모음 첫 번째 직장에는 운 좋게 바로 들어가서 일을 시작했기 때문에, 제대로 취업 준비를 해본 경험이 없었다. 그래서 이번에 다시 프론트엔드 개발자로 취업 준비를 하면서 코딩 테스트 공부도 하 xiubindev.tistory.com CS ⭐️ 브라우저 주소창에 www.google.com을 입력하면 어떤 일이 일어나나요? DNS에 대해 설명해주세요. ⭐️ GET과 POST의 차이는 무엇인가요? REST API에 대해 설명해주세요. ⭐️ 객체 지향 프로그래밍이란 무엇인가요? 자료구조 stack과 queue에 대해 설명해주세요. ⭐️ 프로세스와 스레드에 대해 설명해주세요. JavaScript ⭐️ P.. 2023. 1. 2.
프론트엔드 기초 CS 대비 서론 그냥,, 면접 준비를 해보자,, CS 브라우저에 Google 주소창을 입력하면 어떤 일이 일어날까요? 'www.google.com'을 주소창에서 입력하면 일어나는 일 'www.google.com'을 주소창에서 입력하면 일어나는 일 _개발자로서 웹이 어떤 과정으로 동작하게 되는지, 무슨일이 어떻게 일어나는지에 대해 제대로 이해하지 못한 채 그냥 만들고 보여지는데에만 집중했던 것 같다. 어느 정도 큰 그림으로라도 이 velog.io DNS에 대해 설명을 해주세요 : URL들의 이름과 IP 주소를 저장하고 있는 데이터베이스로, 웹 사이트를 위한 주소록이라고 생각을 하면 된다, 숫자로 된 IP주소 대신 사용자가 사용하기 편리하도록 주소를 매핑해주는 역할을 한다. GET과 POST의 차이에 대해서 설명을 해.. 2023. 1. 2.
이벤트 버블링이란? 서론 웹 개발을 하는 사람이라면 버블링와 캡쳐링에 대해서 한번쯤은 들어보았을 것이다. 프로젝트를 진행하면서 애매모호했던 프론트엔드 지식들을 구체화시키고자 오늘의 포스팅은 `버블링과 캡쳐링` 이라는 주제로 포스팅을 해보려고 한다. 버블링이란 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성을 의미한다. 첫 이벤트가 발생했을 때 브라우저는 이벤트를 하위 컴포넌트에서 상위 컴포넌트로 전파시키는 방식을 가지는데, 이를 이벤트 버블링이라고 한다. 버블링의 원리 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작을 한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.. 2023. 1. 2.

티스토리툴바