본문 바로가기

분류 전체보기

 (105)
Study_240624 ( TS 타입 및 간단한 성적표 만들기 + tsc 명령어 설명) 간단한 성적표 만들기순서 : yarn init -y ( package.json 생성 )-> tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true 입력 ( tsconfig.json 설정 하는 것 ) / 권한때문에 안 될 시 Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass 입력으로 해당 폴더(위치)에서 권한 부여 가능-> package.json에 코드 추가 (scripts부분임)-> src폴더 생성 후 시작-> yarn run build ( 프로젝트 빌드 , 컴파일 에러시 에러남 )-> ..
TeamProject_240620 (아웃소싱 프로젝트) import { useEffect, useState } from 'react';import { useAddVideo } from '../lib/supabase/videoApi';import { searchYouTubeVideos } from '../lib/api/youtubeAPI';import { ToastContainer, toast } from 'react-toastify';import { supabase } from '../lib/supabase/supabase';const MainPage = () => {  const [query, setQuery] = useState('');  const [searchResults, setSearchResults] = useState([]);  const [p..
TeamProject_240619 (아웃소싱 프로젝트) import { useEffect, useState } from 'react';import { useAddVideo } from '../lib/supabase/videoApi';import { searchYouTubeVideos } from '../lib/api/youtubeAPI';import { ToastContainer, toast } from 'react-toastify';import { supabase } from '../lib/supabase/supabase';import { useInView } from 'react-intersection-observer';import { useInfiniteQuery } from '@tanstack/react-query';const ITEMS_PER_PAG..
TeamProject_240618 (아웃소싱 프로젝트) import { useState } from 'react';import { useAddVideo } from '../lib/supabase/videoApi';import { searchYouTubeVideos } from '../lib/api/youtubeAPI';import { ToastContainer, toast } from 'react-toastify';const MainPage = () => {  const [query, setQuery] = useState('');  const [searchResults, setSearchResults] = useState([]);  const addVideoMutation = useAddVideo();  const searchVideos = async (e)..
Study_240617 "dependencies": {    "@tanstack/react-query": "^5.44.0",    "@tanstack/react-query-devtools": "^5.45.0",    "autoprefixer": "^10.4.19",    "axios": "^1.7.2",    "immer": "^10.1.1",    "json-server": "^1.0.0-beta.1",    "postcss": "^8.4.38",    "react": "^18.2.0",    "react-dom": "^18.2.0",    "react-router-dom": "^6.23.1",    "react-toastify": "^10.0.5",    "styled-components": "^6.1.11",    "ta..
Study_240616 ( 반응형 웹 ) 반응형 웹반응형은 우리가 다양한 기기에서 인터넷을 할 때 화면이 자동으로 바뀌는 것어떤 기기를 사용해도 화면이 편하게 보일 수 있도록 웹사이트를 만들 때 다양한 크기의 화면에 맞게 디자인 필요컨텐츠는 거의 동일하게 제공하나 디바이스 마다 폰트의 크기, 레이아웃, 구성을 다르게 주어 사용자에게 효과적으로 내용을 전달할 수 있는 디자인을 ‘각 디바이스 별로’ 제공하는 것적응형 웹적응형은 각 기기마다 미리 정해진 화면 크기에 맞게 웹사이트를 만드는 것그 기기 이외의 다른 기기에서는 화면이 잘 맞지 않을 수 있음적응형으로 제작된 사이트의 경우 접속하는 디바이스에 따라서 URL이 변경되기도 함반응형 웹 개발 방법 CSS 파일을 사용CSS 파일에 미디어쿼리를 작성하여 리액트 컴포넌트에 적용. 리액트 컴포넌트에서 C..
Study_240615 ( Tailwind CSS ) Tailwind CSS의 필요성기존의 CSS-in-JS 라이브러리인 Styled-Components는 편리하지만, 성능 이슈와 클래스 네임 충돌 문제가 발생할 수 있음. Tailwind CSS는 이러한 복잡성을 줄이고, 보다 유연하고 직관적인 스타일링을 제공 Tailwind CSS의 주요 특징전통적인 CSS 프레임워크와 비교할 때, Tailwind CSS는 유연성과 커스터마이징의 용이성에서 큰 강점을 가지고 있음유틸리티 퍼스트다양한 유틸리티 클래스를 제공하여, HTML 요소에 직접 클래스를 추가하는 방식으로 스타일링을 할 수 있음.유틸리티 클래스는 특정 스타일 속성을 나타내는 짧고 간단한 **CSS 클래스**로, HTML 요소에 직접 적용하여 빠르고 쉽게 스타일링을 할 수 있음.Tailwind CSS는 ..
Study_240614 ( Zustand ) Zustand의 주요 특징간결함매우 간단한 API를 제공하기 때문에, 학습 곡선이 완만함매우 적은 설정 코드 및 적용 코드를 이용하여 상태관리 기능을 구현 가능성능불필요한 리렌더링을 방지하는 등, 성능 최적화가 잘 되어 있음Zustand는 상태가 변경될 때, 해당 상태를 **구독(subscribe)**하고 있는 컴포넌트만 리렌더링함구독은 상태의 변경을 감지하고, 해당 변경에 반응하는 컴포넌트만 업데이트하는 메커니즘을 의미. 마치 유튜브 채널을 구독한다면, 채널에서 새로운 영상이나 공지가 올라오면 알림이 오는 것과 같은 개념.상태의 일부가 변경되었을 때 그 상태를 사용하는 컴포넌트만 업데이트되므로, 애플리케이션 전체가 리렌더링되지 않음. 이를 통해 성능을 최적화하고, 리렌더링으로 인한 성능 저하를 방지Re..

티스토리툴바