Jaeilit

1) this 앞선 실행컨텍스트를 생성될 때 결정 된다. 실행컨텍스트는 어떠한 환경에서 코드를 하나씩 수집하면서 그 스냅샷으로 환경변수를 만들어내고 그 이후에 변하는 것들에 대해서는 어휘적환경에서 반영하게 된다. 이때 this 바인딩도 같이 만들어지게 된다. this는 함수를 호출 할 때 결정 된다. 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라진다. 1. 전역공간에서의 this 전역공간에서의 this는 전역객체를 가르침 브라우저 환경에서는 this 는 window node 환경에서는 global 임. 2. 변수는 어떤 객체의 프로퍼티 처럼 동작한다. (앞전의 포스트 내용 실행컨텍스트 이야기) 여기서 어떤 객체란 어휘적환경을 가르키는 것이고, 실행 컨텍스트는 변수를 수집해서(환경레코드)프로퍼티로 저장..

어쩌면 이 모든게 클로저를 위한 학습이 아닐까?.. # 식별자 식별자란 유효범위 a 외부에서 선언한 변수는 외부뿐 아니라 a 의 내부에서도 접근이 가능하지만 a 내부에서 선언한 변수는 오직 a 내부에서만 접근 가능 es5 까지의 자바스크립트는 전역공간을 제외하면 오직 함수 스코프만 생성 됨 식별자의 유효범위, 스코프를 안에서 바깥으로 차례로 검색해나가는 것을 스코프 체인이라 함, 이를 가능하게 하는 것이 바로 어휘적 환경(렉시컬환경)의 두번째 수집 자료인 외부환경참조이다. 복습 실행컨텍스트의 수집 정보 환경변수(Variable Enviroment) 와 렉시컬환경은 모두 환경레코드와 외부환경참조를 갖는다. 환경변수의 환경레코드와 외부환경참조는 최초 실행 스냅샷을 저장하고 렉시컬환경은 그 이후에 변경사항을 ..

실행컨텍스트 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언 된 변수를 위로 끌어올리고(호이스팅) 외부 환경 정보를 구성하고, this 값을 설정 하는 등의 동작을 수행함. # 스택과 큐 스택과 큐는 자료구조와 알고리즘에서도 나오는 개념임 스택 선입후출 (FILO) 스택은 쌓다라는 의미로 블럭을 밑에서 위로 쌓듯이 책을 쌓듯이 쌓는 구조를 의미함 쌓여있으니 당연히 맨 처음에 들어온게 맨 마지막에 나가게 된다. 호출스택이 쌓이는 스택구조에 너무 많은 스택이 들어가면 stack over flow 에러가 발생함. 예를 들어 100개만 저장할 수 있는 스택에 101개가 들어가면 stack over flow 에러가 발생. 큐 선입선출 (FIFO) 터널과..

메타태그를 입력했다해서 무조건 된다고 생각하는 사람도 있겠지만, 저처럼 눈으로 봐야 믿는 스타일은 직접 봐야하는데 메타태그를 테스트할때마다 배포를 하는건 엄청난 리소스 낭비와 실수다 로컬에서 테스트 하는 방법 https://ngrok.com/ ngrok - Online in One Line Zero Trust Add SSO, Mutual TLS, IP Policy, and webhook signature verification. ngrok.com ngrok 설치 후 cmd 에서 ngrok http port 입력하면 외부에 접속가능한 도메인을 준다. https://dd23-218-39-165-81.jp.ngrok.io React App dd23-218-39-165-81.jp.ngrok.io

불변성이 필요한 경우는 값으로 전달 받은 객체에 변경을 가하더라도 원본객체는 변하지 않아야 하는 경우이다. 다시 전달받은 객체에 변경을 가하더라도 (가변) 원본객체는 변하지 않아야한다. (불변) 가변은 데이터의 내부 프로퍼티만 바뀔 때 성립한다. 데이터 자체를 변경하고자 하면 원시형형 데이터와 마찬가지로 기존의 데이터는 변하지 않는다. (새로운 객체를 만들게 됨, 불변) 불변성을 지키면서 내부프로퍼티만 변경하려면 새로운 객체를 만들면서 원본의 데이터를 불변상태로 보존하고 새로운 객체에서 내부프로퍼티만 변경하면 된다. changName 함수 로직에 따라 user는 newUser에게 복사함으로써 같은 주소를 바라보고 newUser.name에 newName을 할당하더라도 같은 주소를 바라보기 때문에 내부프로퍼..

# 데이터 타입 - 기본형(원시형) - 참조형(레퍼런스) ## 기본형 - number - string - boolean - null - undefined - 심볼 ## 참조형 - object - Array - function # 차이점 기본형과 참조형의 차이는 불변성에 있음, 간략하게 말해 기본형은 값이 담긴 메모리의 주소 값을 바로 바라보지만, 참조형은 그 값들이 담긴 묶음의 주소 값을 바라봄, 불변성을 이해하기 위해서는 조금의 메모리 지식이 필요하기 때문에 메모리를 잠시 살펴 보고 넘어감, # 메모리 메모리와 데이터, 컴퓨터는 0과 1 로 이루어진 기계어이다. 메모리는 0과 1을 비트라는 메모리의 조각으로 기억한다. 메모리는 수많은 비트들로 구성되어 있는데, 각 고유한 식별자로 위치를 확인 할 수도 ..

SVG vs PNG 정적 페이지를 만들면서 이미지를 어떤 파일을 써야 할지 생각을 하다가 예전에 문득 png 3배율이나 svg 를 사용하라는 말이 떠올라서 왜지? 라는 생각에 조금 찾아봤다. 이미지 파일에는 무손실/무압축으로 jpg, png, svg 등등 나뉘긴 하지만 svg 와 png 만 살펴보기로 함 특징 1. 이미지가 깨지지 않음. 2. 상대적으로 용량이 적고 렌더링이 빠름 4. HTML 코드로 스타일링을 할 수 있음 SVG 의 V 는 vector 로 좌표 값들이 이어져서 만들어져있기 때문에 확대, 축소해도 이미지가 깨지지 않음 PNG 와 JPG 는 비트맵, bit를 를 가지고 표현하기 때문에 확대, 축소에 이미지가 깨진다. 렌더링 차이 SVG 는 용량도 상대적으로 작기 때문에 브라우저 로딩 속도가..

position sticky 를 사용하면 top 또는 left bottom 등 설정해놓은 포지션 값에 도달했을 때 fixed랑은 다른 느낌으로 엘리먼트가 그 위치에 걸려 있는 느낌이 들게 한다. 보통 엘리먼트가 view height 보다 작은 경우는 아무 에러가 없지만 view height 보다 커서 스크롤이 생긴 엘리먼트의 경우 top 0 을 기준으로 sticky를 사용 할 경우 스크롤이 있는 부분은 잘려서 안보이게 된다. 이 경우 top 0, 어디시점을 기준으로 걸어놓을 건지를 계산해줘야한다. window.addEventListener("scroll", function () { let windowHeight = window.innerHeight; let sticky = stickyRef?.curren..

가상선택자 bofore와 atfer 1. before 와 atfer 는 말 그대로 그 해당 엘리먼트(노드)가 만들어지고 난 뒤에 before(앞) 과 after(뒤)에 content가 작성 됨 1) 간단한 활용법 var_style See the Pen Untitled by jaeil.joo (@jaeilnet) on CodePen. 2) 다른 활용법 동적으로 css 함수를 넣어서 사용 할 수도 있음 content : attr() (동적인 css 텍스트) content : conuter() (숫자를 세어주는 css 함수) See the Pen Untitled by jaeil.joo (@jaeilnet) on CodePen. 3) 크로스 브라우징 이슈 크롬, firefox, oprea, safari 모든 가..

https://www.jaeilnet.shop/ 재일이의 넥스트js 넥스트 연습 desc og www.jaeilnet.shop 1넥스트와 리액트의 차이 1. 빈 html (seo) 리액트는 일반적으로 csr 으로써 빈 html 을 서버로부터 받고 js 와 css 를 입혀서 페이지를 구성한다. 여기서 빈 html 이 핵심인데 html 이 비어 있기 때문에 검색엔진 크롤러봇들이 내 사이트의 정보를 읽을 수가 없다. 물론 라이브러리를 이용하면 어느정도 대응이 가능하다. 2. 초기 렌더링 (코드 스플리팅) 또 초기 접근시에 빈 html 을 가져오기 때문에 거기에 입혀야 할 페이지의 모든 js 와 css 를 한번에 받아 오기 때문에 초기에는 성능적으로 사이트가 무거울수록 로딩이 느리다고 느낄 수 있지만 한번에 다..