React

Knowledge/Test

프론트엔드에서는 어떤 것을 테스트 해야 할까?

이 글은 Kent C. Dodds의 How to know what to test 포스트를 번역한 글입니다. Thank you Kent C. Dodds. Because of your posts, I can continue to grow as an engineer. 테스트하는 방법을 아는 것은 훌륭하고 중요한 일이다. 나는 사람들에게 테스트의 기본 사항, 도구 구성 방법, 특정 시나리오에 대한 테스트 작성 방법 등을 알려주는 많은 콘텐츠를 만들었다. 하지만 테스트를 작성하는 방법을 알아도, 애플리케이션에 대한 신뢰성을 얻기 위해서는 그저 절반일 뿐이다. 무엇을 테스트할지 아는 것은 중요한 또 다른 절반이다. 워크숍 자료와 TestingJavaScript.com에서 무엇을 테스트해야 하는지 아는 방법에 대해 ..

Knowledge/Test

프론트엔드에서의 Static, Unit, Integration, E2E 테스트

이 글은 Kent C. Dodds의 Static vs Unit vs Integration vs E2E Testing for Frontend Apps 포스트를 번역한 글입니다. Thank you Kent C. Dodds. Because of your posts, I can continue to grow as an engineer. TestingJavaScript.com에 있는 "Testing Practices with J.B. Rainsberger" 인터뷰에서 그는 내가 정말 좋아하는 비유를 들려주었다. 그는 다음과 같이 말했다. "You can throw paint against the wall and eventually you might get most of the wall, but until you ..

Framework/React

[React] 구글 스프레드 시트 API 이용하기(with google-spreadsheet)

버전 정보 react: ^18.2.0 react-scripts: ^4.0.2 (5버전은 에러가 너무 많이 나서 다운그레이드) google-spreadsheet: ^3.3.0 구글 스프레드 시트 API 구글 스프레드 시트 API를 이용하여 받아온 데이터를 React에서 처리하려고 한다. API를 이용하면 자바스크립트나 파이썬등에서 코드를 통해 시트 내용을 조회, 생성, 수정, 삭제를 할 수 있다. 이 작업은 주로 정적인 사이트에 사용하면 좋을 것 같다. 그리고 개발 코드를 직접 다룰 수는 없고, 구글 스프레드 시트에 익숙한 사람들. 즉 기획자분들과의 협업에도 도움이 될 것 같다. 예를 들어, 기획자 분들이 스프레드 시트에 작업을 하면 그 작업 내용을 DB에 넣는 경우가 있는데, 스프레드 시트 값이 자주 업..

Framework/Next.JS

[Next.JS] _app.js, _document.js

_app.js, _document.js 이 파일들은 pages폴더에 위치한 Next.JS에서 제공하는 로직을 override하기 위해 필요한 파일들이다. Next.JS에서 제공해 주는 기능만 사용한다면 생성하지 않아도 된다. 하지만 실제로 개발하다 보면 100% 커스텀해야 한다. _app.js _app은 모든 페이지에 레이아웃 형태로 항상 적용되어 있다. 페이지 이동 시에 상태가 변하지 않는다. 필요한 초기 데이터를 getInitialProps에서 받아 컴포넌트들에 공유할 수 있다. global css를 추가하기 좋은 파일이다. // _app.ts const App = ({Component, pageProps}: AppProps) => { return } } export default App; 위 코드에..

SooJae
'React' 태그의 글 목록