이 글은 리액트 프로젝트에서 페이지 이동을 책임지는 라우터를 세팅하는 방법에 대해 정리한 글입니다.라이브러리 설치리액트에서 라우터를 만들기 위해서는 react-router-dom을 설치해야 한다.react-router-dom : 리액트에서 페이지 이동을 담당하는 표준 라이브러리아래 명령어를 통해 라이브러리를 설치한다.npm install react-router-dom도착 페이지 제작라우터를 적용하기 위해서는 이동할 페이지가 있어야 한다. 만약 이동할 페이지가 없다면, 임시로 이동할 페이지를 간단하게 아래와 같이 작성한다.const TestPage = () => { return 환영합니다.;};export default TestPage;App.tsx 수정앞으로 src/App.tsx 파일은 페이지를 바꿔주..

이 글은 Vite + React TypeScript를 이용하여 프로젝트 초기 세팅하는 방법에 대해 정리한 글입니다.React 프로젝트 생성아래 명령어를 이용해 npm과 vite 명령어를 사용하여 React TypeScript 프로젝트를 생성한다.# npm create vite@latest [폴더명] -- --template [템플릿]npm create vite@latest Frontend -- --template react-ts아래와 같은 내용이 터미널에 뜨면, 패키지 이름을 정하고 Enter를 입력한다. 폴더 명과 동일하게 입력해도 되며, 소문자로만 입력이 가능하다.❯ npm create vite@latest Frontend -- --template react-tsNeed to install the f..

이 글은 Ubuntu 24.04 LTS의 기본 Shell을 bash에서 zsh로 변경하고, oh-my-zsh 플러그인을 설치하여 테마를 적용하는 방법에 대해 정리한 글입니다.oh-my-zsh 공식 wiki를 참고하여 글을 작성하였으며, WSL(Windows Subsystem for Linux) 환경에서 진행하였습니다. (Ubuntu 환경에서도 동일하게 적용됩니다.)Home · ohmyzsh/ohmyzsh Wiki Home🙃 A delightful community-driven (with 2,400+ contributors) framework for managing your zsh configuration. Includes 300+ optional plugins (rails, git, macOS, hub..

☠️ 버그 상황Ubuntu 24.04 LTS Server에 설치되어 있던 Docker를 모두 지우고, 새롭게 Docker를 설치함.이후 도커가 정상적으로 설치되었는지 확인하기 위해 docker run hello-world 명령어를 실행함.# Docker removefor pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt remove $pkg; donesudo apt autoremove -y# Docker re-installsudo apt install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-c..

이 글은 Ubuntu 24.04 LTS에서 우분투 패키지 저장소(레포지토리)의 위치를 변경하는 방법에 대해 정리한 글입니다.만약 Ubuntu 24.04 LTS 이전 버전을 사용하시는 분들은 아래 글을 참고해주세요.[Linux][Ubuntu] 우분투 패키지 관리자 아카이브 위치 변경 [Linux][Ubuntu] 우분투 패키지 관리자 아카이브 위치 변경우분투 패키지 관리자 아카이브(레포지토리) 위치를 변경하는 방법에 대해 정리한 글입니다.아카이브 변경?우분투 패지키 관리자 아카이브(레포지토리)를 변경한다는 것은 apt가 소프트웨어 패devkuk.tistory.comUbuntu 24.04 LTS를 사용하고 있는 WSL도 동일하게 적용할 수 있습니다.이전에도 한 번 동일한 주제로 글을 작성한 적이 있는데, 어느..

이 글은 OpenCode와 OpenCode의 플러그인인 oh-my-opencode를 WSL 환경에서 설치하는 과정에 대해 정리한 글입니다.만약 WSL 없이 윈도우에 설치해서 사용하고 싶으신 분들은 아래 글을 참고해 주세요.(OpenCode에서 권장하는 환경은 WSL, Windows Subsystem for Linux 입니다.)[Setup][Windows] OpenCode & oh-my-opencode 설치 (with. windows 11) [Setup][Windows] OpenCode & oh-my-opencode 설치 (with. windows 11)이 글은 최근 급부상하고 있는 OpenCode와 oh-my-opencode 플러그인을 설치하는 방법에 대해서 정리한 글입니다.OpenCode | The o..

이 글은 WSL(Windows Subsystem for Linux)를 설치하는 방법에 대해서 정리한 글입니다. (Microsoft 공식 설치 가이드를 참고하였습니다.)WSL 설치 | Microsoft Learn WSL 설치wsl --install 명령을 사용하여 Linux용 Windows 하위 시스템을 설치합니다. 선호하는 Linux 배포판인 Ubuntu, Debian, SUSE, Kali, Fedora, Pengwin, Alpine 등에서 실행하는 Windows 머신에서 Bash 터미널을 사용할 수 있learn.microsoft.comWSL (Windows Subsystem for Linux)WSL은 윈도우에서 윈도우와 리눅스의 기능을 동시에 사용할 수 있도록 만들어주는 서비스이다. WSL을 사용하면 ..

이 글은 도커 네트워크를 사용하여 백엔드와 데이터베이스를 연동하여 배포하는 방법에 대해 정리한 글입니다.이번 글에서는 이전에 Spring Boot를 통해 만든 백엔드 서버와 데이터베이스(PostgreSQL)를 도커로 띄우고 배포하는 작업을 진행할 것이다. DB와 벡엔드 서버가 궁금한 분들은 아래 글을 참고하면 된다.[Backend][Spring Boot] JPA(Java Persistence API)와 회원정보 데이터베이스 [Backend][Spring Boot] JPA(Java Persistence API)와 회원정보 데이터베이스이 글은 회원정보 데이터베이스와 API를 설계하는 방법에 대해 정리한 글입니다.JPA (Java Persistence API)이 글에서 하고자 하는 핵심 작업은 "자바 클래스를..

이 글은 데이터베이스를 API 만드는 방법에 대해 정리한 글입니다.앞선 글에서는 회원정보 데이터베이스를 생성했었다.[Backend][Spring Boot] JPA(Java Persistence API)와 회원정보 데이터베이스 [Backend][Spring Boot] JPA(Java Persistence API)와 회원정보 데이터베이스이 글은 회원정보 데이터베이스와 API를 설계하는 방법에 대해 정리한 글입니다.JPA (Java Persistence API)이 글에서 하고자 하는 핵심 작업은 "자바 클래스를 만들어서 데이터베이스 테이블로 변신시devkuk.tistory.com이렇게 만든 데이터베이스를 이제 실제 로그인 혹은 회원가입에 사용할 수 있도록 API로 만드는 작업을 진행해보고자 한다.데이터베이스가..

이 글은 회원정보 데이터베이스와 API를 설계하는 방법에 대해 정리한 글입니다.JPA (Java Persistence API)이 글에서 하고자 하는 핵심 작업은 "자바 클래스를 만들어서 데이터베이스 테이블로 변신시키는 것"이다. 이 기술을 JPA(Java Persistence API)라고 한다.JPA의 핵심 개념@Entity (엔티티)평범한 자바 클래스에 @Entity 어노테이션이 추가되면, JPA는 "이 클래스는 자바 객체가 아니라 데이터베이스에 저장해야 할 테이블 설계도구나!"라고 생각한다.@Entity 어노테이션이 붙으면, SQL(ex. CREATE TABLE Member ...)을 직접 짜지 않아도 스프링이 알아서 DB에 테이블을 만들어준다.@Id (PK, Primary Key)데이터베이스 테이블..