전체 글 썸네일형 리스트형 AWS s3-Cloudfront 리액트 프로젝트 Codepipeline 자동화 (Lambda) 이전 글에서 s3 - Cloudfront에 리액트 프로젝트를 배포하는 법을 알아보았는데 이번에 Codepipeline을 이용해서 깃으로 푸쉬 할 때 마다 자동으로 배포와 Cloudfront의 배포 무효화 까지 한 번에 하는 방법을 알아보자 기존 CodePipeline 생성 시 기본적인 세팅들을 그대로 따라가주면 혹 buildspec.yml 파일을 작성하는데 어려움이 있다면 아래를 참고하면 되겠다. * buildspec.yml 파일 생성 base-directory 폴더명은 본인이 빌드 파일 떨구는 폴더 명을 적어주면 된다. 기존 Codepipeline을 이용한 배포에서 추가적으로 해줘야 할 것이 있는데 바로 Deploy 다음에 스테이지 하나를 추가하여 Cloudfront에 배포 무효화 해주는 것이다. 무효.. 더보기 AWS S3에 React 프로젝트 배포 하기 (s3 + Cloudfront) 현 회사에서 ECS, EC2 를 이용한 클라쪽 프로젝트 배포가 어찌보면 일상화가 되어 있었는데 새로운 방법으로 해보고 싶어서 s3로 배포를 해보면 어떨까 하고 문서를 찾아보며 배포해보게 되었다. https://rainbound.tistory.com/472 애초에 관련한 문서는 다 많았지만 현 날짜 기준 바뀐 인터페이스에 관해서는 별로 문서가 많지 않았다. 우선 원리는 간단하다. React 빌드 -> s3 버킷 생성 후 업로드 -> cloudfront 설정 후 배포 -> cloudfront 대체 도메인 후이즈 도메인 네임서버에 연결 내가 직접 했던 과정을 스크린샷을 겸해가며 작성해보겠다 1. 리액트 파일 빌드 2. s3 버킷 생성 퍼블릭 세팅 풀어주고 사진 항목.. 더보기 svelte tailwindcss 세팅 (sveltekit XXX) 기존에 리액트에 tailwindcss 세팅을 한 적이 있었는데 svelte에 적용시키려고 레퍼런스를 찾으려다 보니 죄다 sveltekit 관련한 것들이 주를 이루었었는데 물론 큰 차이는 없겠지만 svelte 프로젝트에 세팅하는 법을 한 번 찾아 보다 좋은 글을 찾았다. https://codingcat.dev/post/install-tailwindcss-in-svelte-with-1-command 위 글에서 찾은 내용을 요약하면 1. 설치 후 업데이트 npx svelte-add tailwindcss npm install 2. tailwindcss.config.js , postcss.config.js, svelte.config.js 파일 세팅 // svelte.config.js import preproces.. 더보기 Svelte 라우팅 설정 가장 유명한 2가지 라이르러리중 하나를 골라 사용하면 된다. 1. svelte-spa-router 2. svelte-routing 작성일 기준 라이브러리 버전 관리가 1번은 10달전이 최근이고 2번은 10일 전이 최근이기 때문에 2번으로 선택해서 진행했다. 공식문서만 봐도 잘 이해가 잘 되게 해놨지만 방법을 정리해보면 npm i -D svelte-routing 설치해준 뒤 App.svelte 다. React에서 Router 사용하듯이 경로와 컴포넌트 설정 해주면 된다. 지금 공식문서에 가보면 이런식으로 정의 되어 있는데 컴포넌트를 사용하면서 스타일이 안 먹어서 class 명을 붙여주고 다시 스타일을 정의해줘도 먹지 않았다. 마이페이지 // 얘 작동안됨 마이페이지 // 얘 잘 됨 LOGOUT 확실히 sve.. 더보기 Svelte Store (전역 상태 관리) React를 만져본 분이라면 Redux, Recoil, ContextApi 등 컴포넌트 별로 상태값을 전달 하는게 아닌 컴포넌트들과 동 떨어져 있는 한 장소에서 값을 관리하여 props를 통해 애써서 컴포넌트 별로 전달하고 받을 필요가 없어지는 것이다. 위 사진은 7번 컴포에서 10번 컴포로 props를 통해 값이 변하는것을 전달하는 과정인데 규모가 그리 크지 않음에도 벌써 귀찮을 거 같은 느낌이 든다. Store와 같은 전역 상태 관리 도구를 썻을 때 단계이다. 쇽쇽쇽쇽쇽쇽에서 쇽쇽으로 바꼇다. 이것만 봐도 애용해야 될 이유는 충분하다. 사용하기 위해서는 우선 * store로 사용할 파일(저장소)를 만드는 것이다. 먼저 countStore.js 코드를 살펴보면 import {writable} from .. 더보기 Svelte 논리블럭, 반복블럭 사용하기 SPA 프로젝트에서는 특히 더 상태값에 따라 보여주고 싶은 화면이 다를때가 많다. 그 예를 한번 간단히 살펴보면 True False {#if statusFlag === true} // # 으로 열어주고 True 입니다. {:else} False 입니다. {/if} // : 으로 닫아주고 이런 식으로 특정 상태값에 따라 UI 컨트롤을 해줄 수 있고 단골로 사용하는 반복 블럭을 사용해보면 {#each datas as data} // 똑같이 # 으로 열고 {data.name} {/each} // / 으로 닫고 뭔가 for of 문법같은 더보기 Svelte Reactivity (반응성) Svelte에서는 반응성 기호 ( $: ) 를 이용해서 상태값에 따라 반응 하는 것들을 제어 할 수 있는데 리액트를 조금 만 해보고 개발해봤던 사람이라면 바로 useEffect 가 떠오를 것이다. 예제를 보며 한 번 보면 바로 느낌이 올 것이다. 상태값: {count} 더블드: {doubled} // 여기서 알아서 바뀐다 클릭 코드를 보면 doubled에는 직접적으로 변화를 주진 않지만 반응성으로 선언 해준 뒤 카운트 값만 바꿔 줬는데 실제로 해보면 잘 바뀌는 것을 볼 수가 있을 것이다. 그 예로 상태값: {count} 더블드: {doubled} 클릭 위 처럼 반응성에서 빼버리면 이렇게 더블드는 안바뀌는 것을 확인 할 수 있다. 더보기 Svelte 상태값 svelte 공식 홈페이지를 가보면 상단 메뉴에 REPL 이라고 되어 있는것을 볼 수 있는데 CodeSandbox, Codeit 과 같이 코드를 입력하면 스벨트에서 어떻게 작동하는지 알 수 있게 해주었다. 여기서 간단히 상태값을 리액트와 다르게 어떻게 사용하는지 알아 보면 상태값: {count} // 요기 react jsx 문법에서도 실컷 했듯이 괄호열고 변수로 가져오기 // 이 문법은 처음 보긴했는데 저런식으로 쓰는가 보다 하면 되겠다. 클릭 아직까지도 성능이 리액트보다 어떻게 훨씬 좋고 이런건 모르겠지만 상태값 선언 부터 짧은게 그냥 맘에든다. 더보기 이전 1 2 3 4 ··· 24 다음
