꾸준함

React axios를 활용하여 api를 호출하면 자바스크립트의 ajax처럼 서버와 비동기 통신을 하는데, 딜레이 시간 동안 로딩 화면 혹은 로딩 모달을 띄우는 방법에 대해 소개드리겠습니다. 저는 비동기 통신 딜레이 시간 동안 스피너를 띄우기 위해 react-loading 라이브러리를 사용했습니다. yarn 혹은 npm 을 통해 다운 받아주시면 됩니다. yarn add react-loading 메시지와 함께 스피너를 화면 중앙에 띄워주기 위해 저는 아래와 같이 코드를 작성했습니다. 태그에 주목해주세요. Loader.js * 저 같은 경우에는 별도 페이지를 만들었지만 html과 css를 다룰줄 아시는 분들은 Spinner 모달을 만들고 loading state가 true일 때 해당 모달을 띄우는 방법을 사..

백준 문제를 풀 때 입력값을 넣는 방법은 크게 두 가지입니다. 1. 예제 입력 옆 [복사] 버튼을 통해 직접 콘솔에 붙여 넣기 2. 파일로부터 입력값을 불러오기 저 같은 경우는 1번 방법을 주로 사용하지만, 메일을 통해 질문 주셨던 분이 2번 방법에 대해 여쭤보셨기 때문에 간단히 방법을 소개드리겠습니다. 우선, input.txt 파일을 현재 실행할 소스코드 파일과 동일한 디렉토리에 넣어줍니다. * 매개변수에서 파일 경로만 맞춰준다면 굳이 동일한 디렉토리일 필요는 없습니다. 질문 주셨던 분이 1931번 문제에 대해 질문 주셨기 때문에 저도 1931번 문제로 예시를 들겠습니다. input.txt 파일로부터 입력값을 불러오는 방법은 간단합니다. freopen 함수를 써주면 되며 예시는 아래와 같습니다. 여기서..

현재 프로젝트를 진행하면서 html select에서 react-select로 변경하는 과정에서 react-datepicker와 마찬가지로 적지 않게 삽질을 했습니다. 사실 value props를 제외하고는 간단한 편이지만 react-select 관련 설정법도 공유해보고자 합니다. 제가 설정한 props 목록입니다. styles: zIndex를 부여하여 dropdown 목록이 모바일 환경에서도 항상 위로 보이도록 설정 value: 선택한 option이 select에 보이도록 설정 (신기하게도 stream 문법을 사용해야 합니다.) placeholder: 선택하지 않았을 때 default 메시지 onChange: 선택한 option이 바뀌었을 때 호출되는 콜백 함수 options: option 배열 간단한 ..

React에서는 일반적으로 사용하는 jquery용 datepicker가 호환이 안되기 때문에 React 전용 datepicker를 사용해야 합니다. 저는 HackerOne에서 배포해준 react-datepicker 라이브러리를 사용했습니다. react-datepicker를 적용하는 것까지는 좋았으나 제가 원하는 세팅을 설정하는데 정말 많은 시행착오를 겪었어야 했습니다. 따라서 저랑 비슷한 datepicker 환경을 원하시는 분들이 삽질을 하지 않도록 공유하고자 합니다. 우선, 제가 설정한 react-datepicker props 목록과 정의한 함수들을 나열해보겠습니다. locale: 달력을 한글화 minDate: 과거 날짜는 선택할 수 없게 disable popperModifiers: 모바일 웹에서 화면..

Visual Studio에서 과제를 하거나 문제를 풀다 보면 아래와 같이 C4996 에러가 발생하는 경우가 있습니다. error C4996: 'strcpy': This function or variable may be unsafe. Consider using strcpy_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS. See online help for details. strcpy에 대해서 위 에러가 떴다면 printf, scanf와 같이 기본적으로 사용하는 함수에 대해서도 해당 에러가 뜰 것입니다. 모두 접미사에 _s를 추가한 함수 즉, 비주얼 스튜디오에서 만든 secure 함수를 사용하라는 것인데 익숙하지도 않을뿐더러 다른 IDE에서는..

React에서 Rest Api를 쉽게 호출하기 위해 axios 라이브러리를 사용하게 되었습니다. 화면을 Component 단위로 나누었고 Api를 호출할 때마다 header에 인증 권한인 Authorization을 함께 넣어줘야 했는데 예시를 찾기 쉽지 않아 상당히 헤맸습니다. 따라서 간단한 사용 예시를 기록하고자 합니다. 현재 배워나가는 단계이기 때문에 비교적 최근에 나온 개념인 훅(hooks)를 최대한 활용했고 Class Component 방식이 아닌 함수형 Component 방식을 사용해 코드를 작성했습니다. 참고로, 프론트는 React, 백은 SpringBoot 프레임워크를 사용하여 개발했습니다. 저 같은 경우 메인 화면에 접근하기 전에 requestParam으로 전달된 토큰을 기반으로 인증 Ap..

React로 화면을 개발할 때 기능별로 컴포넌트를 쪼개다보니 자식 Component에서 부모 Component로 데이터를 전달해야하는 경우가 생겼습니다. 이럴 경우 부모 Component에서 자식 Component로 데이터를 전달할 때는 props를 통해 전달하듯이, 부모 Component에서 useState 훅(Hook)을 통해 전달받을 데이터를 저장할 변수를 선언하고 props로 setter를 전달하면 됩니다. 자식 Component에서는 부모로부터 전달받은 setter를 통해 전달할 데이터를 저장해주면 부모 Component에서 해당 데이터를 전달받을 수 있습니다! 간단한 예시는 아래와 같습니다.

우선, 저는 윈도우에서 개발을 하고 있습니다. 현재 Backend인 SpringBoot 서버는 STS에서 개발 중이고, Frontend인 React는 VsCode에서 개발 중입니다. 따라서, VSCode에서 빌드한 파일들을 바로 서버의 src/main/resources/static 내에 저장하기 위해 Create-React-App의 package.json을 아래와 같이 수정해줬습니다. React를 빌드할 때마다 파일명이 바뀌므로 우선 src/main/resources/static 내에 있는 파일들을 모두 삭제해주기 위해서 del 명령어를 먼저 실행했고 각각의 명령어는 아래와 같습니다. /F: 읽기 전용 파일을 강제 삭제합니다. /S: 지정된 파일을 모든 하위 디렉터리에서 삭제합니다. /Q: 삭제 확인 메..

웹 개발을 하다보면 코드 수정 후 재가동해야하는 경우가 많은데, 서버를 종료시켰는데도 불구하고 8080 포트가 이미 사용 중이라고 콘솔에 찍히는 경우가 간혹 있습니다. 이럴 경우, 아래와 같이 1. 프로세스 아이디(PID)를 찾고 2. 프로세스를 죽이면 됩니다. 프로세스를 죽이는 과정에서 액세스 거부 오류가 뜬다면 cmd를 관리자 권한으로 실행하시면 됩니다.

git 리포지토리에 활성 변경 내용이 너무 많습니다. git 기능의 하위 집합만 사용할 수 있도록 설정됩니다. 메시지가 뜰 경우, 해당 폴더에 들어가서 .git 폴더를 삭제해주면 해결됩니다. * 저 같은 경우에는 제 계정 폴더에 .git 폴더가 있어서 git status를 입력하면 모든 파일이 다 나와 .git 폴더를 삭제했습니다.