Web/javascript (총 9개) 썸네일형 리스트형 javascript - [코어자바스크립트] 실행컨텍스트와 Hoisting(호이스팅) 그리고 ScopeChaning(스코프 체이닝) 호이스팅과 실행컨텍스트 이번 포스팅은 Javascript의 Execution Context(실행컨텍스트)와 `Hoisting(호이스팅) 그리고 Scope Chaining(스코프체이닝)에 대해 알아보도록 하겠습니다. 실행 컨텍스를 이해해야지만, 이 포스팅에 담기는 내용들인 Scope Chaining과 hoisting에 대한 이해가 수월합니다. 이번 포스팅역시 코어자바스크립트라는 책을 기반으로 작성되었습니다. 1. 실행 컨텍스트(Execution Context)란?javascript의 Execution Context(이하 실행컨텍스트)는 code 실행시 필요한 정보들(필요한 환경들)을 모아놓은 객체 입니다. javascript는 코드를 실행하며, 필요한 환경정보들(ex. 변수, 함수 등..)들을 모아 이를 .. javascript - [코어자바스크립트] 불변객체와 복사(얕은복사와 깊은복사) 1. 불변객체 Javascript의 불변객체와 값 복사에 관하여 포스팅을 진행하겠습니다. 본 포스팅은 코어자바스크립트라는 책을 기반으로 작성되었습니다. 1. 불변객체1.1 불변객체란 https://galid1.tistory.com/622 우선 불변객체에 관해서 잘 모르시다면 위의 글을 먼저 읽어보시는 것을 추천드립니다. (JAVA로 작성되어 있지만, 참조형의 개념을 아신다면 크게 문제없이 읽을 수 있습니다.) 간단히 말씀드려 불변객체란 어떤 객체내부의 프로퍼티들을 변경할 수 없도록 되어있는 객체를 일컫습니다. 그렇다면 언제 이런 불변객체가 필요할까요? 1.2 불변객체의 필요성 (기본형데이터와 참조형데이터의 차이)문제상황xlet people1 = { name : "A", gender : "male", ag.. javascript - [코어자바스크립트] javascript의 메모리와 데이터할당 (데이터 할당의 자유와 효율성) 1. 메모리와 데이터 javascrip의 메모리와 데이터 그리고 데이터할당에 대해서 알아보도록 하겠습니다. 본 포스팅은 코어자바스크립트라는 책을 기반으로 작성되었습니다. 1. 메모리와 데이터1.1 데이터 단위 존재의 이유컴퓨터는 0과 1로 모든 데이터를 표현합니다. 이렇게 0과 1만 표현할 수 있는 하나의 메모리 조각을 bit라고 표현합니다. 그런데 Byte와 같은 단위들은 왜 생겨났을까요?? 화폐간단합니다. 우리 일상생활에서도 찾아볼 수 있는데요 바로 화폐입니다. 10원짜리 동전으로도 100만원 1000만원을 표현할 수 있지만, 이는 매우 비효율적입니다. 예를들어 카드가 없던시절 매우 비싼 명품을 산다고 했을때, 이를 10원짜리 동전으로 계산하고 거스름돈을 받는다고 생각을 해보면, 시간이 매우 많이 소.. javascript - Redux란? (redux 예제) Redux란 Redux란?우선 Redux는 React에 종속된 라이브러리가 아닙니다. Javascript의 State를 관리하기 위해 등장한 Library입니다. 이점을 인지한채 글을 읽어주세요. 참고자료 : https://www.valentinog.com/blog/redux/ Redux는 State를 관리해주는 라이브러리이다.React 개발시에는 아래와 같이 수 많은 State를 관리하게 됩니다. 사용자가 볼 datanetwork fetching data사용자가 볼 URL사용자가 선택한 Item list어플리케이션 error물론, 부모 Component에서 이를 관리할 수도 있습니다. 하지만 정말 많은 State들이 산재 되어 있다보면, 이 많은 데이터를 한곳에서 관리할 수 있는 방법을 찾게 될것입니다.. Javascript - ES6 (` : 템플릿 리터럴) 문자열에 변수 포함시키기 1. 템플릿 리터럴이란 (`) 이번 포스팅에서는 ES6에서 추가된 템플릿 리터럴에 대해 알아보겠습니다. 1. 템플릿 리터럴이란? (`) 우선 템플릿 리터럴에 이용되는 특수문자는 ` 로써, 키보드 숫자 1 왼쪽에 있는 특수문자(~) 입니다. 주로 백틱(backtick)이라고 불릐웁니다. 이는 문자열에, 변수를 추가해 사용할 때 사용되며, 아주 편리한 기능입니다. 2. 템플릿 리터럴이 없었을 때xxxxxxxxxxlet a = 1;let b = 2;console.log("a + b = " + (a+b));템플릿 리터럴이 없었던 때에, console에 변수를 이용해 무언가를 출력하는 경우, 위와 같이 사용을 했었습니다. 간단히 설명드리면, 문자열의 경우 ''(싱글쿼테이션) 또는 ""(더블쿼테이션)을 이용해 묶.. javascript - 동기, 비동기 처리과정과 event loop JavaScript 비동기함수의 이해 Philip Roberts의 What the heck is the event loop anyway? 발표 영상을 보고 정리하는 포스팅입니다. 다음의 링크로 이동하시면 보실 수 있습니다. https://www.youtube.com/watch?v=8aGhZQkoFbQ 그림출처 - PhilipRobertsJavaScript의 동작 과정의 최종그림입니다. 천천히 하나하나 알아보도록 하겠습니다. 1. 동기1.1. 싱글스레드?다들 잘 아시다시피, JavaScript는 싱글스레드 프로그래밍언어로 하나의 싱글스레드로 동작을 합니다. 즉, 한순간에 하나의 로직만을 처리해 나아갈 수 있다는 의미 입니다. 1.2. Call Stack이제 맨 처음 본 그림에서 CallStack에 대해 알.. javascript - 정규표현식 이란? 1. 정규 표현식이란 1. 정규 표현식이란?정규표현식이란 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 검색, 치환, 등 의 작업을 간편하게처리 할 수 있도록 도와주는 수단입니다. (정규 표현식은 특정 언어에 종속되는 의미가 아닙니다.) 어디에 쓰일까 고민해보았을때, 많은 부분에서 사용이 가능하겠지만, 회원가입시, 이메일 형식을 파악할때에도 사용이 가능할 것 같습니다. 서버에서도 검증을 통해 처리가 가능하겠지만, 어차피 사용자가 잘못된 이메일을 입력하여 회원가입 불가능 처리를 하도록 할것이라면, 굳이 서버의 자원을 사용하기 보단 javascript에서 정규표현식을 통해 이메일 형식인지를 확인하도록하여 클라이언트의 자원을 이용하도록 할 수 있을것 같습니다. 2. 정규표현식 패턴다음 링크로 이동하.. javascript - 변수 javascript의 변수 javascript의 변수에대해 알아보도록 하겠습니다. 1. 변수선언javascript 에서는 변수선언시 var키워드를 사용합니다. java 와는 다르게 다양한 타입을 var를 이용해 모두 담을 수 있다는 것 입니다. 예시를 보겠습니다. 정수x var a = 1; alert(a);== 결과 == 1위 코드의 실행 결과로는 대화상자에 1이란 값이 담겨 출력됩니다. 실수xxxxxxxxxx var a = 1.0; var b = 1.5; alert(a+b);== 결과 == 2.5 문자열xxxxxxxxxx var a = 'hello '; var b = 'world'; alert(a+b);== 결과 == 'hello world' Booleanxxxxxxxxxx var a = t.. 이전 1 2 다음
