해말그미의 코딩공부

tailwind 설치npx tailwindcss init -p tailwind 설정tailwind.config.js에 아래와 같이/** @type {import('tailwindcss').Config} */module.exports = { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [],} index.css 파일에 아래와 같이/* index.css */@tailwind base;@tailwind components;@tailwind utilities;tailwind 공식 문서 https://tailwindcss.com/ Tailwind CSS - Rapidl..

🌹생각이번에 기술면접을 준비하면서 느낀 점은, 기초가 제대로 안 잡혀 있는 듯한 느낌이 들었다. 아예 대답 못할 것 같은 것들도 많았고, 알고 있는 것들도 말로 표현 못하겠고... 코드를 짜고 뭔가를 만들어 내는 게 중요하지 않을까 했었는데, 이론을 제대로 알지 못하고 쓰니 어떤 상황에서 어떤 문법을 써야 하는지 제대로 생각해내지 못하는 것 같았다. 그래서 리액트 문서를 보면서 다시 기초를 제대로 잡고, 추가적으로 공부를 진행하려고 한다!! 이 글은 리액트 문서와 블로그 등 정리한 것을 기록하고 연습해 본 글입니다~! 🌹목록- 컴포넌트 생성 및 중첩하기 - JSX로 마크업 작성하기  - 스타일 추가하기 - 데이터 표시하기  - 조건부 렌더링 - 리스트 렌더링하기  - 이벤트에 응답하기  - 화면업데이..

🌼 리액트 쿼리 설정먼저 @tanstack/react-query와 devtools를 설치해 준다. devtools는 선택사항이며 devtools을 사용하면 패칭 한 데이터를 쉽게 관리할 수 있다. npm install @tanstack/react-querynpm install @tanstack/react-query-devtools React Query의 상태 관리와 데이터 fetching 기능을 애플리케이션 전체에서 사용할 수 있도록 하기 위해서QueryClientProvider로 최상위 컴포넌트를 감싼다.devtools는 최상위 컴포넌트에 최대한 가까운 위치로 배치해주면 된다. import "./App.css";import { QueryClient, QueryClientProvider } from "..

🌼 채널 프로필 사진 가져오기  게시자(채널)의 프로필 사진은 동영상 데이터에 포함되어 있지 않기 때문에, 채널 정보를 따로 요청해야 한다. 게시자 프로필 사진 가져오는 방법**video.snippet.channelId**로 게시자(채널)의 ID를 가져옵니다.예: UC_x5XG1OV2P6uZZ5FSM9TtwchannelId를 사용해 channels 리소스를 요청하면, 해당 채널의 정보를 가져올 수 있다.여기서 **snippet.thumbnails.high.url**을 통해 채널 프로필 사진을 얻는다.  YouTube Data API로 동영상 데이터를 요청하고 channelId를 가져올 수 있는데 까지는 했다. 그다음은 채널 API로 프로필 사진 요청을 해야 한다.  🌼  1. axios 클라이언트 설..

//youtubeApi.tsximport axios from "axios";const apiClient = axios.create({ baseURL: "https://youtube.googleapis.com/youtube/v3",});export const petsVideos = async () => { try { const response = await apiClient.get("videos", { params: { part: "snippet", chart: "mostPopular", maxResults: "16", regionCode: "KR", videoCategoryId: "15", key: import...

🌼 process is not defined error 문제//.envREACT_APP_API_KEY=키 입력//.youtubeApi.tsxconsole.log("API Key:", process.env.VITE_REACT_APP_API_KEY);원인 VITE + React + TS에서는 환경 변수를 가져올 때 process.env.REACT_APP_API_KEY가 아닌 import.meta.env.VITE_REACT_APP_API_KEY 형식을 사용해야 한다.해결//.envVITE_REACT_APP_API_KEY=키 입력//.youtubeApi.tsxconsole.log("API Key:", import.meta.env.VITE_REACT_APP_API_KEY); 👉Vite를 사용 중이라면 VITE..

🌼 youtube APIYouTube의 iframe API를 활용하여 여러 동영상을 특정 조건에 맞게 동적으로 재생하고 조작할 수 있도록 구현한 함수전체 코드export function YoutubeApi(video){ const tag = document.createElement('script'); tag.src ="https://www.youtube.com/iframe_api"; const firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; win..

🌼 풀이function solution(age) { return age .toString() .split("") .map((v) => "abcdefghij"[v]) .join("");} age.toString() : 문자열로 변환. 예를들어, age가 23 이면 문자열 "23".split("") : 각 문자로 나눠 배열로 만든다. "23"은 ["2","3"].map((v) => "abcdefghij"[v]) ; 문자열 자체도 인덱스[]로 접근 가능한 것을 기억해야 한다. ["c","d"]를 반환한다..join(""): 배열 사이사이가 다 붙어서 하나의 문자열로 만든다 "cd" 🌼 다른 풀이 function solution(age) { let char = 'abcdefghi..

🌼 SPA( Single Page Application )에서 History API 라우팅을 많이 쓰는 이유? 1. SEO에 유리 - 해시(#)이 포함되지 않기 때문에 깔끔한 URL 구조를 제공할 수 있고, SEO 최적화에 도움이 된다.2. SPA에 최적화 - 새로고침하지 않고도 URL을 동적으로 변경할 수 있으며, 브라우저의 "뒤로 가기" 및 "앞으로 가기" 버튼도 자연스럽게 작동한다. 3. 프레임워크와 호환성 - React의 react-router-dom, Vue의 vue-router 같은 라우팅 라이브러리들이 History API를 기본적으로 지원한다. 이를 통해 복잡한 라우팅을 쉽게 구현할 수 있고, 관리도 용이하다. 🌼 HTML 코드 ♥ ..

🌼 display와 visibilitydisplay와 visibility는 HTML 요소를 화면에 표시하거나 감출 때 사용하는 속성이지만, 두 속성에는 중요한 차이점들이 있다. display display: none은 요소를 완전히 숨긴다. 이 상태에서는 해당 요소가 페이지의 레이아웃에서 아예 제외된다. 즉, 공간을 차지하지 않으며, 마치 그 요소가 존재하지 않는 것처럼 동작한다.반대로 display: block, display: inline 등으로 설정하면 해당 요소가 다시 레이아웃에 포함되어 공간을 차지하고 보이게 된다. 👉 display는 요소를 다시 보이게 만들 때마다 브라우저가 해당 요소의 위치와 레이아웃을 재계산해야 하므로 성능적으로 부담이 될 수 있다. 특히 복잡한 레이아웃일수록 레이아웃..