Javascript

기본페이지 틀 만들기 이젠 페이지를 만들어보자. 노션에서 처음 페이지를 만들면 이렇게 생겨먹었다. 일단은 아이콘이 있는 빈 페이지와, 빈 페이지, 아이콘 추가 버튼정도만 구현해보자. 일단 body에 붙일 mainUI 를 만들어서 body에 붙여주자. this.mainUI = new Dom('div', 'main'); document.body.appendChild(this.mainUI.element); 기본 틀 그리고 iconBar, newPage(페이지의 각 블록, 본문을 가질 부분), newTitle을 만들어서 newPage에 붙이고, newPage를 mainUI에 붙여준다.이후 페이지 전환시에 mainUI는 그대로 있고, newPage만 교체될 것이다. this.mainUI = new Dom('div..

원시값 변경 불가능한 값 원시타입의 값은 변경 불가능한 값이다. 한번 생성된 원시값은 읽기전용이라 변경이 불가능하다. 값과 변수 변수는 변할 수 있지만, 값은 그렇지 않을 수 있다. 변수가 가르키는 원시값의 주소가 바뀌는 것이다. var p; var p; p=10; undefined는 가비지 컬렉터가 제거하기 전까지는 메모리 어딘가에 계속해서 존재하게 된다. 불변성을 갖는 원시값을 할당한 변수는 재할당 이외에 변수값을 변경할 수 있는 방법이 없다. 문자열과 불변성 문자열 타입은 1글자당 2바이트의 메모리 공간이 필요하다. 숫자는 8바이트로 고정이다. 따라서 10000은 8바이트이지만, ‘10000’은 10바이트가 필요하다. 문자열의 내용이 바뀌는 경우에도 불변성이 적용된다. var str='Hello';..

Dom Class class를 사용해 Dom을 쉽게 생성할 것이다. 그냥 할수도 있겠지만, 그냥 해봤더니 DOM요소 하나 만드는데 5줄 넘게 든다. 이러면 나중에 읽기가 싫어진다. 분명 이거보다 나은 방법이 있겠지만, 지금 당장 떠오른 방법은 이거니 이렇게 하겠다. class Dom { constructor(elementType, className, innerHTML) { this.element = document.createElement(elementType); if (innerHTML !== undefined) { if (elementType === 'input') { this.element.placeholder = innerHTML; } else { this.element.innerHTML = in..

노션을 클론코딩해보자. db까지는 할 생각 없고 바닐라 자바스크립트로 페이지 만들기, 글쓰기 기능을 클론코딩해볼 생각이다. 우선 html이랑 css 구성을 마친 상태이다. 파일이 많아질 것 같아서 웹팩을 통해서 javascript를 관리해 볼 것이다. 우선은 웹팩을 적용시켜주자. https://0422.tistory.com/216 Webpack(웹팩) 적용하기 npm init 프로젝트가 npm으로 관리되어야 하므로 npm init을 진행한다. npm init -y 원래는 옵션 내용을 물어보나 -y옵션을 붙이게 되면 기본세팅 상태로 만들어지게 된다. 옵션 설명 name 프로젝트 이름 ve 0422.tistory.com User의 notion « 개인페이지 + 껍데기를 이렇게 구성해주었다. css는 별거 없..

타입변환이란? 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 명시적 타입 변환(타입 캐스팅) 개발자가 의도적으로 값의 타입을 변환하는 것 암묵적 타입 변환(타입 강제변환) 개발자의 의도와 관계없이 표현식 평가 도중에 자바스크립트 엔진에 의해 암묵적으로 변환되는 경우 둘다 기존 원시값을 직접 변경시키는 것이 아니다. 원시값은 변경불가능 값으로 변경시킬 수 없다. 암묵적 타입 변환 예시 var x=10; var str=x+''; console.log(typeof str, str); //string, 10 console.log(typeof x, x); // number, 10 암묵적 타입 변환은 원래 것을 건들이지 않고, 새로운 것을 만들어 낸다. 암묵적 타입 변환 JS엔진은 표현식을 평가..

제어문은 조건에 따라 코드블록을 실행하거나 반복 실행할때 사용함 블록문 0개 이상의 문을 중괄호로 묶은 것 코드블록 또는 블록이라 함 JS에서는 블록문을 하나의 실행 단위로 봄 조건문 주어진 조건식의 평가 결과에 따라 코드블록의 실행을 결정함 조건식은 불리언 값으로 평가될 수 있는 식이어야함 if else문 true인 경우 if, 아닌경우 else의 블록문이 실행됨 if문의 조건식은 암묵적으로 불리언 값으로 변환된다. 조건이 추가로 필요한 경우 else if문을 사용하며, 이는 여러번 사용 가능하다. switch문 switch문은 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case문으로 실행 흐름을 옮긴다. switch문의 표현식과 일치하는 case문이 없으면 default문을 수행한다. defa..

https://0422.tistory.com/210 바닐라 자바스크립트 dragger만들기 심심해서 하나 만들었다. 급한 사람은 아래 깃헙들어가서 전체 코드 긁어가면 된다. https://github.com/d0422/make-toy-vanillaJS/tree/main/dragger GitHub - d0422/make-toy-vanillaJS: 바닐라 자바스크립트로 장난감 만 0422.tistory.com 대애충 만든 dragger의 코드를 개선시켜 보자. 일단 함수에 중복되게 적힌 부분이 꽤 있는 것 같다. animationManage 이 친구의 if else문이 보기 싫고 중복되는 것 같아서 여기를 삼항연산자로 개선할 것이다. function animationManage() { const addOne..

값 식이 평가되어 생성된 결과 10+20 은 식이고, 결과인 30은 값이다. 변수에 할당 되는 것, 될 수 있는 것은 값이다. 리터럴 사람이 이해할 수 있는 문자, 또는 약속된 기호를 사용해 값을 생성하는 표기법 3 //숫자 리터럴 3 숫자 리터럴 3을 코드에 작성하면, 자바스크립트 엔진은 이를 평가해 숫자값 3을 생성한다. 자바스크립트 엔진은 런타임에 리터럴을 평가하여 값을 생성한다. 정수리터럴 100 부동소수점 리터럴 10.5 2진수 리터럴 0b010001 8진수 리터럴 0o101 16진수 리터럴 0x41 문자열 리터럴 ‘hi’ 불리언 리터럴 true, false null 리터럴 null undefined 리터럴 undefined 객체 리터럴 {name:”hi”, age:1} 배열 리터럴 [1,2,3..

변수란 무엇인가? 10+20 해당 식을 계산하기 위해서는 10, 20, + 기호의 의미를 이해하고, 10+20이라는 식의 의미도 파악할 수 있어야 한다. 숫자 10과 20은 메모리 어딘가에 기억되고, CPU는 이 값을 읽어 연산을 수행한다. 결과로 생성된 숫자 30도 메모리상의 임의 위치에 저장된다. 이 10과 20, 30은 절대 다시 접근하여 사용할 수 없다. 메모리에 접근할 수도 있지만, 매우 치명적인 오류를 초래할 수도 있기에 자바스크립트는 직접적인 메모리 제어를 제공하지 않는다. 또한, 메모리 주소를 알 수 있는 방법도 없으므로, 사용이 불가능하다 할 수 있다. 이를 해결하기위해 제공되는 것이 변수이다. 변수 하나의 값을 저장하기 위해 확보한 메모리 공간, 메모리 공간을 식별하기 위해 붙인 이름 ..

JS 실행환경 JS엔진은 브라우저에도있으나 Node.js도 JS엔진을 내장하고 있음 기본적으로 브라우저에서 동작하는 코드는 node.js에서도 동일하게 동작함 주의점 용도 브라우저 HTML, CSS, JS를 실행해 브라우저 화면에 렌더링하는 것이 주된 목적 Node.js 브라우저 외부에서 자바스크립트 실행환경을 제공하는 것이 주된 목적 차이점 | 분류 | 웹브라우저 | nodejs | | --- | --- | --- | | DOM API | O | X | | 파일 생성, 수정 | X | O | | WEB API | O | X | | NodeJS고유 API | X | O | 브라우저 개발자도구 자주사용하는 기능 Elements 로딩된 웹페이지의 DOM과 CSS를 편집하여 렌더링된 뷰를 확인할 수 있음 HT..