본문 바로가기

프론트엔드18

코드를 짜면서 항상 기억해야할 원칙들 1. 중복 제거(DRY) 2. 하나의 함수는 하나의 일만 하도록 하는 것 3. 한 가지 UI에 여러 개의 state가 개입된다면 그것도 최대한 합치려고 노력 4. 각 케이스를 다르게 처리하지 않고 최대한 같은 인터페이스로 처리하게 하려는 노력 -> 하지만 너무 막연히 최고의 유연성을 추구하지 말 것. (매우 유연하게 설계했는데, 막상 작업 하려니 불편하게 되는 상황도 자주 발생하기 때문.) 5. 공통으로 사용할 수 있는 hook을 만들어본다. 컴포넌트 설계에 대한 인사이트 link https://toss.im/slash-21/sessions/3-3 실무에서 바로 쓰는 Frontend Clean Code 실무에서 클린 코드의 의의는 유지보수 시간의 단축입니다. 동료 혹은 과거의 스스로 짠 코드를 빠르게 이.. 2023. 9. 28.
React + RxJS React hooks 역할 상태값의 저장 component의 lifecycle에 대한 반응 상태 변화에 따른 재 렌더링 유발 2022. 8. 26.
eslint & prettier (차이 및 작동방법 등) ESLint 개발 중 특정 기능을 구현할 때, 그 기능을 구현하기 위한 엄청나게 많은 방식이 있다. 이처럼 여러 방식의 코드 작성법이 있는데, 이러한 방식을 일관성 있는 방식으로 구현할 수 있도록 잡아주는 것이 eslint가 하는 역할이다. prettier prettier는 eslint처럼 '코드 구현 방식'이 아닌, 줄 바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성되도록 도와주는 것이다. 출처: https://helloinyong.tistory.com/325 ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자. ESLint, Prettier 관련해서 환경 세팅을 하면 항상 어쩔 땐 잘되고, 어쩔 땐 안되고... 구글링하면 그렇게 많이 나오는 방식들을 전부.. 2022. 7. 6.
Next.js 개괄 https://kyounghwan01.github.io/blog/React/next/basic/#next-js%E1%84%80%E1%85%A1-%E1%84%8C%E1%85%A6%E1%84%80%E1%85%A9%E1%86%BC%E1%84%92%E1%85%A1%E1%84%82%E1%85%B3%E1%86%AB-%E1%84%8C%E1%85%AE%E1%84%8B%E1%85%AD-%E1%84%80%E1%85%B5%E1%84%82%E1%85%B3%E1%86%BC next.js 기본 개념 알아보기 next.js 기본 개념 알아보기, react, seo, ssr kyounghwan01.github.io 보통 next.js 쓰는 이유 nextjs는 React로 만드는 서버사이드 렌더링 프레인 워크입니다. 서버사이드 .. 2022. 7. 5.
React Query (개념과 필요성에 대하여) React Query? -> 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리. (기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하기에 적합할 순 있어도 서버 쪽의 데이터들을 관리하기에는 적합하지 않은 점들이 있어서 등장하게 됨. 예를 들어, 관리자 화면에서 동시에 두 명의 관리자가 같은 페이지를 바라보고 있는 상황에서 한 관리자가 유저의 데이터를 변경하면, 다른 관리자도 그 유저의 변경된 데이터를 바라볼 수 있어야 함. 이러한 유저의 데이터는 클라이언트 쪽보다는 서버 쪽에 좀 더 적합하다고 볼 수 있음) React Query는 언제 사용해야 하는가? - .. 2022. 6. 17.
(링크) 기초_참고용 - React Documents dev-recruiting.ringleplus.com/82017072-0730-49d9-8ec0-4fb7b9aacb77 React Documents useState에 대한 이야기 dev-recruiting.ringleplus.com 2021. 4. 4.