개발일지📝

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

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

HTTP클라이언트가 요청(Request) → 서버가 응답(Response)응답 후 연결이 닫힘 (Stateless)새로운 요청마다 다시 연결 필요주로 단방향 통신 (클라이언트 → 서버)데이터를 헤더에 포함시켜서 전달함 폴링(Polling)클라이언트가 일정 주기로 서버에 요청하여 데이터 갱신을 확인하는 방식장점: 기존 HTTP 방식에서 쉽게 구현 가능단점: 응답이 없더라도 계속 요청을 보내므로 네트워크 낭비 발생, 리소스 낭비가 매우 심함, 실시간성이 낮다.* 네트워크 오버헤드 : 실제 데이터 이외의 메타데이터 들의 불필요한 네트워크 부하 WebSocket한 번 연결하면 종료 전까지 유지 ( Persistent  Connection)양방향 통신 가능 (클라이언트 ↔ 서버)지연 시간이 짧음 (빠른 실시간 데..

목차        위와 같이 리액트 캘린더를 이용해서 날짜를 받아오고 시간을 받아 올 수 있다.특정 날짜는 비활성화 시킬 수 있는 기능도 있다.(우리 같은 경우에는 예약이 꽉차거나, 휴무일이거나 , 지금으로부터 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. (확정) 날짜별로 받을 예약 건수를 지정하자. ⭐대신 시간대는 지정할 수 없다.. →..

레이아웃 템플릿 적용: layout03 템플릿에 container 부분을 전달하여 해당 템플릿의 특정 부분만 교체하는 방법을 보여줍니다. 이처럼 여러 페이지에서 공통된 레이아웃을 유지하면서, 특정 부분만 동적으로 교체할 수 있습니다. 이 화면에 진입할 때 TestVO를 Model에 담아 화면처리를 합니다. 1. 회원정보확인 링크에는 quiz_result01?키=값 형태로 번호를 넘기고 출력해 주세요 2. 아래 class="container" 부분만 layout03 템플릿에 전달 될 수 있도록 처리하세요 회원번호: [[${vo.num}]] 이름: [[${vo.name}]] 나이: [[${vo.age}]] 회원정보확인   결과화면 넘어온 값: [[${num}]]   ..

@RestController //Controller + ResponseBody(컨트롤러에서 응답을 요청이 들어온곳으로 바꿈) 합성어    JSON 형식의 반환 1. Vo 타입  2. Map 타입     json형식으로 데이터 전송 @RequestBody - JSON데이터를 -> 자바 오브젝트로 변형해서 맵핑 { "name" : "홍길동", "age" : 20, "addr" : "서울시시" }       /////////////////////////////////////////////////////////////////////////////// //응답문서 명확하게 작성하기 ResponseEntity //@CrossOrigin({"http://127.0.0.1:5500", "h..

타임리프 내장객체 사용방법 배열의 길이 [[${ #arrays.length(arr) }]] 리스트의 길이 [[${ #lists.size(list) }]] 빈리스트 확인 [[${ #lists.isEmpty(list) }]] [[${now}]] [[${ #dates.format(now, 'yyyy-MM-dd') }]] 자바스크립트로 값 받기

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

HTTP클라이언트가 요청(Request) → 서버가 응답(Response)응답 후 연결이 닫힘 (Stateless)새로운 요청마다 다시 연결 필요주로 단방향 통신 (클라이언트 → 서버)데이터를 헤더에 포함시켜서 전달함 폴링(Polling)클라이언트가 일정 주기로 서버에 요청하여 데이터 갱신을 확인하는 방식장점: 기존 HTTP 방식에서 쉽게 구현 가능단점: 응답이 없더라도 계속 요청을 보내므로 네트워크 낭비 발생, 리소스 낭비가 매우 심함, 실시간성이 낮다.* 네트워크 오버헤드 : 실제 데이터 이외의 메타데이터 들의 불필요한 네트워크 부하 WebSocket한 번 연결하면 종료 전까지 유지 ( Persistent  Connection)양방향 통신 가능 (클라이언트 ↔ 서버)지연 시간이 짧음 (빠른 실시간 데..

SPA 와 MPA 는 웹 애플리케이션의 구조와 동작 방식에 구분되는 패턴이다.어떻게 동작하고 어떻게 페이지를 랜더링하는 지가 중점이다.   MPA (Multi-Page Application)정의:MPA는 다중 페이지 애플리케이션을 의미하며, 각 페이지마다 개별적인 HTML 파일이 로드되는 웹 애플리케이션입니다. 일반적으로 서버에서 각 페이지를 렌더링하고, 각 URL은 하나의 고유한 페이지를 표시합니다.특징:페이지 전환: 사용자가 다른 페이지로 이동할 때마다, 새로운 HTML 페이지를 서버에서 로드하게 됩니다.서버 렌더링: 요청이 있을 때마다 서버에서 HTML을 렌더링하고, 이를 클라이언트에 전달합니다.동적 페이지: 클라이언트가 필요한 데이터를 요청하면 서버가 이를 처리하여 새로운 페이지를 렌더링합니다.장..

목차    Content-Type, MIME type, media type의 관계 이들은 모두 같은 개념으로, 인터넷에서 파일 포맷과 콘텐츠를 식별하는 데 사용과거에는 MIME type 으로 불렸지만, 지금은 media type 으로 사용함. 때때로 content type 이라고도 불림     MIME( Multipurpose Internet Mail Extensions ) type파일의 형식을 나타내는 문자열로 파일과 같이 송신되는데 content의 형식을 나타내기 위해 사용윈도우의 파일 확장자와 동일한 역할이메일 메세지 , 첨부파일 종류를 고지하기 위해 정의되었고 이를 근거로 MIME 타입이라는 이름이 만들어짐지금은 Media Type 이라는 용어로 사용 된다.   media type 미디어 타입은 ..

목차    HTTP 란? HTTP는 HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 애플리케이션 계층 프로토콜  (클라이언트-서버 프로토콜)  * 프록시 :  애플리케이션 계층에서 동작하는 것들을 일반적으로 부르는 말, 하단의 기능들을 수행 할 수 있다.캐싱 (캐시는 공개 또는 비공개가 될 수 있습니다 (예: 브라우저 캐시))필터링 (바이러스 백신 스캔, 유해 컨텐츠 차단(자녀 보호) 기능)로드 밸런싱 (여러 서버들이 서로 다른 요청을 처리하도록 허용)인증 (다양한 리소스에 대한 접근 제어)로깅 (이력 정보를 저장) HTTP 특징 무상태(Stateless) : HTTP는 상태를 저장하지 않고,각각의 요청과 응답이 독립적으로 처리됨, 서버는 요청 간의 연결 상태를 유지하지 않으므로 효율적이지만, ..

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자동 리로드됨 (..

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

[ eclipse  깃허브 협업 방법 ] 1. 프로젝트를 진행할 레파지토리 생성github 에서 repositories 를 하나 생성한다.  2. 콜라보레이터 초대하기같이 협업할 사람을 초대한다. Collaborators이때 초대를 수락해야한다. 3. 이클립스와 깃허브 연결하기이클립스에서 Import -> git -> clone 이때 깃허브 Settings > Developer-Settings > Token 을 생성한다. 4. 잘 연결 되었는지 서버 켜서 확인해주면 끝  [ 협업 시 깃 허브 사용법 ? ]  (팀장) 내 github 계정연결$git config --global user.email "본인이메일주소"$git config --global user.name "본인이름"  초기 코드 업로드하기$g..

git init 과 원격 레포지토리가 연결 되어었는 상태에서 안에 배치파일 누르시면 자동으로 푸쉬된다.!   *** 수동 업로드하기 Open Git Bash here  깃 시작하기$ git init  깃 초기 세팅 $ git config --global user.name "본인이름영어"$ git config --global user.name 본인이메일$ git config --list깃허브 회원" data-og-host="hyejux.tistory.com" data-og-source-url="https://hyejux.tistory.com/633" data-og-url="https://hyejux.tistory.com/633" data-og-image="https://scrap.kakaocdn.net/d..

comflict 란? comflict 는 같은 파일, 같은 위치를 여러 사용자가 동시에 수정할 때 발생하는 오류이다. merge / rebase 작업 중 자동으로 해결할 수 없는 변경 사항이 있을 때 발생한다. ex) 1) A 브랜치와 B 브랜치가 있다.2) 두 브랜치를 동일파일, 동일 라인을 수정함 3) A 로 체크아웃하여 B 를 병합한다 (merge) .  ---> Automatic merge failed; fix conflicts and then commit the result. >>>>>> B-branch  comflict 발생 시 해결방법comflict 발생한 파일을 수동으로 수정해주면 된다.더보기pull 당겨오면 comflict 발생 >쓰던 코드를 add / commit >pull (comf..