// 일반 문자열 내에서 줄바꿈 등의 공백을 표현하려면 백슬래시(\)로 시작하는 이스케이프 시퀀스를 사용해야 한다. var template = '\n\tHome // // 줄바꿈과 들여쓰기가 적용된 HTML 문자열은 다음과 같이 \n 다음행으로 이동, \t 탭(수평) 이스케이프 시퀀스를 넣어 사용해 작성한다. var template2 = ` Home ` 일반 문자열과 달리 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용되며, 모든 공백도 있는 그대로 적용된다. var first = 'Ung-mo'; var last = 'Lee'; // ES5 문자열 연결 console.log('My name is ' + first + ' ' + last + '.'); // My name is U..

var userId = 1; var userName = 'Lee'; // 객체나 배열 같은 자료구조를 사용하면 여러 개의 값을 하나로 그룹화해서 하나의 값처럼 사용할 수 있다. var user = { id: 1, name: 'Lee' }; var users = [ { id: 1, name: 'Lee' }, { id: 2, name: 'Kim' } ]; console.log(score); // undefined var score; // 1. 변수 선언 score = 80; // 2. 값의 할당 console.log(score); // 80 변수는 하나의 값을 저장하기 위한 수단이다. console.log(score2); // undefined score2 = 80; var score2; console.lo..

브라우저에서 자바스크립트 실행 0 + - 디버깅방법 1. 콘솔창을 열어 에러의 링크를 클릭한다. 2. 자동으로 넘어간 소스패널에 해당 에러가 표시된 줄(왼쪽 번호)을 클릭한다.(브레이크 포인트) 3. 에러를 재현하기 위해 웹페이지의 버튼(에러발생 지점)을 다시 클릭한다. 4. 디버깅모드 활성화(디버깅 모드가 활성화되지 않으면 웹페이지를 새로고침한다.) 5. 소스패널의 브레이크 포인트를 찍어 놓은 줄에 마우스를 가져다 대면 에러 발생원인을 알 수 있다. 내장 터미널 const arr = [1, 2, 3]; arr.forEach(console.log); // 내장 터미널을 열고 'node [파일이름]'을 입력하면 js를 실행시킨 결과를 볼 수 있다. const arr2 = [1, 2, 3]; arr.forE..

프로젝트 폴터 생성 해당 폴더 안으로 들어가서 리액트 설치하기 // 현재 폴더에 리액트 설치 npx create-react-app . npx를 사용하려면 node.js의 설치가 필요함. 📌https://nodejs.org/ko/ 설치한 리액트 개발환경 실행하기 npm start 배포 // build폴더 생성, 파일이 배포를 하기 위해 배포용 파일을 만듦 npm run build // build 폴더 안에 index.html 서버 실행 npx serve -s build

폴더 생성 mkdir 해당 폴더로 이동 cd 초기화 (package.json 생성) npm init -y TypeScript 설치 // 프로젝트에 설치 npm i typescript -D // 전역 설치 npm i -g typescript 타스 컴파일 초기화 (tsconfig.json 생성) // 초기화 npx tsc --init // 해당 폴더 안의 모든 ts파일을 tsconfig.json에 맞춰 컴파일 npx tsc

다른 사람의 repository를 로컬로 클론하려고 했는데 Repository not found.라는 에러 문구가 나타나며 clone이 되지 않았다. 이유를 찾아보니 Private repository를 clone하려 할 때 나타나는 에러 문구라고 한다. 1. 화면 오른쪽 상단 내 프로필을 클릭한 후 'Settings'를 클릭 2. 왼쪽 메뉴 중 맨 아래 'Developer settings' 클릭 3. 왼쪽 메뉴 중 맨 아래 'Tokens(classic)' 클릭 후, 'Generate new token'를 클릭한 후 토큰을 발급받는다. 4. 후에 터미널에 아래와 같이 입력하면 정상적으로 git clone이 된다. $git clone https://:@github.com/....

원래 구현해야 할 화면 내가 구현한 화면 처음에 작성한 코드 검색한 영화 중 Ratings의 목록이 1~3가지로 다양했다. 때문에 API에 저장된 목록의 개수를 이용해 반복문을 돌리고 그 개수대로 반복문이 다 돌면 그 개수대로 화면에 출력되도록 구현 하는 것이 목표였다. 하지만 반복문 안에서 return을 하여 함수가 한번 밖에 돌지 않고 함수가 끝나버려 화면에는 위처럼 한가지 목록만 출력되는 것이었다. 해결 반복문 밖에서 rating의 빈 문자열로 초기화 해 준 다음, 반복문 안에서 ratings에 출력할 코드들을 작성하고 반복문이 돌 때마다 Ratings의 개수만큼 하나하나 더해서 rating에 저장한 다음 반복문 밖에서 return을 하여 반복문이 모두 돌고 마지막에 반복문에 저장된 rating값을..

에러 1. header안에 main-menu를 클릭하면 navigation이 활성화됩니다. 2. navigation이 활성화 되면 body부분의 scroll-y를 숨깁니다. 2. 스크롤을 내릴땐 header가 숨겨지고 스크롤을 올리면 header가 화면밖에서 아래로 내려옵니다. 3. ⚠️에러 발생: 스크롤을 충분히 내린 이후 스크롤을 살짝 올려 header가 활성화되면 .main-menu안에 li를 누르면 스크롤업할땐 top: 0;에 고정되어 있어야 할 header가 사라집니다. 4. 테스트 해본 결과: 메뉴를 눌러서 overflow:hidden 옵션이 body 에 들어가면, 스크롤이 1px~4.5px 정도 강제로 이동 하면서 header 를 숨기는 스크롤 이벤트가 작동하는 게 원인이었습니다. 5. re..

▶ 주로 중 / 대형 프로젝트에 사용 package.json { "name": "webpack-template-basic", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack-dev-server --mode development", "build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { // (npm i -D copy-webpack-plugin) "copy-webpack-plugin": "^11.0.0", // (npm i -D html-webpack-plugi..

▶ 주로 소 / 중형 프로젝트에 사용 package.json { "name": "parcel-template-basic", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { // 지원할 브라우저를 명시하면 autoprefixer로 활용함. (npm i -D autoprefixer) "autoprefixer": "^10.4.12", "parcel-bundler": "^1.12.5", // s..