본문 바로가기

전체 글

 (290)
TIL 23.08.28 리액트 달력 라이브러리 react-calendar 리액트 달력 라이브러리 React calender 개발자 깃허브 참고 https://github.com/wojtekmaj/react-calendar/blob/main/package/README.md 1. 라이브러리 설치 yarn add react-calendar 2. date 를 원하는 형식으로 지정해줄 라이브러리 설치 (moment 등 여러가지가 있으나 나는 date-fns 사용함) yarn add date-fns 3. 다음과 같이 코드를 작성한다. 나는 일일미션이 있는데, 이에 해당하는 날짜에 highlight 되어야 해서 marks 에 해당하는 날짜 로직을 집어넣는 식으로 함수를 작성하였다. 각자 필요사항에 따라 적용하면 될 듯. format(date, "d")} // 일 제외하고 숫자만 보임 ti..
TIL 23.08.24 좋아요 버튼 및 숫자 구현 [좋아요 버튼 구현하기] 좋아요 구현이 이렇게 어려운 일인줄 몰랐는데 시간이 꽤 걸렸다. 만들고 나서도 리팩토링이 필요한 코드라는 것을 절실하게 느꼈지만 일단 기능은 동작하니까.. 어떻게 굴러가게 만들었는지 정리해보려고 한다. 좋아요 로직 1. 유저가 로그인한다. [로그인 한 유저에게만 좋아요를 누를 수 있는 권한이 부여됨] // 현재 유저정보 fetch const fetchUser = async () => { try { const { data: { user }, } = await supabase.auth.getUser(); if (!user) { setUser(false); } else { setUser(user); console.log(user); fetchUserLike(user); // 유저 정보..
TIL 23.08.23 기술 interview (3)/ Swiper Custom 하기 3. Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요. Recoil 은 페이스북에서 개발한 상태 관리 라이브러리로, React 컴포넌트 트리의 어디서든 상태를 공유할 수 있다. 리액트의 컴포넌트 컴포지션과 잘 통합되며, 비동기 처리 및 코드 스플리팅과 같은 고급 기능을 제공한다. Recoil 은 Redux 와 다르게 상태를 atom이라는 단위로 정의하고, 컴포넌트는 이를 선택적으로 읽고 쓸 수 있다. 또한 비동기작업을 할 때, Recoil 은 미들웨어가 따로 없으나 Redux 는 Redux Thunk 와 같은 미들웨어로 비동기 작업을 처리한다. navigation 은 .swiper-button-next swiper-button-prev 클래스 네임을 가지고 있으며, paginati..
TIL 23.08.22 기술 interview (1)~(2) 1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요? 상태관리란 데이터를 관리하는 방법으로, 여러 컴포넌트간에 주고받는 데이터들을 한 곳에 관리하는 방법이다. 상태관리를 하는 이유에는 데이터가 업데이트 됨에 따라서 동적으로 UI를 관리할수 있고, 중앙에서 상태관리가 이루어지면 여러 컴포넌트에서 상태를 공유할 수 있다. 지역적으로 상태관리를 할 때는, useState 훅을 사용하여 state에 따른 컴포넌트 내에서 상태관리를 한다. 전역적으로 상태관리를 할 때는, Redux 상태관리 라이브러리를 사용하여 중앙에서 상태관리를 한다. 2. Redux가 무엇인가요, 왜 Redux를 사용하시나요? Redux란 상태관리 라이브러리며 주로 React, Vue, Angular 와 같은 프레임워크..
TIL 23.08.21 Tailwind CSS 세팅 1. Tailwind 홈페이지 -> Docs 에서 다운로드 https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com yarn add -D tailwindcss 2. Next.js 와 적용할 것 이기 때문에, 사용할 컴포넌트나 폴더명을 다음과 같이 tailwind.config.ts 에 적용함 https://tailwindcss.com/docs/guide..
TIL 23.08.18 [App router] layout Layout layout 페이지는 앱 라우터에서 공통된 설정을 적용하는 페이지로 itle, description 은 제목과 내용을 설정해주면 제목에 들어간다. import "./globals.css"; import Link from "next/link"; export const metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children }) { return ( WEB {children} ); } 메인페이지 import Image from "next/image"; export default function Home() { retu..
[Next.js] [Page Router] Page와 Routes 설치하기 Next.js 12 에는 페이지라우터 방식을 사용한다. 다음과 같이 필요에 따라 패키지를 설치한다. npx create-next-app [프로젝트 이름] ➜ ~ npx create-next-app pages-test ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommended) … [No] / Yes // NO [페이지라우터] 방식..
[Next.js] Rendering Rendering JavaScript 를 이용해서 HTML 을 만드는 행위로, 기존 SPA 를 만들 때 사용하던, CSR 의 rendering 표현에 가깝다. const element = ( Hello, world! ); // JSX의 동작 -> Javascript로 HTML 태그를 만든다. const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); Pre-rendering Client 에 HTML 이 이미 로드가 된 이후가 아닌, 이전에 JavaScript 를 이용해 HTML 을 만드는 것을 말한다. 언제 HTML 을 만드느냐에 따라서, SSR (Server Side Rendering), SSG (Stat..

티스토리툴바