웹 개발자로의 한걸음

vscode에서 새로운 파일 생성 후 코드 템플릿을 불러오고 싶었다. 방법은 간단하다. File > Preferences에서 Configure User Snippets을 누르면 된다. 나는 다른 workspace에서도 쓰고 싶어서 New Global Snippets file을 선택했다. 이름을 지정하고 나면 코드 스니펫 설정파일이 열린다. 다음과 같이 기본 설명 문서가 포함되어 있다. { // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where t..

ESLint 설정 탓에 alert를 쓸 때마다 no-alert 에러가 발생했다. 에러를 없애기 위해, 사용자 지정 모달 알림창으로 변경을 시도했다. 다음 사항을 고려했다. 1. 애니메이션 아래에서 위로 슬라이딩되며 나오고, 위에서 아래로 슬라이딩되며 사라지기를 원했다. 이를 위해 컴포넌트가 생기고 일정 시간이 지나면 active 클래스가 on/off되게 했다. opacity와 transform으로 효과를 주고, transition으로 연속적인 애니메이션이 되도록 했다. .Alert { /**중략**/ position: fixed; top: 75%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s ease-in-ou..

이런 식으로, 간병 예약 페이지에서 카카오맵 API를 이용해 병원 주소 검색을 하려고 했다. 그런데 테스트 페이지에서는 정상작동하던 컴포넌트가.. 실사용 페이지에 불러오니까 자꾸 페이지가 새로고침되는 문제가 발생했다. 컴포넌트 구조는 똑같은데 대체 왜 테스트 페이지에서만 정상작동하는 것인지 머리를 싸맸다. 확인 1. useEffect 때문인가? -> X 확인 2. state를 이용해 지도 컴포넌트 on/off를 하기 때문인가? -> X 확인 3. form에 감싸여 있기 때문인가? => O!! 확인 3-1. e.preventDefault가 누락됐는가? -> X 모달 내부에서 검색을 위해 form을 제출하는데, 이 페이지는 예약을 위한 페이지이므로 form으로 감싸여 있다는 것이 문제였다. 그래서 검색 버튼..

처음에 Next.js의 내장 기능인 API Routes를 사용하여 서버 사이드에서 API 요청을 처리하기 위한 프록시 설정을 했다. /** @type {import('next').NextConfig} */ module.exports = { async rewrites() { return [ { source: '/api/:path*', destination: 'http://localhost:8080/api/:path*', }, ]; }, }; 그리고 이후 react-query 도입을 위해 axios instance 설정파일을 다음과 같이 설정했다. import axios from 'axios'; const localServer = 'http://localhost:8080'; // 로컬 서버 const pro..

한 페이지에 모달 2종류를 띄워야 한다. 버튼이 2개 있고, 각각 다른 모달을 띄우도록 하고 싶었다. 한 종류일 때는 다음과 같이 코드가 간단하지만.. const { isModalVisible, openModal, closeModal } = useModal(); 2개일 때는 어떻게 해야 할 지 헷갈렸다. 먼저 다음과 같이 구조분해할당 코드를 수정했다. const { isModalVisible: isPatientModalVisible, openModal: openPatientModal, closeModal: closePatientModal } = useModal(); const { isModalVisible: isMateListModalVisible, openModal: openMateListModal, ..

React에서 불변성 이해하기: 상태 업데이트 문제 해결 데이터 검색 기능을 구현하기 위해 검색조건 숫자 범위를 state에 저장하고 서버에 전달하려고 했다. 먼저 해당 값을 저장하는 state를 선언하고, const [wages, setWages] = useState([9860, 9860]); 다음과 같이 focus out 되면 state를 업데이트하는 코드를 작성했다. 시급 최소 handleWageChange(e, 0)} onBlur={updateWage} min={9860} max={1000000} /> 원 ~ 최대 handleWageChange(e, 1)} onBlur={updateWage} min={9860} max={1000000} /> 원 const updateWage = () => { if..