Doo can do it

git workflows를 작성하면서 새롭게 알게 된 내용이 있어 정리해보려고 한다.우선 내가 생각했던 pipe-line을 적어보자면 아래와 같다.run : | echo "${{secrets.PEM_KEY}}" > ~/xxx.pem // 깃헙에 저장된 펨키를 xxx.pem파일로 저장함 chmod 600 ~/xxx.pem // 권한변경 mkdir -p ~/.ssh // .ssh라는 디렉토리 생성 ssh-keyscan -H ${{secrets.PUBILC_DNS}} >> ~/.ssh/hosts // ssh 공개키를 .ssh디렉토리에 있는 hosts 파일에 추가 ssh -o StricHostKeyChecking=no -i ~/xxx.pem userName@${{secrets.PUBI..

github workflows를 작성하면서 리눅스명령어로 파일을 만들어보려고 하다가 알게 된 내용을 정리하려한다.사실 알고있던 명령어는cd : 디렉토리 변경ls : 현재 디렉토리의 목록들(파일)rm : 파일 또는 디렉토리 삭제이렇게 였다.새로운 명령어들도 익힐 겸 yml 파일을 만들어 환경변수에 어떤 값을 담고, 그 값을 출력하는 것을 해보았다.그 전의 과정은 생략하고 jobs만 보려고한다. 참고로 환경은 ubuntu에서 진행했다. jobs: build: runs-on: ubuntu-latest steps: -name : (name부분은 생략가능함) run : pwdpwd : 현재 작업중인 디렉토리 경로 확인이렇게 현재 경로를 확인 한 다음 새..

상품 옵션들의 가격을 구하는 부분에서 해당하는 컴포넌트에 구현하였는데Context를 통해 컴포넌트간에 값을 공유 할 수 있는 것을 알게되어 공부했다.우선 Context란 무엇인가 하면컴포넌트간에 어떠한 값을 공유할 수 있게한다. 전역으로 필요한 값을 다룰 때 사용하는데, 그렇다고 꼭 전역적으로만 사용할 필요는 없다.일반적으로는 부모컴포넌트에서 자식컴포넌트로 props를 통해 데이터를 전달하는데 context 를 만들어놓으면 데이터를 어떤 컴포넌트 트리에서도 쉽게 사용할 수 있는 장점이 있다.그렇다면 어떻게 사용해야 할까?1.Context 생성 // UserContext.tsximport React, { createContext, useContext, useState } from 'react';// ..

리액트로 혼자 사이드프로젝트를 할 때에는 서버api를 어떻게 만들어야할까? 라는 생각이 들었다.만약 서버api까지만든다면 풀스택인거 아닌가 라는 생각이 들 때 firebase가 생각이 났었는데, 이 와 비슷한 supabase 라는 Baas를 알게 되어 적어볼까 한다.우선 supabase란?Supabase는 오픈 소스 기반의 백엔드 서비스로, PostgreSQL 데이터베이스를 기반으로 한다. Supabase는 개발자가 신속하게 웹 및 모바일 애플리케이션을 구축할 수 있도록 데이터베이스, 인증, 스토리지, 실시간 기능 등을 제공한다.Supabase는 오픈소스로 공개되어 있으며, 무료로 사용할 수 있다. 또한 클라우드 서비스를 제공하여 서버를 호스팅하고 관리할 수 있고 이를 통해 개발자는 더 적은 노력으로 안..

리액트에서는 hook들이 엄청 많은데 그 중 하나인 useRef에 대해 공부한걸 남겨보려한다.최근에 한 번 사용해봤지만 어떨 때 사용하고 어떤 장점이 있는지는 아직 잘 모르겠다.우선 useRef는 리액트에서 DOM요소나 컴포넌트의 인스턴스를 참조하기 위해 사용하는 훅이다.useRefDOM요소에 접근상태유지(렌더링될 때)inputuseRef 사용문법 const ref = useRef(initialValue) // initialValue의 값은 current값이다.DOM요소 접근 const input = () => { const inputRef = useRef(null) // 초기값 null const handler = ()=> { inputRef..

최근에 프론트 디자인패턴들에 대해 관심이 생기면서 이것저것 알아보다가 MVC패턴이 프론트 프로젝트에 적합한가? 라는 생각에 이해가 안가는 부분이있어 알아보다가 현재 내가 진행하고있는 프로젝트와 비슷한 FSD 패턴에 대해 알게되어 기록하려고 한다.우선 나의 프로젝트 구조는 아래와 같다.qr-order-web/├── dist/├── nginx/├── public/└── src/├── _common/│ ├── axios-api.instance.ts│ └── hookHandler.ts├── components/│ ├── product/│ │ ├── _core/│ │ │ ├── api/│ │ │ └── react-query/│ │ ├── _interface/│ │ │ └── product.interface.ts│..

오늘 구현하면서 input의 type을 radio로 하여서 무조건 하나의 값만 필수적으로 받게 하려고 했다.그리고 테스트를 하면서 1단계를 클릭해보고 2단계를 클릭하려던 찰나에 다른 것들은 클릭도 안될 뿐더러 해제도 되지않는 것이다.1단계만 클릭이 됐었는데 그 이유를 찾다보니 htmlFor의 속성과 아이디 값이 하나밖에 없었기 때문이였다.우선 나는 해당하는 데이터에서 data.map((value,idx) => ( ))이런식으로 작성했었다. htmlFor의 속성과 id가 일치해야 그 값을 찾아 입력받을 수 있다고 생각했는데,가만 생각해보면 map을 통해 반복을하는데 이러면 반복되는 id와 htmlFor 속성의 값이 다 같은거 아..

최근에 react 프로젝트를 하면서 ide로 자동으로 typescript의 react를 다운받고 있는데 의존성문제의 이슈가 발생하였다.그러던 와중에 vite라는 것을 알게되었고 vite + react 이렇게 프로젝트를 구성하였었다.vite 또한 번들러의 하나라고 하는데 과연 번들러란 무엇일까?우선 vite 는 무엇인가에 대하여 설명하자면vitedev 서버 실행속도를 개선하기위해 사용하고, 의존성과 소스 코드를 나눠서 속도를 개선한다. 그리고 코드 수정 시 자동으로 재빌드하는 HMR 기능을 제공한다.Bundler번들러는 여러 개의 모듈화된 자바스크립트 파일들을 하나로 합치는 역할을 해준다.각 모듈간의 충돌 가능성을 해결해준다.다량의 모듈 파일을 전송할 때 생기는 딜레이에 대한 문제를 해결해준다.브라우저가 ..

유저에 의해서 어떤 것들을 선택할지, 하나를 선택할지 여러개를 선택할지에 대한 고민중 input태그의 type에 대해 공부해보았다.1.checkbox우선 체크박스는 사용자가 선택할 수 있는 여러 옵션들 중에서 하나 이상을 선택할 수 있을 때 적합하다.체크박스는 독립적이며 각각의 체크박스들은 개별적으로 선택되거나 선택할 수 있다.기본상태는 선택 / 해제 이다.예시 2.Radio라디오버튼은 체크박스와 반대로 여러개의 옵션들중 하나만 선택 할 수 있게 한다.(같은 그룹내에서)예를 들면 항목중 필수로 선택해야하는 것들.. 이런 곳에서 사용하기에 적합예시 그 외의 타입들그 외의 타입들에는 type쪽에서 일반적으로는text를 사용하고 비밀번호를 관리하는 input태그라면 password를 하고fil..

사이드 프로젝트를 하면서 tailwind를 사용하여 이미지를 처리하려는데 이미지가 늘어난 것 처럼 보이는 현상이 발생했다.한 눈에 보기에는 큰 차이가 없어보이지만 이미지가 찌그러진것 처럼 보였기 때문에 크기와 위치는 그대로 고정하면서이미지의 원본크기를 유지하는 방법이 뭐가 있을까 하여 알아본 결과로 tailwind 공식문서에 다양한 옵션들이 있었다.object-cover컨테이너를 덮도록 요소의 콘텐츠 크기를 조정할 수 있음object-contain컨테이너 내에 포함되도록 요소의 콘텐츠 크기를 조정할 수 있음object-fill요소의 내용을 늘려서 컨테이너에 맞출 수 있음object-scale-down컨테이너 크기에 맞게 크기를 줄일 수 있음object-none컨테이너 크기를 무시하고 요소의 콘텐츠를 원래..