매일 공부한거 기록하기

지금까지 css, styled-components만 계~속 썼었다. 우연히 공부해볼 기회가 생겨서 Tailwind에 대해서 우선 간단하게만 알아보기로 한다. 사실 예전에 한번 봤을때 클래스 이름이 너무 길어서 깔끔하지 못하다는 인상을 받았었는데.. 이참에 장점을 알아봐야지~~~ 공식 홈페이지 https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentation for the Tailwind CSS framework. tailwindcss.com 장점 1. Utility-First를 지향하는 CSS프레임워크이다. 2. 안쓰는 스타일은 빌드시 제거해준다. 3. 결과물이 ..

공식주소 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: "", }..

공식문서 보고 정리해보깅~ 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..

M A T E R I A L - U I MUI란? material UI가 버전이 변경되면서 MUI로 이름이 변경되었다. 간단하게 React를 위한 UI라이브러리! 부트스트랩같은거라고 생각하면 되려나 :) Material UI is a library of React UI components that implements Google's Material Design. 구글 Material Design을 구현하는 React UI 컴포넌트 라이브러리 입니당! 공식문서 https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React co..