전체 글

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와 같은 웹 페이지의 요..

드디어 약 2달동안 진행했던 '구르미 월드' 개발을 끝마쳤다 .. ! 계획은 약 1달 반 동안 진행하려고 했지만 개발을 하면서 점점 욕심이 생기고 기능들을 추가하고 수정하느라 시간이 좀 더 걸렸던 것 같다. 물론 프로젝트에만 매진한 것도 아니기도 했고 다른 것도 하면서 진행하느라 좀 더 늦춰진 거 같긴하다 . 사실 취업준비를 하면서 지금 새 프로젝트를 시작하는게 맞을까 ? 하는 고민도 있었지만 하길 잘했다 느꼈다. 리액트를 주로 사용하긴 하는데 시간이 지나면 기본적인 것도 헷갈리고 헤맸던 부분도 있었는데 이번 프로젝트를 통해 리액트에 대한 기반을 다질 수 있었고 백엔드와 원할하게 소통하는 방법을 익힐 수 있었다. 바로 전 프로젝트에서는 백엔드 분들과 협업할 때 백엔드 분들이 사용하시는 용어들을 이해하지 ..