ksw_devlog

Home 화면 UI import styled from '@emotion/styled'; import { useState } from 'react'; import HomeBanner from '../../components/home/HomeBanner'; import HomeCategoryList from '../../components/home/HomeCategoryList'; import HomePlace from '../../components/home/HomePlace'; import ScrollTopBtn from '../../components/home/ScrollTopBtn'; const Home = () => { const [testList, setTestList] = useState([1,..

카테고리 만들기 const menulist = [ { id: 1, title: "아이스아메리카노", name: "americano", price: "3,200원", }, { id: 2, title: "핫아메리카노", name: "americano", price: "3,500원", }, { id: 3, title: "아이스초코", name: "choco", price: "3,000원", }, { id: 4, title: "핫초코", name: "choco", price: "4,000원", }, { id: 5, title: "카모마일", name: "tea", price: "3,900원", } ] export { menulist } import { useState } from "react"; import {..

[react-slick] carousel / 배너 만들기 설치 - npm i react-slick / yarn add react-slick - css import import "slick-carousel/slick/slick-theme.css"; import "slick-carousel/slick/slick.css"; 사용하기 import React from "react"; import Slider from "react-slick"; import "slick-carousel/slick/slick-theme.css"; import "slick-carousel/slick/slick.css"; function Home() { const settings = { dots: true, infinite: true, ..

[최종 프로젝트 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..