프로그래밍/javascript&typescript (15) 썸네일형 리스트형 참조와 복사 let a = 10; let b = a; b=20; console.log(a); 위와 같은 코드가 있을 때 콘솔에 찍혀나오는 결과 값은 무엇인가? 답은 10이다. 그럼 다음 코드를 확인해보자. let o = { isLoading: false } let o2 = o; o2.isLoading = true; console.log(o.isLoading); 위 코드에서 콘솔에 찍히는 결과 값은 무엇일까? 답은 true다. 언뜻 동일해보이지만 결과값이 상이한 두 코드의 차이점은 변수에 담기는 데이터의 타입이다. 첫번 째 코드는 변수에 기본형 데이터타입이 할당되었고, 두번 째 코드에는 객체형 데이터타입이 할당되었다. 기본형 데이터타입 (숫자, 문자, boolean, null, undefined)들은 해당 값이 들어있.. 변수와 상수 변수와 상수는 둘 다 데이터를 담는 그릇이다. 둘 사이의 차이점은 데이터 할당 이후에 데이터를 변경할 수 있는가 없는가 차이이다. 변수는 처음 할당해놓은 값을 수차례 변경 가능하고 마지막에 넣은 값이 최종값으로 유지된다. let age = 10; age = 20; age = 30; 반면 상수는 경우 값을 변경할 수 없다. 상수를 다른 값으로 변경하려고 하면 오류가 발생한다. const age = 10; age = 20; // 오류 주의할 점이 있다면, 상수에 객체를 할당할 때이다. 상수에 객체를 할당하게 되면, 상수가 영향을 끼치는 범위가 객체 바깥 쪽에만 해당하게 된다. 따라서 상수에 담겨있는 객체 자체를 다른 객체나 값으로 변경하려고 할 때에만 오류가 발생하게 되고, 객체 내부의 속성들의 값은 상수 .. 식별자 MDN에서 정의한 식별자는 아래와 같다. 식별자는 코드 내의 변수, 함수, 혹은 속성을 식별하는 문자열입니다. Javascript의 식별자는 대소문자를 구별하며 유니코드 글자, $, _, 숫자(0-9)로 구성할 수 있지만, 숫자로 시작할 수는 없습니다. 식별자는 코드의 일부이지만 문자열은 데이터이기 때문에, 식별자와 문자열은 다릅니다. JavaScript에서 식별자를 문자열로 변환하는 방법은 없지만, 어떤 경우 문자열을 분석해 식별자로 사용할 수 있습니다. 추가로 덧붙이자면 식별자는 공백을 포함할 수 없다. 또한 길이제한을 따로 하고 있지 않지만, 너무 길어지면 사용하기가 어렵기 때문에 자연스레 짧게 선언한다. let age = 10; function setAge() {} const o = { age: .. 첫번째 프로젝트:hacker news(7) 템플릿 템플릿 코드의 양이 늘어난다고해서 복잡도가 증가하면 안된다. 기존 코드를 확인하면, 마크업을 배열과 문자열을 이용했다. 문자열이 생성되는 시점이 다 다르기 때문에 문자열을 저장해놓을 수 있는 배열을 만들고, 생성되는 시점에 맞춰 배열에 문자열을 넣어두고 마지막에 배열을 합치는 식이다. 이 코드의 문제점은 DOM API보다는 마크업 구조를 확인하기가 쉽지만, 이 또한 마크업 자체가 분산이 되어있기 때문에 내용이 복잡해지면 UI의 구조를 파악하기가 힘들어진다는 것이다. 이를 해결하기 위해 템플릿을 사용한다. 템플릿의 방법은 문자열 안에다 마킹을 해놓고, 마킹한 부분을 다른 데이터로 바꿔치기하는 것과 유사하다. // 템플릿(틀) let template = ` Hacker News {{__news_feed__}.. 첫번째 프로젝트:hacker news(6) 페이징 페이징 처리를 위한 변수 생성 페이징 관련한 정보는 어디에 위치하느냐에 따라 변하는 값이 때문에 상수가 아닌 변수로 관리되어야 하기 때문에 currentPage라는 이름의 변수에 할당한다. currentPage는 글 목록에서 다음페이지 혹은 이전페이지로 이동할 때 뿐만 아니라 글 상세페이지 내에서 목록으로 이동할 때도 사용되는데, 이처럼 다양한 함수에서 함께 사용되는 경우에는 특정 함수 안이 아니라 함수 바깥, 즉 전역으로 빼놓고 활용하게 된다. 만약, 여러 함수 함께 사용되는 공유되는 자원 및 변수가 여러 개인 경우 아래와 같이 묶어서 관리를 해준다. const store = { currentPage: 1 } 페이징 경로 구분 & 라우터 분기 페이징을 추가하기 이전의 코드를 살펴보면, hash 값을 통.. javascript 환경 자바스크립트의 변천사 1995 - 최초로 출시 ( livescript ) - html을 조작하는 목적 1997 - javascript ecma 2009 - ecmascript 5.0 첫번째 프로젝트:hacker news(5) 라우터 이전 코드에서 한 화면에 모든 것이 함께 표시되는 이유는 root라는 id를 가지고 있는 컨테이너에 appendChild를 통해서 기존의 코드를 유지한 채로 새로운 것을 추가 하고 있기 때문이다. 따라서 한 화면에서 하나의 페이지만 보여주기 위해서는 다른 로직이 필요하다. appendChild로 데이터를 넣어주는 코드를 사용하지 않고, root 안에 존재하던 하위의 코드를 다 없애버리기 위해서 root 자체에 innerHTML을 이용한다. const container = document.getElementById('root'); // 기존 코드 container.appendChild('TITLE') // 변경 코드 container.innerHTML(`TITLE`) 목록의 경우 for문을 사용하여 구현하.. 첫번째 프로젝트:hacker-news(1-4) javascript를 이용해서 간단한 웹 어플리케이션을 만들어보는 파트. * 해커뉴스닷컴 - 다양한 나라의 개발자들이 커뮤니케이션하는 사이트. 개발과 관련된 최신 문법이나 이슈들은 주로 해외에서 들어오기 때문에 자주 들여다보는 것이 좋다. * 어플리케이션의 본질 - 입력 데이터를 가지고 어떤 형태의 처리과정을 통해서 출력데이터로 변환하는 것 Ajax 서버와 같이 네트워크 너머에 있는 데이터를 가져오는 도구 const ajax = new XMLHttpRequest(); ajax.open('GET', 'https://abc_1234.com', false); // 동기로 해당 주소에서 데이터를 가져오겠다 ajax.send(); // 데이터를 가져온다 const result = ajax.response; ope.. 이전 1 2 다음
