분류 전체보기 (104) 썸네일형 리스트형 [JavaScript] Spread Operator(전개 연산자) 기본 사용법 Spread의 영단어 뜻을 검색해보면 펼치다라는 뜻이 나옵니다. 자바스크립트에서도 뜻 그대로 어떠한 문자열, 배열, 객체등을 감싸고 있는것을 전개 연산자( ...) 문법을 통하여 감싸고 있는 것을 펼쳐주는거라고 보시면 됩니다. 간단한 예를 보겠습니다.spread_ex01.html 파일을 다음과 같이 만듭니다.123456789101112131415161718!DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Document/title> script> let array = "한놈,두시기,석삼.. [JavaScript] json-server 사용해보기 json-server란?JSON Server는 JSON 파일을 이용해 모의용 RESTful API 서버 및 DB를 구축할 수 있는 도구입니다.백엔드 API 서버나 DB가 준비되지 않은 상황에서도 프로토타입을 개발하거나 테스트때 사용하면 유용합니다. https://www.npmjs.com/package/json-server json-server[](https://github.com/typicode/json-server/actions/workflows/node.js.yml). Latest version: 1.0.0-beta.3, last pu.. [JavaScript] Set(중복을 불허하는 컬렉션) 사용하기 Set은 중복을 허용하지 않는 값을 모아논 컬렉션입니다.셋에는 키가 없는 값이 저장됩니다.Methods new Set(iterable) – iterable object를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사해 set에 넣어줌. set.add(value) – 값을 추가하고 set 자신을 반환. set.delete(value) – 값을 제거함. 호출 시점에 set의 값이 있어서 제거에 성공하면 true, 아니면 false를 반환. set.has(value) – set 내에 값이 존재하면 true, 아니면 false를 반환 set.clear() – set을 비움. set.size – set에 몇 개의 값이 있는지 세어줌.123456789101112131415161718192021!DOCTYPE.. [JavaScript] 모듈(module) import/export 알아보기 애플리케이션을 개발하다 보면 여러가지 기능을 추가하게 되고 계속 새로운 기능을 추가하다 보면 점점 크기가 커지게 됩니다. 소스코드의 크기가 커지며 관리하기가 힘들어지게 됩니다. 개발하는 애플리케이션의을 구성하는 각각의 기능을 가지는 파일을 여러 개로 분리해야 하는 시점이 오게되며 여러개의 파일로 분리하여 애플리케이션을 구성하게 됩니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 모듈은 단지 파일 하나에 불과합니다. 스크립트 하나는 모듈 하나입니다. 모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가.. [React Exam 16] 컴포넌트(Component)를 만들어 사용해 보자 다음과 같은 Application을 만들어 보도록 하겠습니다. 여러개의 파일로 분해하여 컴포넌트를 만들어서 다음을 만들어 보도록 하겠습니다. 1. create-react-app를 이용하여 app002 프로젝트를 만듭니다.1) 프로젝트 작성D:\React> npx create-react-app app0022) 폴더이동D:\React> cd app0023) visual code 실행D:\React\app002> code .4) public 폴더와 src폴더의 모든 파일을 삭제합니다. 2. public 폴더에 다음과 같이 index.html파일을 생성합니다.1234567891011!DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta na.. [React Exam 15] create-react-app로 Hello World출력하기 다음과 같은 Application을 만들어 보도록 하겠습니다. 1. create-react-app를 이용하여 app001 프로젝트를 만듭니다.1) 프로젝트 작성D:\React> npx create-react-app app0012) 폴더이동D:\React> cd app001 3) visual code 실행D:\React\app001> code .4) public 폴더와 src폴더의 모든 파일을 삭제합니다. 2. public 폴더에 다음과 같이 index.html파일을 생성합니다.1234567891011!DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, i.. [React Exam 14] 수동으로 React Application 작성하기 cmd 창에서 작업을 진행 합니다.1. 폴더를 만듭니다.D:\React>md my-app22. 만든 폴더로 이동합니다.D:\React>cd my-app23. npm을 이용하여 프로젝트를 초기화 합니다.(package.json파일을 만듭니다.)D:\React\my-app2>npm init -yWrote to D:\React\my-app2\package.json:{ "name": "my-app2", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "desc.. [Node.js] nvm이란? nvm도 node version manager의 약자로, node.js의 버전관리 도구입니다. node.js는 버전이 빠르게 바뀌어서 동일한 서버 환경 내에서 여러버전을 사용할 때 버전을 전환하면서 사용할 수 있어서 유용하게 사용할 수 있습니다. Window환경에서는 nvm-windows를 설치하고, node.js와 npm을 설치하는 것이 좋습니다. nvm-windows github 레퍼지토리입니다. nvm-windows에 대한 설명이 있으니 확인 할 수 있습니다.https://github.com/coreybutler/nvm-windows#installation--upgrades GitHub - coreybutler/nvm-windows: A node.js version management utilit.. 이전 1 ··· 8 9 10 11 12 13 다음
