전체 글

드디어 ... 4개월간 길다면 길고 짧다면 짧았던 프로젝트가 끝났습니다 !! 이번 프로젝트는 정말 얻어가는게 많은 프로젝트였습니다. 프로젝트 진행 방식부터 프로젝트 구조나 새로운 기술 도입 등 가장 많은 도전을 했던 프로젝트였습니다. 프로젝트에 대한 자세한 설명은 프로젝트 리드미에 작성해두었습니다. ( 한달 정도는 서버가 열려있기 때문에 만들어진 프로젝트를 사용해보고 싶은 분은 배포 링크를 통해 사용해볼 수 있을 겁니다 !! )https://github.com/baejb/FE GitHub - baejb/FE: 프론트엔드 레포지토리프론트엔드 레포지토리. Contribute to baejb/FE development by creating an account on GitHub.github.com 프로젝트를 통..

https://school.programmers.co.kr/learn/courses/30/lessons/67256 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 설명 스마트폰 전화 키패드의 각 칸에 다음과 같이 숫자들이 적혀 있습니다.이 전화 키패드에서 왼손과 오른손의 엄지손가락만을 이용해서 숫자만을 입력하려고 합니다.맨 처음 왼손 엄지손가락은 * 키패드에 오른손 엄지손가락은 # 키패드 위치에서 시작하며, 엄지손가락을 사용하는 규칙은 다음과 같습니다.엄지손가락은 상하좌우 4가지 방향으로만 이동할 수 있으며 키패드 이동 한 칸은 거리로 1에 해당합니다.왼쪽..

지난 포스트에서는 리액트 쿼리에 대해 작성해보았고 오늘은 실제로 진행중인 프로젝트에 적용한 내용에 대해 작성할 것이다 !  왜 리액트 쿼리를 사용했는가 ? 현재 메인 화면에 진입했을 때 MainLayout.tsx 에 존재하는 네비게이션 바에서 회원 정보를 넘겨주어 네비게이션 바에서 회원 정보를 렌더링 하는 형식으로 코드를 작성했었다.   리액트 쿼리 적용 전 회원 조회 코드  MainLayout.tsxconst { data, callApi, statusCode } = useApi(); useEffect(() => { const fetchData = async () => { const token = localStorage.getItem("accessToken"); const hea..

!!! 프로젝트에 적용하려고 하자마자 에러가 떴다.. 그래서 처음 이유로는 App 을 QueryClient 로 감싸주지 않았다는 이유였는데 하지만 나는 모두 감싸준 상태였다.. import React from "react";import ReactDOM from "react-dom/client";import App from "./App.tsx";import "./index.css";import { BrowserRouter } from "react-router-dom";import { QueryClient, QueryClientProvider } from "@tanstack/react-query";import { ReactQueryDevtools } from "@tanstack/react-query-devt..

오늘은 지난 포스트에서 설명했듯 useQuery와 useMutation에 대해 작성해 볼 것이다. Queries쿼리는 고유 키와 연결된 비동기 데이터 소스에 대한 선언적 의존이다. 쿼리는 서버에서 데이터를 가져오기 위해 Promise 기반 메서드(예: GET 및 POST)를 사용한다. 데이터를 수정하는 메서드에는 Mutations를 사용하는 것이 좋다. 서버에서 데이터를 가져올 때 -> useQuery 데이터를 수정할 때 -> useMutaion  useQuery 사용법 queryKey : 쿼리의 고유 키 , 캐시를 관리하기 위한 키 값으로 배열 형태로 사용 queryFn : promise 를 반환하는 함수  import { useQuery } from '@tanstack/react-query'funct..

오늘 포스트는  Tanstack Query 공식문서를 읽고  Tanstack Query에 대한 개념과 사용방법에 대해 작성해 볼 것이다. 공식문서에 대한 포스트는 양이 많아질 것으로 예상되어 여러 포스트로 작성될 예정이다 !  TanStack Query란?(React Query)TanStack Query( 이전에는 React Query)는 웹 애플리케이션의 데이터 패칭 라이브러리로, 서버 상태를 쉽게 패칭, 캐싱, 동기화 및 업데이트할 수 있도록 해준다.   한마디로 강력한 비동기 상태관리 툴.   공식문서에서는 기존에 존재하는 다른 상태 관리 라이브러리(redux, zustand, recoil..)는 클라이언트 상태를 다루기에는 좋지만, 비동기나 서버 상태를 다루기에는 적합하지 않다고 설명되어 있다. ..

구르미월드를 마무리하고 잠깐의 휴식기간을 가지던 중 백엔드 친구로부터 새 프로젝트 제안을 받게 되었다 ! 초기 아이디어는 모두 정한 상태였고 프론트엔드로 개발에만 참여하면 되는 상황이었기 때문에 흔쾌히 프로젝트에 참여하기로 하였다 !! 바쁘게 살아야 느슨해지지 않을 것 같아서 이번 프로젝트 또한 열심히 참여해야겠다고 다짐했다 !  프로젝트 소개 안녕하세요, 우리 프로젝트는 음악 커뮤니티를 만드는 것을 목표로 하고 있어요. 이 커뮤니티는 리스너들이 음악 앨범에 대한 평가와 코멘트를 남길 수 있는 기능을 제공할 거예요. 이렇게 모은 데이터를 기반으로 통계 대시보드를 제공하여 사용자들이 음악을 더 깊이 있게 탐험하고 공유할 수 있도록 할 거에요. 또한, 커뮤니티 활동을 촉진하기 위해 사용자들의 활동에 대한 수..

오랜만에 프로그래머스로 문제를 풀어보았다!! 요즘 알고리즘 스터디를 하면서 노션에 정리했었는데 이 문제는 스터디에서 다룬 문제가 아니므로 블로그에 작성해보겠다! https://school.programmers.co.kr/learn/courses/30/lessons/250137 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr(문제가 너무 길어 링크로 첨부합니다!) function solution(bandage, health, attacks) { let answer = 0; let attackMap = new Map(attacks); let..

프론트엔드에 대해 공부하면서 단순히 언어에 대한 공부를 해왔었다. javascript 를 어떻게 쓰는게 유용할지 , HTML 을 시멘틱하게 작성하려면 어떻게 해야하는지 , 반응형으로 CSS 적용하기 등 ... 항상 vscode 에서 코드를 실행하고 확장프로그램인 Live server 를 이용해서 크롬으로 바로 결과를 확인하고 "음 .. ! 만족스러운 결과다 "하고 넘어갔었는데 갑자기 브라우저에서 어떻게 내 코드가 변환되어 화면으로 나타나는지에 대한 궁금증이 생겨버렸다 .. !!! 그래서 오늘 포스트는 브라우저의 렌더링 원리에 대해 작성해보고자 한다. 프론트엔드 개발자라면 꼭 알고 있어야할 지식중에 하나라고 생각한다 👍 브라우저 렌더링이란 ? HTML, CSS 및 JavaScript와 같은 웹 페이지의 요..