티스토리

Devil Front
검색하기

블로그 홈

Devil Front

devilfront.tistory.com/m

주니어 주니어 개발자의 메모장 같은 블로그 공간><

구독자
6
방명록 방문하기
공지 조금이라도 도움이 되셨으면 좋아요 댓⋯ 모두보기
반응형

주요 글 목록

  • AWS s3-Cloudfront 리액트 프로젝트 Codepipeline 자동화 (Lambda) 이전 글에서 s3 - Cloudfront에 리액트 프로젝트를 배포하는 법을 알아보았는데 이번에 Codepipeline을 이용해서 깃으로 푸쉬 할 때 마다 자동으로 배포와 Cloudfront의 배포 무효화 까지 한 번에 하는 방법을 알아보자 기존 CodePipeline 생성 시 기본적인 세팅들을 그대로 따라가주면 혹 buildspec.yml 파일을 작성하는데 어려움이 있다면 아래를 참고하면 되겠다. * buildspec.yml 파일 생성 base-directory 폴더명은 본인이 빌드 파일 떨구는 폴더 명을 적어주면 된다. 기존 Codepipeline을 이용한 배포에서 추가적으로 해줘야 할 것이 있는데 바로 Deploy 다음에 스테이지 하나를 추가하여 Cloudfront에 배포 무효화 해주는 것이다. 무효.. 공감수 0 댓글수 0 2023. 12. 11.
  • AWS S3에 React 프로젝트 배포 하기 (s3 + Cloudfront) 현 회사에서 ECS, EC2 를 이용한 클라쪽 프로젝트 배포가 어찌보면 일상화가 되어 있었는데 새로운 방법으로 해보고 싶어서 s3로 배포를 해보면 어떨까 하고 문서를 찾아보며 배포해보게 되었다. https://rainbound.tistory.com/472 애초에 관련한 문서는 다 많았지만 현 날짜 기준 바뀐 인터페이스에 관해서는 별로 문서가 많지 않았다. 우선 원리는 간단하다. React 빌드 -> s3 버킷 생성 후 업로드 -> cloudfront 설정 후 배포 -> cloudfront 대체 도메인 후이즈 도메인 네임서버에 연결 내가 직접 했던 과정을 스크린샷을 겸해가며 작성해보겠다 1. 리액트 파일 빌드 2. s3 버킷 생성 퍼블릭 세팅 풀어주고 사진 항목.. 공감수 0 댓글수 1 2023. 12. 8.
  • 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.. 공감수 0 댓글수 0 2023. 6. 26.
  • 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.. 공감수 1 댓글수 0 2023. 5. 31.
  • Svelte Store (전역 상태 관리) React를 만져본 분이라면 Redux, Recoil, ContextApi 등 컴포넌트 별로 상태값을 전달 하는게 아닌 컴포넌트들과 동 떨어져 있는 한 장소에서 값을 관리하여 props를 통해 애써서 컴포넌트 별로 전달하고 받을 필요가 없어지는 것이다. 위 사진은 7번 컴포에서 10번 컴포로 props를 통해 값이 변하는것을 전달하는 과정인데 규모가 그리 크지 않음에도 벌써 귀찮을 거 같은 느낌이 든다. Store와 같은 전역 상태 관리 도구를 썻을 때 단계이다. 쇽쇽쇽쇽쇽쇽에서 쇽쇽으로 바꼇다. 이것만 봐도 애용해야 될 이유는 충분하다. 사용하기 위해서는 우선 * store로 사용할 파일(저장소)를 만드는 것이다. 먼저 countStore.js 코드를 살펴보면 import {writable} from .. 공감수 0 댓글수 0 2023. 5. 18.
  • Svelte 논리블럭, 반복블럭 사용하기 SPA 프로젝트에서는 특히 더 상태값에 따라 보여주고 싶은 화면이 다를때가 많다. 그 예를 한번 간단히 살펴보면 True False {#if statusFlag === true} // # 으로 열어주고 True 입니다. {:else} False 입니다. {/if} // : 으로 닫아주고 이런 식으로 특정 상태값에 따라 UI 컨트롤을 해줄 수 있고 단골로 사용하는 반복 블럭을 사용해보면 {#each datas as data} // 똑같이 # 으로 열고 {data.name} {/each} // / 으로 닫고 뭔가 for of 문법같은 공감수 1 댓글수 0 2023. 5. 18.
  • Svelte Reactivity (반응성) Svelte에서는 반응성 기호 ( $: ) 를 이용해서 상태값에 따라 반응 하는 것들을 제어 할 수 있는데 리액트를 조금 만 해보고 개발해봤던 사람이라면 바로 useEffect 가 떠오를 것이다. 예제를 보며 한 번 보면 바로 느낌이 올 것이다. 상태값: {count} 더블드: {doubled} // 여기서 알아서 바뀐다 클릭 코드를 보면 doubled에는 직접적으로 변화를 주진 않지만 반응성으로 선언 해준 뒤 카운트 값만 바꿔 줬는데 실제로 해보면 잘 바뀌는 것을 볼 수가 있을 것이다. 그 예로 상태값: {count} 더블드: {doubled} 클릭 위 처럼 반응성에서 빼버리면 이렇게 더블드는 안바뀌는 것을 확인 할 수 있다. 공감수 0 댓글수 0 2023. 5. 17.
  • Svelte 상태값 svelte 공식 홈페이지를 가보면 상단 메뉴에 REPL 이라고 되어 있는것을 볼 수 있는데 CodeSandbox, Codeit 과 같이 코드를 입력하면 스벨트에서 어떻게 작동하는지 알 수 있게 해주었다. 여기서 간단히 상태값을 리액트와 다르게 어떻게 사용하는지 알아 보면 상태값: {count} // 요기 react jsx 문법에서도 실컷 했듯이 괄호열고 변수로 가져오기 // 이 문법은 처음 보긴했는데 저런식으로 쓰는가 보다 하면 되겠다. 클릭 아직까지도 성능이 리액트보다 어떻게 훨씬 좋고 이런건 모르겠지만 상태값 선언 부터 짧은게 그냥 맘에든다. 공감수 0 댓글수 0 2023. 5. 17.
  • Svelte 기본 개발환경 세팅 (SvelteKit XX) Svelte랑 Sveltekit이랑은 다르다. React와 Nextjs 같은 개념으로 생각하면 되는데 Sveltekit은 Svelte를 더 간편하게 써 줄 수 있게 하는 프레임워크다. https://svelte.dev/ 공식사이트에 들어가면 떡 하니 이렇게 프로젝트 생성부터 실행하는 것 까지 간단하게 나와 있는데 엄밀히 말하면 이것은 Svelte 프로젝트 세팅이 아니라 Sveltekit 세팅이다. 나는 React -> Nextjs 순으로 개발했을 때 더 편하고 더 나아진 점을 느꼇었기 때문에 이번에도 먼저 Svelte -> Sveltekit 순으로 가고 싶어 유튜브에 Hollo Coding 이라는 유튜버 강사님의 영상을 보면서 글을 작성해나가려 한다. npm init vite ./ // 프로젝트를 설치할.. 공감수 0 댓글수 0 2023. 5. 17.
  • Svelte 를 시작하면서 이번에 회사에서 새로운 프로젝트성 플랫폼을 하나 또 들어갈 예정인데 매번 react, nextjs 를 이용해서 만들어진 서비스들만 만지다 보니 새로운 프레임워크가 땡겼다. 회사 형이 이번에 한 번 'Svelte' 라는 게 있는데 그거 이용해서 해보라는 권유에 처음은 망설였지만 단 한장의 사진으로 마음이 굳었다. Svelte에 대해 공부좀 하려고 인프런에 무료 강의를 찾아서 듣던 와중에 이 Svelte, Vue, React 각각의 방식으로 동일한 기능을 구현하는 코드를 봤을 때 뭔가 내 것으로 만들고 싶다는 느낌이 확 왔었다. 단순히 저 사진 하나에서만 봐도 기존에 쓰던 React에서 4가지나 낫다고 볼 수 있다. * 높은 가독성 유지 ( 딱 봐도 깔끔하지 않나 ) * 개발 시간 단축 ( 딱 봐도 코드량이.. 공감수 0 댓글수 0 2023. 5. 16.
  • 워드프레스 테마/플러그인 설치시 팝업 FTP 관련 이슈 해결방법 워드프레스 서버 설정을 마치고 테마 혹은 플러그인을 설치하려고 하면 이런 화면이 뜨게 될 것이다. 이 화면이 안뜨게 하는 방법이 있는데 wp-config.php 파일에 define('FS_METHOD','direct'); 추가해주면 된다. 복사붙여 넣기를 했다면 ''을 한번 확인해보고 저장하길 바란다. 공감수 0 댓글수 0 2023. 3. 8.
  • WordPress Plugin 설치시 Could not create directory라는 에러에 대한 손쉬운 해법 원인은 권한이다. 플러그인 설치 시 정확히 기억은 안나지만 ~~~/~~~/~~~/wp-content 디렉토리에 디렉토리를 생성할수 없어서 생기는 에런데 나중에 해결하고 나서 보니 플러그인을 설치 하면 wp-content 디렉토리 안에 plugins 라는 디렉토리가 생길텐데 단순히 plugins 디렉토리를 생성하지 못해서 일어나는 일이다. 나는 wp-content 디렉토리에 777 권한 부여하고 재시작하고 나니 정상적으로 플러그인 설치가 되었다. 공감수 0 댓글수 0 2023. 3. 8.
  • 워드프레스 고유주소 변경 후 페이지 생성/업데이트/접속 안됨 에러 해결 이번에 워드프레스로 ec2에 직접 웹서버 구축하고 db 연결하면서 초기 세팅을 다 해주고 있는데 SEO에 유리한 측면적인 면을 위해서라도 페이지의 URL 주소를 위 사진의 글 이름 처럼 설정해주는 것이 좋은데 그러기 위해서는 .htaccess 파일에 추가적인 코드를 만들어 줘야 하고 그 과정을 거치고 이상없이 고유주소 구조를 바꾸고 페이지를 새로 생성 하게 되면 wp-json 주소로 post 요청을 쏘고 404에러를 뱉을 것이다. apache 사용자면 /etc/apache2/sites-enabled/000-default.conf 파일에서 AllowOverride를 All로 바꿔주거나 httpd 사용중이면 /etc/httpd/conf/httpd.conf 파일에서 AllowOverride를 All로 바꿔주면.. 공감수 0 댓글수 0 2023. 3. 8.
  • Nestjs Pipe란 Pipe란 -> @Injectable() 데코레이터로 주석이 달린 클래스 -> Data Transformation, Data Validation을 위해서 사용 -> 메소드가 호출되기 직전 ( 핸들러로 가기 전 ) 파이프를 삽입하고 파이프는 메소드(핸들러)로 향하는 인수를 수신하고 그에 대해 작동 클라이언트 -> 컨트롤러 @Get() 핸들러 -> Service. -> 컨트롤러 @Get() 핸들러 -> 클라이언트 // with Pipe 클라이언트 -> 파이프 -> 컨트롤러 @Get() 핸들러 -> Service. -> 컨트롤러 @Get() 핸들러 -> 클라이언트 Data Transformation ? -> 데이터를 원하는 형식으로 변환 -> 숫자를 받길 원하는데 문자열로 온다면 자동으로 숫자로 바꿔준다. E.. 공감수 0 댓글수 0 2022. 12. 22.
  • Nestjs DTO (Data Transfer Object) DTO는 데이터가 네트워크를 통해 전송되는 방법을 정의하는 객체다. DB에서 데이터를 얻어 Service나 Controller 등으로 보낼 때 사용하는 객체를 말한다. Interface나 class를 이용해서 정의 할 수 있지만 NestJs 에서는 class를 사용하는 것을 추천하고 있다. -> TypeScript의 클래스는 JavaScript ES6 표준을 따르므로 컴파일된 JavaScript에서 실제 엔터티로 보존되는 반면에 인터페이스는 변환 중에 제거되기 때문에 Nest는 런타임에 인터페이스를 참조할 수 없다. DTO를 사용하는 이유? -> 데이터 유효성을 체크하는데 효율적이다. -> 유지보수 하는데 더욱 용이하다. - ex) 많은 서비스, 컨트롤러 파일 등에서 게시물 생성 관련 작업에서 descr.. 공감수 0 댓글수 0 2022. 12. 22.
  • Nest.js 모듈 생성하기 (Controller, Service) 게시판을 만들기 위해 먼저 게시글 Board 모듈을 생성해보겠다. nest cli 를 이용해서 생성해줄 수 있다. // nest g module 모듈명 nest g module boards 자동으로 폴더 및 파일 생성을 해주고 루트 모듈에도 임포트 된 것을 확인 할 수 있다. 모듈 안에 들어갈 controller, service, entity 등을 추가해주면 되겠다. 지금은 하나하나 추가해주고 있지만 나중에 한번에 모듈파일부터 관련된 파일들도 한번에 생성하는 명령어도 알아보겠다. Controller 파일을 추가해주기 전에 Controller 가 하는 역할을 알아보면 들어오는 요청을 처리하고 클라이언트에 그 응답을 반환하는 역할을 한다. Controller 안에 Handler가 존재하는데 핸들러는 @Get.. 공감수 0 댓글수 0 2022. 12. 21.
  • Nest.js 시작하기 Nest.js 는 node.js를 이용한 express를 활용한 서버 측 애플리케이션을 구축하기 위한 '프레임워크'다. 공식문서를 보면 Typescript를 완벽히 지원하고 프로그레시브한 자바스크립트를 사용하며 어쩌구가 있는데 결국 가장 중요한 건 프레임워크인 만큼 프로젝트 아키텍처가 정해져 있다는 것이다. 비교적 자유분방한 express 프레임워크를 활용하여 사람마다 제 스타일로 폴더링 하고 서버를 구축하고 본인 입맛에 맞게 파일들을 만들고 그 프로젝트를 협업 혹은 인수인계 한다고 생각하면 벌써 어지럽다. 결론은 Nest.js를 사용하는 이유중 가장 큰 것은 난 고정화된 프로젝트 구조로 인해 협업 및 다른 사람들이 봐도 금방 코드를 분석할 수 있다는 점이라고 본다. Nest.js를 시작하려면 우선 ne.. 공감수 0 댓글수 0 2022. 12. 21.
  • 개발하면서 어떠한 라이브러리가 되었든 메이저 버전은 함부로 건드리지 말자 ... 공감수 0 댓글수 0 2022. 12. 7.
  • 개인 tailwindcss 세팅용 문서 1. 필요한 패키지 설치 yarn add tailwindcss postcss autoprefixer 3형제 설치 후 2. config 파일 손봐주기 npx tailwindcss init -p 하면 postcss.config , tailwind.config 두개 파일이 생성되는데 post는 냅두고 tail config 에서 /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/components/**/*.{html,js,ts,jsx,tsx}", "./src/pages/**/*.{html,js,ts,jsx,tsx}", "./src/pages/*.{html,js,ts,jsx,tsx}", ], theme: { }, plug.. 공감수 0 댓글수 0 2022. 12. 5.
  • 개인 보관용 eslint 설정하기 nextjs 프로젝트 세팅중에 eslint 설정을 다시 해주는데 다시 에러 떠서 뭐가 빠졋지 하다가 다시 세팅을 완료했는데 까먹기전에 써놓는다 1. lint 설정을 위해 필요한 패키지들 깐다. "devDependencies": { "babel-cli": "^6.26.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "eslint": "8.22.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-prettier": "^8.5.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-p.. 공감수 0 댓글수 0 2022. 12. 5.
  • Nextjs 를 개인적으로 쓰고 싶은 이유 근래 Next.js 프로젝트를 작업할 일이 있어서 일단 작업하고 난 뒤에 Nextjs 에 대해 여러 장단점 글들을 찾아보았는데 React와 다르게 SSR 렌더링을 이용해 우선 사용자에게 html 페이지를 보여주고 ~~~, SEO에 너무 유리하고~~~ 등등이 있었는데 개인적으로 가장 끌렸던건 Routing 설정 필요 X 였다. Route를 위한 컴포넌트를 만들 필요도, 그 컴포넌트에서 매 경로마다 일일이 컴포넌트 매칭시키는 작업, 등등을 할 필요가 없는 것이 제일 써보고 싶게 만든 이유다. npx create-next-app 위 명령어를 통해 넥스트 앱을 만들게 되면 가장 상위에 pages 폴더가 있는데 그 안에 들어가는 파일 이름이 곧 라우팅 url로 인식이 된다. ex:) somedomain.com/a.. 공감수 0 댓글수 0 2022. 12. 2.
  • 프레임워크와 라이브러리의 가장 큰 차이 프레임워크 : 프레임워크가 갑 라이브러리 : 내가 갑 공감수 0 댓글수 2 2022. 12. 2.
  • 구글 서치 콘솔 HTML이 아닙니다 에러 해결법 우선 이 에러는 xml 파일을 보여주는 주소를 입력했을 때 xml 파일이 나오긴 나올 때 발생하는 것인데 첫번째 sitemap 프로토콜을 지켰는지 두번째 상단의 urlset 태그에 속성이 전부 다 박혀있는지 본인도 이 에러로 반나절 이상을 날려먹었는데 첫번째 아래의 링크를 타고 들어가서 본인 xml 파일 구조가 아래와 같이 되어있는지 확인해야한다. https://www.sitemaps.org/protocol.html 이번에 처음 구글 서치 콘솔 작업을 하고 있는데 처음에 전달 받은 xml 파일은 url 1 url 2 이런 식으로 되어있었다. 될리가 없었다. 위 사이트에서 규칙을 지키면서 옵셔널 한 것들은 빼고 xml 파일을 만든다면 아래 코드블럭 같이 나올것이다. !! 태그는 필수 url 1 url 1 .. 공감수 0 댓글수 0 2022. 11. 25.
  • React recoil-persist 사용하기 리액트를 사용하면서 전역 상태 관리 라이브러리 중 하나인 recoil에도 사이트를 새로고침해도 전역 값을 유지시킬 수 있는 방법이 있다. recoil-persist 라는 패키지인데 사용법 또한 매우 간단하다. 이 recoil-persist 가 값을 유지하는 원리는 간단한데 로컬 스토리지 혹은 세션스토리지에 담아서 저장하는 것이다. npmjs 링크 https://www.npmjs.com/package/recoil-persist npm i recoil-persist 설치 해 준 뒤 import { atom } from "recoil"; export const isHeaderShow = atom({ key: 'isHeaderShow', default: true, }); 위의 코드가 일반 기본적으로 사용하던 r.. 공감수 0 댓글수 0 2022. 11. 24.
  • 하나의 컴포넌트로 재사용하면서 사용할 때 넘겨주는 props 처리 조심하자 ㅋㅋ 내 1시간 ㅂㅇ 힝구 ㅠ 공감수 0 댓글수 3 2022. 11. 9.
  • Tailwind 반응형 디자인 커스터 마이징의 필요성 Tailwind 쓰면서 느낀것 중 하나가 문법이 익숙해지면 너무 깔끔하고 쉽게 스타일링이 가능다는 점과 사용자의 viewport 넓이에 따라 세세하게 경우의 수를 나눠서 디자인이 가능하다는 점이다. 즉 같은 기종(모바일, 태블릿, 데탑)이더라도 모니터 크기에 따라 보여지는 화면의 느낌이 다르다. 즉 내 m1 화면(innerwidth 1600px? 1700px?) 과 듀얼모니터로 사용하고 있는 2200px? 정도 되는 모니터에서 보는 디자인은 다를 수 있다. 이렇게 본인 작업 환경이나 범용적인 태블릿과 모니터 사이의 크기 컨트롤, 혹은 모바일과 태블릿 사이의 세밀한 길이 컨트롤을 하려면 기본적으로 제공해주는 ls md sm xs 등으로 부족할 수도 있다. 나는 ls와 md 사이의 값이 필요해서 lm이라는 .. 공감수 0 댓글수 0 2022. 11. 4.
  • react state 감지 ㄹㅇ 모니터 뿌수고 싶당 ㅋㅋ 공감수 0 댓글수 0 2022. 11. 4.
  • 배포하면서 느낀점 유닉스 명령어 고수 마렵다 공감수 0 댓글수 0 2022. 11. 1.
  • env로 환경변수 나눠서 작업하니까 확실히 좋은듯 개꿀띠 공감수 0 댓글수 0 2022. 10. 27.
  • 클라우드 배포해야 되는데 살짝 막막데스 클라우드 개념은 아니까 직접 만져보면서 부딪혀봐야 답이 나올듯 공감수 0 댓글수 0 2022. 10. 27.
    반응형
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.