Dahoon06 Store

랜덤 레시피를 불어와 화면에 보여주는 컴포넌트 내부에 있던 react-query 코드를 분리하는 중에 에러가 발생했다. 원인은 Hook을 불러오는 과정에 있었다. 리액트에서 Hook을 사용할때 지켜야할 조건이있다. 1. 리액트 함수 내에서만 사용되어야한다. (일반적인 js 내에서는 호출 불가능) 2. 리액트 함수 최상 위에서 호출해야한다. (반복문, 조건문, 중첩 함수 내에서 호출 불가능) useState 나 useEffect 같은 Hook 들은 여러번 사용될 수 있는데, 이 Hook들은 호출되는 순서대로 저장해 놓는다.(LinkedList) ( 그래서 매 렌더링마다 순서대로 Hook을 호출할 수 있는것 ) 항상 리액트 함수 최상위 레벨에서만 Hook을 호출해야하는 이유 근데 조건문이나 반목문 안에서 ..

문제가 된 부분 export class DaumCafeApp extends Crawler { private articleList: IDaum.ViewersBuzz [] = []; async function run(): Promise { function test() { const data = this.articleList; } } } 중첩된 함수 내에서 this를 사용하여 클래스 필드에 접근하려고 할 때 발생 중첩된 함수 내에서의 this context가 class instance this context와 다르기 때문 함수 내의 this는 자기 자신의 context를 가지기 때문에 class instance this context에 접근할 수 없다.

돌고 돌아 이번 발표 주제는 자바스크립트의 획득자 (get), 설정자 (set) 의 주제를 맡게 되었다. 먼저 자바스크립트에서의 property는 data property, accessor property 이렇게 두 종류로 나뉜다. data property (데이터 프로퍼티) data property는 값을 저장하기 위한 프로퍼티 이며, 일반적으로 자바스크립트에서 사용하는 프로퍼티의 경우 data property에 속한다. accessor property (접근자 프로퍼티) data property와 다르게 accessor property는 값이 존재하지 않는다. 가상의 property로 읽고 쓸 수는 있지만 실제로 존재하지 않는 property 이다. (획득자 getter. 설정자 setter 메서드로..

시간이 날 때 하자 해서 미루고 미루었던 파일 업로드 api를 만들고 deploy 브랜치에 코드를 올렸다. 근데 서버가 죽었다.. 처음에는 콘솔에 cors가 찍혀있길래 어??? 갑자기 왜??? 그래서 다시 배포를 해보았는데 맙소사... 서버가 켜지질 않는다.. 와 진짜... 어떻게 해놓은건데 서버가 그래버리나.. 부랴부랴 새벽에 찾아보면서 일단 대충 도커를 새로 빌드해보고, ec2도 껏다켜보고... 했는데 세상에 이제는 github actions 도 안되는것... 먼저 어디서 에러가 났는지 알고싶어 로그를 확인해보려고 EC2에 접속하였다. 로그 확인전에 컨테이너가 돌아가는지 확인을 하려고 했더니.. 권한 문제의 경우는 블로그를 찾아다니면서 쉽게 해결할 수 있었다. # 1. 보통은 docker group이..

EC2에 도커를 띄우고 이제 그 관리를 script를 만들어서 하려고 했으나, 동갑내기 사원님이 테스트 프로젝트로 github actions에 성공했다고 해서 부랴부랴 지금 프로젝트에 세팅을 하였다. (액션을 세팅하는 부분은 추후에 정리하여 포스팅할 예정...!) 💡 CI/CD (Continuous Integration/Continuous Delivery) CI: 빌드 / 테스트 자동화 과정 (지속적인 통합) CD: 배포 자동화 과정(지속적인 배포) 세팅까지 끝내고, back-deploy test push 를 해보는데 초록불 두둥!!! 모야 간단하네!!!! 라고 생각하고 사이트를 접속해 보는데 정상적으로 작동!! 그래서 한번 더 테스트 해 볼겸 스웨거를 업데이트 하고 다시 돌려보는데 스웨거가 업데이트가 ..

git --mirror 라는 옵션을 주어 현재 레포지토리를 다른 레포지토리로 복제할 수 있다. 복제될 때 사용된 브랜치까지 전부 복제가 된다. # 클론할 레포지토리 디렉토리로 이동 cd 클론할레포지토리 # 레포지토리 클론 git clone --mirror 클론할레포지토리주소 # 위 명령어를 실행하면 현재의 디렉토리 안에 레포지토리명.git 파일이 생성되는데 # 이 파일로 들어간다. cd 기존원격레포이름.git # git 파일 안에서 옮길 레포지토리 주소를 입력한다. git remote set-url --push origin 이동할레포지토리주소 # PUSH git push --mirror # 생성된 .git 파일이 이제 필요가 없으므로 삭제 rm -rf 클론할레포지토리.git ❗ 복제 과정에서 마주할 수 ..

이번 프로젝트를 진행하면서 인프라 관련해서 4가지 정도의 목표를 잡았었다. 첫번째. backend Docker에 올린 후 EC2에서 실행시키기. 두번째. docker 관련 script 만들어서 명령어 하나로 관리되도록 하기 세번째. github Actions 를 사용하여 자동 배포 시스템 만들기. 네번째. EC2가 버텨준다면.. 프론트도 EC2로 옮겨서 하나의 EC2에서 프론트, 백 관리 (여기서 Nginx 다뤄보기) 세번째, 네번째의 경우 여유가 된다면이라는 조건을 두고 첫번째, 두번째는 무조건 하기로 했다. 조건을 둔 이유는 각자의 회사 업무도 있고, 이 프로젝트의 기간의 경우 정말 길어봐야 한달을 잡았기 때문에 시간적 여유가 되면하기로 했다. 회사에서 도커 컨테이너 기반으로 빌드, 배포를 하고 있는..

Composition API Composition API는 Vue.js 3.0에서 새롭게 추가된 API로, 코드를 컴포지션(조합) 하는 방식을 제공한다. 기존의 Options API와 달리, 데이터와 메서드 등을 구분하지 않고 하나의 컴포지션 함수 내에 선언하여 사용하며, 이를 통해 코드의 가독성과 재사용성을 높일 수 있다. Composition API 의 가장 큰 특징은 Setup 이다.beforeCreate 나 created는 setup() 에 포함되고, 나머지 life Cycle은 아래와 같이 변경되었다. Life Cycle Vue2 Vue3 beforeCreate -> setup() created -> setup() beforeMount -> onBeforeMount mounted -> onMou..

현재 내가 작성하는 Vue 3 코드를 보며 의문점이 들었다. 새롭게 변화된 부분을 알고 싶어서 Vue 3를 사용해보는데 작성된 코드를 보면 Vue 2랑 완전히 똑같다... Vue 3 Doc를 보면 setup 에 관련해서 계속 나오는데 나는 이를 전혀 사용하지 않았다. 다른 점이라고는 Vue 2 에서 @Components({}) 로 컴포넌트를 불러왔다면 @Options({}) 로 불러와야한다는 점, store 를 사용하기 위해서 useStore() 훅을 사용한 점 말고는 완전히 똑같은 코드가 되었다. store를 사용한 시점부터 콘솔을 열어보면 아래 이미지의 경고문이 계속 나온다. 기존 사용 방식인 class 형태의 컴포넌트에서 this.store로 접근했던 방식이 아닌 store = useStore() ..