개발일지📝

상대경로로 할때 생기는 이슈 ….props 로 넘기게되면 파일에 따라 상대경로도 바뀌게되어서 그런것 같다 .그냥 절대경로를 쓰자! 아래처럼 하면 되긴하는데 그냥 절대경로를 쓰자!어차피 클라우드화 할거라서 ~

https://y-seon97.tistory.com/80https://velog.io/@conan/module-css 화면 전환시 이전 css 겹침 현상 해결방법확장자를 module.css로 작성한다.  (원하는 파일 명).module.css  그 다음 사용할 때는 참조변수를 사용하여 import 한다. import styles from './styles.module.css';function MyComponent() { return Hello;}

이런류의 오류가 계속 발생하는 경우가 있는데docker-desktop 프로그램을 재실행 해주면 해결된다 !

Identify and stop the process that's listening on port 8080 or configure this application to listen on another port. 포트 충돌로 인한 오류이다.이미 8989 포트를 점유하는 프로세스가 존재하는 것이다.    PowerShell 에서 해당  netstat -ano | findstr :8080  taskkill /PID 12345 /F

목차    🔍Compose  란? 여러개의 도커 컨테이너들을 하나의 서비스로 정의하고하나의 묶음으로 관리할 수 있게 도와주는 툴 여러개 컨테이너 관리에 도움줌복잡한 명령어로 실행시키던 걸 간소화 시킨다. Compose 생성    ✅파일명은 `compose.yml` 으로 생성    ✅  ` docker run --name webserver -d -p 80:80 nginx `해당 코드를 아래 yml 파일로 작성 한 것 yml 은 들여쓰기로 계층을 나누기 때문에 주의  Compose 실행  ✅` docker compose up ` 을 하면 nginx 가 실행됨을 알 수 있다. 즉, 간편하게 실행 가능!포그라운드 실행이기 때문에 (작업불가 ctrl + c 탈출)   ✅ ` docker compose up ` ..

목차    헥사고날 아키텍처 개념 헥사고날 아키텍처(Hexagonal Architecture)= 포트와 어댑터 아키텍처(Ports and Adapters Architecture)= 육각형 아키텍쳐  📌 비지니스 모델(도메인)을 외부와 격리시켜 유연+테스트하기 쉬운 구조를 만드는 것비지니스 코드를 기술 코드와 분리시킨다. (또한 기술코드도 이에 맞게 변경 할 수 있어야함) 비지니스 모델은 중앙의 도메인 영역, 입력과 출력을 처리하는 포트 , 어댑터를 통해 외부와 소통함    수직적 계층화와 기능 기판 패키지 아키텍처의  장점을 동시에 가질 수 있다 !계층기반 패키징 (MVC 아키텍쳐) + 기능기반 패키징(도메인, 역할끼리 패키징)  = ⭐ 구조 ,용어 폴더구조adapter, apllication ,dom..

목차   TDD 개념Test-Driven Development (테스트 주도 개발) 의 약자개발 방식 중 하나임  📌기존의 개발 :요구사항 분석 -> 설계 -> 개발 -> 테스트 -> 배포(재설계로 인 한  => 유지보수 어려움 ㅜㅜ) 📌 TDD :목적 정의 -> (일단) 실패 테스트 작성 -> 테스트를 통과하는 최소한의 코드 작성 -> 코드 리팩토링 (반복)-> 개발 ->  배포  TDD 툴 JUnit : java 에서 널리 사용되는 단위 테스트 프레임워크 (이외에도 xUnit 이라고 다른 언어들도 있음) Mockito : Mocking(모의) 하여 테스트할 수 있게하는 프레임워크     red-green-refactoring cycle   TDD 장단점장점- 개발생산성, 구현 등등 효율적임 단점-..

목차    라이브러리(Library) 주도권이 개발자 (필요할 때 호출) 코드 모음임코드, 모듈, 패키지 형태로 제공됨개발자가 코드 흐름 제어 가능  📌 JavaScript jQuery자바스크립트 DOM 조작 라이브러리, Ajax 요청브라우저 호환성 개선Lodash자바스크립트  배열, 객체 유틸리티 라이브러리데이터 조작 최적화Moment.js / Day.js자바스크립트 날짜 라이브러리날짜 포맷 변환Axios자바스크립트 HTTP 클라이언트 라이브러리REST API 호출   프레임워크(Framework) 주도권이 프레임워크 (개발자가 종속됨, 규칙구조를 따름)  📌 백엔드SpringJava대규모 시스템, 객체 지향기업 시스템, 웹 애플리케이션DjangoPython빠른 개발, 보안 강함데이터 분석, 스타트..

HTTP 상태 코드 정리1xx (정보 응답)100 Continue: 요청을 계속 진행해도 됨.101 Switching Protocols: 프로토콜 변경 요청 승인.102 Processing: 요청이 처리 중 (WebDAV).103 Early Hints: 본문 전송 전에 미리 헤더 제공. 2xx (성공 응답)200 OK: 정상 응답.201 Created: 새로운 리소스 생성 완료.202 Accepted: 요청이 접수되었으나 처리 미완료 or 시작되지 않았을 수 있음203 Non-Authoritative Information: 신뢰할 수 없는 출처에서 정보 제공.204 No Content: 본문 없이 성공 응답.205 Reset Content: 클라이언트가 뷰를 초기화해야 함.206 Partial Conte..

목차    이번에 프로젝트를 진행하면서 MSA 방식을 도입해보기로 했었다. 그래서 MSA 에 대한 공부도 하고 어렵게 프로젝트 세팅까지 했지만.. 진행하려던 프로젝트가 MSA 를 사용할 만한 프로젝트도 아닐 뿐더러, 비효율적인 부분이 많아서 (서버를 여러개 켜야함) 결국 MSA 방식은 포기하게되었다. ㅜㅜ 그래서 이론이라도 끄적끄적 해 볼 예정..  대표 개념 API Gateway : Spring Cloud Gateway 와 Webflux 로 구현Service Discovery : Netflix Eureka 사용으로 구현Config Server : Spring Cloud Config 사용으로 구현  MSA란?MSA(Microservices Architecture, 마이크로서비스 아키텍처)는애플리케이션을 ..

데이터베이스는 테이블이라는 구조를 가진 반면에 JAVA 애플리케이션의 경우에는 클래스와 객체를 사용한다. 이 불일치를 해결하기 위해서 우리는 데이터 매핑 프레임워크를 사용한다. Persistence Framework (퍼시스턴스 프레임워크)  : 데이터베이스와 애플리케이션 간의 데이터 변환 및 매핑을 돕는 프레임워크 (영속성 계층) 대표적으로 사용하는 프레임워크가 MyBatis 와 JPA 가 있는데 MyBatis를 사용하여 쿼리문을 작성할 경우, SQL 쿼리 결과를 자바 객체로 변환하기 위해서 DTO 를 별도로 생성하여 매핑하게 된다. 객체 수가 많아질 경우 관리가 복잡해진다. JPA 를 활용하면 HIbenate 와 같은 ORM 구현체가 데이터베이스 테이블 자바 객체 (엔티티) 간의 자동 패팅이 되어,..

목차   JSP 프로젝트를 만들기 위해서 intelliJ 를 사용해보려고 했는데무료버전은 jsp 를 지원해주지 않는다.ultimate 만 가능한걸 깨닫고.. Eclipse 로 다시 돌아왔다.복습 겸 다시 Eclipse 세팅부터 다시 시작해보자.   아래는 IntelliJ 에서 JSP 프로젝트 세팅하다가 막혔던 부분들 참고했던 링크다. JSP 프로젝트 세팅https://velog.io/@lukehongg/intellij-jsp-project add framework ~ 안뜰때https://goldfish2679.tistory.com/59 add Framework 에 javaEE 추가하기https://kkminseok.github.io/posts/Intellij_spring/    eclipse 다운로드  ..

AOP 란AOP 란 관점 지향 프로그래밍이다.관심사 (Aspect) 를 분리하여 재사용하여 관리하는 방식(코드 재사용성, 유지보수에 효과적)  Spring 에서는 비지니스 로직에만 집중하게 하기 위해서 사용된다.비지니스 로직이 아닌 이외의 `보안, 로그, 트랙잭션 등`을 `횡단 관심사 (cross-concern)` 라고 부른다Spring 은 이 횡단관심사를 분리해서 작업가능하다. 즉, 횡단 관심사를 모듈로 분리하는 프로그래밍 패러다임이다.  ✅ 반복적인 코드를 제거 ✅ 컴파일 or 런타임 시점에 결합 ✅ 기존 코드 수정 없이, 원하는 기능과 결합  AOP 키워드Aspect (관점) 공통 기능(로깅, 보안 등)을 모듈화한 객체 JoinPoint (조인포인트) AOP가 적용될 수 있는 실행 지점 (메서드 실..

컴파일 (Compile)소스코드가 기계어로 변환되는 과정 (컴파일러 javac가 자바 바이트 코드로 변환)`.java` -> `.class`  런타임 (Runtime)프로그램이 실제로 실행되는 시간 컴파일된 바이트 코드가 JVM 에 의해 실행되는 시점  컴파일과 런타임의 차이점시점프로그램 실행 전에, 코드 작성 후 컴파일 시점에 발생프로그램 실행 중에 발생목적소스 코드의 오류를 미리 확인하고, 바이트코드로 변환실제로 프로그램을 실행하고 동적 오류를 처리오류 처리문법 오류, 타입 오류, 체크 예외 미처리 등 (컴파일 시 발생)런타임 예외(배열 인덱스 초과, null 참조 등) (실행 시 발생)예시 오류구문 오류, 타입 오류, 체크 예외 미처리NullPointerException, ArrayIndexOutO..

목차    예외 란?프로그램의 정상적인 흐름을 방해하는 문제 상황 (프로그램 코드에서 처리 가능 , 논리적 오류) 에러는 그보다 더 심각한 문제 (프로그램 중단 등의 심각한 문제 , JVM / 메모리 부족)  예외 종류체크 예외 : 컴파일 시점에서 예외 강제 처리언체크 예외 : 런타임 시점에서 발생 (컴파일 시 예외처리 강제 되지 않음)    예외 계층 구조  `Throwable` 클래스는 모든 예외와 오류의 부모 클래스  `getMessage()`: 예외 메시지를 반환합니다.`printStackTrace()`: 예외 발생 시 스택 트레이스를 출력합니다.`getCause()`: 예외의 원인(다른 예외)을 반환합니다.   기본 예외처리  (try-catch) `try`  예외가 발생할 수 있는 코드`cat..

목차    🔍Compose  란? 여러개의 도커 컨테이너들을 하나의 서비스로 정의하고하나의 묶음으로 관리할 수 있게 도와주는 툴 여러개 컨테이너 관리에 도움줌복잡한 명령어로 실행시키던 걸 간소화 시킨다. Compose 생성    ✅파일명은 `compose.yml` 으로 생성    ✅  ` docker run --name webserver -d -p 80:80 nginx `해당 코드를 아래 yml 파일로 작성 한 것 yml 은 들여쓰기로 계층을 나누기 때문에 주의  Compose 실행  ✅` docker compose up ` 을 하면 nginx 가 실행됨을 알 수 있다. 즉, 간편하게 실행 가능!포그라운드 실행이기 때문에 (작업불가 ctrl + c 탈출)   ✅ ` docker compose up ` ..

목차    Spring Boot 프로젝트 Docker에서 실행시키기  ✅ SpringBoot 프로젝트를 준비해준다.      ✅ 해당 프로젝트를 Docker 로 실행시키기 위해서는  프로젝트를 이미지로 만들어야한다. 이미지를 만드는 법 > Dockerfile 생성하기생성하기전에 꼭! `./gradlew clean build ` 명령어로 빌드       ✅ Dockerfile 생성 `FROM openjdk:17-jdk` 베이스 이미지는 스프링프로젝트이므로 jdk 으로 세팅 COPY 빌드한 파일을 컨테이너로 복사 후 컨테이너에서 jar 실행  app.jar 은 상대경로인 상태 /app.jar 은 절대경로 엔트리 포인트에는 jar 파일을 jdk 로 돌리기 위해서 명령어 입력  우리는 즉, build 파일을  ..

목차     🔎 Dockerfile 이란DockerHub 에 올려져 있는 이미지들도 Dockerfile 을 활용해서 만들어지는 것임즉, 이미지를 만들게 해주는 파일임   FROM :: 베이스 이미지 생성베이스 이미지를 생성하는 역할을 함  (특정 초기 이미지를 기반으로 추가적인 세팅을 할 수 있음)베이스 이미지 기반으로 추가 세팅을 하는 것.필요에 따라 베이스 이미지를 골라주면 됨  ✅  FROM 베이스 이미지 생성 `Dockerfile` 로 파일 생성  `FROM [이미지명]``FROM [이미지명] : [태그명]`태그명 사용하지 않으면 최신버전 사용  `FROM openjdk:17-jdk` 베이스로 생성할     ✅ 이미지 생성  `-t [이미지명] [도커파일위치경로] `이미지 명을 어떻게 할건지 생..

GraphQL 이란?GraphQL 은 Facebook 에서 개발된 오픈소스 데이터 쿼리임API를 효율적으로 관리하고 사용할 수 있음  GraphQL 왜 사용할까?기존 REST API 의 단점을 보완하기 위해서 사용함   GraphQL 요청방식REST API : 특정 엔드포인트(URL)에 요청을 보낸다.GraphQL : 단일 엔드포인트를 통해 필요한 데이터를 쿼리로 요청 (한번에 요청 가능)  GraphQL 데이터 반환 방식REST API : 불필요한 데이터까지 과다요청(Over-fetching) , 여러 엔드포인트를 호출해야 데이터를 보을 수 있는 부족한 요청(Under-fetching)GraphQL : 정확하게 데이터 요청 가능, 한번의 요청으로 원하는 모든 데이터 포함 가능  GraphQL 엔드포인트..

Ajax ?AJAX ( Asynchronous Javascript and XML) 은 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술입니다. 웹 어플리케이션에서 데이터를 가져올 때 서버쪽 데이터가 필요할 때 ajax기법을 사용하게 됩니다.이 작업은 시간이 오래 걸릴 수도 있기 때문에 비동기적으로 처리하게 됩니다.비동기(asynchronous)는 요청이 끝날 때 까지 기다리는 것이 아니라, 동시에 여러 작업을 수행하게 됩니다.나중에 react에서는 다른 서버의 REST API와 통신을 이용하여 데이터베이스 데이터를 가져올 수 있습니다.  ES6 fetch 를 이용해 데이터 처리 (리액트)Promise = fetch(요청주소) 📍 이벤트 클릭시 처리하기데이터를 가져와서 useState()에 저장하는 작..

◈ 프로젝트 구조package.json >> build.gradle / pom.xml 과 동일 (라이브러리 , 버전 명시)라이브러리와 그 버전을 명시하여 프로젝트의 의존성을 관리하는 항목 dependency  : 라이브러리와 그 버전을 명시하여 프로젝트의 의존성을 관리하는 항목  scripts 명령문 : 자주 사용되는 명령어를 스크립트로 정의하여 쉽게 실행할 수 있도록 하는 항목eslintConfig : 기본 프로그램 도움 (코드 품질을 보장하기 위해 JavaScript 코드 스타일을 검사하는 도구인 ESLint의 기본 설정을 정의하는 항목)browserlist : 프로젝트가 지원해야 하는 브라우저의 범위를 명시 ( 브라우저 호환성을 유지하기 위해 필수 )◈  web pack loader자동 리로드됨 (..

프로미스는 자바스크립에 내장된 내장객체 입니다프로미스 객체에서는 2가지를 형태를 지닙니다. 1. 상태(state) pending : 수행중fullfilled : 성공적 완료rejected : 실패2. 프로듀서 - 정보를 제공하는 제공자(즉, Promise)    컨슈머 - 사용자(즉, 호출하는사람) 프로미스 생성executor콜백함수를 전달해야 하며 executor콜백함수는 다시 resolve함수와 reject함수를 받습니다.//매개변수는 컨슈머가 분명 콜백함수를 전달할거야!(그 콜백함수로 리턴해줄게!)let promise = new Promise( (success, fail) => { //producer 입장에서 성공했을 때 성공을 알리는 함수 success("success"); //..

😺 React 라우터에 대해 알아보기 전에 SPA 의 개념에 대해 알아보자. 📍 SPA란? (single page application)하나의 페이지로 만들어진 어플리케이션을 의미한다.전통적인 방식은 Server가 html 파일 만들고 data 실어서 응답하지만,spa 방식은 클라이언트에 html 세워두고 데이터만 요청응답을 통해 바꾼다.  SPA는 html파일을 브라우저 측에서 로드하고, 필요한 데이터는 API와 ajax통신을 이용해서 처리합니다.브라우저에서 사용자가 상호작용 하면 필요한 부분만 업데이트 해서 처리합니다.멀티플랫폼 Android, IOS에 대응하여 웹뷰로 처리하는 목적으로도 사용됩니다. 📍 SPA의 단점 (CSR방식)앱의 규모가 커지면, JS파일도 너무 커져서 로딩이 오래걸리게 됩..

목차   WebSocket 을 써보자 프로젝트에서 실시간 위치정보를 공유하는 기능을 개발하기로 했다. ✅ 웹소켓에 접속하면 접속한 유저 리스트를 가져온다.✅ 사용자 위치가 변경될때마다 소켓으로 위치정보를 보내면, 다른 사용자에게는 해당 사용자의 위치정보를 볼 수 있다.✅ 이때, 소켓으로 userId 를 보내면 자동으로 사용자 데이터를 불러오고 받아온 위치(위도,경도)도 함께 포함해서 다른 소켓 유저들에게 보낸다.   실시간 위치정보를 구현하기 위해서는 계속해서 위치데이터를 보내는 과정이 필요한데...이걸 HTTP 로 구현 하기에는 매우 힘들다. HTTP 의 특징 때문인데, 단방향통신인 점 (요청을 해야만 응답을 보낼 수 있음)요청을 할때마다 새롭게 연결해야하는 등 많은 단점이 있다. 양방향 통신을 구현하..

목차        위와 같이 리액트 캘린더를 이용해서 날짜를 받아오고 시간을 받아 올 수 있다.특정 날짜는 비활성화 시킬 수 있는 기능도 있다.(우리 같은 경우에는 예약이 꽉차거나, 휴무일이거나 , 지금으로부터 3개월 내 이외의 값은 disabled 된다.)    1) 리액트 캘린더 설치 (install) npm install react-calendar   2) 리액트 캘린더 사용 (import) import Calendar from 'react-calendar'; import "./Calendar.css";  `react-calendar` 와 `css` import 시켜주기     3) 날짜 가져오기 (Date seleted)  moment(date).format('D')} f..

목차  1) 페이지 구상  1. 상품별 ->  날짜별 ->  시간별 ->  예약 건수(Slot)를 제한하고 싶었다. (마치 네이버 예약처럼!)(보통 주문제작 케이크, 꽃집은 방문 날짜와 시간도 미리 정하게 되는데, 이 부분을 관리할 수 있게 하고싶었다.)다른 예약 플랫폼이 내부적으로 어떻게 관리되는지 세부적인 로직은 모르겠지만,이 경우 날짜, 시간 전부 관리할 수 있어야하기때문에 날짜 + 시간 데이터별 슬롯들을 전부 관리해야했다. 그리고 가게 휴무일이 바뀌다던가 (지정휴무와 고정휴무 두가지 방식을 구현헀다.)다양한 요소들도 슬롯에 영향을 줬기 때문에 데이터 수정이나 이래저래 너무 규모가 커져서 결국 방식을 변경했다.2. (확정) 날짜별로 받을 예약 건수를 지정하자. ⭐대신 시간대는 지정할 수 없다.. →..

목차    해당 프로젝트는 주문제작 소상공인들을 위한 주문 플랫폼 프로젝트입니다.프로젝트에 대한 자세한 내용은 깃허브를 참고해주세요 :)https://github.com/hyejux/Neez\ GitHub - hyejux/Neez: 예약 이젠 더 편리하게, 관리도 손쉽게 NEEZ 에서 경험해보세요! 「주문 제작 예예약 이젠 더 편리하게, 관리도 손쉽게 NEEZ 에서 경험해보세요! 「주문 제작 예약 서비스 "NEEZ "」 - hyejux/Neezgithub.com   [1탄]https://hyejux.tistory.com/828 [프로젝트/Spring Boot/Reactjs] 주문 시스템 구현 (카테고리 부분)목차     해당 프로젝트는 주문제작 소상공인들을 위한 주문 플랫폼 프로젝트입니다.프로젝트에 대한..

목차     해당 프로젝트는 주문제작 소상공인들을 위한 주문 플랫폼 프로젝트입니다.프로젝트에 대한 자세한 내용은 깃허브를 참고해주세요 :)https://github.com/hyejux/Neez GitHub - hyejux/Neez: 예약 이젠 더 편리하게, 관리도 손쉽게 NEEZ 에서 경험해보세요! 「주문 제작 예예약 이젠 더 편리하게, 관리도 손쉽게 NEEZ 에서 경험해보세요! 「주문 제작 예약 서비스 "NEEZ "」 - hyejux/Neezgithub.com     해당 게시물은 기능 구현에 대한 내용을 정리해두었습니다.     1) 페이지 디자인 구상  [관리자 페이지 디자인]       [유저 페이지 디자인]      일단 주문예약 폼 페이지 초기 디자인은 이러했다.  대충 유저페이지는 배달의 민..