단위테스트 단위(Unit) - 특정 조건에서 어떻게 작동해야 할지 정의한 것, 대개 “함수”로 표현 준비(arrange), 실행(act), 단언(assert) 패턴을 따른다. 테스트 주도 개발 적색, 녹색, 리팩터 순환 / 하나의 기능에 Red - Green - Refactor 사이클로 개발한다 테스트하기 쉬운 코드 관심사의 분리 테스트 꾸러미(Test Suite) describe - 테스트 설명, 테스트 구현 함수 테스트 스펙 it - 테스트 설명, 기대식을 가진 테스트 구현 함수 기대식과 매쳐 expect(결과 값).toBe(기대하는 값) 스파이 spyOn - 감시할 객체 , 감시할 메소드 예제01 describe('hello world', ()=> { // 테스트 스윗: 테스트 유닛들의 모음 it(..
전체 글
웹 성능 결정 요소 로딩 성능 - 리소스를 로드 렌더링 성능 - 화면에 보여주는 Lighthouse는 웹 앱의 성능, 품질 및 정확성을 개선하기 위한 오픈 소스 자동화 도구입니다. 측정 결과는 로컬PC에서 검사를 진행하기 떄문에 PC에 환경에 영향을 받아 네트워크 및 CPU (또는 GPU) 등의 환경에 따라 검사 결과가 다를 수가 있습니다. 예시) CPU의 작업량에 여유가 있는 상태 vs CPU가 바쁘게 돌고 있는 상태(여러 프로그램을 띄워둔 상태) 미국에 있는 서버 홈페이지를 한국의 사용자가 검사할 때 vs 미국의 사용자가 검사할 때 웹서버에 트래픽이 많은 상황에서 검사를 했을 때 vs 트래픽이 없는 상황에서 검사를 했을 때 분석결과 First Contexntful Paint (FCP) 최초 콘텐츠풀 ..
Aws Route 53 기능으로 들어갑니다 호스팅 영역을 클릭하여 도메인 이름에 구입한 도메인을 입력하여 호스팅을 생성합니다 .! 생성 후 세부 정보에 들어와 NS 유형 값 / 트래픽 라우팅 대상 내용을 네임서버를 설정해주면 끝 ! www.을 붙여서 url에 접속하려면 cname 레코드를 사용해야합니다. A 레코드 도메인 주소 문자열과 서버의 ip 주소를 매핑시키는 방법. petever.pet 도메인주소와 서버 IP주소가 직접 매핑 된 것. 사용자가 A 레코드에 해당하는 도메인 주소에 대한 해석을 요청하면 DNS 서버는 IP 주소를 리턴해준다. CNAME 레코드 Canonical Name의 약자로 도메인 주소를 또 다른 도메인 주소에 매핑 시키는 형태의 DNS 레코드 타입. www.petever.pet ..
nextjs pm2를 이용하여 배포 해보았습니다 . package.json 설정 "scripts": { "dev": "next", "build": "cross-env ANALYZE=true NODE_ENV=production next build", "start": "cross-env NODE_ENV=production next start -p 80" }, Aws 로그인 Ec2 -> 인스턴스 시작 Ubuntu Server 20.04 LTS (HVM), SSD Volume Type 선택하였습니다. 보안 그룹 구성에서 HTTP, HTTPS 추가 검토 및 시작 버튼 을 클릭 ! 새 키페어를 생성해서 키페어를 다운로드 합니다 . 하나의 이름으로 딱 한번만 다운 받을 수 있으니 (주의) 다운을 받으면 .pem 파일..
타입 스크립트를 처음 사용해보게 되었다. 문서와 도서를 구매하여 공부를 하면서 조금씩 적용해보고 있었다. 그런데 문득 생각이 들었다 왜 사용하고, 이게 어쩌다 만들어진 건지? 위키피디아에 나온다 TypeScript originated from the shortcomings of JavaScript for the development of large-scale applications both at Microsoft and among their external customers. 타입 스크립트(TypeScript)는 마이크로소프트와 외부 고객들 사이에서 대규모 응용 프로그램 개발을 위한 자바스크립트의 단점에서 비롯되었고, 2년간 내부 개발을 걸쳐 2012년 10월에 처음 공개되었다고 한다. 처음에는 성숙한 ..
npx create-next-app 사용하지 않고 설치해보기 ! 1. next.js 설치 및 실행 설치 npm i next react react-dom package.json 에 넥스트를 실행할 script 명령어 추가하기 "scripts": { "dev": "next", "build": "next build", "start": "next start" }, pages 폴더 생성후 index.js 생성 const Home = () => Hello, Next!; export default Home; npm run dev .next 폴더 생성됨 2. TypeScript 설치 root 디렉토리에 tsconfig.json 파일 생성 npm install --save-dev typescript @types/rea..
Storybook이란? Storybook은 UI 개발을 위한 유저 인터페이스 개발 환경 및 컴포넌트를 자유롭게 테스트할 수 있는 도구입니다. 자세한 내용은 공식문서에서 볼 수 있습니다 ~! create-react-app + typescript + storybook 설치하기 npx create-react-app 프로젝트명 --typescript npx -p @storybook/cli sb init --type react_scripts npm install --save-dev @types/storybook__react 기존 프로젝트에 storybook 추가 설치하기 # Add Storybook: npx -p @storybook/cli sb init # react 감지 못할 경우 --type 옵션으로 reac..
첫 회사에서 좋은 사람들을 만나고 도움을 많이 받은 거 같다. 항상 감사하다. 항상 부족하다고 생각하고 공부하면 할수록 자신감도 정말 떨어지고 개발자가 될 수 있겠냐는 의구심을 많이 품고 있었다. 개발자분들께서 도와주시고 피드백해 주시고 같이 공부도 하면서 용기도 생기고 적은 양이라도 꾸준히 공부하려고 노력하려는 습관이 생겼다.! 덕분에 성장하고 프론트엔드로 전향할 수 있었다고 생각한다. 개인적으로 2021년 경험은 굉장히 값졌고, 대체로 만족스럽다. 21년 어떤 경험과 활동을 해왔는지 한 번 되돌아보고자 한다. 근무 회고 1. 협업툴 회사의 퍼블리셔 업무 2020년 1월 ~ 7월 초 까지 협업툴 서비스 유지보수 & 신규기능 퍼블리싱을 해왔지만, 프로젝트로는 홈페이지 리뉴얼, 서비스 리뉴얼을 했다. 처음..