joycie416 님의 블로그

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 이해이 문제에서 키 포인트는 이름이 같은 의상은 없다는 것이다. 결국 가지고 있는 의상의 종류 마다의 개수를 세서 다 곱한 후에 아무 것도 착용하지 않은 경우를 빼주면 된다. 방법 1아래에 나올 방법 2와 따지고 보면 같은 방법이지만 아직 `reduce` 메소드를 자유롭게 다룰 수 있는 수준은 아니라서 기록해본다. 먼저 말했듯이 언급된 의상을 종류별로 카운트하기만 하면 된다. 늘 했듯이 빈 객체를 만들고 `undefined`가 아니면 +1, `undefined`이면 value가 1이 되도록 key-value..

새로고침 시 유저 정보를 제대로 불러오기 전에 zustand에 저장한 정보를 가져와 사용하는 문제가 있었다. 이전 `MyPage.jsx`를 살펴보면 아래 코드로 시작했다....const MyPage = () => { const { user } = useUserStore(state => state); if (!user) { return } ... 따라서 새로고침하면 `user`의 초기값인 `null`을 사용하게 되므로 메인페이지로 돌아가게 된다. 이 잘못된 로직을 다음과 같이 바꿨다. 먼저 새로고침하면 각 페이지에서 token이 있는지 여부를 확인한다.토큰이 존재하면 일단 해당 페이지에 머무른다.토큰이 만료된 경우 메인페이지로 보낸다.1,2번 과정은 각 페이지의 시작 부분을 아래와 같이 수정..

어제 이야기한대로 `useState`를 사용하지 않고 테스트 결과가 수정된 경우 반영되도록 바꾸었다. 1. `queryClient` 생성하기먼저 `queryClient`를 생성하고 이를 사용할 수 있도록 `Provider`를 아래와 같이 적용해준다. (`main.jsx`나 `App.jsx`에 하면 된다. 나는 `main.jsx`에 했다.)import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import App from './App.jsx'import './index.css'import { QueryClient, QueryClientProvider } from '@tanstack/react-query'const quer..

지금은 mbti 테스트를 제공하는 사이트를 만들고 있다. 현재까지 진행상황을 정리하려고 한다. 1. 회원가입/로그인 구현정상적으로 값들이 입력된 경우 회원가입/로그인 기능이 잘 구현되지만, 잘못된 경우 경고 문구를 띄우고 싶었다. 프로젝트에서 사용하는 서버에서 `axios`에러가 나면 에러 문구도 전달해주는 것으로 알고 있는데 전달이 안되는 어려움을 겪었다. 아래는 에러 문구가 전달되지 않는 초기 코드이다. (여기서 `api`는 `axios`를 이용한 커스텀 인스턴스이다.)export const register = async (userData) => { try { const response = await api.post(`/register`, userData); return response...

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 이해서로 다른 세 가지 괄호가 올바르게 정렬되어야 한다. 괄호가 한 종류만 있는 문제와 달리 다른 종류의 괄호를 어떻게 처리할 것인가 고민해봐야 한다.한 종류만 있는 경우 `(`을 `1`과 대응하고 `)`을 `-1`과 대응시켜 중간에 합이 음수가 되지 않도록하면 됐지만 이번에는 괄호가 여러 종류가 있어 다른 접근방법을 생각해봐야 한다. 방법 1 - 숫자와 대응하기위에 이야기한 것처럼 숫자와 대응시켜보았다. 문자열의 길이가 최대 1000이므로 1000배씩 차이나면 겹치치 않을 것이라 생각해 `( - 1, { ..

지난주 수요일부터 오늘 오전까지 뉴스피드 프로젝트를 진행했다. 나는 게시글을 supabase에 올리고 게시글을 수정하는 기능을 메인으로 맡았다. 또한 이를 구현한 후에 메인페이지 최신글 영역에 캐러셀을 적용하고 전체/카테고리별 게시글을 나열하는 것을 맡았고 마지막으로 게시글 상세페이지에 사진 캐러셀과 좋아요 기능을 추가했다. 직전 게시글은 css를 적절히 적용할 때 필요한 사항이었다. 또한 supabase도 이번 프로젝트의 백엔드 대신 사용했기 때문에 정리해두었다. 다른 팀원들도 내가 작성한 로직을 차용했다. 가장 먼저 든 생각은.. 로그인/회원가입을 맡은 분을 제외하고 가장 많은 기능을 구현해서 뿌듯했다. 로그인/회원가입은 아직 건들기 무서웠는데, 나서서 하겠다는 분이 계셨고, 그분은 기능 추가에 욕심..

이번 팀 프로젝트에서 헤더를 상단 고정하려고 fixed를 사용하니 크기가 부모 컴포넌트의 width가 아닌, browser의 width가 되는 것을 확인했다. 또한 가로 스크롤을 하면 같이 스크롤되지 않는 문제점이 발생했다. 전부터 해결하고 싶었던 내용인데, 오늘 해결하게 되어 정리하고 씻으러 가려고 한다. `position: fixed` 와 `width: inherit`위에서 말했듯이 `width: 100%`를 사용하면 브라우저의 전체 width가 된다. 부모 컴포넌트의 width를 사용하고 싶다면 `width: inherit`을 사용하면 된다. 여태 `inherit`은 언제 사용하는 것인지 궁금했는데, 이럴 때 쓰는 것이었다.`로그인|회원가입`을 회색 라인 밖으로 나가지 않게 하고싶었는데, 브라우저의..

이미 supabase Docs에서 친절하게 설명해주고 있지만 정리해보려고 한다. Table데이터 저장하기먼저 Table에 데이터를 추가하려면 아래와 같이 코드를 작성하면 된다. const addData = async (post) => { const { error } = await supabase.from().insert(); if (error) { throw error; } else { console.log("add data succeed"); } }; 데이터 불러오기아래 코드는 첫 렌더링 후에만 불러와야하는 과정 중에 있다고 가정했을 때의 코드이다. 따라서 `useEffect`를 사용하고 의존성 배열(dependency array)을 아래와 같이 작성했다. ..

컴포넌트를 통해서만 prop이 전달되는 줄 알았는데, 이야기하다보니 `useNavigate`를 통해서도 prop을 전달할 수 있을 것 같아 검색해보니 가능한 일이었다! import { useNavigate } from 'react-router-dom';const CurrentPage () => { ... const navigate = useNavigate(); navigate('/otherpage',{state:}) ...} 위 코드처럼 하면 `react-router-dom`에 의해 연결된 component에서 `useLocation`을 이용해서 prop을 받을 수 있다.예를 들어 `name`과 `year`를 prop으로 넘기고 싶다면 아래와 같이 작성하면 된다.navigate('/otherpag..

문제 이해문제를 풀고 보니 제한 조건의 '공백문자가 연속될 수 있다'라는 조건이 중요하다는 것을 알았다. 다른 내용은 설명처럼 공백 기준 첫글자만 대문자여야한다는 것이다.  내 풀이function solution(s) { var answer = s.toLowerCase().split(' '); for(const idx in answer) { if (!answer[idx]) { continue; } answer[idx] = answer[idx][0].toUpperCase() + answer[idx].slice(1); } return answer.join(' ');}나는 보통 문제에서 설명한 그대로를 코드로 작성하는 편이다. 그래서 모두 소문자로 바꾼 후 공백을 기준으로 `s..