Soony's House

React로 개발한 프로젝트를 실제 배포하여 다른 사람들과 공유하고 싶을 때, Vercel은 매우 간편하고 강력한 배포 플랫폼이다. React 프로젝트를 Vercel을 통해 배포하는 과정을 단계별로 정리해보자. 💻 1. Vercel이란?Vercel은 프론트엔드 프레임워크와 정적 웹사이트를 빠르고 쉽게 배포할 수 있도록 도와주는 클라우드 플랫폼이다.Next.js의 제작사인 Vercel에서 운영하며, GitHub와의 연동을 통해 CI/CD 파이프라인을 자동으로 구성해준다.즉, SW의 자동화된 개발 및 배포 단계를 진행해줌! + 선택 이유1. 별도의 서버 설정이나 복잡한 배포 과정 없이, 회원가입 후 손쉽게 배포가 가능해서 2. 수정사항 생길 시 github에 push만 해도 자동반영 됨. 2. ..

Vercel, Tomcat, AWS는 모두 웹 서비스를 배포할 수 있는 방법이지만, 사용하는 방식과 목적, 복잡도, 대상 사용자층이 다르다. 나는 이전에 Tomcat, AWS 를 통해 프로젝트를 배포한 경험이 있었다.최근에 Vercel을 통해 프로젝트를 배포하며 서버들에 대해 정리를 하고 넘어가보고 싶어졌다.Aka. 프로젝트 별 최적의 서버를 찾아... 각 서버 플랫폼을 기능, 편의성, 유연성, 성능, 사용 사례 측면에서 비교해보자 ☺️ Vercel특징: 서버리스(Serverless) 기반 플랫폼. 정적 사이트 및 프론트엔드 프레임워크에 최적화.장점:React, Next.js 프로젝트에 최적화되어 있음GitHub 연동으로 자동 배포 (CI/CD 내장)무료 플랜 제공서버 설정 없이 배포 가능단점:..

Node.js는 JavaScript를 사용하여 서버 사이드 애플리케이션을 개발할 수 있는 런타임 환경이다. 간결하고 유연한 개발 환경을 갖추기 위해, 프로젝트 초기 설정은 매우 중요하다. Node.js 프로젝트를 처음 시작할 때 필수적으로 진행해야 할 설정 과정을 정리해보자☺️ 1. Node.js 설치Node.js를 설치하기 위해서는 공식 웹사이트에서 설치 파일을 다운로드하거나, nvm(Node Version Manager)을 사용하는 것이 좋다. nvm을 사용하면 여러 버전의 Node.js를 쉽게 관리할 수 있다.# nvm 설치 (Mac/Linux 기준)curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash# 원하..

목차1. Node.js와 npm2. Common JS (CJS) 와 ES module (ESM) 1. Node.js 와 npm 💡 Node.js 란? : 자바스크립트의 런타임 환경브라우저의 밖(서버, 로컬 컴퓨터 등)에서도 자바스크립트를 실행할 수 있게 해주는 플랫폼이다. ex) app.js라는 파일을 node app.js로 실행하면 Node.js가 그 JS파일을 실행해준다. 💡Node.js를 웹개발에서 쓰는 이유 🔹 백엔드 개발Express.js 같은 프레임워크를 통해 REST API 서버를 빠르게 구축할 수 있다.비동기 처리에 강해, 많은 요청을 효율적으로 처리한다.실시간 기능 (ex. 채팅, 알림) 구현에 최적!🔹 프론트엔드 개발 환경 구축npm (Node Package M..

로킹 단위란?로킹(locking) 단위란 데이터베이스에서 말그대로 ‘잠그는 단위’를 나타낸다. 로킹 기법이란 하나의 트랜잭션이 데이터를 엑세스하는 동안, 다른 트랜잭션이 해당 데이터 항목을 엑세스 할 수 없도록 하는 병행 제어 기법이다. ‘동시성 제어 기법’ 이라고도 한다.여기에서 록(lock)은 데이터를 사용하는 단위라고 볼 수 있다.마치 운영체제의 스레드 스케줄링처럼, 한 번에 하나만 사용하도록 하는 단위를 ‘로킹 단위’라고 한다.실질적인 예시를 들어보자면,프로젝트를 진행할 때 팀원과 DB를 관리해야하는 일은 빈번하다. 만약 내가 데이터를 추가하거나 수정하는 동안 다른 팀원도 동시에 같은 데이터를 건들게 될 경우, 오류가 발생하거나 올바르게 데이터를 처리하는 데에 문제가 발생한다. ❗️이 경우, 로킹..

Oracle DB 삭제한 데이터 복구하기 (TIMESTAMP) 문제상황 1. 프로젝트를 진행하며 중복된 상품이 메인화면에 뜨는 오류가 발생해서 DB 정리를 맡게되었고, 쿼리문으로 테이블에 있는 데이터들을 정리시작.2. 'ORA-02292: 무결성 제약조건이 위배되었습니다- 자식 레코드가 발견되었습니다.' 라는 오류가 뜨며 해당 데이터가 삭제되지 않음. (해당테이블은 여러 자식테이블이 참조하고 있었기 때문이다..)3. 그래서 쿼리문을 통해 여러 테이블을 이것저것 삭제를 하다가 , 전혀 상관없는 상위의 쌩(?)데이터를 삭제하는 대실수를 저지름... (이제 해당 테이블로부터 작동하던 모든 동작에 오류발생... ㅎ) 찾아보니 삭제한 데이터를 시간을 기준으로해서 해당 테이블을 복구하는 방식이 있었다..

1. 기본구조   웹 화면 - Controller - Service - DAO - Mapper - DB  Controller : 호출된 URL을 통한 데이터 입출력Service : DAO 데이터를 주고 받으며 비즈니스 로직 수행DAO(Data Access Object) : DB 데이터에 접근, 데이터를 삽입, 삭제, 조회 등 할 수 있음.Mapper : Mapping  파일에 있는 SQL을 자바 인터페이스를 통해 호출할 수 있도록 해줌.DTO(Data Transfer Object) :  계층 간 데이터 교환을 위한 로직을 가지지 않는 데이터 객체. getter, setter  메소드만 가진 클래스Mapper: DAO 대신 인터페이스만을 사용하여 DB에 접근할 수 있다. (mybatis 사용 시 사용함.)..

타임 리프의 특징은 아래와 같습니다.*.html 확장자를 사용한다.별도의 레이아웃 프레임워크의 도움 없이 레이아웃을 관리할 수 있다.스크립트릿이 아닌 HTML 문법으로 JAVA 데이터를 처리할 수 있다.생산성 하나에 엄청나게 공을 들인 느낌이 납니다.타임 리프에서는 JSP의 스크립트릿은 사용할 수 없고, 대신 같은 기능을 하는 ${}과 같은 표현식을 사용할 수 있습니다.하지만 스크립트릿과는 다르게 HTML 코드의 심미성을 크게 해치지 않습니다.각설하고, 그럼 이 thymeleaf를 Spring Boot 프로젝트에서 어떻게 사용하는지 알아보겠습니다. 1. Thymeleaf prefix, suffix 정의먼저, Thymeleaf 파일을 어디서 관리할 것인지 application.properties에 정의해야..

이번글은 Controller 에 대해 좀더 자세히 알아보고 Index 페이지를 만들어 보겠다. Controller란 MVC에서 C에 해당하며 사용자의 요청을 처리한 후 V에 해당되는 뷰에 M에 해당되는 모델 객체를 넘겨주는 역할을 담당한다. Controller 의 대표적인 이노테이션은 어떤게 있는지 알아보겠다.@ControllerController 의 역할을 수행한다고 명시한다. 명시된 클래스를 Spring MVC 컨트롤러로 표시하는데 사용된다.주로 View을 반환하기 위해 사용하며 데이터를 반환하기 위해서는 @ResponseBody 어노테이션을 사용하여 클라이언트가 요청한 데이터를 JSON 형태로 데이터를 반환할 수 있다.사용 방법은 클래스 선언부에 입력한다.@Controller public class..

스프링 의존성 주입 @Autowired, @Resource, @Inject (Java Spring Dependency Injection)​의존성 주입은 객체를 직접 생성하지 않고 @Service을 이용하여 class annotation으로 달아주면 스프링은 beanFactory에 담아 두고 사용하는 곳에 @Autowired을 사용하는 곳에 해당 bean을 찾아 주입시켜 객체를 사용할 수 있게 도와준다.​1. @Autowired @Autowired는 주입하려고 하는 객체의 타입이 일치하는 객체를 loc 컨테이너 안에 존재하는 Bean을 자동으로 주입한다. ​주입 방법은 3가지가 있다.​필드 주입 (Field Injection)필드에 @Autowired 어노테이션을 붙여 주면 자동으로 의존성이 주입된다. 매..