투두리스트 투두리스트 1. 프로젝트 준비하기 요구사항 분석하기 기능 분석 오늘의 날짜를 요일, 월, 일, 연도 순 표시 할일 작성 입력 폼, 추가버튼 클릭 시 할일 아이템 생성 [할 일 관리] 앱은 생성한 아이템을 페이지 하단에 리스트로 표시하는데, 키워드 검색으로 원하는 할 일만 추출...
[REACT] 라이프사이클
라이프 사이클 라이프사이클 1. 라이프 사이클(LifeCycle) 이란? 생애주기. 인간의 탄생부터 죽음까지의 타임라인을 단계로 나눈 것. Mount 컴포넌트가 탄생하는 순간. 컴포넌트가 화면에 처음으로 렌더링되는 순간. Update 컴포넌트가 리렌더링 되는 순간...
[REACT] 카운터앱 만들기
카운터앱 만들기 카운터앱 만들기 1. 프로젝트 준비하기 요구사항 분석하기 컴포넌트 단위로 생각하기 App 컴포넌트 : Viewer, Controller 컴포넌트를 감싸는 템플릿 Viewer 컴포넌트 : 현재의 컴포넌트 표시 Controller 컴포넌트 : 카운트를 제어할 수 있는 기능을...
[REACT] React.js 입문하기
React.js 입문하기 React.js 입문하기 1. 실습 준비하기 이전 포스팅대로 리액트 앱 생성 불필요한 소스파일 삭제 ./public/vite.svg ./src/assets/react.svg ./src/App.css 내부 소스만 삭제 ./src/index.css 내부 소스만 삭...
[REACT] React.js 개론
React.js 개론 React.js 1. React.js 란? Meta(Facebook)이 개발한 오픈소스 JavaScript 라이브러리 대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어짐 2. React 특징 컴포넌트 기반 UI 표현 컴포넌트(Component) : 화면을 ...
[REACT] Node.js 기초
Node.js 기초 개발 환경 MAC, VSCode Node.js React 배우기 전 Node.js 배우는 이유? React.js는 Node.js기반으로 동작하는 기술이기 때문 Next.js, Vue.js, Svelte 등등 Node.js 기반 기술이 여럿 있음. 1. Node.js 란? 웹 브라우저가 아닌 환경에서도 자바...
[Jenkins] Jenkins와 Docker를 활용한 CI/CD
ASAP 프로젝트의 마지막 단계인 젠킨스와 도커를 활용한 CI/CD를 진행하려고 한다. 젠킨스 EC2-Ubuntu와 운영 서버 EC2-Ubuntu를 나눠 관리하여 총 2대의 EC2 인스턴스를 사용하였다. 젠킨스 EC2 세팅 1. EC2 젠킨스 설치 wget -q -O - https://pkg.jenkins.io/debian-stable/je...
[Nginx] 도메인 연동, SSL 적용, SSE 통신 헤더 설정
재고관리 프로그램 프로젝트를 진행하며 배포 과정에서 웹서버로 Nginx를 택하였고 Nginx Proxy 서버에 SSL 인증서를 등록하여 HTTPS를 적용하였다. 해당 과정을 잊지 않기 위해 블로깅하려고 한다. 이 글은 AWS EC2에 1차 배포가 되어있다는 가정 하에 작성된 글이다. Route 53 도메인 구매 및 연결 1. gabia에서 원...
[Spring] 회원가입 인증 이메일 구현 (+ 비동기, Redis)
팀 프로젝트를 진행하며 Security, OAuth2 와 함께 인증 이메일 전송을 맡게 되었다. 오늘은 인증 이메일 구현 포스팅을 하려고 한다. 회원가입 인증 이메일 구현 일반적으로 이메일 인증에 사용되는 방법은 두가지가 있다. 이메일 인증 URL을 전송하여 URL 접속 시 인증되는 방식 인증 코드를 전송하여...
[Spring] 속도 측정 코드 StopWatch
속도 측정 코드 프로젝트를 진행하다 보니 각 메서드 별 시간을 측정해야한다는 것을 느꼈다. Spring의 util에 간단하게 속도를 측정할 수 있도록 지원해주는 StopWatch 가 있다는 것을 알았고 필자가 자주 사용할 거 같아 블로그에 써두려고 한다. StopWatch stopWatch = new StopWatch(); stopWatch.st...