꾸준함

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 폴더를 삭제했습니다.

npm install 시 UNABLE_TO_VERIFY_LEAF_SIGNATURE 에러가 발생할 경우 아래와 같은 명령어를 실행해주면 해결이 됩니다. npm config set strict-ssl false yarn install 시 self signed certificate in certificate chain 에러가 발생할 경우 아래와 같은 명령어를 실행해주면 해결이 됩니다. yarn config set "strict-ssl" false

코드 상에서는 정상적으로 어노테이션 기반으로 적용했지만 막상 build를 하거나 프로젝트를 실행할 때 아래와 같이 cannot find symbol 에러가 나는 경우 아래와 같이 세 가지 방법을 적용하면 해결할 수 있습니다. 1. File -> Setting -> Build, Execution, Deployment -> Compiler -> Annotation Processors -> Enable annotation processing 2. File -> Invalidate Caches / Restart 3. build.gradle에 아래 코드를 추가해줍니다.

프로젝트 분리를 진행한 뒤, 1. settings.gradle에 분리된 모듈을 모두 포함시켰고 2. 분리시킨 프로젝트의 build.gradle에 import project(':{분리된 프로젝트}')를 추가했는데도 불구하고 클래스를 찾을 수 없다는 오류 발생 시 분리된 프로젝트의 build.gradle에 아래와 같은 코드를 추가하면 해결됩니다.

SpringBoot React Server side Rendering vs Front side Rendering Git Ngin-X/Apache CentOS MSA DDD/TDD Jenkins Kafka Kubernetes Java/JavaScript/Go