[NextJS] Cypress 테스트 코드 작성 해보기 매번 오류를 픽스할 때마다 느끼는 것이 있습니다. 바로.... 이 코드를 짠게 내가 맞나?? 왜 이렇게 했더라? 내가 작성했음에도 불구하고 30분은 다시 뜯어봐야 코드의 목적을 알 수 있는 경우들이 많았습니다. 그래서 오늘은 Cypress를 이용한 테스트 코드 작성법을 알아보려고 합니다! 코드 작성 이전에 테스트 코드에 대해 조금 알아보겠습니다. 테스트코드 작성의 목적 코드가 올바르게 작동하는가에 대한 확인 다양한 조건 및 입력에서 컴포넌트가 제대로 (예상대로) 작동하는지 확인 수월한 리팩토링을 위함 - 프로젝트가 성장하면 리팩토링이 필요하기 마련 → 테스트코드로 최소한의 기준, 안전망이 만들어짐 테스트코드 작성의 장점 작성한 코드가 기획 의도를 제대로 반영하였는지 확인 가능 기획자와의 소통 도구로 사용.. [NextJS] CSR, SSR 그리고 SSG의 차이 CSR, SSR (feat. SSG) CSR, SSR이 무엇인지 알기전에 먼저… 브라우저 렌더링(Browser Rendering)?! 브라우저 렌더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업을 말합니다. 즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 화면에 그려주는 원리입니다. 예를 들어, 크롬에 접속해 주소창에 www.google.com을 입력한다면 브라우저는 구글 서버로부터 구글 웹사이트에 대한 정보를 받아 브라우저 화면에 구글 홈페이지를 그려주게 되는 것입니다. 그리고 이러한 브라우저 렌더링은 크게 CSR(Client Side Rendering) - 클라이언트 사이드 렌더링 SSR(S.. [리액트] 공부일지-3 React-router-dom 오늘은 리액트 라우터 돔에 대해서 공부를 했다. 현재 버전은 v6까지 나왔으며, v5와 비교했을 때 바뀐 점이 꽤나 있다. 코딩애플 강의에서는 v5를 사용하고 있어서 혼란이 있었다. index.js import 어쩌구 많은곳; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( document.getElementById('root') ); app.js import 많은 곳; import { Link, Route, Switch } from 'react-router-dom'; function App(){ return ( HTML 잔뜩있는 곳 메인페이지 코드 상세페이지 코드 ) } 이 코드는 코딩애플에서 쓴 re.. [리액트] 공부 일지-2 리액트로 블로그 글 발행해보기 원래 이런상태의 페이지에서 input과 button을 추가하고 input값을 입력받고 버튼을 누르면 저기 '남자 코트 추천'글 위에 새로운 글이 발행되게 기능을 구현해볼 것이다. { 글제목.map(function(글, i){ return ( {누른제목변경(i)}}>{글}{따봉변경(따봉+1)}}>👍{따봉} 12월 30일 발행 ) }) } 현재 저 화면을 나타내는 코드 중 일부인데, 이렇게 map반복문을 통해서 저 글들을 출력하고 있다. 저 key={1}와 onClick={()=>{누른제목변경(i)}이 나타내는 것은 위의 화면에서 [열고닫기]버튼을 클릭하면 모달창이 나오는데, 저 글제목에 맞게 모달창이 변경되는 이벤트이다. 위의 화면처럼 나오게 된다. 모달에 대한 코드는 밑에 .. [리액트] 공부 일지-1 useState 사용방법 let [값이름, 값변경함수이름] = useState(값) state에는 Array, Object 자료형 모두 넣어도 됨 변수가 변경될 때 자동으로 html을 재렌더링하게 만들고 싶으면 state를 사용해야함 리액트에서 반복문 사용하는 법 var 어레이 = [2,3,4]; var newArray = 어레이.map(function(a){ return a * 10 }); map함수를 사용하여 반복문 사용 위 코드를 실행하면 newArray에는 [20,30,40]이 저장됨 만약 일반 반복문(for)을 사용하고 싶다면 function App (){ function 반복문(){ var array1 = []; for (var i = 0; i < 3; i++) { array1.push(안녕).. [리액트] styled-component 사용법 일단 예전에는 기존 JS파일에서 CSS를 다루기 위해 CSS파일을 따로 import하였다. 그러나 현재 웹이 발전하면서 React, Anguler, Vue 같은 컴포넌트형 프레임워크를 사용하게 되는데 html,css,js 세 가지 파일을 따로따로 관리하는 방식에서 하나의 컴포넌트 안에 모두 관리가 가능한 방식으로 바뀐 것이다. (CSS in JS) Styled-Component는 그런 CSS-in-JS의 라이브러리 중 하나이고 가장 상용화되었다. 일단 JS파일 안에 CSS를 작성할 수 있고, 하나의 컴포넌트를 작성하면 재활용과 수정이 간편해진다는 장점이 있다. 설치 방법은 아래와 같다 npm을 쓴다면 npm install styled-components yarn을 쓴다면 yarn add styled-co.. 이전 1 다음
