HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🧚
[1기]최종 프로젝트 데브코스/
🐳
[팀11] 모디/
🛠️
리팩토링
🛠️

리팩토링

 

리팩토링 목록

비동기 로직 Suspense, ErrorBoundary 적용 - react-query 또는 swr 필요할 수도?
테스트 코드 작성
여러개의 모달을 관리하는 방법 찾아보기
 

클린 코드

토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code
실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다.동료 혹은 과거의 스스로 짠 코드를 빠르게 이해할 수 있다면 유지보수할 때 드는 개발 시간이 짧아집니다.실제 예시와 함께 1. 응집도 2. 단일 책임 3. 추상화 총 세 가지 관점으로 클린코드 방법론을 공유합니다.진유림 / 토...
토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code
https://youtu.be/edWbHp_k_9Y
토스ㅣSLASH 21 - 실무에서 바로 쓰는 Frontend Clean Code

테스트 코드

  • 실용적인 프론트엔트 테스트 전략
Video preview
 
  • 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다.
[A5] 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다.
프론트엔드에서 TDD가 가능하다는 것을 보여드립니다.최수형 | Microprotect브라우저에서 오직 눈으로만 결과물을 확인하고 계신가요? 그것만으론 불안해서 테스트 코드를 작성해보려 했지만 어려움을 겪어 보셨다면 주목해주세요. React에서 테스트 가능한 코드 작성법을 알아보고 ...
[A5] 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다.
https://youtu.be/L1dtkLeIz-M
[A5] 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다.
 
  • 리액트 테스트 시리즈
[Testing] 0. React Testing 시리즈를 들어가며
앞서 React 프로젝트의 구조에 대한 이야기를 4편 에 걸쳐서 실컷했다. 그런데 설계 이야기를 하면서 테스트 이야기는 하지 않았다. 설계에 대해서는 필자도 잘 모르지만 테스트와 설계는 뗄 수 없는 관계라는 정도는 알고 있다. 테스트를 고려하지 않은 설계는 반쪽짜리 설계에 불과하다. 그래서 이번에는 테스트에 관련된 이야기를 해보려고 한다.
[Testing] 0. React Testing 시리즈를 들어가며
https://jbee.io/react/testing-0-react-testing-intro/
[Testing] 0. React Testing 시리즈를 들어가며
 
  • kotest가 있다면 TDD 묻고 BDD로 가!
kotest가 있다면 TDD 묻고 BDD로 가!
제목 : kotest가 있다면 TDD 묻고 BDD로 가! 연사 : 이원제 Wade / 카카오 Backend engineer, 강진혁 Harry / 카카오 Backend engineer BDD(Behavior Driven Development)와 TDD(Test Driven Development)를 비교하고 BDD와 TDD를 통해 얻는 장점을 이야기해봅니다. 그리고, 예제를 통해 BDD를 적용하는 법을 살펴보고 이 BDD와 TDD를 kotlin project에서 쉽게 적용할 수 있도록 도와주는 kotest와 주변 라이브러리를 소개합니다.
kotest가 있다면 TDD 묻고 BDD로 가!
https://tv.kakao.com/channel/3693125/cliplink/414004682
kotest가 있다면 TDD 묻고 BDD로 가!
 
  • 실용주의 프론트엔드 개발
실용주의 프런트 엔드 개발
실용주의 프런트 엔드 개발
https://peter-cho.gitbook.io/book/
실용주의 프런트 엔드 개발
 
[번역] 초보자를 위한 React 어플리케이션 테스트 심층 가이드 (1)
with @testing-library/react 이 글은 " An in-depth beginner's guide to testing React applications "를 번역한 글입니다 대부분의 개발자는 다음의 사실을 알고 있다: 자동화된 테스트는 중요하다. 그렇게 주장하는 데는 많은 이유가 있다. 단지 코드 몇 줄을 바꾸는 것으로 자기도 모르게 앱을 망가뜨릴 수도 있다. 코드를 수정한 후에 테스트를 수동으로 돌리는 일은 성가시다.
[번역] 초보자를 위한 React 어플리케이션 테스트 심층 가이드 (1)
https://blog.rhostem.com/posts/2020-10-14-beginners-guide-to-testing-react-1
[번역] 초보자를 위한 React 어플리케이션 테스트 심층 가이드 (1)
 
Video preview

책

스무디 한 잔 마시며 끝내는 리액트+TDD - YES24
한국의 중소기업에서 MFC를 사용한 윈도우 프로그램 개발을 시작으로 안드로이드, iOS, 웹 개발자로 활동을 하였다. 그 후, 웹 프로그래머로서 호주에서 활동하였으며 현재는 일본 기업에서 풀스택 엔지니어로서 리액트, 리액트 네이티브를 사용한 서비스를 개발 중이다. 업무 이외에도 리액트와 리액트 네이티브를 사용한 앱을 개발 중이며 앱 개발 중에 겪었던 일을 블로그로 게재하고 있다.
스무디 한 잔 마시며 끝내는 리액트+TDD - YES24
http://www.yes24.com/Product/Goods/102280451
스무디 한 잔 마시며 끝내는 리액트+TDD - YES24
 

상태관리

Video preview
 

디자인 시스템

Video preview
Design Systems articles on building and maintaining design systems
Learn how to define baseline grids, column grids, spacing and layouts Learn how to create, organize, name, and use icons within a design system Learn about choosing typefaces, font weights, styles, sizes, line-heights, and responsive type for your design system. Content and microcopy appear all over design system components.
Design Systems articles on building and maintaining design systems
https://www.designsystems.com/
Design Systems articles on building and maintaining design systems
Video preview
 

디자인 패턴

  • MV* 패턴
프론트엔드에서 MV* 아키텍쳐란 무엇인가요?
MVC, MVVM, MVI 아키텍쳐가 어쩌고 저쩌고... 소프트웨어를 공부하다 보면 한번쯤은 MV~로 시작되는 무슨 무슨 아키텍쳐라는 말을 들어본 적이 있을 겁니다. 실제로 프로그래밍을 할 때에는 중요하지 않아 보이는데 이따금씩 눈에 밟혀 왠지 알고 가야할 것 같은 개념인 아키텍쳐와 MVC에 대해 웹 프론트엔드 개발자 관점에서 알아야 할 내용들을 정리해보았습니다.
프론트엔드에서 MV* 아키텍쳐란 무엇인가요?
https://velog.io/@teo/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-MV-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94
프론트엔드에서 MV* 아키텍쳐란 무엇인가요?
velog.io
https://velog.io/@dnr6054/%EC%9C%A0%EC%9A%A9%ED%95%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%8C%A8%ED%84%B4-5%EA%B0%80%EC%A7%80

리팩토링

Video preview
Video preview
React VAC Pattern - View 로직과 JSX의 의존성을 최소화 하자!
NAVER Engineering | 발표자: 박우영 (N Tech Service) 발표월: 21.10. React 협업이 어려운 점을 살펴보고 View 로직과 JSX를 격리해서 관리하는 것을 소개합니다. 목차 1. React 협업 - React 환경에서 Front-End 업무는 어떻게 분업화 되어 있나? 2. React 협업이 어려운 점 - React 협업에서 무엇이 우리를 괴롭히는가? 3.
React VAC Pattern - View 로직과 JSX의 의존성을 최소화 하자!
https://tv.naver.com/v/23162062
React VAC Pattern - View 로직과 JSX의 의존성을 최소화 하자!

리액트

[A5] 왜 나는 React를 사랑하는가
왜 나는 React를 사랑하는가 - 안희종 | 플렉스팀발표자료: https://drive.google.com/file/d/1_GIobLty8_QZpAqoH6l1C9cHKYSIDHLg/view?usp=sharing
[A5] 왜 나는 React를 사랑하는가
https://youtu.be/dJAEWhR83Ug
[A5] 왜 나는 React를 사랑하는가
토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기
API를 호출하거나 네이티브 앱과 통신할 때프론트엔드 웹 서비스에서는 반드시 비동기 작업이 일어나게 됩니다. 일상처럼 다루고 있지만 정작 UI에서 다루기 힘든 비동기 프로그래밍.React Suspense를 이용하여 우아하게 처리하는 이론과 실전 적용법을 공유합니다.박서진 / 토스 ...
토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기
https://youtu.be/FvRtoViujGg
토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기