차곡차곡 쌓기 차곡차곡 쌓기

1.개요 이번 원티드 프리온보딩 인턴십 사전과제에서 redirect 요구사항을 어떻게 구현할지 고민을 하게 되었습니다. 이에 대해 검색을 하다가 좋은 글을 찾아서 해답을 얻을 수 있었습니다. 2. Redirect? 사용자를 한 URL (사용자가 클릭하거나 입력한 URL)에서 다른 URL(새로운 목적지)로 보내는 것을 의미. Redirect가 중요한 이유 이전 URL이 더 이상 존재하지 않을 때 다른 URL로 트래픽 전달 이전 페이지에서 링크된 백링크가 새 페이지로 이동할 때 권한을 전달 404 페이지나 중복된 페이지에 대한 방문을 방지하여 전반적인 사용자 경험 개선 사전 과제에서는 token의 유무에 따라 Redirect 처리를 하라고 되어 있었습니다. 보통, 존재하지 않는 URL에 접근해 404페이지가..

프로그래머스 레벨 1 시저 암호를 풀면서 이에 대한 개념이 필요한 일이 생겼다. 아스키 코드란? 영문 알파벳을 사용하는 대표적인 문자 인코딩이다. 아스키는 컴퓨터와 통신 장비를 비롯한 문자를 사용하는 많은 장치에서 사용되며, 대부분의 문자 인코딩이 아스키에 기초를 두고 있다. 아스키는 7비트 인코딩으로, 33개의 출력 불가능한 제어 문자들과 공백을 비롯한 95개의 출력 가능한 문자들로 총128개로 이루어진다. 제어 문자들은 역사적인 이유로 남아 있으며 대부분은 더 이상 사용되지 않는다. 출력 가능한 문자들은 52개의 영문 알파벳 대소문자와, 10개의 숫자, 32개의 특수 문자, 그리고 하나의 공백 문자로 이루어진다. https://ko.wikipedia.org/wiki/ASCII 에 들어가보면 출력 가능..

1. 커스텀 Hook? 말 그대로 내가 커스텀해서 쓰는 Hook인데, Hook은 재사용 가능한 기능을 말한다. Custom Hooks는 use로 시작해야 한다. ex. useFetch 2. 커스텀 Hook 만드는 법 use이름 으로 만들어진 파일 안에서 useState, useEffect, useReducer, useCallback 등 Hooks를 사용하여 원하는 기능을 구현해주고 컴포넌트에서 사용하고 싶은 값을 반환해주면 된다. 3. 활용해보기 여러개의 함수를 제어해 바뀔 때마다 State에 저장하는 함수가 join, login, payment, editproduct 페이지에서 사용이 되고 있었다. 이걸 커스텀 Hook으로 빼주면 좋겠다는 생각을 했다. 우선 원래 코드는 이렇다. 네 개의 페이지 모두 ..

노마드 코더 Zoom 클론 코딩 전 사전 준비로 미리 알아본 것 정리한 것 입니다. 심화적인 내용보다는 아주 간단히 기초적인 부분만 정리 했습니다. 자세한 내용은 참고한 링크를 클릭하시면 자세히 보실 수 있습니다. 강의 들을 때 더 필요한 부분이 있으면 추가할 예정입니다. 1. Express 웹 및 모바일 애플리케이션을 위한 강력한 기능 세트를 제공하는 최소한의 유연한 Node.js 웹 애플리케이션 프레임워크 ⚙ 사용 방법 이미 Node.js를 설치했다고 가정 애플리케이션을 보관할 디렉토리를 만들고 작업 디렉토리로 만들기 npm init 대화형 프로세스를 거치지 않고 빈 npm 프로젝트 생성 -y 는 yes를 나타냄. 👇 npm init -y npm init을 통해 package.json 생성 애플리케이..

1. 문제 상황 타 계정으로 로그인 시 전의 장바구니 목록이 처음에 렌더링 되었다가 새로고침 후 현재 계정 장바구니 정보를 가져옴 처음에는 useEffect나 useState에 문제가 있는 줄 알고 해당 부분에 대해 검색해보고 이것 저것 시도해보았으나 전부 실패했다. (정말 많은 시간을 할애함..) 혹시나 싶어서 내가 만든 axios 커스텀 hook 인 *instance를 살펴봤다. *instance.js : 서버와 통신할 때의 baseURL 과 headers에 로그인 토큰을 가져와 설정해둔 hook 로그인 토큰을 로컬스토리지에 저장했었는데, 맨 처음에 렌더링 될 때 토큰이 개발자 도구에 뜨지 않는 것을 보고 아 문제는 axios 커스텀 hook 에서 생겼구나 싶었다. 뭔가 윤곽이 잡히는 것 같아 신나는..

현재 진행하는 개인 프로젝트인 오픈 마켓에서 회원가입 부분의 유효성 검사 및 form관리를 보다 원활하게 하기 위해서 useForm을 사용해보기로 하였다. 처음에 그냥 다른 분들이 사용하신 예시 코드를 보고 무작정 따라해봤는데 당연히 이해가 너무 부족해 에러의 늪에 빠졌었다. 우선, 내게 필요한 부분이 무엇인지 파악하여 해당 내용을 찾아보려고 했다. ✅ 유효성 검사 ✅ requried ✅ form에 에러가 있는 상태 & form에 아무런 에러도 없는 상태 ✅ 유효성 검사는 어느 시점에 행해질건지 ( 나는 onBlur 상황에 행해지길 원했다) 등등 이 있었다. 자 그럼 이렇게 알아두고 본격적으로 필요한 부분만 공식 사이트에서 찾아서 해보자! 1. 우선 react-hook-form을 깔아준다. npm ins..

1. 간단한 소개 navigate(to, { state={}, replace=false }) 특정 이벤트 후에 페이지를 이동하고 싶을 때 사용한다. ex. form 제출 시 사용 예시 import { useNavigate } from "react-router-dom"; function useLogoutTimer() { const userIsInactive = useFakeInactiveUser(); const navigate = useNavigate(); useEffect(() => { if (userIsInactive) { fake.logout(); navigate("/session-timed-out"); } }, [userIsInactive]); } 먼저 useNavigate를 import 해온 뒤 ..

1. 문제 상황 axios.delete로 서버와 통신이 성공했는데 화면에서 바로 적용이 되지 않는 현상을 발견했다. 이 때 status를 살펴보니 204 status였다. 204 status는 어떤 상태를 말하는걸까? 204 No Content 서버가 요청을 성공적으로 수행하였으며 응답 콘텐츠에 보낼 추가 콘텐츠가 없음을 나타낸다. PUT, PATCH에 응답할 때 서버가 대체/업데이트된 리소스를 반환하거나, DELETE에 응답할 때 일반적으로 삭제 후 반환할 것이 없기 때문에 사용된다고 하였다. 아, 삭제 후에 반환할 것이 없어서 204 status가 떴구나 이해할 수 있었다. 사실 PUT과 PATCH를 사용했을 때 204 때문에 문제를 겪은 적이 없어 그냥 지나간 것이 아닌가 싶다. 내가 주로 사용했던..