매일 공부한거 기록하기

공식주소 https://ant.design/ Ant Design - The world's second most popular React UI framework Ant Design 5.0 Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance. ant.design 설치 npm i antd 간단한 사용 import { Button } from "antd"; TEST DEFAULT TEST PRIMARY antd에서 Button을 import해주고 공식문서를 보고..

1. CSS전처리기란 ? Pre-Processor CSS가 복잡해짐에 따라 CSS코드를 마치 프로그래밍 개념을 사용해 특별한 syntax를 가지고 CSS를 생성하게 하는 프로그램. 2. CSS전처리기 종류 Sass (Scss) -> 문법이 조금 다르다 Less Stylus 3. Sass 작성방법 중첩 .header { width: 100%; .menu{ font-size: 10px } .login_btn{ color: blue; &.active{ color: red; } } } 변수설정 : $사용 $main-red-color: #eb4034; .warning{ font-color: $main-red-color } 등이 있다. 4. LESS CSS에 Script처럼 기능을 덧붙임, CSS의 기존 문법을 그..

https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props 를 보고 공부했다. Data Fetching: getServerSideProps | Next.js Fetch data on each request with `getServerSideProps`. nextjs.org 1. getServerSideProps getServerSideProps 함수를 페이지로부터 export한다면 Next.js는 매 요청할때마다 getServerSideProps로 부터 리턴된 데이터들을 이용해서 pre-render될것이다. export async function getServerSideProps(context) { return { props: {..

https://nextjs.org/docs/basic-features/pages#server-side-rendering 공식문서 번역하면서 공부해보기 for study ! :) Basic Features: Pages | Next.js Next.js pages are React Components exported in a file in the pages directory. Learn how they work here. nextjs.org 1번 케이스 : 페이지의 컨텐츠가 외부데이터에 의존할때 export default function Blog({ posts }) { return ( {posts.map((post) => ( {post.title} ))} ) } 사전렌더링안에서 데이터를 fetch할때 , Ne..

Note : Next.js 13버전에선 app/ directory를 사용한다. 생성된 파일 구조 1. Page 각각의 페이지는 파일의 이름으로 라우팅을 한다 :) 예를들어 pages폴더안에 about.tsx를 만들었다면 /about의 경로로 접근 할 수 있다. 2. 동적라우팅 Next.js는 동적 라우트를 제공하는데 예를들어 pages/posts/[id].js 를 만든다면 posts/1, posts/2 ... 등의 경로로 접근 할 수 있다. 3. Pre-rendering Next.js는 HTML파일을 미리 생성한다. => SEO에 더 유리하다 브라우저에서 페이지가 로드될때 자바스크립트 코드가 작용하면서 인터랙티브하게 만드는데 이걸 하이드레이션이라고 부른다. 3. 프리렌더링의 두가지 형태 Static Ge..

예전에 공부했던 글들은 비공개로 돌렸당 다시 해야지~~~ 공식문서💖 https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 1. Next.js란? SSR을 가능하게 해주는 리액트 프레임 워크. (리액트는 CSR) SEO에 유리하다 2. Next 시작하기 공식문서 따라하기 npx create-next-app@la..

react-hook-form을 간단하게 알아보자 왜냐면.. 그냥 궁금하니까.. 0. 기존 form의 유효성 검사 기존 form에서 유효성 검사에서 이름, 비밀번호, 주소, 휴대폰번호 등을 검사하게 된다. name만 관리한다고 해도 name이 변경되는 값을 관리해야하는 1. input값이 변경될때마다 Handler에서 state들을 setState를 해줘야하고, 2. submit 버튼에서 validate함수를 실행시켜야하고 3. validate 에서 name.length ===0일때 등의 유효성검사를 해야함 만약에 관리해야할 state들이 늘어나게 된다면? 로직의 길이가 매우 늘어나고, 복잡해진다 const [data, setData] = useState({ testName: "", email: "", }..

react-redux, recoil, react-query는 해봤는데 zustand는 처음이다 간단하게정리해봐야지 공식: #TypeScript Usage도 있음! https://github.com/pmndrs/zustand GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React 🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub. github.com 1. 설치 npm install zustand yarn add zustand 2. Store를 생성한다. stor..

공식문서 보고 정리해보깅~ https://ko.reactjs.org/docs/hooks-reference.html#usereducer Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 1. useReducer란? useState의 대체 함수이다. 다수의 하위값을 포함해 복잡한 정적로직을 만들때 다음 state가 이전 state에 의존적인 경우에 선호한다. 2. 싫어요 버튼을 만들어보자 //초기값 설정 const initialHate = { count: 0 }; // const [state,dispatch] = useReducer(reducer,initialState); const [hate..

읽어읽엇~