최적화 1. 최적화 최적화(Optimization) 웹 서비스의 성능을 개선하는 모든 행위 아주 단순한 것부터 어려운 방법까지 다양힘 일반적인 웹 서비스 최적화 방법 서버 응답속도 개선 이미지, 폰트, 코드파일 등 정적 파일 로딩 개선 불필요한 네트워크 요...

useReducer 1. useReducer useReducer란? 컴포넌트 내부에 새로운 State를 생성하는 React Hook 모든 useState는 useReducer로 대체 가능 useState와 useReducer의 차이점? ...

Context 1. Context React Context 컴포넌트 간 데이터를 전달하는 또 다른 방법 기존의 Props가 갖고있던 단점 해결 가능 Props 의 단점? 부모 -> 자식으로만 전달이 가능하다. (Props Drilling) App에서 To...

투두리스트 투두리스트 1. 프로젝트 준비하기 요구사항 분석하기 기능 분석 오늘의 날짜를 요일, 월, 일, 연도 순 표시 할일 작성 입력 폼, 추가버튼 클릭 시 할일 아이템 생성 [할 일 관리] 앱은 생성한 아이템을 페이지 하단에 리스트로 표시하는데, 키워드 검색으로 원하는 할 일만 추출...

라이프 사이클 라이프사이클 1. 라이프 사이클(LifeCycle) 이란? 생애주기. 인간의 탄생부터 죽음까지의 타임라인을 단계로 나눈 것. Mount 컴포넌트가 탄생하는 순간. 컴포넌트가 화면에 처음으로 렌더링되는 순간. Update 컴포넌트가 리렌더링 되는 순간...

카운터앱 만들기 카운터앱 만들기 1. 프로젝트 준비하기 요구사항 분석하기 컴포넌트 단위로 생각하기 App 컴포넌트 : Viewer, Controller 컴포넌트를 감싸는 템플릿 Viewer 컴포넌트 : 현재의 컴포넌트 표시 Controller 컴포넌트 : 카운트를 제어할 수 있는 기능을...

React.js 입문하기 React.js 입문하기 1. 실습 준비하기 이전 포스팅대로 리액트 앱 생성 불필요한 소스파일 삭제 ./public/vite.svg ./src/assets/react.svg ./src/App.css 내부 소스만 삭제 ./src/index.css 내부 소스만 삭...

React.js 개론 React.js 1. React.js 란? Meta(Facebook)이 개발한 오픈소스 JavaScript 라이브러리 대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어짐 2. React 특징 컴포넌트 기반 UI 표현 컴포넌트(Component) : 화면을 ...

Node.js 기초 개발 환경 MAC, VSCode Node.js React 배우기 전 Node.js 배우는 이유? React.js는 Node.js기반으로 동작하는 기술이기 때문 Next.js, Vue.js, Svelte 등등 Node.js 기반 기술이 여럿 있음. 1. Node.js 란? 웹 브라우저가 아닌 환경에서도 자바...

ASAP 프로젝트의 마지막 단계인 젠킨스와 도커를 활용한 CI/CD를 진행하려고 한다. 젠킨스 EC2-Ubuntu와 운영 서버 EC2-Ubuntu를 나눠 관리하여 총 2대의 EC2 인스턴스를 사용하였다. 젠킨스 EC2 세팅 1. EC2 젠킨스 설치 wget -q -O - https://pkg.jenkins.io/debian-stable/je...