코드펜에서 React 사용하기 (0)
작성하는 이유라고하면, 코드펜에서 React를 사용하려다가 한참 헤맸기 때문 나는 일단 Add Packages 부분에서 React와 ReactDom을 추가 했다. 추가를 하면 아래 코드처럼 되었을텐데 이때 ReactDom의 from부분을 client를 경로를 추가해야 하고, 19버전 이므로, createRoot를 사용해야 한다.
작성하는 이유라고하면, 코드펜에서 React를 사용하려다가 한참 헤맸기 때문 나는 일단 Add Packages 부분에서 React와 ReactDom을 추가 했다. 추가를 하면 아래 코드처럼 되었을텐데 이때 ReactDom의 from부분을 client를 경로를 추가해야 하고, 19버전 이므로, createRoot를 사용해야 한다.
이메일 전송 기능을 구현할 때 처음에는 플러그인을 사용했었다. 하지만 설정 과정이 복잡하고, 이후에도 주기적으로 상태를 점검해야 하는 번거로움이 있었다. 그래서 보다 단순하고 안정적인 방법을 찾다가 구글 SMTP를 활용하는 방식으로 전환했다. SMTP를 설정하면 메일 전송 과정이 보다 원활해지고, 외부 메일 서비스를 사용할 때 발생할 수 있는 오류들도 줄어든다. 특히 한 번 설정해 두면 이후 별다른 관리가 […]
블로그에 글을 작성하다 보면 이미지 캡처를 자주 사용하게 된다. 하지만 매번 캡처 이미지가 스크린샷 폴더에 저장되는 게 번거롭다. 이미지 파일을 따로 관리하는 나로서는 캡처한 이미지를 계속 옮기는 일이 비효율적으로 느껴진다. 그래서 작업 시작 시 캡처 저장 경로를 설정해 두는 방법을 정리해 본다. 캡처 도구를 열면 설정을 클릭
프론트엔드 개발을 하다 보면 API를 사용하면서 CORS (Cross-Origin Resource Sharing) 문제가 자주 발생하곤 한다. 개발 환경에서는 Vite의 Proxy 서버를 통해 CORS 문제를 임시로 해결할 수 있다. Proxy를 사용하면 로컬 환경에서 외부 API 요청을 안전하게 포워딩할 수 있어 개발 중에는 편리하다. 그러나 이 과정에서 중요한 불편함이 하나 있다. 개발 환경과 배포 환경의 설정 차이 개발 단계에서는 […]
패키지를 설치하는데, apt install <패키지명> 명령어만 사용하면 되지, apt update를 왜 사용하는지 몰라서 작성하는 글 먼저, apt update 명령어가 어떤 기능을 하는지 알아야 할 것이다. apt update는 Debian 및 Ubuntu 계열의 Linux 시스템에서 APT(Advanced Package Tool)를 사용해 실행하는 명령어로, 패키지 목록을 최신 상태로 갱신하는 역할을 한다. 여기서 중요한 점은 패키지 목록을 갱신한다는 것이다. 이 목록에는 […]
명확하게 하지 않으면 타입스크립트를 사용할 때 마다 해당 오류를 만나는 거 같아 근본적인 원인을 글로 정리했습니다. 오류의 코드 오류의 원인 TypeScript는 객체의 키를 엄격한 리터럴 타입으로 추론, 즉, MIME_TYPE_MAP의 키는 정확히 “image/png” | “image/jpg” | “image/jpeg”로 제한된다. 하지만, file.mimetype의 타입은 일반적으로 string이므로, TypeScript는 “image/png” | “image/jpg” | “image/jpeg” 이외의 값이 들어올 가능성이 있다고 판단 어떻게 […]
Git은 소스 코드 버전 관리를 위한 필수 도구로, 협업이나 개인 프로젝트에서 널리 사용됩니다.원격 저장소(GitHub, GitLab, Bitbucket 등)와 연동하려면 HTTPS 또는 SSH 인증 방식을 선택해야 합니다. 이 글에서는 Ubuntu에서 Git을 설치하는 방법과 HTTPS 및 SSH 방식으로 원격 저장소를 연동하는 과정을 정리 Git 설치 및 기본 설정 깃 설치 깃 사용자 정보 등록 사용자 등록 확인 사용자 […]
Ubuntu에서 웹 서버를 운영하려면 여러 가지 선택지가 있지만, 그중에서도 Nginx는 가볍고 빠른 성능 덕분에 많이 사용된다. 개인적으로도 필요할 때마다 설정 방법을 찾아보곤 하는데, 매번 검색하는 것보다 한 번 정리해 두면 두고두고 참고하기 좋을 것 같아 이 글을 작성하게 되었다. Nginx 설치 및 기본 실행 패키지 목록 업데이트 및 설치 nginx 설치확인 Nginx 서비스 실행 및 […]
아래 이미지처럼 인식이 안되서 방법을 찾아봄 Preferences 파일 열기 Edit -> Preferences Editor VSCODE 설정 및 프로젝트 인식시키기 External Tools 이동Extenral Script Editor Visual Studio Code 설정Regenerate project files 버튼 클릭 그러면 이렇게 에러가 뜨지 않습니다.
OPEN JDK (Java Development Kit) 설치 왼쪽에는 버전을 선택할 수 있고 선택했으면 해당 페이지에서 os에 맞게 선택해서 설치하면 된다. 환경변수 등록 윈도우 환경 변수 검색 -> 환경 변수 편집 환경 변수 버튼 클릭 설치한 jdk 파일 경로 복사(폴더 주소창 복사) 사용자 변수 추가 -> 새로 만들기 -> 파일 경로 붙여넣기 시스템 변수 추가 환경 변수 […]