IT/JAVASCRIPT (5) 썸네일형 리스트형 [Nuxt] Jest 설정 및 사용해 보기 Nuxt에서 Jest 설정 및 사용해 보기 프로젝트를 진행하면서 TDD(테스트 주도 개발) 많이들 사용하실 겁니다. 테스트 코드를 짜는게 꼭 절대적으로 좋다라고는 말할수는 없지만 단위테스트 정도는 무리가지 않으니 많이하고 있는걸로 압니다. 오늘은 Nuxt3로 프로젝트를 하면서 사용한 테스트 프레임워크 Jest를 설정하고 사용해 보는법을 정리해 보고자 합니다. Jest 설치 nuxt프로젝트를 cli로 만들때 단위테스트를 선택하는 부분이 있는데 선택하면 자동으로 설치해줍니다. 저는 프로젝트 생성시에 선택하지 않아서 수동으로 설치해 줬습니다. Nuxt프로젝트 생성 수동으로 선택해서 프로젝트 생성시 npm init nuxt-app 기본설정으로 프로젝트 생성시 npx nuxi init Dependency inst.. [Nuxt] 상태관리 라이브러리 Pinia 사용 및 설정하기 이전에 vue로 프론트 작업할때는 vuex 상태관리 라이르러리를 사용했었는데 nuxt로 작업하면서 pinia를 사용해 보았습니다. vue 공식사이트에서는 pinia를 사용하도록 권장하고 있는것 같습니다. 오늘은 nuxt에서 pinia를 사용해보면서 경험한 부분을 환경설정 하는 것처럼 정리해보고자 합니다. 개인 환경에 따라서 다를 수 있습니다. 저는 nuxt3, mac환경입니다. 여기서는 제 프로젝트 기준으로 정리를 할 것이니 참고 부탁드립니다. 프로젝트 환경 Node: 16.18.1 Nuxt: 3.0.0 Node PM: npm 8.19.0 Pinia 설치 pinia, @pinia/nuxt, pinia-plugin-persistedstate 설치해 줍니다. pinia-plugin-persistedstate.. 우분투 (ubuntu 22.0.4) Node 설치 NVM Install curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash # Zsh 사용자 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | zsh 설치가 완료되면 아래 명령을 입력해 NVM을 활성화 (아니면 터미널 재실행) source ~/.bashrc # Zsh 사용자 source ~/.zshrc 잘 설치가 되었는지 버전을 확인 nvm -v NVM Node.js Install 설치는 nvm install 으로 합니다. 아래 명령어 옆에 주석으로 표시합니다. nvm install node # 최신 버전 설치 nvm install .. [Nuxt] Nuxt3 프로젝트 Docker를 이용한 배포하기 Nuxt3 프로젝트 Docker를 이용한 배포하기 오늘은 공부삼아 시작한 Nuxt3 프로젝트를 Docker를 이용해서 개인용 서버에 배포하는 것을 정리 해보고자 한다. Dockerfile 파일 만들기 # Dockerfile FROM nginx COPY .output /usr/share/nginx/html/nuxt-toy-project COPY nginx.conf /etc/nginx/nginx.conf Nginx.conf 파일 만들기 user nginx; worker_processes auto; error_log /var/log/nginx/error.log warn; pid /var/run/nginx.pid events { worker_connections 1024; } http { .. JAVASCRIPT에서의 THIS JAVASCRIPT에서 THIS는 좀 다른 부분이 있어서 정리해 두었다.. Javascript의 this가 해당함수 호출 패턴에 따라 어떤 객체를 참조(바인딩)하는지에 대한 규칙을 요약하면 다음과 같다 1.기본적으로 this는 전역 객체를 참조한다. 2.메소드 내부의 this는 해당 메소드를 호출한 부모객체를 참조한다. 3.생성자 함수 코드 내부의 this는 새로 생성된 객체를 참조한다. 4.call()과 apply() 메소드로 함수를 호출할 때, 함수의 this는 첫 번째 인자로 넘겨받은 객체를 참조한다. 5.프로토타입 객체 메소드 내부의 this도 해당 메소드를 호출한 부모 객체를 참조한다. 6.Javascript의 this 키워드는 접근제어자 public역활을 한다. 4.apply()과 call().. 이전 1 다음
