juni

반응형 웹반응형은 우리가 다양한 기기에서 인터넷을 할 때 화면이 자동으로 바뀌는 것어떤 기기를 사용해도 화면이 편하게 보일 수 있도록 웹사이트를 만들 때 다양한 크기의 화면에 맞게 디자인 필요컨텐츠는 거의 동일하게 제공하나 디바이스 마다 폰트의 크기, 레이아웃, 구성을 다르게 주어 사용자에게 효과적으로 내용을 전달할 수 있는 디자인을 ‘각 디바이스 별로’ 제공하는 것적응형 웹적응형은 각 기기마다 미리 정해진 화면 크기에 맞게 웹사이트를 만드는 것그 기기 이외의 다른 기기에서는 화면이 잘 맞지 않을 수 있음적응형으로 제작된 사이트의 경우 접속하는 디바이스에 따라서 URL이 변경되기도 함반응형 웹 개발 방법 CSS 파일을 사용CSS 파일에 미디어쿼리를 작성하여 리액트 컴포넌트에 적용. 리액트 컴포넌트에서 C..

Tailwind CSS의 필요성기존의 CSS-in-JS 라이브러리인 Styled-Components는 편리하지만, 성능 이슈와 클래스 네임 충돌 문제가 발생할 수 있음. Tailwind CSS는 이러한 복잡성을 줄이고, 보다 유연하고 직관적인 스타일링을 제공 Tailwind CSS의 주요 특징전통적인 CSS 프레임워크와 비교할 때, Tailwind CSS는 유연성과 커스터마이징의 용이성에서 큰 강점을 가지고 있음유틸리티 퍼스트다양한 유틸리티 클래스를 제공하여, HTML 요소에 직접 클래스를 추가하는 방식으로 스타일링을 할 수 있음.유틸리티 클래스는 특정 스타일 속성을 나타내는 짧고 간단한 **CSS 클래스**로, HTML 요소에 직접 적용하여 빠르고 쉽게 스타일링을 할 수 있음.Tailwind CSS는 ..

Zustand의 주요 특징간결함매우 간단한 API를 제공하기 때문에, 학습 곡선이 완만함매우 적은 설정 코드 및 적용 코드를 이용하여 상태관리 기능을 구현 가능성능불필요한 리렌더링을 방지하는 등, 성능 최적화가 잘 되어 있음Zustand는 상태가 변경될 때, 해당 상태를 **구독(subscribe)**하고 있는 컴포넌트만 리렌더링함구독은 상태의 변경을 감지하고, 해당 변경에 반응하는 컴포넌트만 업데이트하는 메커니즘을 의미. 마치 유튜브 채널을 구독한다면, 채널에서 새로운 영상이나 공지가 올라오면 알림이 오는 것과 같은 개념.상태의 일부가 변경되었을 때 그 상태를 사용하는 컴포넌트만 업데이트되므로, 애플리케이션 전체가 리렌더링되지 않음. 이를 통해 성능을 최적화하고, 리렌더링으로 인한 성능 저하를 방지Re..

Custom InstanceAxios 인스턴스를 사용하면 설정을 한 곳에서 관리. baseURL을 설정하여 서버 주소가 변경되더라도 한 곳에서 수정하면 모든 요청에 반영// src > axios > api.jsimport axios from "axios";// axios.create의 입력값으로 들어가는 객체는 configuration 객체임// https://axios-http.com/docs/req_config 를 참고const api = axios.create({  baseURL: "http://localhost:4000",});export default api;사용 예시import "./App.css";import { useEffect } from "react";import api from "./..

HTTP 프로토콜의 특징 2가지무상태(stateless)HTTP 프로토콜은 무상태(stateless) 프로토콜. 각 요청이 독립적이며, 서버가 이전 요청에 대한 정보를 기억하지 않는다는 의미. 클라이언트가 서버에 요청을 보낼 때마다 서버는 해당 요청을 독립적으로 처리하고, 이전 요청의 상태나 정보를 기억하지 않음상태값은 매 요청마다 클라이언트가 가지고 오기 때문에, 서버는 클라이언트의 상태를 별도로 기억할 필요없이 주문받은 대로 응답함무상태라는 특성 덕분에 동일한 서버를 여러개로 확장 가능비연결성(connectionless) 서버와 클라이언트는 연결되어 있지 않습니다. 서버 입장에서는 매번 새로운 요청비연결성으로 인해 최소한의 서버 자원으로 서버를 유지할 수 있게 해줌그러나, 각 사용자별 요청이 잦은 서..

json-server 공식 페이지 ( 이용 시 유용한 정보 많으니 참고 많이 할 것 )https://www.npmjs.com/package/json-server json-server[](https://github.com/typicode/json-server/actions/workflows/node.js.yml). Latest version: 1.0.0-beta.1, last published: 6 days ago. Start using json-server in yowww.npmjs.com  json-server란, 아주 간단한 DB와 A..

slice - 원본 배열을 유지하며 조건을 만족 하는 새로운 배열을 리턴splice - 조건을 만족 하는 새로운 배열을 리턴하는데 원본 배열을 리턴 값을 제외한 배열로 변경 psomise 관련 복습 / 아래는 fake data 사용import { useEffect, useState } from "react";// function App() {//   const [message, setMessage] = useState("타이머 시작");//   useEffect(() => {//     const delay = (ms) => {//       const promise = new Promise((reslove) => {//         setTimeout(reslove, ms);//       });//..

금요일 발표 진행