Front-End Study89 모던 리액트 딥다이브 - 14회차 [9-1 ~ 9-4] 9. 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기무에서 유를 창조하는 것은 겁나 어렵다.9.1 Next.js로 리액트 개발 환경 구축하기✨ CLI는 빠르고 쉽게 프로젝트를 시작할 수 있지만 프로젝트 자체를 이해하는데에 도움을 주지 않는다.많은 개발자가 사용해온 create-react-app 과 같은 더이상 유지보수 되지 않고 단순히 리액트 기반 프레임워크의 사용을 제안하는 런처 형태로 변경될 가능성이 크다.create-react-app 없이 직접 구축하기npm initnpm i react react-dom nextnpm i @types/node @types/react @types/react-dom eslint eslint-config-next typescript --save-dev번외적으로 --.. 2024. 8. 7. 앱 라우터가 지향하는 파일 아키텍쳐 곧 시작하는 최종 프로젝트에 앱 라우터를 사용할 것 같아서 파일 아키텍쳐에 대해 미리 조사해보았다!✨ 어떻게 하면 효율적인 파일 구조를 만들어 앱 라우터를 제대로 사용할 수 있을까?기본적으로 페이지 라우터와 앱 라우터의 차이는 유연함pages-only : 모든 JS파일을 라우트로 변환해야 하는 구조로 기존 페이지 라우터의 pages 폴더 안의 모든 JS 파일들은 페이지가 되던 것을 의미하지만 앱 라우터는 관련 파일을 한곳에 보관하는 app 폴더를 사용이를 colocation 이라고 하며 더욱 효율적인 개발이 가능보통의 프로젝트 파일 구조는 역할을 기반으로 한다.페이지, 컴포넌트, 유틸, 훅, API 폴더 등앱 라우터의 경우 기능을 기반으로 폴더구조를 이루며, 이는 앱 라우터의 장점을 더욱 부각시킨다.인증.. 2024. 7. 22. 리액트 쿼리? 리액트가 이름 막 갖다 쓴다고 뭐라 안하나.. 리액트 쿼리는 왜 나왔고 왜 좋을까?✨ 리액트 쿼리는 서버 상태 가져오기, 캐싱, 동기화 및 업데이트 를 기존의 코드보다 더욱 쉽고 간결하게 다룰 수 있도록 해준다.📌 리액트 쿼리는 무슨 역할을 하나?기존 상태 관리 라이브러리인 mobX나 redux는 클라이언트 상태 관리에 적합하나, 비동기 처리나 서버 상태 관리에는 미흡하다.리액트 쿼리는 이런 기능이 있다!데이터 캐싱동일한 데이터에 대한 중복 요청을 단일 요청으로 통합백그라운드에서 오래된 데이터 업데이트데이터 업데이트를 가능한 빠르게 반영페이지네이션 및 데이터 지연 로드와 같은 성능 최적화서버 상태의 메모리 및 가비지 수집 관리구조 공유를 사용하여 쿼리 결과를 메모화🙄 솔직히 요래 써놓으면 잘 감이 오지 않는다.간단히 말하자면, 서버와 클라이언트의.. 2024. 7. 19. PATCH 메서드를 사용한 수정 로직 구현... 이건 우째 해야할까.. 어떤 고민?✨ 이번 프로젝트 때 위키 수정을 위해 사용하는 PATCH 메서드를 위해 FormData 생성로직을 만들어야 했다. 🔖 초기 로직과 문제점🚫 로직의 비효율성우리 API는 PATCH 메서드를 통해 위키를 수정하는데, 수정 전에 퀴즈를 풀어 답변과 함께 엔드포인트가 ping인 API로 GET 요청을 보내어 성공 상태 코드를 받아야 PATCH 메서드를 사용 가능한 시스템이었다. (따로 알려주지 않아 직접 swagger로 박치기해서 알아냈다... 🥲)여하튼 이러한 과정은 다 제쳐두고 PATCH 메서드 자체만 놓고 보자면, PATCH의 경우 변경하고 싶은 데이터만 뽑아내어 FormData에 담아 전송해야 했기 때문에 이걸 어떤식으로 만들어야 하나라는 고민이 많았다.또한 이미지를 넣어 보내는 경우,.. 2024. 7. 14. 중급 프로젝트를 마치며.. 어쩌면 기초 프로젝트보다 더 짧았다고 볼 수 있을 중급 프로젝트도 마무리하게 되었다..! 👍👍이번 프로젝트도 기초 때와 마찬가지로 정해져있는 주제를 골라 진행하는 것이었지만 조금 더 심화적인 기능을 바탕으로 여러가지 기술을 사용해 구현해볼 수 있었다.때문에 오히려 기본 기능을 구현하는 것에 시간을 많이 쏟게 되어 기초 때보다 추가적인 기능 구현을 해볼 시간이 적었던 느낌이다.하지만 여러가지 기술들을 사용하고, 팀원들과 함께 협업하며 공유를 주고받은 것들을 바탕으로 훨씬 많이 성장했다고 느낀 프로젝트였다 😁 📖 어떤 프로젝트였나?1. 프로젝트의 목적이번에 우리팀이 진행한 프로젝트는 주변 사람이 함께 참여하는 나만의 위키 라는 컨셉을 가진 위키 제작 사이트였다.위키라는 주제 자체는 익숙하지만, 나만의.. 2024. 7. 12. 모던 리액트 딥다이브 - 13회차 [8-1, 8-2] 8. 좋은 리액트 코드 작성을 위한 환경 구축하기좋은 코드를 작성하기 위한 ESLint와 리액트 테스트 라이브러리를 알아보자8.1 ESLint를 활용한 정적 코드 분석✨ JS 생태계에서 가장 많이 사용되는 정적 코드 분석 도구 ESLint에 대해 알아봅세~8.1.1 ESLint 살펴보기🔖 ESLint 어떻게 이렇게 쌈@뽕하게 JS 코드를 분석하는 걸까?JS코드를 문자열로 읽는다.JS 코드를 분석 가능한 파서(parser)로 코드를 구조화한다.구조화한 AST(Abstract Syntax Tree)라 하고, 이를 각종 규칙과 대조한다.규칙 위반 코드를 알리거나 수정한다.🖥️ 코드 변환 톺아보기const handleCancelClick = () => { setIsEditing(false); setRen.. 2024. 7. 12. 이전 1 2 3 4 5 ··· 15 다음
