프로그래밍 공부 노트

개발환경은 아래와 같다. - Github Actions - AWS S3 - AWS CodeDeploy  - AWS EC2(ubuntu server v22.04) 위 환경에서 배포 자동화 설정 중 CodeDeploy에서 발생했던 오류를 해결했던 정리하려한다. AWS CodeDeploy Console 오류 화면 오류 메세지: The overall deployment failed because too many individual instances failed deployment, too few healthy instances are available for deployment, or some instances in your deployment group are experiencing problems. CodeDeploy 콘솔에서 배포 오류 이벤트 내역을 확인해도 되지만 보다 정확한 문제를 확인하기위해서는 CodeDeploy가 실행되는 ec2 인스턴스에 ssh에 접속해 CodeDeploy에 대한 로그를 확인해보는것이 좋다. * Ubuntu EC2 인스턴스에 CodeDeploy agent가 설치되어 있어야 한다. Install the CodeDeploy agent for Ubuntu Server 아래 명령어를 통해 codedeploy agent log가 저장되어있는 위치로 이동한다. $ cd /var/log/aws/codedeploy-agent 아래 명령어를 통해 로그 내역을 확인할 수 있다. $   cat codedeploy-agent.log 나의 경우 로그에 아래와 같이 에러 로그가 찍혀있었다. ERROR [codedeploy-agent(2423)]: InstanceAgent::Plugins::CodeDeployPlugin::CommandPoller: Missing credentials - please check if this instance was started with an IAM instance profile INFO  [codedeploy-agent(2423

  예전에 프로젝트하면서 해쉬태그 관련 컴포넌트를 만들었던적이 있어서 그대로 가져와서 이번 프로젝트에서 사용하려했는데 onKeyPress 이벤트가 Deprecated 되었다고 나와서 MDN 가이드대로 keydown 으로 수정해보았다. 여기서 문제가 발생했는데 onKeyPress 이벤트에서는 아무 문제가 없는데 onKeyDown 이벤트를 사용했을때 동영상에서 처럼 마지막 글자가 한번더 출력되는 문제가 발생했다. 내가 작성한 setState와 관련한 비동기적인 동작 순서를 내가 잘못생각해서 발생되는 문제인줄 알았는데 찾아보니 해당 문제는 크롬 브라우저에서 한글을 입력하는 경우만 해당 문제가 발생하는것을 알게됐다. 키보드 이벤트 발생시 이벤트 핸들러가 두번 호출되는 문제였다. 한글의 경우 자음과 모음의 조합으로 한 음절이 만들어지는 조합 문자이기 때문에 글자가 조합중인지, 조합이 끝난 상태인지를 알 수 없기 때문에 발생하는 문제였다. 해당 문제는 isComposing 이라는 값을 체크해 해결할 수 있었다. 그런데 여기서 또 하나의 문제 event.isComposing 또는 event.target.isComposing을 사용하려고해도 해당 메소드가 없다고 나왔다. 예전에 React 공식 문서에서 브라우저 고유 이벤트가 필요하다면 nativeEvent 어트리뷰트를 참조하라는 글을 본적이 있었다. 아래 링크를 첨부했다. 아래처럼 코드를 작성하면 아래 동영상처럼 해결이 된다. 문제 해결 완료! 참고하면 좋을만한 링크 https://levelup.gitconnected.com/javascript-events-handlers-keyboard-and-load-events-1b3e46a6b0c3 https://ko.reactjs.org/docs/events.html#overview

#  Updating in the database Now let's load a single photo from the database, update it and save it: import { Photo } from "./entity/Photo" import { AppDataSource } from "./index" const photoRepository = AppDataSource . getRepository ( Photo ) const photoToUpdate = await photoRepository . findOneBy ( { id : 1 , } ) photoToUpdate . name = "Me, my friends and polar bears" await photoRepository . save ( photoToUpdate ) Now photo with   id = 1   will be updated in the database.   공식 문서를 보면 위와 같이 사용자 정보를 최초로 저장할때가 아닌 업데이트 시에도 사용자 객체를 가져와 참조 값을 변경하고 save() 메서드를 사용해서 사용자 정보를 업데이트하도록 나와있다. 공식문서 첫페이지에 나와있는 방법이기에 그대로 그냥 사용했었다. 그런데 프로젝트 진행중 알 수 없는 문제가 발생했다. 데이터를 업데이트하는데 업데이트 되지않고 값이 추가적으로 insert 되는 상황이 발생했다. MySQL Workbench를 보면 값 업데이트가아닌 추가 되었는데 다시 해당 오류를 재현해보려했지만 동일한 오류를 재현하지 못했다. typeorm 처음 공부할때 공식문서와 여러 블로그를 봤는데 save() 메서드를 주의해서 사용해야 한다는 내용이있었다. 다시 찾아보니 TypeORM에서 save() 메서드는 entity에 작성되어있는 연결되어있는 모든 PK값을 WHERE 절에 함께 담아 SELECT 쿼리를 실행하

ts(2322) 에러 Type 'undefined' is not assignable to type 'HTMLInputElement | null'. ts(2322) // 1번 const inputRef = useRef () ; // 2번 const inputRef = useRef ( null ) ; useRef 선언시 null 값을 작성하지 않아서 발생하는 에러이다. 1번을 2번처럼 변경하여 오류를 해결할 수 있다. ts(2339) 에러 Property 'focus' does not exist on type 'never'. ts(2339) const inputRef = useRef < HTMLInputElement > ( null ) ; useRef<해당하는 엘리먼트 객체> 를 작성해주면 해당 오류를 해결할 수 있다.

프로젝트 배포 전 로컬 환경에서 passport로 구글 로그인이 제대로 동작했는데 배포 후 구글 로그인이 안되었다. passport 공식문서에 나와있는데로 콜백 URI를 작성했는데도 오류가 발생했다. 혹시 몰라서 Google Cloud Platform에 API 및 서비스 페이지에서 승인된 리디렉션 URI를 잘못작성해뒀나 싶어서 확인했는데도 오류가 발생했다. 찾아보니 대부분 승인된 리디렉션 URI 이부분을 제대로 안적어줘서 오류가 발생하는것같았다. 구글에 검색해본 결과  OAuth 동의화면 - 범위 - 선택적 정보 - 요약 부분을 모두 입력해야 된다고 했다. 해봤지만 오류는 동일했다. 프로젝트를 다시 확인해보니 아래에 성공시, 실패시 Redirect 부분을 개발환경이었던 localhost로 작성해놓은 것이었다.  해당 부분의 주소를 변경해주니 정상적으로 구글 로그인에 성공했다.

Xcode Command Line 오류(xcode-select --install 오류) $ npx create-react-app 으로 프로그램을 설치하던 중 err가 발생했다. 오류 내용 중 일부 No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'. No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'. No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'. gyp: No Xcode or CLT version detected! ... ... ... stack overflow 검색결과 Mac OS  Catalina (10.15.*) 버전에서 발생하는 문제라고한다.  Catalina (10.15.*)  이하의 버전들에서는   $ npx create-react-app 명령어를 사용하여도 에러가 발생하지 않는다고 한다. 해결방법 👇🏼 $ xcode-select --print-path # in my case /Library/Developer/CommandLineTools # the next line deletes the path returned by the command above $ sudo rm -rf $(xcode-select --print-path) # install them (again) if you don't get a default installation prompt $ xcode-select --install 첫번째 명령어는 설치 위치 확인 두번째 명령어는 삭제 세번째 명령어는 재설치  순서이다. 세번째 명령어  $ xcode-select --install 사용시 아래 사진과 같은 에러가 발생한다. 현재 소프트웨어 업데이트 서버에서 사용할 수 없기 때문에 해당 소프트웨어를 설치할

에러의 원인은 HTML이 모두 로드되기 이전에 JavaScript가 HTML을 참조하기 때문이다. 즉, addEventListener 함수가 참조해야할 태그가 HTML에 아직 생성되기 이전이기 때문에 null 값을 참조하여 에러가 발생하는 것이다. 해결방법은 몇가지가 있다. 해결 방법1. 닫는 태그인 </body> 태그 위에 선언 <head></head> 태그안에서 js파일을 호출하지 않고 HTML 코드가 작성된 맨 아래에 즉, <body></body> 태그에서 닫는 태그인 </body> 태그 위에 선언하는것이다. 이렇게 작성하게되면 HTML 코드가 완전히 로드된 후에 JavaScript 파일이 호출되기 때문에 해당 문제를 해결할 수 있다. 해결 방법2. window.onload = function(){} window.onload = function(){} 함수를 사용하면 웹브라우저의 모든 구성요소들의 로드가 완료되었을 때 브라우저에의해 호출되는 함수로  해당 부분에 코드를 작성하면 HTML의 모든 구성요소들의 로드가 완료된 뒤 해당 함수를 호출한다. 해결 방법3. (추천) <script></script> 태그에 defer 속성 사용하기 <head></head> 태그 내부에 script 태그를 사용하고 src 속성을 이용해서 js파일을 불러온다. 그리고 속성으로 defer 키워드도 함께 작성해준다. < script src = "index.js" defer ></ script > defer은 비동기적으로 스크립트를 불러오는 속성이다. 해결 방법2에서 window.onload와 마찬가지로 HTML의 모든 요소들의 로드가 완료되면 그 후에 해당 js파일을 실행하는것이다. 하지만 위의 해결 방법들과 다른점이 존재하는데 이 속성을 사용하면 비동기적으로 코드가 동작한다는것이다. 프로그램은 코드를 해석할때 왼쪽에서 오른쪽으로