오늘은 너무 예전에 자바스크립트를 공부하고 해 본 적이 없어 Expo를 통해 앱을 만들기 전 자바스크립트에 대해 공부해보려고 합니다. 자바스크립트에 대해 공부하기 위해 먼저 npm 프로젝트를 생성하고 실행해 실제로 코딩한 자바스크립트가 어떻게 돌아가는지 확인해 보고 첫 번째로 배열 데이터에 대해 공부해보려고 합니다.
npm 프로젝트 초기 세팅하고 실행하기
npm init 명령어를 통해 프로젝트를 생성
해당 명령어를 넣으면 프로젝트의 기본 구성을 설정할 수 있는 대화형 프롬프트가 시작됩니다.
첫번째로 package name(프로젝트 이름)을 물어봅니다. 여기서 별도의 프로젝트 이름을 적어도 되고 엔터키를 통해 다음으로 넘어가면 기존 폴더 이름 그대로 프로젝트가 생성됩니다.
두번째로는 프로젝트의 버전을 물어보며, 괄호안에 1,0,0이 기입되어 있고 별다른 입력 없이 엔터키로 넘어가면 1.0.0이 버전이 됩니다.다음으로 패키지의 설명을 입력하는 description, 패키지의 진입점 파일을 지정해주는 entry point, 패키지를 테스트하는 데 사용되는 명령어 test command, 패키지의 소스 코드가 호스팅되는 Git저장소의 URL을 입력하는 git repository, 패키지를 설명하는 데 사용되는 키워드들을 입력하는 keywords, 패키지 작성자의 이름을 입력하는 author, 패키지 라이선스를 선택하는 license를 물어봅니다.
마지막으로 최종적으로 생성할 것인지를 물으며 엔터키를 마지막으로 누르면 자동으로 패키지가 생성되는 것을 볼 수 있습니다.
그렇게 생성하고 나면 package.json 파일이 생성되어 있는 것을 볼 수 있고 해당 파일에는 지금까지 생성하기 위해 물어봤던 내용들이 적혀 있습니다.
모든 절차를 완료하고 나면 npm 프로젝트는 기본적으로 package라는 이름의 json파일을 기준으로 해서 시작됩니다.
이렇게 모든 값을 입력해 주는 방식도 있지만 테스트할 때나 디폴트로 세팅된 값으로 생성하는 경우가 많기 때문에 매번 이렇게 프로젝트의 기본 구성을 설정하지 않고 기본 내용으로 생성할 수 있는 명령어가 “npm init -y” 입니다.
이렇게 입력하면 위의 질문들을 모두 생략하고 기본적인 package.json 파일을 생성합니다.
다음으로 parcel 패키지를 설치합니다. npm install parcel –save-dev
parcel은 여러 가지 패키지들을 실제 웹사이트에 올라갈 수 있는 구조로 묶어주는 역할을 하며, 해당 패키지를 통해 서버를 오픈할 때 사용할 것입니다. 따라서 parcel이라는 패키지는 bundler라고 부르기도 합니다. 그러나 parcel이라는 패키지는 웹사이트에서 직접적으로 동작하는 패키지가 아니기 때문에 단순 install로 설치하는 것이 아니라 –save-dev 플래그를 붙여 설치해 줍니다. 이렇게 패키지를 설치할 때는 개발용으로만 사용할 것인 것 아니면 실제 브라우저에 동작할 용도인지를 구분해서 설치해야 합니다. 여기서 --save-dev 는 -D로 축약해서 사용할 수 있습니다.
이렇게 설치가 끝나고 나면 package.json에서 devDependencies라는 옵션에 parcel이라는 패키지가 설치된 것을 확인할 수 있습니다. 여기서 Dependencies는 의존성이라는 개념인데 외부의 패키지에 의존해서 동작을 하고 있다는 의미입니다. 따라서 그냥 dependencies는 일반 의존성으로 브라우저에 직접적으로 동작할 패키지들을 나타내고 devdependencies는 개발용 의존성 패키지로 개발할 때만 사용하는 패키지를 나타냅니다.
또한 package.json외 에도 package-lock.json 파일이 있는데 이 파일은 설치된 패키지와 그 패키지들이 추가적으로 의존하고 있는 다른 패키지들의 관계 정보를 갖고 있는 파일입니다.
따라서, package.json파일과 package-lock.json 파일은 프로젝트 관련된 내용과 패키지 정보가 들어 있기 때문에 프로젝트 파일에서 중요하게 보관돼야 하며, 만약 패키지들이 설치된 node_modules 폴더는 삭제되어도 이 두 가지 파일이 있으면 복구시킬 수 있습니다. 이는 node_modules 폴더를 삭제 후 npm install 명령어를 입력하면 전체 패키지를 설치할 수 있습니다.
package.json파일에서 scripts 부분을 아래와 같이 변경해 줍니다.
"start": "parcel ./index.html"
이렇게 package.json 파일에서 변경해 주는 이유는 parcel 이라는 패키지를 현재 프로젝트에서만 사용하기 위해 설치한 것이기 때문에 터미널에서 직접적으로 동작시킬 수 없습니다. 따라서 그냥 터미널에 ./index.html을 입력하면 parcel 명령을 찾을 수 없다는 메시지가 나오게 됩니다. 따라서 패키지에서만 동작하는 명령을 스크립트에 등록해 사용할 수 있습니다. start로 기입을 해줬지만 해당 명령어는 원하는 아무것이나 입력해 줘도 동작합니다. 참고로 해당 명령어는 개발 서버를 오픈할 때 사용하는 명령어이며, 실제 제품화해서 서버로 배포하는 경우에는 build 명령어를 추가해 사용해줘야 합니다.
이제 npm 프로젝트를 실행하기 위해 프로젝트안에 index.html 파일을 생성해 줍니다.
그 후 느낌표(!) 입력 후 엔터 기를 누르면 기본 html 코드가 자동완성으로 생성됩니다.
그 다음 main.js파일을 생성해 줍니다.
그리고 main.js가 잘 실행되고 있는지를 확인하기 위해 간단하게 출력할 수 있는 코드를 작성해 줍니다.
console.log("Hellow world")
다음으로 아래 명령어를 통해 개발 서버를 실행시켜 줍니다.
명령어: npm run start
그렇게 실행하고 나면, 아래와 같이 빌드가 완료되고 서버 주소가 나오게 됩니다. 해당 주소를 우클릭해 링크로 이동해도 되고, 주소를 크롬에서 입력해 접속할 수 있습니다. 그렇게 브라우저로 이동한 후 콘솔 부분을 확인하면 Hellow world가 찍혀 있는 것을 볼 수 있습니다.
배열(Array) 데이터 공부하기
생성자 함수를 이용해 생성하기
우선 animal이라는 변수에 new 키워드를 통해 배열을 생성해 줍니다. 이렇게 호출하는 함수를 생성자 함수 또는 자바스크립트 클래스라고 부릅니다. 그 다음 소괄호 안에 배열로 만들어줄 데이터를 “,”로 구분하여 입력해 줍니다.
이렇게 생성된 데이터를 확인해 보기 위해 console.log를 통해 출력해 줍니다
그리고 콘솔창을 확인해보면 0번째에 dog가 1번째에 cat이 2번째에 pig가 들어가 있는 것을 확인할 수 있습니다. 이를 보면 배열은 제로 베이스드 넘버링 즉, 0부터 번호가 매겨져 있다는 것을 알 수 있습니다. 또한 length라는 속성으로 배열 안에 몇 개의 데이터가 있는지 알 수 있다는 것도 확인해 볼 수 있습니다.
대괄호 이용해 생성하기
위에서 생성자 함수를 통해 만들 수 있지만 보다 간단하게 대괄호 안에 데이터를 입력하는 것만으로도 배열 데이터를 만들 수 있습니다. 이런 것을 리터럴 방식으로 생성했다고 표현합니다.
const animal2 = ['dog','cat','pig']
console.log(anima2)
특정 데이터 조회하기
배열의 특정 데이터 조회는 대괄호를 통해 조회하고자 하는 데이터가 있는 숫자를 입력하면 됩니다. 이렇게 특정 숫자를 입력해 조회하는 것을 인덱싱 한다고 표현합니다.
console.log(animal2[2])
배열의 크기, 길이 확인하기
위에서 배열을 그대로 콘솔에 찍어봤을 때 length라는 속성이 있고 그 속성을 통해 해당 배열에 몇 개의 데이터가 있는지 알 수 있다고 말씀드렸습니다. 이렇게 length 속성도 “.”을 통해 조회할 수 있습니다.
console.log(animal.length)
마무리
오늘은 앞으로 자바스크립트를 공부할 때 사용할 수 있는 프로젝트를 생성하고 기본 세팅하는 방법 그리고 실행해 직접 확인하는 방법을 알아보았습니다. 또한 간단하게 자바스크립트에서 배열데이터에 대해서도 알아보았습니다. 앞으로는 오늘 배워본 프로젝트 생성 방법을 통해 직접 프로젝트를 만들어 자바스크립트 코드를 작성해 보고 결과물을 눈으로 확인하면서 공부해보려고 합니다.