본문 바로가기

프론트엔드/JavaScript

(5)
투두리스트 MVC 패턴으로 만들어보기 - 1 (JavaScript) 투두리스트 MVC 패턴으로 만들어보기 - 1(JavaScript) 계기 지난 9개월동안 리액트를 사용하여 개발을 했다. 그런데 바닐라 자바스크립트로만 무언가를 만들어보는데 익숙해지기 전에 리액트를 사용하는데 더 익숙해져 버린 것 같다는 생각이 들었다. 프론트엔드 개발자에게 자바스크립트에 대한 이해도와 활용 능력이 굉장히 중요한데.. 그래서 이 기회에 SPA 프레임워크나 라이브러리를 사용하지 않고 자바스크립트만을 이용해서 연습을 했다. 무작정 만들어본 것은 아니고 인프런에서 김정환 님의 만들고 비교하며 학습하는 리액트를 수강한 후에 만들어 본 것이다. 리액트를 사용할 때의 장점을 비교하기 위해, 강의 앞쪽에 순수 자바스크립트로만 기능을 구현하는 내용이 있는데, 내가 원하던 것이라고 생각해서 수강했다. 투두..
자바스크립트 원시 값의 불변성(Primitive Type) 자바스크립트 원시 값의 불변성(Primitive Type) 자바스크립트는 크게 원시 타입(primitive type)과 객체 타입(object/reference type)으로 구분할 수 있다. 자바스크립트에서 원시 값은 변경 불가능한 값(immutable value)이다. 반면에 객체는 변경 가능 값(mutable value)이다. 도대체 이게 무슨 말인지 헷갈려서, 이번 기회에 공부하면서 이해해보려고 한다. 원시 값 변경 불가능한 값 위에서 말했듯이, 원시 타입은 변경이 불가능하다. 처음에 이게 무슨 소리인지 이해가 안됐다. 분명히 나는 변수에 원시 값을 할당하고 나서 그 값을 바꿀 수 있는데 말이다. var a = 1; // 숫자 타입은 원시 타입 a = "Beautiful Night"; // 문자열..
자바스크립트 암묵적 타입 변환(Implicit Coercion) 자바스크립트 암묵적 타입 변환(Implicit Coercion) 타입 변환이란? (명시적 타입 변환 vs 암묵적 타입 변환) 명시적 타입 변환: 개발자가 의도적으로 타입을 변환하는 것. 타입 캐스팅(Type Casting) 이라고도 함. 암묵적 타입 변환: 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환되는 것. 타입 강제 변환(Type Coercion)이라 한다. 명시적 타입 변환은 타입을 변경하겠다는 개발자의 의지가 코드에 명백히 드러나지만, 암묵적 타입 변환은 그렇지 않다. 타입 변환 결과를 예측하지 못한다면 오류를 생산할 가능성이 높아진다. 그래서 이에 대해 잘 이해하고 예측 가능한 코드를 작성하는 것이 중요하다. 암묵적 타입 변환 암묵적인 데이터 변환의 예 c..
자바스크립트 데이터 타입 (JavaScript Data Type) 자바스크립트 데이터 타입 (JavaScript Data Type) 자바스크립트 데이터 타입에 관해 공부했다. 내가 몰랐거나 중요하다고 생각되는 부분을 정리하면서 다시 한번 되새긴다. 실수 처리 자바스크립트는 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않는다. 그래서 2진수, 8진수, 16진수의 값을 변수에 할당해도 해석될 때는 모두 10진수로 해석된다. 예를 들면 아래와 같다. var binary = 0b01000001; // 2진수 var octal = 0o101; // 8진수 var hex = 0x41; // 16진수 console.log(binary); // 65 console.log(octal); // 65 console.log(hex); // 65 모든 수를 실수로 처리한..
자바스크립트 변수 자바스크립트 변수 모던 자바스크립트 Deep Dive 라는 책을 샀다. 출판사는 '위키북스'다. 당분간 이 책으로 공부하면서 블로그에 정리할 예정이다. 변수란? 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 즉 값의 위치를 가리키는 상징적인 이름이다. 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 그 덕분에 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 안전하게 값에 접근이 가능하다. (자바스크립트는 인터프리터 언어이다) 할당과 참조 할당: 변수에 값을 저장(대입, 저장) 참조: 변수에 저장된 값을 읽어들임. 식별자 변수를 식별자라고도 하는데, 이는 어떤 값을 구별..