코딩레시피

react로 만든 프로젝트를 firebase에 호스팅(hosting)하는 경우가 많습니다. 

요즘은 vite 를 활용하여 리액트 프로젝트를 만드는 경우도 많습니다. 

기존 CRA(create-react-app) 로 만드는 방식보다 훨씬 가볍고 좋은 것 같습니다. 

1. 프로젝트 빌드 

터미널에서 아래와 같이 입력하여 빌드를 수행합니다. 

npm run build

2. Firebase CLI 설치 

터미널에서 firebase 명령어 사용을 위해 아래 명령어로 설치를 수행합니다. 

npm install -g firebase-tools

3. firebase 로그인

터미널에서 아래와 같이 입력 후 기본브라우저에서 firebase에 호스팅 설정을 한 구글 계정으로 로그인 합니다. 

firebase login

4. firebase와 프로젝트 연결 

아래 명령을 터미널에 입력 후 실행합니다. 

firebase init

아래와 같이 시작 화면에서 y 를 입력합니다. 

다음 단계에서 방향키로 Hosting으로 이동 후 Space Bar로 선택을 한 뒤 Enter를 누릅니다. 

이 단계가 중요합니다. 

CRA로 만든 리액트 프로젝트는 build 폴더를 선택하지만 vite로 만든 리액트 프로젝트는 dist 라고 입력해야 합니다.

25년 초만 해도 ChatGPT도 정확한 답변을 주지 못했는데 최근에는 학습이 된건지 dist로 알려주긴 합니다. 저는 이것때문에 몇시간 오랜만에 구글링을 한 것 같습니다..ㅠ

다음 단계에서 y를 입력합니다. 

n 을 입력합니다. 

여기서 보통 y를 입력한다고 하는데 저는 n 을 입력했을 때 정상적으로 배포된 것을 확인했습니다. 

5. 배포 명령 실행 

아래 명령어를 실행하여 최종 배포를 합니다. 

firebase deploy

배포에 문제가 없다면 firebase콘솔에서 지정한 Hosting URL로 접속하면 접속이 되는 것을 확인할 수 있을 것입니다. 

처음 배포시에는 5분 정도 시간이 걸릴 수도 있습니다. 

읽어주셔서 감사합니다. 

Node.js 는 Javascript 런타임 라이브러리로 React, Vue, Next.js 등 요즘 많이 사용하는 라이브러리나 프레임워크 활용에 필수적으로 필요한 프로그램 입니다. 

설치는 매우 간단하며, 소개해보도록 하겠습니다. 

Node.js 홈페이지 주소는 https://nodejs.org/en 입니다.

홈페이지 첫화면에서 녹색으로 보이는 다운로드 버튼을 클릭하면 설치 파일을 받을 수 있습니다. 

2024년 7월 기준이기 때문에 화면이 다를 수 있습니다만 보통 LTS 버전을 다운받아 설치하면 됩니다. 

다운 받은 파일을 실행하면 아래와 같은 화면이 나오며, 특별히 설치과정에서 체크할 부분은 없고 Next를 클릭하여 설치를 진행하면 됩니다. 

설치를 완료하면 명령프롬프트(cmd)를 실행하여 node -v 를 입력 후 엔터를 쳤을 때 아래와 같이 설치한 버전이 나온다면 정상적으로 설치가 완료된 것으로 보면 됩니다. 

STS에서 스프링부트 프로젝트를 만드는 방법입니다. 

일단 화면에서 요청하고 컨트롤러에서 응답하는 부분만 확인하는 것이 초반에는 수월하기 때문에 DB 연동 없이 프로젝트를 만드는 방법에 대해 소개하겠습니다. 

다음 글에서 DB 연동을 포함한 내용에 대해 소개하도록 하겠습니다. 

STS실행하고 File-New-Spring Starter Project를 선택합니다. 

프로젝트 이름, 패키지이름, jdk 버전 등을 선택하는 화면입니다. Java Version은 PC에 설치된 버전으로 선택하고, Type은 Gradle-Groovy로 선택하면 build.gradle이 생성되고, Maven으로 선택하면 pom.xml 파일이 생성됩니다. 아래와 같이 선택하고 넘어가겠습니다.

Dependency를 선택하는 화면입니다. 

Developer Tools - Lombok, Web - Spring Web, Template Engines - Thymeleaf 이렇게 3개를 선택합니다. 선택완료 후 Finish를 클릭합니다.

프로젝트가 생성된 폴더의 모습입니다. 

index 페이지를 띄우기 위해 Controller 클래스를 만듭니다. 

패키지를 하나 추가합니다. 

controller 패키지에서 클래스를 추가합니다. 

아래와 같이 코드를 작성합니다. 

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {
	@GetMapping("/")
	public String index() {
		return "index";
	}
}

index.html 파일을 추가합니다. 

html파일을 생성할 수 없다면 아래 글을 확인해주세요. 

https://codingrecipe1.tistory.com/38

html 파일은 src/main/resources/templates 폴더에 만들어줍니다. 

확인을 위해 Hello Spring Boot 라고 작성해줍니다. 

실행은 프로젝트 이름에서 우클릭 후 Run As - 4 Spring Boot App으로 실행합니다. 

아래 콘솔에 별다른 에러가 보이지 않는다면 정상적으로 실행되었고 별도의 포트를 설정하지 않았다면 브라우저를 실행하여 localhost:8080 을 주소창에 입력합니다. 아래와 같이 실행결과를 확인할 수 있습니다. 

DB 연동한 프로젝트는 다음글에서 소개하겠습니다. 

STS(Spring Tool Suite)는 스프링 공식 홈페이지에서 제공하는 이클립스 기반의 스프링 개발 도구 입니다. 

누구나 무료로 사용할 수 있고 설치 방법을 소개하고자 합니다. 

우선 스프링 홈페이지의 다운로드 페이지에 접속합니다. 링크는 아래와 같습니다. 

https://spring.io/tools/

해당페이지의 중간에 보면 Spring Tools 4 for Eclipse 라는 부분이 있고 여기에서 본인 PC에 맞는 파일을 다운받으면 됩니다. 

용량은 630MB 정도 되고 jar 파일로 다운 됩니다. 

설치라기 보다는 해당 파일을 더블클릭하면 압축이 풀리는 것처럼 폴더가 하나 생성됩니다. 

폴더이름은 sts-4.21.0.RELEASE 로 만들어졌습니다.(버전에 따라 숫자는 달라집니다.)

해당 폴더에 들어가본 모습입니다.(lombok 설치 후에 캡처를 한거라 처음에는 lombok이라는 파일은 없습니다.)

SpringToolSuite4 를 실행하면 STS를 사용할 수 있습니다. 

IntelliJ를 사용할 때는 신경쓰지 않아도 되지만 STS나 이클립스로 스프링 웹개발을 할 때 롬복을 사용해야 한다면 설치를 따로 해줘야 합니다. 

롬복이 설치되었는지 간단히 확인할 수 있는 방법은 

일단 스프링부트 프로젝트 생성할 때 롬복을 dependency에 추가하였는지 먼저 확인합니다. 

gradle 경우에는 아래와 같이 확인할 수 있습니다. 

build.gradle 파일을 열어 아래와 같이 lombok이 포함되었는지 확인합니다. 

그런데 만약 DTO와 같은 클래스에서 @Data 어노테이션을 적용했는데 필드이름에 노란줄이 보인다면 롬복이 동작하지 않는다고 보면 됩니다. 

일단 lombok.jar 파일이 있는 폴더를 찾아 줍니다. 

윈도우 기준으로 보통은 사용자폴더에 들어가보면 .gradle 폴더가 있고 아래와 같은 경로로 찾아가면 대부분 있습니다. 

.gradle\caches\modules-2\files-2.1\org.projectlombok\

프로젝트를 다양하게 시도하였다면 다양한 버전의 롬복 버전 폴더가 아래와 같이 있을수도 있습니다. 

폴더에 들어가보면 아래와 같이 lombok.jar 파일이 보입니다. 

이 파일을 설치해야 하는데 터미널에서 설치를 진행해야 합니다. 

윈도우 탐색기에서 파일-Windows PowerShell 열기를 클릭합니다.

그러면 해당 위치에서 터미널이 열리며, 아래와 같이 입력합니다. 뒤의 버전은 PC에 있는 파일 버전 기준으로 작성하시면됩니다. jar 쓰고 한칸 띄우고 lom 정도만 치고 tab 키를 누르면 자동완성이 됩니다.

> java -jar .\lombok-1.18.30.jar

실행이 되면 아래와 같은 화면이 뜹니다. 

어떤 IDE에 적용할건지를 선택하는 부분인데 설치를 한 상황이라면 해당 IDE 목록이 보이고, 압축을 풀어서 사용하는 환경이라면 해당 폴더를 직접 지정해줘야 합니다. (저는 spring.io 에서 jar 파일을 받아서 사용하고 있기 때문에 목록에 보이지 않습니다.)

STS가 설치된 경로를 찾아 실행파일을 선택한 뒤의 화면입니다. Install/Update를 클릭합니다.

설치가 완료된 모습입니다.

STS를 재시작하고 DTO 클래스를 살펴보면 롬복 어노테이션이 적용되어 노란줄이 없어진 것을 확인할 수 있습니다. 

재시작을 하여도 상황이 똑같다면 Project-Clean 메뉴를 한 번 실행 후 STS를 다시 재시작 해보시기 바랍니다. 

STS로 작업할 때 기본은 EUC-KR로 세팅되어 있습니다. 

큰 문제는 없지만 간혹 다른 편집기에서 소스코드를 열거나 할 때 영어로 작성된 부분은 괜찮지만 한글로 작성된 부분은 깨지는 경우가 종종 있습니다. 

그래서 미리 UTF-8로 세팅을 하는 것이 여러모로 편합니다. 

STS 메뉴의 Window-Preference 를 클릭합니다. 

왼쪽 메뉴 하단에 보면 Web이 있고 이를 확장하면 HTML Files가 있습니다. Encoding 부분을 UTF-8로 선택해줍니다. CSS도 바꿔줍니다. 설정이 끝나면 Apply and Close를 클릭합니다. 

설정 완료 후 HTML 파일을 생성하면 아래와 같이 UTF-8로 인코딩이 설정된 것을 확인할 수 있습니다. 

STS를 사욯하여 스프링부트 프로젝트를 만들다 보면 화면을 처리하기 위해 html 파일이 필요합니다. 

하지만 기본 설치상태에서는 html 파일을 생성할 수가 없어 난감한 상황에 빠집니다. 

확장 프로그램 설치를 통해 문제를 해결할 수 있습니다. 

STS 메뉴에서 Help-Eclipse Marketplace를 클릭합니다.

검색창에 web이라 입력하고 검색을 하면 아래 그림과 같이 목록이 보이며, Eclips Enterprise Java and Web Developer Tools를 설치해줍니다. 

Install 클릭하고 잠시 기다리면 다음과 같은 화면이 나옵니다. Confirm을 클릭합니다. 

아래 화면에서 I accept.. 을 선택하고 Finish를 클릭합니다. 

설치 중간에 신뢰하는지를 물어보는데 체크박스를 모두 체크 후 Trust Selected를 클릭합니다. 

설치 진행중에는 우측하단에 아래와 같이 보이고 되도록 다른 기능을 실행하지 않고 가만히 기다려 주는 것이 좋습니다. 

설치가 완료되면 sts 재시작을 물어보며 재시작 해줍니다.

이제는 새 파일을 추가할 때 Web 이라는 폴더가 추가되고 HTML파일을 생성할 수 있습니다. 

오라클 데이터베이스 사용시 사용자 계정을 생성하고 권한을 부여하는 내용입니다. 

계정을 생성하기 위해선 관리자 계정으로 먼저 접속을 해야 합니다. 

관리자 계정은 sys as sysdba이며, 비밀번호는 설치할 때 지정한 비밀번호로 접속하면 됩니다. 

설치 방법은 아래 글을 참고해주세요. 

https://codingrecipe1.tistory.com/8

계정을 만드는 문법은 아래와 같습니다. 계정을 만들 때 혹시 사용자 롤 이름이 부적합 하다는 오류가 발생한다면 아래 글을 참고해주시기 바랍니다. 

https://codingrecipe1.tistory.com/11

create user [사용할계정이름] identified by [비밀번호];

-- 계정이름은 user_codingrecipe 비밀번호는 1234로 하는 경우
create user user_codingrecipe identified by "1234";

실행 후 계정에게 권한(접속, 생성, 관리자 등)을 부여해야 사용이 가능해집니다. 

간단하게 관리자권한(dba)을 부여해보겠습니다. 

grant [권한종류] to [계정이름];

grant dba to user_codingrecipe;

모두 실행하고 에러가 없다면 sql developer에서 해당 계정으로 접속해보도록 하겠습니다. 

메뉴 하단에 보이는 녹색 더하기 아이콘을 클릭합니다. 

아래와 같이 입력 후 테스트를 클릭하였을 떄 상태: 성공으로 보인다면 계정이 잘 만들어진겁니다. Name에는 좌측에 보이는 접속이름에 보이는 것으로 구분하기 쉬운 이름을 주면 됩니다. 

사용자이름에는 계정 생성에서 사용한 계정이름을 입력하는 겁니다. 

접속을 클릭하면 해당 계정으로 작업창이 만들어지며, 작업을 진행하면 됩니다. 

sql developer 사용시 주의할 점은 늘 우측 상단에 어떤 계정으로 접속중인지를 잘 보셔야 합니다. 간혹 다른 계정에 테이블 등을 만들게 되는 경우가 발생합니다. 

감사합니다.