코딩연습장

1. 문제발생내 로컬환경에서는 마이페이지의 feed가 무한스크롤로 잘 불러와지나, 팀원의 로컬환경에서는 불러와지지 않는 문제2. 원인추론팀원과 나의 json-server 버전이 달라 페이징 데이터 페칭관련 사용법이 달랐음1.0.0버전으로 사용하면 페이지 관련 데이터도 사용이 가능하나, 팀원이 사용하는 0.17.4버전에서는 해당 데이터를 제공해주지 않았음 const getFeedsByPageNum = async ({ queryKey, pageParam = 1 }) => { const userId = localStorage.getItem("userId"); const [_, page] = queryKey; const pageToFetch = page ?? pageParam; const..

오늘은 검색페이지 작업을 진행했다. import styled from "styled-components";import Button from "../components/common/Button";import PostItem from "../components/home/PostItem";import useSearchedMusicContext from "../hooks/useSearchedMusicContext";const Search = () => { const { searchText, handleSearchText, SearchHandle, searchedSongs } = useSearchedMusicContext(); return ( ..

이번 팀프로젝트는 내배캠에서 react로 진행하는 첫 팀프로젝트이다. 우리팀은 노래를 공유하는 사이트를 만들기로 결정하였다.로그인과 회원가입으로 유저정보를 저장하고, 로그인한 사용자에 한하여 게시글 작성같은 인터랙션을 허용한다.게시글은 supabase에 아직 익숙하지않아 영상데이터는 youtube url을 사용하여 iframe으로 보여주기로 하였다.노래마다 게시글제목, 노래제목, 가수명, 어울리는 계절, 해시태그를 입력하여 서버에 데이터를 보내고각 데이터뭉치들을 메인페이지에서 계절마다의 탭으로 나눠 보여준다.각 게시글 카드는 좋아요를 추가할 수 있으며, 좋아요 범위 외를 클릭하면 해당 카드의 상세페이지로 이동하게된다.그리고 로그인, 회원가입을 제외한 모든 페이지에는 Layout컴포넌트를 생성하여 동일한 ..

배포페이지깃허브History APIHistory API는 history 전역 객체를 통해 브라우저 세션 히스토리에 대한 접근을 제공한다. 방문기록을 앞뒤로 탐색하고, 기록 스택의 내용을 조작할 수 있는 메서드와 속성을 제공해준다. pushState(stateObj, title, url)replaceState(stateObj, title, url)pushState는 현재 history 스택에 항목을 새로 추가하는 것이다."1> 2> 3> 4> 5" 의 스택이 있고, 현재 idx가 3에 위치해 있을 때 pushState를 사용하면"1> 2> 3> x" 으로 스택이 변하게 된다.  replaceState는 history스택의 현재위치를 새 항목으로 변경하는 것이다."1> 2> 3> 4> 5"의 스택이 있고, ..

body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; background-color: black; color: white; font-size: 18px;}a { color: inherit; text-decoration: none;}a:hover { text-decoration: underline;}전역적으로 설정되길 원하는 css파일을 생성하고, 작성한다.그리고 해당 css파일을 전역 layout파일에 import하면 모든 페이지에서..

import { useEffect, useState } from "react";export const metadata = { title: "Home",};export default function App() { const [movies, setMovies] = useState(); const getMovies = async () => { const response = await fetch(process.env.MOVIE_GET_URL); const json = await response.json(); setMovies(json); }; useEffect(() => { getMovies(); }, []); return ..

CRA로 생성한 프로젝트는 테스팅 라이브러리가 자동으로 설치되어있다. 또한 기본 App.js를 위한 테스트코드도 한개가 작성되어 있다. 터미널에 npm test를 입력해보자. import { render, screen } from '@testing-library/react';import App from './App';test('renders learn react link', () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument();});render은 안의 컴포넌트를 렌더링하는 함수이다.import logo from "./logo.svg";import "./A..

1. 화면에 뿌려줄 index.html을 생성한다.기존에 리액트에서 화면에 뿌려주듯이 사용하기 위해 root를 id로 갖는 div를 body요소 안에 만들어준다. 2. React, ReactDOM CDN 추가별도의 설치없이 CDN을 import해와 React를 사용할 수 있다. 3. JSX to JS 기존에 컴포넌트를 만들고 해당 컴포넌트를 root div에 할당해 render하는 방식이다.하지만 syntax Error가 출력된다. 이유는 뭘까?우리가 작성한 함수형 컴포넌트 방식은 JSX문법이다. 하지만 바닐라 자바스크립트는 JS를 사용한다.따라서 JSX를 JS로 바꿔주는 과정이 필요하다. 물론 이렇게 사용해도 되지만, 코드작성이 불편하므로 JSX를 JS로..

useEffect는 외부시스템과 컴포넌트를 동기화 할 수 있는 기능이다. 하지만 외부시스템이 관여하지 않는 경우, 우리는 effect가 필요하지 않다.따라서 불필요한  Effect를 제거하여 코드를 직관적이게 바꾸고, 실행 속도가 빨라지며, 의도하지 않은 에러를 방지할 수 있다. props 또는 state에 따라 state 업데이트하기import { useEffect } from "react";import { useState } from "react";const App = () => { const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); const [fullName, set..

https://yozm.wishket.com/magazine/detail/2688/ 알아두면 유용한 ‘리액트’ 개념과 성능 최적화 팁 | 요즘IT리액트는 프론트엔드 개발에서 가장 널리 사용되고 있는 자바스크립트 라이브러리입니다. 컴포넌트 기반 아키텍처와 가상 DOM 등의 개념을 도입하였으며, 여러 글로벌 기업이 리액트를 활용하yozm.wishket.com요즘IT의 알아두면 유용한 리액트개념과 성능 최적화 팁에 대해 정리를 해보고자 한다.  리액트의 기본 개념 1. 컴포넌트 기반 아키텍쳐- 복잡한 UI를 재사용가능한 단위인 컴포넌트로 분할하고, 각 컴포넌트는 상태(State)와 속성(prop)을 가지고 있으며, 독립적으로 작동한다.- 각 컴포넌트는 특정 기능이나 UI를 책임지며, 관심사를 분리하여 개발에 ..