react17 [FE] 토스가 정의하는 컴포넌트의 역할과 분리 기준 📄 참고자료 Effective Component 지속 가능한 성장과 컴포넌트 🎇 변화 우리는 제품을 개발하면서 수많은 변경을 마주한다. 사용자는 우리가 만든 제품을 어려움 없이 잘 사용해야 한다. 디자인, API, 제품의 방향 언제든 바뀔 수 있다. 좋은 제품을 만들기 위해서는 변화는 필수다. 우리가 만드는 제품은 변화를 겪으면서 올바른 방향으로 성장한다. 우리는 따지고보면, 제품을 성장시키고 있는 것이다. 제품의 변화란, 놓치고 있었던 고객의 니즈를 발견하는 것과 같다. 무엇이 변경될지 알았으면 정말 좋았을 것이다. 변경은 예측하지 못한다. 우리는 예측하려 하지 말고, 대응하자. 변경에 유연한 컴포넌트 만들기 우리는 컴포넌트를 잘 만들어서 변경에 유연하게 대응할 수 있도록 해야 한다. 변경에 유연한 컴.. 2023. 9. 3. [FE] 실무에서 바로 쓰는 Frontend Clean Code 📄 참고자료 토스 실무에서 바로 쓰는 Frontend Clean Code https://www.youtube.com/watch?v=edWbHp_k_9Y 💬 들어가기전 주저리 기술블로그와 여러 기술 아티클을 탐방할 때, 클린코드(clean code) 란 용어를 자주 본다. 👈 요런, 클린코드 서적을 추천하는 게시글이나 주변 개발자도 봤었다. 그래서 "클린코드" 가 무엇이냐~ 라고 물어본다면, 중복되는 코드 줄이는 방법 가독성이 쉬운 코드를 작성하는 방법 유지보수가 쉬운 코드를 작성하는 방법 이라 할 수 있다. 중복,가독성,유지보수.. 멋진 용어다. 이건 클린코드에 대해 검색하면 나오는 정말 군더더기 없는 설명이다. 사실, 개인적으로, 내가 느끼는 클린코드에 대한 정의는, 개발자의 원활한 소통과 업무를 위한.. 2023. 9. 3. [TDD] 투두리스트를 TDD로 개발하기 - TodoForm 2023.05.24 - [🌳Frontend/react] - [TDD] 투두리스트를 TDD로 개발하기 - TodoItem TodoForm 테스트코드 먼저 작성 import { render, screen } from '@testing-library/react' import TodoForm from '@/components/todo-list/TodoForm' import userEvent from '@testing-library/user-event' describe('Test TodoForm', () => { it('할 일을 입력해야 추가 버튼이 활성화된다.', async () => { render() const user = userEvent.setup() const textField = screen.getB.. 2023. 5. 25. Next.js 초기셋팅 정리 (with Typescript/ESLint/prettier/jest/testing-libarary) Next.js를 구축하고 환경설정하는 게시글은 띄엄띄엄 정리하긴 했지만, 하나의 게시글로 정리하고 싶어서 다시 씀. 읽기전에 패키지 버전차이가 있을 수 있습니다. (이로인해 실행이 제대로 되지 않을 수 있습니다.) 초기셋팅은 왠만하면 공식문서를 보고 따라하는 것이 좋습니다. 저는 node pakage manaement tools 로 yarn 을 사용합니다. (npm으로 설치할 수도 있지만, yarn을 더 선호하는 편 입니다.) 타입스크립트를 사용합니다. Next.js 프로젝트 생성 yarn create next-app --typescript 1. 프로젝트 이름을 적어주세요 2. ESLint를 사용할 것인지 3. Tailwind CSS 를 사용할 것인지 4. src directory를 사용할 것인지 5. .. 2023. 5. 25. 이전 1 2 3 4 5 다음 728x90 반응형
