본문 바로가기
728x90
반응형

TIL147

react git action ci / cd 배포 환경 설정(.env) react git action ci / cd 배포 환경 설정(.env) 세팅 배포하려는 프로젝트 스택 : react CRA / husky / .eslintrc typeScript / env 사용 CI / CD 과정 1. env 파일은 깃에 올라가지 않으므로 이를 위해 secret 키 먼저 설정해주었다 해당 레파지토리 setting -> Secrets -> Actions 에서 New repository secret 버튼을 누르고 키 : 값을 고대로 적어주면 된다 2. 파일 최상단에 .github / workflows / cicd.yml 를 만들어주었다. 3. cicd.yml setting // 이름 name: loginTodo Publish // main 브랜치에 push 할 때마다 depoly on: p.. 2022. 12. 19.
CI/CD 시 만났던 오류 : parserOptions.project" has been set for @typescript-eslint/parser." CI/CD 시 만났던 오류 : parserOptions.project" has been set for @typescript-eslint/parser." ci / cd 작업하면서 요 에러 두개를 만났다. 문제 Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser." Parsing error: Compiler option 'extends' requires a value of type string 타입스크립트 eslint...? 로컬에서 빌드는 잘되는데.... 커밋할 때마다 저 에러 메세지를 뱉어냈다 build 파일 날려보고 다시 빌드해도 똑같고... ts.config 문제겠거니 해서 여기 손대보고.... eslint.. 2022. 12. 19.
gh-pages로 react 작업물 배포하는 법 gh-pages로 react 작업물 배포하는 법 👇 간단한 페이지는 요 방법으로 배포! https://0119eunji.tistory.com/70 깃 페이지에서 배포하는 법 깃 페이지에서 배포하는 법 html 파일이 최상단에 있을 땐 간단히 깃에서 배포 할 수 있다. (html 파일이 최상단에 없을 땐 package.json 가서 직접 설정해야함!) 일단 배포하려는 레포에 들어간다 해당 0119eunji.tistory.com 들어가기 전에 작업물과 깃이 반드시 연결 되어있어야하고 레포 설정은 꼭 public ! 깃 배포하는 법 Github Pages는 쉽게 배포할 수 있도록 gh-pages 라이브러리를 제공한다. 로컬에서 모든 작업이 끝난 main 으로 이동 후 요 명령어를 이용해 라이브러를 먼저 설치한.. 2022. 12. 15.
깃 배포시 readMe 배포 오류 해결 깃 배포시 readMe 배포 오류 해결 문제 열심히 작업한 TodoList를 깃 페이지에서 직접 배포하다 오류가 생겼다 👇 깃 페이지에서 배포하는 법 (단, html 파일이 최상단에 있을 경우에만!) https://0119eunji.tistory.com/70 깃 페이지에서 배포하는 법 깃 페이지에서 배포하는 법 html 파일이 최상단에 있을 땐 간단히 깃에서 배포 할 수 있다. (html 파일이 최상단에 없을 땐 package.json 가서 직접 설정해야함!) 일단 배포하려는 레포에 들어간다 해당 0119eunji.tistory.com 바로 만든 페이지가 아니라 README만 배포된 것...! 찾아보니 public 폴더 안에 있는 html 파일에 접근하지 못해서 최상단에 있는 READ.ME 를 배포한 것.. 2022. 12. 15.
깃 페이지에서 배포하는 법 깃 페이지에서 배포하는 법 간단한 작업물로 html 파일이 최상단에 있을 땐 간단히 깃에서 배포 할 수 있다. (html 파일이 최상단에 없을 땐 package.json 가서 직접 설정해야함!) 배포하는 해당 레포 Settings으로 들어간 후 쭉 내리고 dangerZone으로 가서 해당 레포를 public으로 전환하고 같은 탭 밑에 있는 Pages 를 눌러 git-Pages로 들어가 None에서 배포하려는 브랜치로 바꾸어준 후 Save 버튼을 누르면 끝! 깃허브가 알아서 빌드해주는데 같은 페이지에서 새로고침을 누르면 (빌드하는데 시간이 좀 걸림!) 상단에 배포 링크가 뜨면서 배포가 완료된다 :) 이때 url은 "http://깃허브ID.github.io/레포이름" 으로 자동 설정됨! 2022. 12. 15.
js 숫자를 배열에 담아 합계 구하기 n 을 배열에 하나씩 배열에 담아서 reduce로 합계를 구했다! 👇 나의 답 function solution(n) { var str = String(n) var mapfn = (arg) => Number(arg); var newArr = Array.from(str, mapfn); var answer = newArr.reduce( (a, b) => a + b, 0) return answer; } n을 스트링으로 바꾸고 num으로 바꾸어주는 mapfn를 만들었다 newArr에 Array.from 을 써서 str를 각각 배열에 담고 num 으로 바꾸었고 배열의 합계를 구하기 위해 reduce를 화살표식으로 썼음! 그리고 다른 사람의 풀이를 보다 아주 간단한 식을 찾았다 👇 function solution(n.. 2022. 10. 24.
math.Floor, ~~ 차이 프로그래머스 입문 단계 중 아이스 아메리카노 문제를 푸는 도중 신기한 걸 알아냈다 바라만 봐도 넘나 간편하고 흐뭇한 문제 👍 👇 나는 요렇게 풀었는데 function solution(money) { var purse = Math.floor(money/5500) var count = money%5500 var answer = [purse, count]; return answer; } 다른 사람들 풀이를 보면서 신기한 걸 찾았다 function solution(money) { return [~~(money/5500),money%5500]; } ~~ Math.floor 를 쓰지 않고도 ~~ 요렇게 간단하게 표현할 수 있었음! 둘의 차이가 뭔지 스택오버플로우에서 검색해본 결과 ~~-6.8 == -6 // doe.. 2022. 10. 24.
Promise, async-await 비동기 -> 특정 코드의 실행이 완료되기 전까지 기다리지 않고 다음 코드를 먼저 수행하는 특성 동기 -> 작업이 끝나야 비로소 다음 예정된 작업을 할 수 있음 Promise 자바스크립트의 비동기 처리를 위해 사용되는 객체 콜백 함수의 error, success 의 처리를 보다 간단하게 하기 위해 생김 promise의 3가지 상태 Pending(비동기 처리 로직이 아직 완료 되지 않은 상태) Fulfilled(처리가 완료되어 프로미스가 결과값을 반환한 상태) Rejected(처리가 실패하거나 오류가 발생한 상태) 실패시 처리 결과값을 catch()로 받을 수 있음 async / await async function f() { return Promise.resolve(1); } f().then(alert);.. 2022. 9. 15.
TIL customHook 모달창 https://0119eunji.tistory.com/43 관심사의 분리 / Custom Hook 개발을 하면서 마주하는 고민들 코드를 작성했는데 기획, 디자인이 변경되고 요청 사항들이 추가된다. 코드를 수정해야하는데 기존의 코드가 복잡해서 이해하고 수정하기 어렵다 지금까지 만 0119eunji.tistory.com 👆 customHook 관련 포스팅 customHook : 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있는 사용자 hook 👆 라고 리액트 공식문서엔 쓰여있다 여러번 보아도 이해가 되지 않던 custom Hook! 모달창을 만들어보며 소 뒷걸음치다 생쥐 잡은 격으로 나도 모르게 쓰고 있었다 ☺️ 바로 모달창 바깥을 눌렀을 때 모달창이 닫히는 기능을 구현하면서 써보았는데 useOnclickO.. 2022. 9. 14.
728x90
반응형

티스토리툴바