dev_H dev_H

얕은 복사, 깊은 복사 얕은 복사와 깊은 복사에 대해서 이해하기 전 알아야 할 것들 데이터 타입, 메모리 할당 데이터 타입에는 기본형 데이터와 참조형 데이터가 있음 기본형 데이터 타입(원시 데이터) string number boolean null undefined symbol 기본형 데이터들은 모두 불변값임. 예시 // 예시1 var a = 'abc'; a += 'def'; ---- // 예시2 var b = 5; var c = 5 b = 7 첫 번째 변수 a에 문자열 'abc'를 할당했다가 'def'를 추가하면 기존의 'abc'가 'abcdef'로 바뀌는 게 아니라 새로운 문자열을 데이터 영역에 만들고 그 주소를 변수 a에 저장함 -> 'abc'와 'abcdef'는 완전히 다른 별개의 데이터임 두 번째..

콜백함수, 비동기 콜백함수 const example = (cb) => { setTimeout(() => { console.log("비동기 함수 완료"); }, 2000); }; console.log("비동기함수 호출"); example(() => { console.log("콜백함수 실행"); }); console.log("비동기 함수 호출 후 코드"); 함수의 인자로 다른 함수를 전달하고 해당 함수의 실행이 끝나면 전달받은 함수를 실행하는 방식임 이를 통해 비동기적인 동작을 구현할 수 있음 하지만 콜백함수로 비동기 동작을 구현하다보면 콜백헬이 발생함 콜백헬이란? 비동기 처리 로직을 구현하기 위해 콜백 함수를 중첩하여 사용하게 되면서 발생하는 것 콜백 함수 내부에 다시 콜백 함수를 정의하고 그 안에 또 콜..

SSR, CSR, SSG SSR, CSR, SSG, 모두 다 웹페이지가 렌더링하는 방식들임 크게 CSR(Client Side Rendering)과 SSR(Server Side Rendering)으로 나뉨. 이외에도 SSG와 ISR라는 방법도 있음 이걸 얘기하기 전에 연관되는 개념으로 SPA와 MPA에 알아야 함 SPA, MPA SPA(single page application) 한 개의 페이지로 구성된 어플리케이션 웹 어플리케이션에 필요한 모든 정적 리소스(HTML, CSS, Javascript 등)을 최초 렌더링 시 한 번에 다운로드 함. 그 후 새로운 요청이 있을 때 서버에 필요한 데이터만 요청해 받아서 페이지를 갱신함 결국 SPA를 CSR 방식으로 렌더링한다고 할 수 있음(하지만 SPA가 전부 CS..

Redux, Flux Pattern Redux란? 리덕스는 자바스크립트 상태관리 라이브러리임 리덕스는 왜 생겨났을까? 리덕스가 나오기 전 프론트엔드쪽에서 데이터 흐름을 관리하는 방식은 MVC 패턴이었음 MVC 패턴은 Flux Pattern과 달리 양방향 데이터 흐름을 가지고 있음 즉, 모델이 변경되면 뷰가 변경되고, 사용자와의 인터렉션을 통해 뷰에서 변경이 일어나면 모델도 변경됨 이는 프로젝트가 점점 커지면 문제가 됨 -> 왜냐하면 데이터 흐름을 이해하기 어려워지기 때문에 버그가 발생하면 찾기 어려워짐(대표적인 예시 : 페북 - 알람 정보 업데이트가 제대로 안 되어 알람 표시 계속 유지) MVC Pattern Model: 데이터 형식이나 구조를 관리함 어플리케이션 정보, 데이터를 나타냄 또한 이러한 데이..

토큰 기반 인증 토큰을 기반으로 한 인증에 대해서 알기 전에 기존에 쓰이던 세션 기반 인증에 대해서도 같이 정리해보겠음 세션(Session)이란? 사용자가 웹 브라우저를 통해 웹 서버에 접속한 시점으로부터 웹 브라우저를 종료하여 연결을 끝내는 시점까지 같은 사용자로부터 오는 일련의 요청을 하나의 상태로 보고 그 상태를 일정하게 유지하는 기술 즉, 클라이언트 별로 각각의 상태 정보를 서버에 저장하는 기술임 서버에서 클라이언트를 구분하기 위해 각 클라이언트 별로 세션ID를 부여하고, 웹 브라우저가 서버에 접속해 브라우저를 종료할 때까지 세션을 유지함 접속 시간에 제한을 두어 일정 시간 응답이 없다면 정보가 유지되지 않게 설정가능 사용자가 많아질 수록 서버 메모리를 많이 차지하게 됨 -> 서버에 부하가 생길 ..

이미지 출처 : yes24 이미지 출처 : yes24 프론트엔드 성능 최적화 | 유동균 | 인사이트 | 2022 '프론트엔드 성능 최적화 가이드'는 기술면접을 준비하다가 알게 된 책 이다. 기술 면접을 준비하면서 뭔가 인터넷에 있는 정보들을 보면 이해는 하겠는데 그걸 어떻게 적용할 수 있을까에 대한 궁금증을 해소하기 위해서 보게 되었다. 예시와 어떻게 최적화를 해나가는지 아주 친절하고 자세하게 알려준다. 아직 챕터 2까지만 보았을 뿐인데 빨리 내 포폴 사이트나 내가 했던 프로젝트들을 최적화하고 리팩토링하게 만들고 싶어진다; 그리고 보다보니 라이트하우스를 사용해 성능을 확인하고 어떤 것들을 고쳐야하는지도 알려주어서 좋았다 내가 최종 프로젝트를 했을 때 이 책을 보았다면 좀 더 좋게 최적화를 할 수 있지 않..

cookie, web storage, session 쿠키, 웹스토리지(로컬 스토리지, 세션 스토리지), 세션 쿠키와 웹스토리지가 생긴 이유 HTTP 프로토콜은 무상태(stateless)라는 특성을 가짐 때문에 서버는 클라이언트에서 보내는 요청만으로는 클라이언트가 누구인지 구별할 수 없음 따라서 클라이언트의 상태를 서버가 아닌 클라이언트에 저장해두고 필요할 때마다 이를 사용해 사용자를 식별하거나 사용자가 이전에 수행한 작업 등을 기억하는 데 사용하기 위해서 생김 무상태 요청과 응답을 주고 받는 사이클이 끝나고 나면 서버와의 연결이 끊어져 상태 정보를 유지하지 않는 특성 Cookie 쿠키 하나당 최대 4KB까지 사용가능. 사이트 하나 당 약 20여개를 허용함(브라우저마다 다름). 쿠키 생성 단위는 브라우저(..

브라우저에 www.naver.com을 입력하면 어떤 일들이 일어날까? 유저가 브라우저에 url을 입력함 url(Universal Resource Locator)이란? 서버에 자원을 요청하기 위해 입력하는 영문주소 DNS(domain name system) 조회 DNS는 브라우저가 리소스를 로드할 수 있도록 도메인 이름을 IP주소로 변환함 우선 브라우저는 로컬에 DNS 캐시가 있는지 살펴보고 없으면 ISP(ex: SK 브로드밴드, KT 등)의 DNS 서버에 해당 도메인 이름에 해당하는 IP 주소를 요청함 그러면 DNS 서버는 도메인 이름에 해당하는 IP 주소를 찾아 반환함 브라우저는 이렇게 얻은 IP주소를 사용해 서버와 통신하기 위해 TCP 연결을 함. 이 과정에서 3-way-handshake가 이루어짐(..