🥞 오늘 한 일
- 리액트 심화 개인과제
- 제출 완료
- 지출 작성한 본인만 수정, 삭제 가능한 기능 추가
- 지출 그래프 기능 이번 프로젝트에서도 되도록 변경
- 프로필 사진 미변경 시 빈 이미지 나오는 문제 해결
- 일부 파일 tailwind로 css 리팩토링 진행
- 프로젝트 vercel 배포
- json-server glitch 배포
- 리액트 심화 강의
- 1-21 tailwind 수강
- 아웃소싱 프로젝트
- 사용 스택 및 컨벤션 지정
- 알고리즘 타임어택 풀이
- Flux 및 Atom 패턴 세션
🍽️ 문제 해결
리액트 심화 개인과제
프로필 사진 미변경 시 빈 이미지 나오는 문제
마이 페이지에서 프로필 사진을 변경하지 않고 프로필 변경 버튼을 누르면, 기존의 프로필 사진이 갑자기 사라지는 현상이 발생했다. 새로고침을 하면 다시 받아오긴 했으나, 기존의 프로필 사진이 계속 유지되어야하기 때문에 해결을 해보았다.
// MyPage.jsx
const handleProfileChange = async (e) => {
e.preventDefault();
if (newNickname.length < 1 || 10 < newNickname.length) {
alert("닉네임은 1~10 글자로 입력해주세요.");
return;
}
const formData = new FormData();
formData.append("avatar", newAvatar);
formData.append("nickname", newNickname);
const response = await updateProfile(formData);
if (response.success) {
setUser({
...user,
nickname: response.nickname,
avatar: response.avatar,
});
navigate("/");
}
};이 함수는 프로필을 변경하는 버튼을 눌렀을 때 실행되는 함수이다. 처음에는 닉네임에 대한 유효성 검사를 하고, formData를 제작해 따로 만들어준 updateProfile 함수를 통해 axios를 사용하여 서버로 보내주는 방식을 사용했다.
response에 success가 포함되어 있다면(성공했다면), 받아온 nickname과 avatar를 새롭게 user(전역 상태 관리 중인 로그인 된 유저 정보)에 넣어주는 방식을 사용했다.
가설 1,2
처음에는 response가 관건일지 모르고, 프로필 사진 변경이 없다면 formData에 append 자체를 하지 않는 방식을 해보거나, 미리 newAvatar에 현재 프로필 사진 경로를 넣는 방식도 사용해보았다.
가설 3
그러나 어떤 방식도 통하지 않아, 다시 한 번 response를 console로 찍어보고, 코드를 찬찬히 살펴보았다. 그러다 한 가지 사실을 알 수 있었는데, response는 nickname과 달리 avatar가 변경되지 않았거나 추가되지 않았을 경우 avatar 자체를 반환하지 않는다. 때문에 response.avatar로 지정을 하려고 해도 애초에 없던 값이었던 것. 그렇기 때문에 기존 값을 넣어도, 아예 아무것도 append하지 않아도 avatar는 값이 없어, 보여줄 이미지가 없는 거였다. 때문에 나는 삼항 연산자를 사용하면 간단하게 문제를 해결할 수 있지 않을까? 하는 생각을 했다.
해결
// MyPage.jsx
setUser(
response.avatar
? { ...user, nickname: response.nickname, avatar: response.avatar }
: { ...user, nickname: response.nickname }
);response에 avatar가 있을 때만 user에 avatar까지 변경해주고, 없을 경우 nickname만 변경한다.
이렇게 코드를 변경하니 프로필 사진 미변경 시에도 기존 프로필이 잘 나오게 되었다. 문제가 해결되었다.
vercel 배포 404 오류 해결
오늘 vercel 배포 후 동기 분들과 서로의 vercel app에서 오류를 확인해보는 시간을 가졌는데, 한 분이 배포 오류가 난다면서, 그 사실과 동시에 해결법을 알려주셨다. 오류는 새로고침을 하거나 어떤 경우에는 아예 페이지를 처음 들어갔을 때부터 404 오류가 나는 오류였다. 파일 하나를 root 경로에 추가하면 된다고 하셔서 일단 추가하고 해결을 했다. 해당 파일은 간단한 파일이었다.
// vercel.json
{
"routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}이 파일을 추가하고 나니, 더 이상 404 오류가 뜨지 않았다.
일단 해결 후, 왜 이런 오류가 떴는지에 대해 알아보았다. index가 아닌 하위 url로 접근했을 경우, vercel은 해당 url을 처리하는 방법을 모른다. SPA의 라우팅 처리가 아닌 해당 리소스를 찾으려고 하기 때문에 404 에러가 발생한다. 때문에 vercel에 내 spa 앱의 인덱스 경로를 설정해주면 된다고 한다.
간단한 문제였지만 앞으로도 많이 쓰게 될 중요한 부분이라 TIL에 남겨둔다.
알고리즘 타임어택
문제 정의:주어진 문자열에서 특정 문자의 출현 횟수를 계산하시오.
조건:꼭 재귀함수(Recursion) 형식으로 해답을 작성해야 합니다.
function countOccurrences(str, char) {
// 주어진 str 내 문자를 앞에서부터 하나씩 빼면서, 해당 문자가 char과 같은지 확인하고 같다면 1을 더하고 아니라면 그냥 return한다.
// str의 길이가 0일 경우 더 이상 찾을 숫자가 없기 때문에 0을 반환한다.
if (str.length === 0) return 0;
// 가져온 str을 배열로 만들어준다.
const arr = [...str];
// 해당 배열의 첫번째 문자를 가져온다.
const el = arr.splice(0, 1);
// 만약 첫번째 문자가 char과 같다면,
if (el[0] === char) {
// char의 출현 횟수가 한 번 늘어났기 때문에 1을 더해서 return해준다.
return +countOccurrences(arr, char) + 1;
}
// 그렇지 않다면 char의 출현이 아니므로 1을 더하지 않고 다음 재귀함수로 넘어간다.
return +countOccurrences(arr, char);
}🍪 배운 것
리액트 심화 강의
- tailwind
🍴 돌아보기
걱정을 많이 했지만 무사히 리액트 심화 개인과제가 끝나서 다행이다. 아쉬운 부분도 분명 여러 곳에 있지만, 필수 구현 사항을 잘 해서 제출한 것만으로도 만족하기로! 주말에는 못 들은 강의들을 듣고, 다음 주에 있을 아웃소싱 프로젝트를 기다리며 힐링(?)해야겠다!
🍳 내일 할 일
- 리액트 심화 강의 수강
