목록전체 글 (137)
ksw_devlog
[최종 프로젝트 S.A] https://www.notion.so/SA-d20c7fb1de144cc3b26fa2c0f6bcbd3d 모코 SA 1. 팀 소개 www.notion.so https://www.figma.com/file/fx9MIoxv2iTdPiGjlpiJ4S/Untitled?node-id=0%3A1&t=ZuIhxXizX341vy7l-0 Figma Created with Figma www.figma.com
이번주에는 Next.js 강의를 듣고 리액트로 투두리스트를 다시 만들어보고 타입스크립트로 리팩토링 해보았다. Next.js 강의를 들으면서 CSR, SSR, SSG에 대해 알아볼 수 있었고 리액트로 만든 투두리스트를 직접 타입 지정해보니 eventhandler나 setState 관련 된 타입지정이 따로 있다는 것을 알게되었다.
DOM 관련 타입스크립트 리팩토링 function TodoInsert({onSubmit}) { const [content, setContent] = useState(""); const ref = useRef(); const handleChange = (e) => { setContent(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); if (!content) return; onSubmit(content); setContent(""); }; useEffect(() => { if (ref.current) { ref.current.focus(); } }, []); return ( 작성 ) } export default TodoInser..
리렌더링 발생조건 컴포넌트에서 state가 변경될 때 컴포넌트가 내려받은 props가 변경될 때 부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트 모두 Memoization 1. memo(React.memo) : 컴포넌트를 캐싱 // 가벼운 컴포넌트도 memo처리하면 캐시 메모리 많이 차지함 2. useCallback : 함수를 캐싱 3. useMomo : (리턴)값을 캐싱 빌드(build) 소스코드 파일을 실행가능한 소프트웨어 산출물로 만드는 일련의 과정을 말한다. 빌드의 단계 중 컴파일이 포함이 되어 있는데 컴파일은 빌드의 부분집합이라 할 수 있다. 빌드 과정을 도와주는 도구를 빌드 툴이라 한다. https://st-lab.tistory.com/176 프로그래밍 언어와 빌드 과정 [Build Proce..
CSR(Client Side Rendering) 장점 : 서버에서 새로운 html을 내려 받지 않고 클라이언트에서 그리기 때문에 (bundle.js) 화면 깜빡임 없이 앱과 같은 경험으로 웹사이트를 사용할 수 있다. 단점1 : 번들링된 js 파일의 크기가 크기 때문에 사용자가 웹사이트를 처음 들어왔을 때 화면에 뭔가 그려지는 것을 보는데까지 시간이 오래 걸린다.(화면에 그려지는 타이밍 = interaction을 할 수 있는 타이밍) -> code splitting으로 어느정도 해결할 수 있음 -> URL마다 각각의 번들링된 js 파일을 만들 수 있다 단점2 : SEO(검색 엔진 최적화) 대응이 힘들다. Next.js => SSR(Server Side Rendering) + CSR(Client Side R..
Next.js Manual Setup Install next, react and react-dom in your project: npm install next react react-dom # or yarn add next react react-dom # or pnpm add next react react-dom Open package.json and add the following scripts: "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" } These scripts refer to the different stages of developing an application: ..
프로젝트 - YourRanking https://your-ranking-video.vercel.app/ React App your-ranking-video.vercel.app KPT 회고 Keep : 깃 브랜치를 기능별로 세세하게 나누어서 작업하다보니 충돌에러가 거의 나지 않았었다. 다음 프로젝트에서도 이 방법을 유지하면 좋을 것 같다. Problem : 새로운 라이브러리를 사용해보느라 추가기능을 해보지 못하였다. 구글링한 코드도 이해하는데 오래 걸렸었던거 같고 사용하는 코드를 어떤식으로 써야하는지 이해하는 게 중요한 것 같다. Try : 다음 프로젝트부턴 타입스크립트를 제대로 써볼 생각이다. Feel : 프로젝트를 하면서 기초가 많이 부족하다고 느껴지는 것 같다. 브라우저가 어떻게 작동되는지에 대해 이..
https://your-ranking-video.vercel.app/ React App your-ranking-video.vercel.app 이번 프로젝트에서 만든 웹사이트이다. 게시글 작성, 수정 기능을 맡았다. 작성 폼을 만들 때 react hook form이라는 새로운 라이브러리를 사용해보았고 파이어베이스말고 json서버를 이용하여 작성, 수정 기능을 구현하였다. 생각보다 여유있을 줄 알았는데 새로운 라이브러리를 공부하는데 하루정도를 할애했고 구글링한 내용을 이해하는데도 시간이 많이 걸렸다. 아무래도 기초가 좀 부족해서 코드를 이해하는데 시간이 걸린 느낌이다. js문법 공부를 꾸준히 해야할 것 같다.