본문 바로가기

전체 글

 (58)
순서가 있는 목록, 순서가 없는 목록 만들기 순서가 없는 목록 HTML 삽입 미리보기할 수 없는 소스 위에서 보이는 형태로 순서가 없는 목록을 만들기 위해서는 이라는 태그를 이용해야 한다. ul은 unordered list 라는 뜻으로 목록이 출력되지만 순서가 출력되지 않는 목록을 의미한다. beer 김치 meat milk 태그 안에 목록으로 출력되고자 하는 내용을 넣는다. 그리고 그 내용을 각각 태그로 감싸주면 된다. 태그로 감싸지 않는 경우 아래와 같이 표현된다. HTML 삽입 미리보기할 수 없는 소스 태그로 감쌌지만 목록의 형태로 만들어지지 않는 모습을 확인할 수 있다. 순서가 있는 목록 HTML 삽입 미리보기할 수 없는 소스 위에서 처럼 숫자로 순서가 표시된 목록을 만들기 위해서는 태그를 이용한다. ol이란 ordered list의 약자이다..
vscode 익스텐션 vscode 테마 변경 vscode의 테마를 변경하는 데 사용할 수 있는 익스텐션은 Community Material Theme이다. 설치 후 "색 테마 설정" 혹은 "Set Color Theme" 버튼을 클릭하면 색을 선택할 수 있는 창이 나온다. 선택을 할 때마다 테마가 바뀌는 것을 확인할 수 있다. Icon 이미지 변경 파일에 형태에 따라서 아이콘 모양이 나타나는 익스텐션이다. 위의 예시에 나타나는 아이콘 이미지 외에도 굉장히 다양한 파일들 및 폴더에 대해 지원이 되고 있어 파일 아이콘만으로 구분하기가 쉽다. 코드 자동 정렬 Prettier는 코드를 저장할 때 해당 코드를 자동적으로 정렬해주는 익스텐션이다. 여러 사람이 협업을 할 경우 코드의 정렬이 달라 알아보기 힘든 경우도 있고, 실수로 html..
웹 사이트는 텍스트일 뿐이다. 이 글은 노마드코더의 코코아톡 클론코딩 강의를 들으며 작성한 내용입니다. 웹 사이트는 텍스트로 구성된 문서이다. 보통 우리가 웹 사이트를 만든다고 하면 굉장한 무언가를 생각하기 쉽다. 하지만 노마드 코더는 말한다. 웹 사이트는 그저 텍스트로 구성된 문서일 뿐이라고. 그래서 그 문서를 출력해서 보게 되면 그저 알아보기 어려운 문서일 뿐이라고. 하지만 그 문서를 받아들여 해석하고 우리가 봐왔던 웹 사이트의 모습으로 만들어주는 것이 바로 웹 브라우저이다. 필요한 텍스트는 단 3종류 뿐 그럼 웹 사이트를 구성하는 텍스트는 어떻게 구성이 되어 있을까? 지금부터 텍스트는 언어로 표현을 한다. 우선 가장 중요한 첫 번째 언어는 HTML이다. 이 언어는 배우는 데 30분도 안걸린다 생각될 정도로 쉽다. 솔직히 언어라고..
모듈 번들러 webpack 번들링과 모듈 번들러 webpack 개발을 할 때 동일한 코드를 계속해서 작성해야 하는 경우가 있다. 이럴 경우 같은 일을 반복적으로 하는 것을 줄이기 위해, 코드의 복잡성을 줄이기 위해 해당 코드를 따로 분리를 한다. 이렇게 따로 분리된 파일을 모듈이라고 한다. 코드가 많아질수록 이러한 모듈 역시 그 수가 늘어나게 된다. 많은 수의 모듈로 이루어진 상태로 해당 파일들이 서버를 통해 사용자에게 제공되기 시작하면 사용자는 한 번 페이지를 요청할 때 각 파일들을 모두 받아와야만 하고 그렇게 되면 오랜 시간이 걸릴 수밖에 없다. 때문에 개발 시 여러 개의 모듈로 자바스크립트 파일을 분리해 둔 상태에서 운영계로 배포를 할 때에는 해당 모듈들을 하나로 묶어서 서버를 통해 사용자에게 서비스되도록 한다. 이렇게 여러..
npm 명령어 모음과 nodemon package.json 생성하기 // 기본 방법 % npm init // default 속성을 그대로 사용 % npm init -y package.json 파일은 필수적이다. 이 파일의 경우 직접 만드는 방법도 있지만 npm init 명령어를 통해 손쉽게 만들 수 있다. npm init 명령어를 사용할 경우 프로젝트 이름, 버전 등의 다양한 정보들을 입력하여 자동적으로 package.json 파일이 만들어진다. 여기서 더 간단하게 default로 주어지는 속성값들을 그대로 사용해도 상관없는 경우 npm init -y 명령어를 사용하면 된다. 이 경우 기본적으로 제공되는 default 값으로 package.json 파일을 구성할 수 있게 된다. 라이브러리 다운로드하기 // 명령어를 사용해 라이브러리 다운로..
NPM의 정의 및 구조 설명 NPM 은 Node Package Manager의 약자이다. 자바스크립트로 무언가를 개발할 때 필요한 모듈들을 쉽게 다운로드할 수 있게 해주는 도구이다. 버전 확인 node js를 설치하면 npm이 같이 설치된다. node js의 경우 https://nodejs.org/ko/download 에서 설치 가능하다. 설치 후 설치된 버전을 확인하고 싶은 경우 다음과 같은 구문을 이용한다 // 노드js 버전 확인 % node -v // npm 버전 확인 % npm -v 위의 두 구문을 터미널을 통해 확인할 수 있다. npm 라이브러리 공유 사이트 npm을 통해 다운로드할 수 있는 라이브러리들을 공유해 둔 사이트가 있다. 바로 https://www.npmjs.com/이다. 위에서 npm install을 통해 다운..
자바스크립트 모듈 시스템 자바스크립트의 내용이 많아지면서 자바스크립트 파일을 여러 개로 분리할 필요성이 생기게 되었다. 분리된 각각의 파일을 모듈이라고 부른다. 이렇게 분리된 모듈을 어디서든지 불러올 수 있게 하는 방법을 모듈 시스템이라고 한다. 기존에는 태그를 이용해서 스크립트 파일을 불러왔다. 이 경우 전역 스코프를 공유하기 때문에 문제가 생길 수 있다. // a.js var number = 10; console.log('a.js > number :', number); // b.js var number = 20; console.log('b.js > number :', number); // index.html a.js 파일에 number라는 변수를 선언하고 10이라는 값으로 초기화한 후 b.js 파일에서 다시 number 변수..
자바스크립트의 Array API map() 배열 내에 있는 모든 요소들에 대해 함수를 호출한 후의 결과를 모아 새로운 배열 형태로 반환한다. const numbers = [1, 2, 3, 4, 5, 6, 7]; const result = numbers.map(function(number) { return number * 2; }); console.log(result); // 화살표함수로 변경 const result = numbers.map((number) => { return number * 2; }); // 단축형태 const result = numbers.map((number) => number * 2); numbers라는 배열에 1부터 7까지의 숫자를 담고, 이 배열을 map()을 통해 콜백함수에서 2배로 만들었다. 그리고 결과를..

티스토리툴바