목록프론트엔드 (20)

FE PARADISE

TDD란? 테스트 주도 개발에 대해

TDD 개발을 마치고 예상치 못한 버그가 발생하거나 UI가 깨지는 등의 문제가 발생하는 경우가 많다. 복잡하게 짜여진 코드 속에서 문제의 원인을 항상 빠르게 찾기란 쉽지 않다. 이를 위해 사용하는 것이 바로 TDD Test-driven Development 이다. 개발 전에 테스트 코드를 작성하는 방식을 말한다. 테스트 코드 작성 -> 테스트 -> (결과: 실패) -> 테스트 통과가 가능한 코드 작성 -> 테스트 -> (결과: 테스트 통과) -> 리팩토링 위와 같은 순서를 거쳐서 TDD를 수행하게 된다. 테스트 통과가 가능할 정도로만 코드를 수정하여 다시 테스트를 하고 테스트가 통과될때까지 반복해서 수정하는 것이다. 테스트를 통과하게 되면 그 이후에 코드를 리팩토링한다. Testing 내가 짠 코드가 함..
프론트엔드/TDD 2022. 10. 6. 06:18
리액트 버전 18 - Warning: ReactDOM.render is no longer supported in React 18 - React v18

Warning: ReactDOM.render is no longer supported in React 18 해결하기 기존에 React v17로 개발을 하다가 새로운 사이트를 개발하게 되어서 React 18 버전으로 새롭게 create-react-app을 했다. React 18에서는 ReactDOM.render를 지원하지 않는다는 사실을 모른채 코드를 작성하고 다음과 같은 Warning을 받았다. 더보기 Warning: ReactDOM.render is no longer supported in React 18 !! 😳 놀란 나는 React 공식 사이트에서 react v18에 대해 알아보았다. 👇 참고 ) How to Upgrade to React 18 - 리액트 공식 사이트 Docs https://reac..
프론트엔드/React 2022. 8. 2. 22:27
React로 Lottie 애니메이션 구현하기

React로 Lottie 애니메이션을 구현하는 법 오늘은 Lottie 애니메이션을 React 프로젝트에 사용하는 방법을 기록해보겠습니다! 생각보다 간단하니까 차근차근 따라해주세요 😆 https://lottiefiles.com/ lottie에 대해 궁금하신 분들은 링크로 들어가서 Docs나 open source를 보는것도 좋습니다. Free Lottie Animation Files, Tools & Plugins - LottieFilesThe world’s largest online platform for the world’s smallest animation format for designers, developers, and more. Access Lottie animation tools and plugi..
프론트엔드/React 2021. 12. 22. 23:56
React 프로젝트 Netlify로 배포하기

Create-react-app으로 React 프로젝트를 완성했다면? 완성한 프로젝트를 배포해볼 차례다.  아래의 링크로 들어가보면 https://create-react-app.dev/docs/deployment/ Deployment | Create React Appnpm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of t..
프론트엔드/배포(Deploy) 2021. 11. 13. 15:00
이전 Prev 1 2 3 4 5 Next 다음