본문 바로가기

전체 글

 (92)
[Next.js] 5. Server Rendering strategy 1. Static Rendering빌드시 HTML이 생성 됨앱라우터는 기본적으로 스태틱 렌더링으로 동작정적인 페이지라 성능이 좋음. 블로그, 문서, 소개 페이지에 사용 됨동작원리빌드시 RSC, 자바스크립트 청크 파일이 만들어짐페이지 이동시 해당 파일들을 이용해 클라이언트 경로 생성 됨Prefetching 컴포넌트와 같이 페이지 이동 가능성이 높은경우 미리 해당 페이지 불러옴2. Dynamic Rendering사용자가 요청시 실시간으로 HTML 렌더링뉴스, SNS, 쇼핑몰 페이지 등 적합Next.js의 cookies(), headers(), searchParams 사용하여 구현3. Streaming서버에서 HTML 전체를 생성하고 클라이언트에 전송하는게 아닌 부분적으로 생성하고 전달전송되는 데이터가 큰 경..
[Next.js] 4. RSC 1. RSC리액트팀에서 서버 자원 사용과, 클라이언트 컴포넌트와의 역할 분리를 위해 만듦Next.js의 앱 라우터가 RSC 기반으로 만들어짐동작 원리데이터 페칭, 무거운 연산과 같은 역할은 서버에서 실행 후 결과 값 HTML만 클라이언트에 전달함서버컴포넌트는 HTML 결과 값만 렌더링, 데이터 페칭 결과값은 하위 클라이언트 컴포넌트에 전달하여 인터랙션 등 구현2. RSC 장점1-1. 번들 사이즈 감소서버 컴포넌트는 클라이언트 측으로 번들링되지 않음즉 필요하지 않은 컴포넌트, 라이브러리 의존성은 배제 됨1-2. 서버 리소스 활용DB, 파일 시스템 접근 가능기존 클라이언트 컴포넌트에서 렌더링 이후 useEffect를 사용하여 fetch 보다 효율적임1-3.  명확한 역할 분리클라이언트, 서버 컴포넌트의 명확..
[Next.js] 3. 로딩 ui, 에러 핸들링, Routes 1. 로딩 ui해당 폴더에 loding.tsx 생성시 먼저 렌더링 됨 2. 에러 핸들링해당 폴더에 error.tsx 파일 생성시 에러 발생시 해당 파일 렌더링 됨컴포넌트에서 error 프로퍼티 전달받을 수 있음reset 메소드로 재시도 가능중첩 라우츠 에러 핸들링폴더 단위 가까운 error.tsx 파일 렌더링 됨Layouts 에러 핸들링layout.tsx, error.tsx 두 파일이 같은 레벨 계층에 존재하면 에러 발생시 캐치 불가능이유는 Layout 컴포넌트가 ErrorBoundary 보다 상위에 위치함error.tsx 파일이 layout.tsx 보다 상위 레벨 계층 폴더에 존재하도록 해야함 3. Routes3-1. Parallel Routes폴더내부 @something 와 같은 폴더 명명으로 생성s..
[Next.js] 2. 레이아웃, 메타데이터, 네비게이션, 템플릿 1. 레이아웃폴더 내 layout.tsx 파일이 최상위로 렌더링되어 주로 큰 UI 덩어리 단위로 나누는 용도 (헤더, 메인, 푸터)app 폴더 내부 layout.tsx 파일은 최상위 레이아웃이라 모든 파일에서 렌더링 됨중첩 레이아웃각 폴더의 layout.tsx 파일은 해당하는 라우팅에서 렌더링 됨레이아웃 라우팅 순서: app 최상위 layout.tsx > 각 폴더 layout.tsxRoute group  레이아웃폴더명을 () 로 감싼 routes group에서도 동일하게 동작함2. 메타 데이터metadatapage.tsx, layout.tsx 파일에서 expoort하여 정의중복시 최상위 > 각 폴더 순서로 메타데이터 각 항목 덮어쓰기 됨generateMetadataparams 인자로 path variab..
[Next.js] 1. 개요, 폴더구조, RSC, 라우팅, not found 1. Next.js란?리액트의 메타 프레임워크 - 리액트는 유저인터페이스 도구임. 라우팅, 데이터 페칭 등 작업은 개발자가 알아서 해야함 리액트 사용하여 작업시 필수적인 기능들을 제공함- 라우팅, 렌더링 최적화, 데이터 페칭, 빌드 및 컴파일 - 별도 패키지 설치, 셋팅 필요없이 바로 작업 가능2. 폴더구조- src/app 하위 폴더를 만들어 라우팅 분기점을 생성- layout.tsx > page.tsx 파일 순서로 렌더링 됨- 각 폴더에서도 렌더링 되는 순서는 같음 ex) /about 렌더링 순서src/app > layout.tsx > page.tsx > about 폴더 > layout.tsx > page.tsx3. RSCNext.js의 모든 컴포넌트는 기본적으로 서버 컴포넌트임 서버 컴포넌트- 렌더링..
9-2. docker AWS EB, RDS, VPC, IAM 실습 1. IAM 역할 생성엘라스틱 빈스톡 권한 추가2. 엘라스틱 빈스톡 생성3. IAM 유저 생성보안자격증명에서 엑세스키 만들기4. 깃 저장소 생성환경변수 추가AWS 엑세스키, 도커 계정5. aws rds 생성6. VPC에서 보안그룹 생성인바운드 규칙에서 보안그룹 추가DB에 해당하는것. 포트 33067. rds, EB에서 생성한 보안규칙 넣기8. EB에서 도커 yml에 사용되는 환경변수 삽입MYSQLhost 변수는 rds의 엔드포인트 삽입8. 깃허브 액션 파일 EB에 알맞게 변수 수정9. 깃 저장소 push
9-1. github action, Dockerrun.awe.json, VPC, Security Group github actionname: Deploy FullStackAppon: push: branches: - main jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 # 도커 로그인 - run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin # 프론트엔드 테스트를 위한 빌드 - run: docker build -t nathaneast/react-test-app -f ./frontend/Dockerfile.dev ./..
8. docker FE, BE, mysql, nginx 실습 1. 애플리케이션 설계 2. 백엔드 소스코드 작성DockerFile(중복 생략)3. 프론트엔드 소스코드 작성DockerFileDockerFile.dev(중복 생략) nginx / default.conffe단에서 nginx 역할: 정적 소스코드 파일 제공server { listen 3000; location / { #html 위치할 루트 파일 경로 root /usr/share/nginx/html; #사이트의 index 페이지 파일명 index index.html index.htm; #react router 위한 셋팅 try_files $uri $uri/ /index.html; }} 4. mysql개발환경: 도커파일 운영환경: AWS RDS Docker..

티스토리툴바