본문 바로가기

전체 글402

로그인 하지 않은 상태에서는 헤더가 렌더링 되지 않게 조건부 렌더링 설정하기 헤더를 라우팅하는 컴포넌트에서 아래와 같이 설정해주면 된다.  useLocation 훅 import 하기import { useLocation } from "react-router-dom"; 로그인 되어 있지 않으면 로그인 페이지로 이동시키기const location = useLocation();const isLoginPage = location.pathname === "/login";...return ( {!isLoginPage && } ); Programing/React 2024. 6. 14.
마우스 호버 시 살짝 커지는 CSS /* 필요한 CSS를 작성하고 아래 속성을 이어 붙인다 */transition: transform 0.3s ease-in-out;&:hover { transform: scale(1.2);} Programing/CSS 2024. 6. 14.
2024-06-14 프로젝트 관리 중인 데이터를 json-server로 RESTful하게 리팩토링 하기 상황현재 본인의 프로젝트는 App 컴포넌트에서 expeness라는 상태를 만들고 여기에 json 형태의 데이터를 입력하여 이를 컴포넌트에 props를 내려 디테일 페이지에서 렌더링 하고 있다.function App() { const [expenses, setExpenses] = useState([ { id: "59454ecd-0f61-422a-89d9-3213915343f2", month: 1, date: "2024-01-05", item: "식비", amount: 100000, description: "세광양대창", }, { id: "4f60bace-03dc-458d-b0dc-d89ada034b29", month:.. Programing/TIL 2024. 6. 14.
TanStack Query 기본 사용법 TanStack Query란?HTTP 요청을 할 때 서버에서 응답 받은 내용을 가공해서 별도의 상태를 만들 필요 없이 곧바로 사용이 가능하게 해주는 라이브러리이다.기본 코드 스니펫import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider,} from '@tanstack/react-query'import { getTodos, postTodo } from '../my-api'// Create a clientconst queryClient = new QueryClient()function App() { return ( // Provide the client to your App )}.. Programing/React 2024. 6. 14.
2024-06-13 axios, json-server, TanStack Query - RESTful axiosaxios의 장점1. 요청/응답 시 json 데이터 형식을 기본으로 함 (vs fetch API)axios는 요청을 보낼 때 자동으로 JSON 형식을 사용함. fetch API에서는 이 작업을 하려면 수동으로 해주어야 함.예를 들어 아래는 같은 작업임.// axiosaxios.post('/api/data', { key: 'value' }).then(response => { console.log(response.data);})// fetch APIfetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })}).then(res.. Programing/TIL 2024. 6. 13.
2024-06-12 프론트 엔드 학습 가이드(로드맵) 들어가며본 내용은 내일배움캠프 프론트 엔드 학습 가이드 특강을 듣고 정리한 내용이다.나중에 내가 길을 잃고 방황할 때 들여다 보고자 복기 메모를 한다. 지금 절반 정도 달려온 것 같은데, 짧은 기간 배워야 하는 양이 많다 보니 배운 것들도 휘발되어 버리고 그러다 보면 답답함이 느껴지기도 한다. 이는 나 뿐만의 고충이 아니라 함께 하는 모든 수강생의 고민인 것 같다. 그렇게 모두가 고민을 하고 있는 중 웹 프론트 엔드 학습에 대한 로드맵을 제시해주는 특강이 열러 어느 정도 답답함이 해소된 것 같다. 우리가 뭘 하고 있는 것인가?이는 내가 어떤 일을 할 때 가장 중요하게 생각하는 관점이다. 아내에게도 매일 가르치듯 이야기하는 것이 지금 본인이 무슨 일을 하고 있는 건지 설명할 수 있냐라는 말이다. 내가 무슨.. Programing/TIL 2024. 6. 12.
2024-06-11 JWT 회원가입 인증/인가 실습하기 토큰 기반 인증 원리 이해하기 (Thunder Client)아래는 Thunder Client라는 VSCode extension과 미리 준비된 회원 관리 백엔드 API로 토큰 기반 인증의 원리를 실습해보며 이해하는 과정이다.굳이 이해할 필요가 없다면 생략하고 다음 과정으로 넘어가도 좋다.1. Thunder Client 설치VSCode extension에서 Thunder Client를 설치한다.2. Thunder Client 실행좌측 하단에 생긴 Thunder Client 메뉴에서 New Request를 누른다.아래와 같은 화면이 보인다.3. POST 요청 보내기 (회원가입)아래는 회원가입 API 명세서이다.API URL : https://moneyfulpublicpolicy.co.krMethod : POS.. Programing/TIL 2024. 6. 11.
2024-06-10 헤더 만들기 (styled-components) 상황사진은 헤더를 완성한 모습이지만, 헤더를 완성했을 때 메인 영역이 가운데로 좌우 여백을 균등하게 주고 몰려있는 것을 볼 수 있듯, 헤더도 사이즈가 고정이 되어버린다.  헤더는 좌우 여백없이 전체적으로 꽉 채우고 싶고, 위 사진처럼 브라우저를 축소하더라도 헤더의 영역은 고정되어 풀리지 않게 하고 싶다. 해결1. 개발자 도구를 열어 어디에서 메인의 사이즈를 제한하고 있는지 확인한다.본인의 경우에는 root에 max-width 속성으로 1280px으러 너비를 제한하고 있고, margin: 0 auto; 속성으로 가운데 정렬을 하고 있음이 확인되었다.이 상태에서 헤더를 만들어도 root 자체가 1280px로 고정되어 있기 때문에 헤더도 영향을 받아 가운데로 몰리게 된다. 2. root의 너비 제한을 풀고, .. Programing/TIL 2024. 6. 11.
시가 될 이야기 Hobby/Guitar 2024. 6. 8.
2024-06-07 팀 프로젝트 회고 이번 팀 프로젝트에서는 발표를 맡았다. 나의 발표 대본을 함께 올려본다.배포주소 Our Knowledge our-knowledge-teamproject.vercel.app 발표시작안녕하세요, A10조 발표를 시작하겠습니다.저는 발표를 맡은 김병준입니다.발표 순서를 말씀드리겠습니다.발표 순서는 먼저 이번 프로젝트에 힘써주신 팀원분들을 소개하는 것을 시작하겠습니다.그 다음 결과보고서를 함께 보며 프로젝트에 대해 간단히 소개해드리고,웹 사이트를 직접 시연하며 구현한 기능에 대해서 소개해드린 후,소감을 발표하며 마무리하겠습니다.팀 소개화면: 2. 프로젝트 팀 구성 및 역할본격적인 발표에 앞서 잠도 못자고 고생해주신 저희 팀을 소개하겠습니다.먼저 김재훈 팀장님이 프로젝트 셋업과 홈 뉴스피드 제작을 맡아주셨습니다... Programing/TIL 2024. 6. 7.

티스토리툴바