Node.js (16) 썸네일형 리스트형 패키지 잠금 package.json에 이미 모든 의존성에 대한 데이터가 있는데 왜 package-lock.json이 추가로 필요할까? 이유는 package.json에 버전을 설정할 때 특정 버전이 아니라 버전 범위를 설정하면 패키지를 설치하는 시점에 따라 다른 버전이 설치되기 때문이다. npm에 등록된 패키지들은 엄격하게 관리가 되고 있지 않는 오픈소스가 대부분이다. 하위 호환에 대한 검증을 npm에서도 진행하지 않기 때문에 패치 버전으로 변경되었는데도 동작하지 않는 경우가 생각보다 굉장히 많다. 설치 시 올바르게 동작하는 버전을 고정하면 된다. package-lock.json에 패키지의 의존성 트리 정보를 저장해두고 설치 시 package.json이 아니라 package-lock.json을 확인하고 설치한다. 이를.. npx npm은 명령어를 지정해 실행하는 스크립트 기능도 제공한다. 스크립트 기능은 앱시작, 중지, 빌드, 배포, 테스트 등의 명령어를 터미널에 매번 입력하지 않고 package.json에 정의함으로써 조금 더 간편하게 명령어를 실행하는 기능이다. 보통 스크립트는 node_modules디렉터리 아래에 설치된 패키지에 있기 때문에 경로를 지정해야 하지만, npx를 이용하면 경로를 지정하지 않고 간편하게 사용할 수 있다. 1. npm 스크립트 파일을 정의하기 Node.js 프로젝트의 package.json에는 scripts 항목이 있다. scripts에 등록된 항목들은 npm run 명령으로 실행할 수 있다. npx 테스트용 package.json { "name": "sample-package", "version".. npm 1. npm(node package manage) 자바스크립트용 패키지 매니저 유저가 만든 패키지를 등록하는 저장소 CLI(Command Line Interface) Node.js를 설치할 때 함께 설치된다. 패키지 매니저 : 프로젝트에 필요한 의존성 패키지를 관리하는 프로그램 의존성 패키지 : 해당 프로젝트를 실행하는 데 꼭 필요한 라이브러리와 모듈들(npm은 이런 의존성 패키지를 잘 관리할 목적으로 만들어졌다.) 2. 패키지와 모듈 2-1)패키지와 모듈 Node.js에서 패키지는 package.json으로 정의한 파일 또는 데릭터리를 의미한다. 패키지에는 package.json이 꼭 포함된다. Node.js에서 모듈은 [node_modules]디렉터리 아래에 있는 파일 또는 디렉터리를 의미한다. [n.. 익스프레스 프레임워크 사용하 1. 일반적으로 웹서버가 제공하는 기능 항목 설명 라우팅 URL 요청을 함수와 매핑시켜주는 기능 정적 파일 서비스 CSS, JS,이미지 등의 정적인 파일을 다루는 기능 템플릿 엔진 동적인 웹페이지를 HTML과 인스턴스를 사용해 생성하는 기능 요청(request) 데이터 다루기 HTTP요청을 추상화해 편리하게 다룰 수 있게 하는 기능 응답(response) 데이터 다루기 HTTP 응답을 커스터마이징할 수 있는 기능 파일 내려받기, 이미지 출력 등 파일 업로드 HTTP로 전송된 파일을 읽고 다룰 수 있는 기능 쿠키 및 세션 지원 클라이언트 측 혹은 서버 측의 메모리에 일정기간 동안 저장해야 하는 데이터를 다루는 기능 리다이렉트 서버의 응답 시 다른 페이지로 전달시키는 기능 에러 페이지 요청이 잘못되었거나, .. 간단한 서버 구현하기 서버 실행시키는 방법 터미널에 node 파일명.js => 서버실행 => 브라우저로 localhost:3000 접속 1. OK를 반환하는 서버 -모든 접속에 "OK"로 답하는 서버 만들기 const http = require("http"); const server = http.createServer((req, res) => { res.setHeader("Content-Type", "text/html"); res.end("OK"); }); server.listen("3000", () => { console.log("OK 서버 시작!")}) 🙋♀️일반적인 웹서버는 URL경로에 따라 다른 응답을 주기때문에 URL의 경로를 읽어서 다른 응답을 주는 코드를 작성해보자. 2. 라우터 만들기 -라우팅 : URL경로에.. Formdata 1. FormData객체를 이용하는 경우 - Axios는 HTML form 태그에 담긴 데이터(이미지, 동영상 파일 등)를 Ajax요청으로 보내는 경우에 이용한다. 2. FormData 메서드 1) append : 데이터 하나씩 추가 2) has : 데이터 존재여부 확인 3) get : 데이터 조회 4) getAll : 데이터 모두 조회 5) delete : 데이터 삭제 6) set : 데이터 수정 const formData = new FormData() formData.append('name', 'zerocho') formData.has('item') formData.get('item') formData.getAll('item') formData.delete('test') formData.set('it.. 브라우저-서버의 요청-응답 1. 서버로 요청을 보내는 코드 - 라이브러리가 없을 때 : 브라우저가 지원하는 XMLHttpRequest 객체를 이용한다. - AJAX요청이 있을 때 : Axios 라이브러리를 사용한다.(HTML 아래에 스크립트를 추가한다.) => 편리함 * Ajax (Asynchronous JavaScript and XML) : 자바스크립트를 이용해서 비동기식으로 XML을 이용하여 서버와 통신하는 방식 * 최근에는 XML 보다 JSON을 더 많이 사용한다. 2. 요청과 응답 - 브라우저는 Ajax요청을 담당하는 XMLHttpRequest라는 객체를 구현하고 있다. - 요청 : 브라우저는 서버에 정보를 요청한다. - 응답 : 서버는 응답으로 데이터를 전달한다.(XML, JSON) 브라우저는 콘텐츠를 처리하여 페이지에 .. 널병합 연산자 / 옵셔널 체이닝 1. 널병합 연산자 - || 연산자 대용으로 사용한다. - || 연산자 : 앞의 값에 falsy값이 있다면 뒷부분의 값을 쓴다. - ??연산자 : null과 undefined를 제외하고 0등의 falsy값을 쓸 수 있다. * falsy 값 = 0, " ", false, NaN, null, undefined const a = 0 //a는 0 또는 falsy 값이라고 한다. const b = a||3 //앞의 값에 falsy 값이 있으면 앞부분이 아니라 뒷부분으로 넘어간다. console.log(b) //3 (falsy 값이 없다면 앞부분에 머물러 있는다.) //0등의 falsy 값을 쓰고 싶을 때는 null 병합 연산자를 사용해야 한다. let count = 0 count ?? '123' //0 //nul.. 이전 1 2 다음
