제인의 블로그

https://ajae-gag-final.vercel.app/ 아재슐랭ajae-gag-final.vercel.app배포한 사이트!이제 팀프 끝! 갠프 시작!

참고로 내일도 수정해야하므로 최최종까지 있을 예정 대략 6시간동안 올라간 깃 commit의 양...🥲 이것만 봐도 팀원들의 노고가 보인다 여기까지 구현완료😊 2일동안 왜 이러지 하고 고민햇던 코드가 네비게이션 안에 /ListDetailPage에서 /List로 수정하니까 되어버려딴..🫠 눈이 침침한가봐.... 아픈 팀장뫼시느라 초보팀장 뫼시느라 고생한 울 팀원들 러뷰...❤️간단하게 내일할내용?코드 merge 후 메인브랜치를 dev -> main 으로 변경ReadMe 작성Vercel로 배포하기PPT 완성🤭 발표자료도 완성♡ 뿌듯하다

나 메인페이지 담당 :) 메인 페이지  + AI API 불러오는게 목표!목표 완성!부족한점 : 답이 보인다(머지하면서 뭔가 충돌생긴듯) / 자세히 보기를 누르면 디테일 페이지로 향해야 하지만 답이나옴../개그 작성하기 밑에 여백이 없...눼? 여백 주기 ^_^...내일 반드시 완성해야해 나.... PPT 만들고, 노션정리, 대본만들기 등등이 날 기다리구 있다굿..? 로그인 브랜치랑....... 머지하다가 말아먹었다.....ㅎ....ㅎ.......ㅎ아 관두고싶당...1. 프로젝트 소개React와 Supabase를 활용한 유머 공유 웹 애플리케이션 개발을 진행했습니다. 주요 기능으로는 유머 추천, 사용자 리뷰 카드, 그리고 Supabase와 연동된 데이터 관리 기능이 포함되었습니다. --- 2. 주요 개발 ..

# Styled-Components를 활용한 반응형 React 홈페이지이 프로젝트는 `styled-components`를 사용하여 디자인한 반응형 React 홈페이지입니다. 주제는 "아재슐랭"이라는 리뷰 플랫폼이며, 글로벌 스타일, Hero 섹션, 리뷰 카드 레이아웃, 그리고 푸터까지 모두 `styled-components`로 구현했습니다. 아래에서 주요 구성 요소와 코드를 살펴보겠습니다. 1. 글로벌 스타일 정의`createGlobalStyle`을 활용하여 프로젝트 전반에 적용될 글로벌 스타일을 정의했습니다. 기본 스타일 초기화와 폰트, 색상 등을 설정합니다. ```javascriptimport styled, { createGlobalStyle } from 'styled-components';const..

1. 프로젝트프로젝트 명 : 아재슐랭소개한 줄 정리 : 아재개그를 평가하는 페이지포함할 내용:글 작성 및 수정 페이지담당 기능:새로운 글 작성기존 글 수정 (수정 시 input 필드에 데이터 채움)컴포넌트:Input 폼Submit/Save 버튼DB 연결: Create, Update 요청 처리.로그인/회원가입 및 홈 페이지담당 기능:회원가입: 사용자 데이터 저장로그인: 인증 처리홈 버튼: 로그인/회원가입 완료 후 홈으로 이동DB 연결: 사용자 테이블 연결.글 목록 페이지담당 기능:전체 글 목록 표시페이지/카테고리별 분류DB 연결: Read 요청으로 글 데이터 가져오기.글 디테일 페이지담당 기능:글 세부 내용 표시댓글 목록 표시댓글 작성, 수정, 삭제DB 연결: Read (글 내용, 댓글 데이터 가져오기),..

1. 초보 필수, 창 관리 단축키   - 명령 팔레트 열기 : `Ctrl + Shift + P`      - 파일명으로 열기 : `Ctrl + P`      - 터미널 열기/닫기 : `Ctrl + ``      - 사이드바 토글 : `Ctrl + B`      - 닫은 탭 다시 열기 : `Ctrl + Shift + T`   2. 코드 편집 가속화      - 코드를 위/아래로 이동 : `Alt + ↑ / ↓`      - 주석 처리 : `Ctrl + /`      - 라인 삭제 : `Ctrl + X`      - 한 줄 선택 : `Ctrl + L` (반복 가능) 3. 다중 커서 사용으로 동시 작업   - 동일 단어 연속 선택 : `Ctrl + D`      - 동일 단어 전체 선택 : `Ctrl + Sh..

onAddPokemon이 함수가 아니라는 오류가 발생. 이건 onAddPokemon 함수가 PokemonList 컴포넌트로 올바르게 전달되지 않았거나, 함수가 누락되었을 때 발생 가능.이 문제를 해결하기 위해 PokemonContext를 이용하여 addPokemon 함수를 전달하는 방식으로 수정하기. ```pokemonContext.jsx```import React, { createContext, useContext, useState } from 'react'; const PokemonContext = createContext(); export function PokemonProvider({ children }) {   const [selectedPokemon, setSelectedPokemon] = u..

Q1.  Q2.  Q3. Q4. Q5.   Q6. Q7. styled-components를 사용해 props를 기반으로 스타일을 조건부로 설정하는 예시 코드를 작성해보세요. import styled from 'styled-components'; // 조건부 스타일링이 적용된 Button 컴포넌트 const Button = styled.button`   background-color: ${({ primary }) => (primary ? 'blue' : 'gray')};   color: white;   padding: 10px 20px;   border: none;   border-radius: 5px;   cursor: pointer;      &:hover {     background-color: $..

Batching주요 사례와 사용 방법상태 업데이트(batch state updates):리액트 같은 프레임워크에서는 상태 업데이트가 여러 번 발생할 때마다 각각 렌더링을 하지 않고, 특정 시점에 모아서 한 번에 렌더링하는 방식입니다. 이러면 불필요한 렌더링을 줄여 성능이 좋아집니다.예를 들어, 리액트 18에서는 이벤트 핸들러 내부의 여러 상태 업데이트가 자동으로 배칭되며, ReactDOM.flushSync() 같은 메서드를 통해 강제 동기 업데이트도 가능합니다.이벤트 처리(batch event handling):JavaScript에서 스크롤, 리사이즈 같은 빈번히 발생하는 이벤트는 성능에 큰 영향을 줄 수 있습니다. 이러한 이벤트는 requestAnimationFrame, setTimeout 등을 이용해..