제대로 된 HTML 강의를 듣고 나서 정리, 복습 겸 작성하는 포스트. HTML이란 웹 페이지를 만들기 위한 기술. 웹 페이지의 구조를 설명하는 문서. 프론트에서 사용하고, 다른 언어로는 React, Vue 등이 존재 한다. HTML -> tag + 속성 > 특징 1. 무조건 바디 안에 내용을 작성. > 특징 2. 경로가 중요하다. 상대경로 절대...

선택자를 찾는 것이 가장 중요하다. (위치) 우선 순위로 iimportant 속성을 사용할 수 있다.

JacaScript란?웹 페이지의 동작을 정의하는 기능을 수행한다.프론트엔드 하면 대표적으로 3가지를 들 수 있다.HTMLCSSJavaScript물론, 위의 2개로만도 웹 페이지를 구성할 수 있지만 우리가 흔히 보는 웹 페이지를 만드려면 반드시 필요한 언어이다.대표적으
자바스크립트 함수의 4가지를 알아볼 것이다. 함수의 기본 형태 return의 역할 함수가 쓰이는 곳 함수의 실행 함수란, 동작해야 하는 내용을 미리 정의해 놓고 필요할 때마다 부르는 것이다. 강사님께서 아주 적절한 예를 들어주셨는데, 내가 피자를 만드는 일을 해야한

자바스트립트에서 객체 데이터를 받아오는 것을 정리하기 전에 export와 import부터 정리해 보려 한다. 일단, import는 가져오는 것, export는 외부 라이브러리라고 생각하면 쉽다. 한 파일에 export는 여러 개를 만들 수 있고, 만든 함수 이름을
자바 스크립트에서의 DOM이란?body안에 있는 요소들을 말한다.DOM을 쉽게 설명하면 웹의 하얀 영역이다. (다크 버전은? ㅋ)조금 더 자세히 말하자면, 자바스크립트에서 각각의 요소를 이용할 수 있게 html의 태그들을 객체로 만든 것이라 생각하면 된다.DOM을 어떻

html, css, javaScript 까지 공부 했으면 대망의 React를 공부할 차례이다. html은 vscode에서 라이브서버를 이용하여 바로 웹을 확인할 수 있지만, 리액트는 nodejs의 도움을 받아야 한다. nodejs 설치. 인터넷에 nodejs를 검색

대망의 리액트가 시작되었다. 본격적인 공부를 하자마자 엄청난 위기가 왔지만 심기일전 해보자!리액트는 여러 컴포넌트로 코드를 구상한다. 컴포넌트는 쉽게 말해서 함수와 같은 단위이다. 이렇게 코드를 짜게 되면 여러 사람이 협업하기 좋은 일명 유지보수 하기도 좋은 상태가 된
State란? 각 컴포넌트가 가지고 있는 저장 공간을 말한다. props로 넘기는 값을 변경하기 위해 사용된다. (즉, props 값은 변경 불가능) state를 이용하여 상태가 변경되면, state를 가진 컴포넌트는 랜더링된다. (새로고침) 이제, state의

이번 포스트에서는 배웠던 react지식을 활용해 직접 코드를 통해 실습하는 시간이었다. 최대한 흐름을 따라가려고 노력했고, 흐름 중심으로 이해하는 것을 최우선 목표로 하고 있다. 1. signup 미션 1. 체크박스를 표시하면 회원가입 폼들이 보이도록 만들기.

오늘은 지난주 부로 프론트엔드 과정이 끝나고, devops에 관한 tool에 대한 특강에 대해 배우는 시간을 가졌다. 그 중, github, jenkins에 대한 실습을 진행했기 때문에 그 두개를 중점적으로 정리하려고 한다.github.버전 관리 및 협업을 위한 툴.깃

드디어 프론트엔트 파트가 끝나고 (벌써..?) 대망의 백엔드 파트가 시작되었다. 프론트엔드 활용 부분은 나의 반려 복습 친구로 남겨둔채.. 백엔드 복습 시작!자바와 인텔리제이를 사용할 것이기 때문에 그에 따른 환경 설정부터 정리해보자. 자바는 특히나 환경 변수 설정이

자바에서 은근 계속 헷갈리는 것이 클래스, 메소드(기능)이다. 자동차를 예로 들었을 때, 클래스 : Car클래스 안에는 color라는 속성값, 달리기( ), 멈추기 ( ) 이런 기능(메소드) 이라 정의할 수 있다.기능 사용법은?클래스에서 객체 생성 객체.기능들객체에

2일차 포스팅 맨 처음에 메소드와 클래스에 대한 개념을 정리해 놓았는데, 오늘 주제가 메소드와 클래스였다 ㅋㅋ 더 자세히 정리해보자.메소드는 간단히 말해 기능 역할을 한다. 어떤 주문을 하면, 결과를 반환한다.메소드는 보통 한가지 기능만 가지는 것이 좋다.메소드는 리턴
클래스 변수 : 클래스 영역에 쓰이는 변수. 1\. 전역 변수 2. 스태틱 변수가 있음.나머지는 모두 지역변수.<클래스>메소드가 불릴 때 메모리에 저장된다. (static) new xxx 객체 생성 될 때 (static x)<지역>메소드가 불릴 때.메모리가
부모의 모든 것을 자식이 물려받음.자식이 부모인 척 하려고 사용.관리를 보다 편하게 하려고 이용.정의 : 메소드를 재정의목적 : 부모 메소드를 자식만의 기능을 커스텀하여 구현하기 위함형태 : extends 사용목적 : 같은 카테고리 묶이기 위함 ( 스포츠카 -> Car
예외처리2 컬렉션 대표적으로 List, Set, Map이 존재한다. (map은 컬렉션 상속 받지 않음) List - ArrayList Set - HashSet Map - HashMap ArrayList 옆으로 배열. 자바의 배열 []와는 조금 차이가 있다. 대

입출력 바이트 vs 문자 가장 큰 차이점은 바이트는 Stream, 문자는 Reader를 사용한다. 입력 : InputStream 출력 : OutputStream 인코딩 x 복사할 때 -> 문서를 읽어야 한다면 문자로 가는게 나음. 입력 : Reader 출력 :

오늘은 자바가 끝나고 데이터베이스 시작날이다! 벌써 자바가 끝난 게 믿기지 않지만... 나의 반려 복습 친구들만 늘어난다 ㅎ스프링부트로 넘어 가기 전, 데이터베이스를 다뤄야 하기 때문에 기본적인 sql은 다룰줄 알아야 한다. 강의에서는 MariaDB를 이용하지만 sql
시간이 너무너무 빠르다. 벌써 일주일의 마지막이다. 이 시간들을 의미없이 흘려 보내지 않기 위해 더 열심히 해야겠다고 생각하게 되는 금요일이다. 문자열 두개를 합치는 함수. 집계함수를 쓰면 결과가 함축되어 출력된다.해결방법 : 서브쿼리로 작성!단, 서브쿼리를 굉장히
스프링부트의 소개, 프로젝트를 위한 환경 설정, 기본 IoC, DI, Bean등의 설명과 활용법에 관한 정리

스프링부트의 MVC, Controller, json, html의 요청받는 여러 annotation 사용법
GET, POST 방식들의 예제들과 AJAX를 이용한 POST 방식의 2가지 방법. (formDaga, jsonData)
JPA에 대한 설명과 활용 방법
N : 1 관계를 Entity에서 설정하기, Entity 를 DTO로 만들어 원하는 값만 출력하기, 양방향 관계 설정에서 나올 수 있는 오류와 해결 방법

타임리프, 페이징 기능 구현

타임리프를 이용한 css 활용 및 세션에 대한 설명
이번 강의 시간에는 배운 것들을 총점검하는 시간으로 게시판 만들기 과제가 주어졌다. 만들면서 배웠던 것을 복기하고 어떤 시행착오가 있는지 간단히 정리하려 한다. 페이징 기법 전통 방식 한 페이지당 글 개수 10개. JPA 기반 페이징 Pageable 이용 Page 객체로 페이지 정보 및 데이터 제공 검색, 정렬도 자동 연동 두 방식의 비교 | 항...
기다긴 연휴가 끝나고 다시 시작된 수업. 다른 때보다 굉장히 적응하기 힘들었고 정신 차리자 주문을 외다 끝난 하루 ㅋㅎ 다시 마음을 잡고 달려보자 타임리프를 끝내며.. MVC 패턴 중, 스프링에서 VIEW로 사용되는 기술 : 타임리프, jsp JSP : <% 포함되어야 한다. 의존성 추가해 주어야 한다. 확장자가 jsp가 된다. ✅ ...
✅ Interceptor, 파일 업로드, 파일 다운로드에 대한 흐름, 예시 코드
스프링 시큐리티 동작 흐름 설명.
✅ CORS, CSRF, JWT에 대한 개념, 예시 코드

api 작성에 관한 내용, 리액트 간단한 복기

오늘은 미니 프로젝트 끝난 첫번째 월요일, MSA 1일차이다. 꽤 정들었던 강사님의 목소리를 듣지 못해서 이제 아쉽겠지만 또 다른 시작이다. 또한 프로젝트에서 너무 너무 아쉬운 부분이 많았지만.. 그 부분은 앞으로 계속 리팩토링 하는걸로!
스프링 클라우드 실습. 유레카 서버 이용, openfeign 이용

Api gateway는 클라이언트가 애플리케이션에 api 요청을 하는 단일 창구 역할을 하는 서비스이다. 또한 인증, 모니터링 등 부수적인 일도 담당한다. 이전 프로젝트까지는 방어벽 없이 직접 서비스로 접근하는 방식으로 통신했다. API Gateway는 그것을 방지하기

JWT 적용에 대한 자세한 코드 이야기

지난 시간에는 jwt 적용을 했다면 이번 시간에는 api gateway에 jwt와 스프링 시큐리티를 적용해보는 시간을 가졌다. 목적 보안 처리는 필터 체인을 따라 진행된다. 게이트 웨이에서 등록한 체인이 클라이언트 요청을 가로채서 필터링한다. 용어 Authent

이제 글쓰기 작성을 위한 post 프로젝트를 생성할 것이다. 현재 스프링 클라우드에 대한 내용을 실습하고 있지만 서비스 로직 작성하는 부분이 대부분이기에 조금 더 흐름을 익히고 정리하기 위한 포스트가 될 것 같다. 프로젝트 환경 설정 프로

이전 실습까지는 직접 알림을 보내는 작업을 했다면, 이번 시간부터는 카프카를 이용해서 알림 서비스를 구현해볼 것이다. ✅ Event Driven Architecture ✅ Kafka란? 분산 메시지 큐 시스템으로, 대용량 데이터를 비동기적으로 처리할 수 있게 해주

이번 포스트에는 cloud config server를 도커 환경에서 실행하고 배포하기 위한 CI/CD의 단계를 진행할 것이다. config 서버 MSA로 서비스를 분리하면서 많은 서비스를 관리해야 하는 상황이 온다. 이때 각각 설정들이 다른 경우가 매우 많아서, c

CI/CD CI : 빌드, 데스트 CD : 딜리버리, 디플로이(아르고 cd -> 쿠버네티스 Deploy) 딜리버리 : 컨테이너 레파지토리에 올리기. 디플로이 : 레파지토리 + 운영환경 Jenkins : CI/CD 플랫폼. 파이프라인 구축에 사용! Jenkins

이번 시간은 쿠버네티스 입문 편으로, 쿠버네티스 대시보드를 설치하고 초기 환경을 살펴보는 시간을 가졌다.컨테이너화된 애플리케이션을 자동으로 배포, 관리하기 위한 오픈소스 플랫폼도커 데스크탑 -> 설정 -> 쿠버네티스 -> Enablekubectl versionkubec

외부에서 쿠버네티스 클러스터로 접속하는 가장 쉬운 방법.지정된 고정 포트를 열고, 해당 포트를 통해 외부 트래픽을 내부 파드로 전달.포트는 30000~32767 사이에서 사용.🚄 외부 -> 노드 포트 -> 노드 포트 서비스 -> 타겟 포드노드 포트 -> 로드 밸런서

(k8s) mysql service yaml(backend) 의존성, yml 등 추가mysql을 연동하려면 현재 내가 사용하고 있는 ip를 확인해야한다. 와이파이 연결하고 있다는 전제 하에 cmd에 ipconfig를 입력해서 IPv4 주소를 확인해서 메모해둔다.buil

ConfigMap은 설정값을 관리하는 Kubernetes 리소스.환경변수, 설정파일, 명령줄 인자처럼 애플리케이션의 설정 데이터를 외부에서 분리해서 관리.값을 가져오려고 사용.ConfigMap Depolyment볼륨 이름을 먼저 정의!쿠버네티스에 추가할 컨피그 리소스

backend-post 서비스를 만들면서 쿠버네티스 흐름을 정리해보자.application.yml : 프로젝트 이름, 카프카 설정application-dev.yml : 쿠버네티스로 전달, 경로만application-local.yml : jdbc 설정, 카프카 도커파일,
✅ ArgoCD git 저장소에 선언된 구성을 쿠버네티스 클러스터에 자동으로 동기화해서 지속적 배포를 구현하는 딜리버리 두조 설치(윈도우) kubectl create ns argocd -> 네임스페이스 생성 kubectl apply -n argocd -f http
인터넷을 통해 서버, 스토리지, 데이터베이스, 네트워크, AI, 보안 등 IT 자원을 제공하는 클라우드 플랫폼AWS 리소스에 대한 접근을 안전하게 제어하는 서비스인증(로그인) + 인가(권한)사용자(User), 그룹(Group), 역할(Role), 정책(Policy)으로

모놀리식 -> MSA 전환 프로젝트 과정, 트러블슈팅