Next.js

조금씩 덩치가 커져가는 프론트 엔드 환경에서 이제 테스트 코드는 선택이 아닌 필수가 되어 가고 있습니다. 그렇다 보니 end to end 테스트 unit 테스트 같은 많은 테스트 가 쏟아지고 있는데요 오늘 설정 할 환경 설정은 unit test 입니다. Jest + Enzyme 조합을 사용 해서 테스트를 해볼 예정입니다. Jest + React Test Lib 을 더 많이 사용 하시는 것 같지만 저는 공부 목적으로 Enzyme 을 선택 하였습니다. Enzyme 과 rtl 의 차이점이 궁금하신 분은 아래 블로그를 참고해주세요 https://medium.com/xebia-engineering/react-testing-library-rtl-vs-enzyme-14b12b4136ed React-Testing-Li..

저번시간에 이어서 이번시간에는 각종 page를 만드는것부터 시작하겠습니다. 저는 회원가입 페이지와 프로필 페이지를 만들었습니다. -signup.js const SignUp = () => { return 회원가입 } export default SignUp; -porfile.js const Profile = () => { return 내 프로필; }; export default Profile; $npm run dev 를 하시면 localhost:3000 에서는 index.js 가 렌더링 되고 localhost:3000/profile 에서는 profile.js 가 렌더링 됩니다. pages 폴더 안에서 하위 폴더도 생성이 가능합니다 about 이라는 폴더를 만들고 제이름으로된 js 파일을 만들겠습니다. -pa..

해당 프로젝트를 만들 폴더를 만들어 주신 다음 해당폴더로 이동 $ npm init -y 해당 package.json 파일을 생성합니다. 이 프로젝트에서는 next.js 를 사용할 것이고 next.js 는 9버전을 사용합니다. next.js 는 react를 사용한 프레임 워크 입니다. $ npm i next@9 "scripts": { "dev": "next" }, next를 설치하신 다음 package.json 에서 dev를 추가합니다. pages 라는 폴더를 만들고 index.js 파일을 만들어줍니다. const Home = () => { return ( Hello next ) } export default Home; index.js 파일 안의 내용을 다음과 같이 작성합니다. 보통 react에서 .jsx..