joycie416 님의 블로그

지난주 수요일부터 오늘 오전까지 뉴스피드 프로젝트를 진행했다. 나는 게시글을 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..

이번에는 지난주에 예고한대로 `useContext` hook과 `memoization`에 대해 살펴보려고 한다. 1. `useContext`React context의 필요성useContext를 사용하기 전에는 prop을 부모 컴포넌트에서 자식 컴포넌트로 전달해주며 데이터를 전달했다. 하지만 중간 컴포넌트에서 해당 데이터가 불필요한 경우도 많을 것이고 컴포넌트 사이의 거리가 아주 멀면 prop drilling이 발생할 것이다. Prop drilling이 발생하면 다음과 같은 문제점이 생긴다.깊이가 너무 깊어지면 어떤 컴포넌트로부터 전달된 prop인지 파악하기 어려움어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어 대처가 늦어짐이 때 `useContext` hook, 즉 context API를 통해 쉽게 ..

오늘은 `Redux Toolkit`(`rtk`)의 아주 기초적인 사용법에 대해 정리해보려고 한다. 지난번 Redux 기본 사용법에서는 initial state, action value, action creator, reducer를 직접 작성해주어야 했는데, `rtk`에서는 action value를 별도로 작성하지 않아도 된다. 큰 틀은 redux과 크게 다르지 않지만 세부적인 부분에서 차이점이 있다. Redux Toolkit 사용 기초기본 설정먼저 아래 명령어를 실행해 rtk를 설치해주자.yarn add react-redux @reduxjs/toolkit 이후 `src`폴더에 `redux`폴더를 만든 후 `config` 폴더와 `slices` 폴더를 만들자.먼저 `config/configStore.js`..

전 프로젝트에서도 경험했지만, 부모 요소에 클릭 이벤트를 적용하고 자식 요소에도 클릭 이벤트를 적용하면, 부모 요소의 이벤트가 적용되는 문제점이 있었다. 이를 해결하는 방법을 찾아 정리하려고 한다. `Event.stopPropagation()`현재 이벤트가 버블링 단계에서 더 이상 전파(propagate)되지 않도록 막아준다. 아래 코드를 실행해보면 자식 요소를 클릭해도 '부모 요소 클릭' 알림창이 뜨는 것을 확인할 수 있다. {alert('부모 요소 클릭')}}> {alert('자식 요소 클릭')}} />  이때 자식 요소 onclick을 아래와 같이 수정하면 자식 요소를 클릭했을 때 '자식 요소 클릭' 알림창이 뜨는 것을 확인할 수 있다. {alert('부모 요소 클릭')}}> ..

프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제 이해이 문제에서는 조건문 사용이 관건인 것 같다. 또한 네 가지 방향을 어떻게 단순하게 정리할 수 있는지도 학습 목표 중에 하나인 것 같다.현재 살펴보고 있는 위치를 저장하는 변수를 `curPos = [r, c]`, 행과 열의 개수를 나타내는 변수를 각각 `rows`와 `cols`라고 하자. 과정1 - 진행할 것인지 결정하는 조건문해당 진행 방향을 선택할지 말지에 관한 조건에 부합하는지 확인하는 방법은 여러 가지가 있을 것이다. 그 중 가장 기초적인 방법은 index가 공원을 벗어나는지 판단하는 것이다.if ..

`useContext`, `useMemo`를 다루기로 했는데, 헷갈려서 까먹기 전에 redux 기본 사용법을 정리하려고 한다. Redux왜 redux를 사용할까?`useState`만 사용하여 state를 관리하려면 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 공유해야 했다. 그러면 몇 단계 하위 컴포넌트에서 사용하려면 불필요한 props도 계속 전달해줘야 하는 불편함이 있다. 이처럼 props를 계속 아래로 아래로 내려보내는 것을 prop drilling이라고 한다. Prop drilling을 해결하는 하나의 방법으로 redux를 사용할 수 있다. Redux를 사용하면 state를 공유하기 위해 부모-자식 컴포넌트 관계를 유지하지 않아도 된다. 앞으로 `useState`를 사용해 특정 컴포넌트에서..