전체 글 (45) 썸네일형 리스트형 식별자 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__}.. [공유]프론트엔드 추천 자료 https://velog.io/@ansrjsdn/프론트엔드-추천-자료-모음 첫번째 프로젝트: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.. node.js & npm 웹앱 어플리케이션에서 가장 중요한 소프트웨어를 꼽으라면 node.js라고 볼 수 있다. NodeJS 2007-2008년 구글에서 크롬 브라우저가 만들어지고 난 후에, 자바스크립트를 빠르게 실행시킬 수 있는 'V8'이라는 엔진을 만들었다. 이후 라이언 달이 'V8'을 이용하여 자바스크립트를 브라우저가 아닌 일반 운영체제에서 돌아가는 다른 소프트웨어 실행시킬 수 있는 프로그램을 만들 수 있을 것이라는 아이디어에서 착안하여 PC나 서버에서 돌아가는 javascript 런타임 환경을 만들게 되었다. 이것이 바로 NodeJS 이다. 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 논블로킹(Non-blocking) I/O와 단일 스레드.. 이전 1 2 3 4 5 6 다음
