전체 오늘 어제
본문 바로가기
안녕하세요 :) FE 개발자 윤지홍입니다.
저는 리액트를 주로 사용해요.
UX/UI디자인에도 관심이 있어요.
Javascript React NextJs NodeJs Flutter HTML CSS PHP
👋
Javascript (6)
Javascript 원시타입과 참조타입 들어가기 javascript 변수 타입에는 원시타입과, 참조타입으로 나누어져 있는데 이 원시타입과 참조타입에 대해 알아보자. 원시 타입이란? 원시타입의 종류에는 string, number, bigint, boolean, undefined, symbol이 있다. 이 타입의 데이터들은 불변성을 가지고 있다. 즉 읽기 전용으로 값을 변경할 수 없고 변수에 할당될 때 메모리의 크기가 고정되어 절대 변하지 않는 특징을 가지고 있다. 그리고 변수 선언 시 변수에 실제 값을 저장한다. 이러한 특징 때문에 변수의 값을 변경하더라도 기존 값이 변경되는게 아닌 새로운 메모리에 값이 생성되고 해당 값이 변수에 저장된다. 위 이미지 처럼 변수 c에 a를 할당했을 경우 변수 c는 a와 연결되는게 아닌 a의 실제 값인 10이 변..
2022년 08월 23일
Javscript 변수 선언 방법 (var, const, let) 들어가기 javascript 변수 선언방식에는 var, const, let 키워드 3가지가 있다. 각 선언방식의 유효 범위와 값 재할당 및 재선언에 대해서 자세히 알아보자. var 키워드 유효 범위 - 함수 레벨 스코프 값 재할당 - 가능 재선언 - 가능 var키워드는 함수 레벨 스코프이기 때문에 아래 코드와 같이 작동된다. var a = '123'; const test = () => { var a = '테스트'; console.log(a); // result: '테스트' }; test(); console.log(a); // result: '123' 또한 함수 레벨 스크프이기 때문에 블록 레벨 스코프는 무시된다. var i = 0; for (var i = 0; i < 10; i++) { console.l..
2022년 08월 22일
JS 실행 컨텍스트란? 들어가기 js 공식 문서나 관련 자료들을 찾아보면 컨텍스트, 실행 컨텍스트 라는 단어가 많이 들어가는 것 같다. 글을 읽다 보면 대충 컨텍스트가 이런 걸 말하는 거구나 하고 넘겼었는데 최근 기초부터 다시 공부하다 보니 실행 컨텍스트라는 단어가 유독 많이 나오는 것 같아서 컨텍스트에 대해 정확히 짚고 가자 싶어서 정리했다. 실행 컨텍스트에 대해 알아보자 실행 컨텍스트(Execution Context)란 쉽게 실행 가능한 코드가 실행되기 위해 필요한 환경 정보들을 모아둔 환경이라고 생각하면 될 것 같다 :) 1. 실행 가능한 코드가 뭘까? 자바스크립트에서 실행 가능한 코드의 정의는 아래와 같다..! 1. 전역에 존재하는 코드 2. 함수 코드 3. Block - ES6 이상 4. Eval 코드 2. 그럼 코..
2022년 08월 19일
Javascript 동작 원리에 대해 알아보자 들어가기 자바스크립트를 몇 년 동안 사용해 오면서 동작원리에 대해 대충은 알고 있었는데 "나중에 제대로 알아보자.. 알아보자.." 하며 미뤄놨었다가 드디어 정리했다 :) Javascript 동기식 언어다 js는 동기식으로 동작한다. 비동기 처리가 가능하기 때문에 비동기식 언어라고 생각할 수 있지만 javascript는 동기식으로 동작되고 비동기 처리는 아래에서 나오는 WebAPI로 따로 처리한다. Js는 싱글 스레드 js가 동기적으로 동작하는 이유가 여기에 있다. 싱글 스레드는 한 작업이 종료될 때까지 다음 작업을 실행하지 않고 기다린다. 아래 코드로 살펴보자 alert('hello'); console.log('world'); 콘솔을 확인해 보면 알럿트가 닫히기 전까진 'world'가 찍히지 않는 걸 확..
2022년 08월 17일
클로저(Closure)와 렉시컬 스코프(Lexical Scope) 렉시컬 스코프(Lexical Scope) 란? 렉시컬 스코프를 번역하면 "어휘 범위"라고 하지만 보통 "정적 범위", "정적 스코프"라고 한다. 렉시컬 스코프는 함수가 어디서 실행되는지가 아닌 어디서 선언되었는지에 따라 상위 스코프를 결정한다. 클로저(Closure) 란? 클로저란 함수가 속해있는 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때에도 해당 스코프에 접근할 수 있게 하는 기능을 말한다. 쉽게 말해 외부 함수의 실행 컨텍스트가 종료된 이후에도 내부 함수에서 외부 함수의 컨텍스트에 접근할 수 있게 해주는 기능을 말한다. 아래 코드를 통해 살펴보자 const test = () => { const a = 123; const res = () => { console.log(a) } re..
2022년 08월 16일
Js 스코프(Scope) 란 스코프(Scope)란? 스코프란 식별자(변수, 함수, 클래스) 접근 규칙에 따른 유효 범위를 말한다. 즉 식별자에 접근 가능한 유효 범위가 존재하고 그 범위는 중괄호와 함수에 의해 나눠진다. (중괄호 : Block Scope, 함수 : Function Scope) 스코프의 종류와 접근 Block/Function 스코프가 있다. 1. 스코프는 안에서 밖으로만 접근 가능하다 스코프는 안에서 밖으로만 접근이 가능하고 그 반대는 불가능하다. const app = () => { const a = '테스트'; console.log(a); // result: '테스트' }; // app 블록 종료 console.log(a); // result: Uncaught ReferenceError: b is not define..
2022년 08월 16일

티스토리툴바