프로그래밍 공부 노트

개발환경은 아래와 같다. - 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  [codedep...

  Safari 브라우저에서 svg의  width와 height에 rem을 사용할때 발생되는 Error 이다. 다른 브라우저에서는 Error가 안보이지만 Safari 브라우저에서만 해당 Error가 보인다. Error가 발생해도 동작은 잘 되지만 그래도 Error니까 해결해보자. 원인은 rem 사용 때문이다. 이전에는 크롬에서도 rem 사용시 문제가 되었던것같은데 이제는 문제가 없고 Safari 브라우저에서만 해당 오류가 발생하는것같았다. Safari 브라우저에서 해당 Error를 없애기 위해서는 svg width와 height에는 number, px ,percentage 만 사용하라고 한다. 그러면 rem을 사용한 반응형으로 어떻게 만들지? 라는 생각부터 든다. 해결법은 간단하다. const ArrowBackIcon = ({ width = 24 , height = 24 , color }: IconProps ) => { return ( < SVGContainer width = { width } height = { height } > < ArrowBack width = { '100%' } height = { '100%' } fill = { color } /> </ SVGContainer > ); }; export default ArrowBackIcon ; ArrowBack은 svg 아이콘이고 svg 파일에 width와 height는 current가 작성되어있는 상태이다. SVGContainer는 div 태그이며 svg width와 height 크기를 rem으로 해당 태그에 할당한다. 이렇게 할당하면 원하는 사이즈대로 반응형으로 svg를 표현할 수 있다. Safari 브라우저 콘솔에서도 Error가 사라진것을 확인할 수 있다.

#  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 쿼리를 실행하...

  express.js, passport.js, typescript 를 사용해서 로그인 기능을 구현했다. passport local 로그인 동작 순서는 아래와 같다. passport-local -> passport.authenticate -> local strategy -> req.login -> passport.serializeUser -> response 각 순서에서 작업을 수행하고 각 단계에서 callback 함수와 함께 다음 함수에서 필요한 값을 넘겨주게 된다.  error TS2339: Property 'id' does not exist on type 'User'. 해당 에러는 아래 코드에서 발생되었다. passport . serializeUser (( user , done ) => { done ( null , user . id ); }); 아래 코드처럼 req.login으로 user 정보를 넘겨passport.serializeUser에서 해당 유저 정보를 받는데 return req . login ( user , async ( err ) => { if ( err ) { console . error ( err ); return next ( err ); } if ( typeof user === 'object' && user !== null ) { if ( user ) { return res . status ( 200 ). json ({ success : true , message : 'login success' , user : { email : user . email , nickname : u...

오류 사진 import { Entity , PrimaryGeneratedColumn , Column , OneToMany } from 'typeorm' ; import { Post } from './Post' ; @ Entity () export class User { @ PrimaryGeneratedColumn () id : number ; @ Column ({ unique : true , length : 50 }) email : string ; @ Column ({ unique : true , nullable : true }) google : string | null ; @ Column ({ length : 10 }) nickname : string ; @ Column ({ length : 200 }) password : string ; @ Column () createdAt : Date ; @ OneToMany (() => Post , ( post ) => post . user ) posts : Post []; } - 수정 전 - 구글 로그인으로 가입한 사용자 정보를 받는 컬럼에서 오류가 발생했다. Object 데이터 타입을 받을 수 없다는것인데 찾아보니 유니언 타입(Union type)으로 작성하면 데이터 타입을 Object로 인식하기 때문에 위에서 google: string | null 과 같이 작성하면 안된다고 한다. import { Entity , PrimaryGeneratedColumn , Column , OneToMany } from 'typeorm' ; import { Post } from './Post' ; @ Entity () export class User { @ PrimaryGeneratedColumn () id : number ; @ Column ({ ...

      client_max_body_size 의 크기 제한 설정을 너무 낮게해놔서 발생한 오류였다.  즉 전달 받을 수 있는 파일의 크기가 제한 설정을 너무 낮게 작성했었다. 100k( 100kb) 였던 제한을 100M(100Mb)로 변경해주었더니 오류가 없어졌다. nginx.conf 파일에서 해당 부분을 수정하고 난 후 재시작을 해줘야지 잘 적용된다. $ sudo service nginx restart 재시작 한 후 잘 돌아가는지 확인 $ sudo service nignx status 참고 https://stackoverflow.com/questions/19917401/error-request-entity-too-large

프론트단에서 공공데이터 포털에서 제공해주는 OPEN API를 바로 요청해서 사용하려고했는데 해당 오류가 발생했다. API KEY만 삭제한 오류  내용: Access to XMLHttpRequest at 'http://apis.data.go.kr/B552584/EvCharger/getChargerInfo?serviceKey=${API KEY}&numOfRows=5&pageNo=1' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 자바스크립트의 표준 스펙에는 다른 출처(서버)로의 요청을 허용하지 않는 동일 출처 정책(Same Origin Policy)이 있다. 도메인, 서브도메인, 프로토콜, 포트가 다른 곳에서 요청을 보내는경우 발생한다. 브라우저에서 다른 서버에 요청할 경우 해당 정책이 적용되지만 브라우저를 거치지않고 서버간의 통신에서는 해당 정책이 적용되지 않는다. 사진으로 간단히 그려봤다. 찾아낸 해결방법이 Node.js로 서버 통신을 통해 API 데이터를 받을 수 있다는 것이었다. 다행히도 Node.js를 공부했었어서 데이터를 받아오는데는 쉬웠지만 JSON이 아닌 XML 데이터를 제공해주기 때문에 변환이 필요했다. 이부분은 라이브러리를 사용해서 변환할 수 있었다.

Material UI와 React를 함께 사용할때 해당 오류가 발생하는 경우가 있다. 문제점을 찾아보니 React의 index.js에 작성되어있는 <React.StrictMode>가 문제였다. 해외 커뮤니티를 찾아봐도 다들 말이 다른데 오류가 해결된 방법은 <React.StrictMode> 를 주석처리 시키는것이었다. 외국인들 말로는 Material UI 자체 문제라고 한다.

깃허브에 로컬 프로젝트를 push하려고 했는데 아래와 같은 오류가 발생했다.

Homebrew를 사용하여 MongoDB를 설치할 수 있다. $ brew update && brew install mongodb 하지만 터미널에 에러를 뿜는다.. Error: No available formula or cask with the name "mongodb". ==> Searching for a previously deleted formula (in the last month)... Error: No previously deleted formula found. ==> Searching taps on GitHub... Error: No formulae found in taps. 해결 방법 아래 코드를 순서대로 터미널에 입력하여 설치하면 된다. brew services stop mongodb brew uninstall mongodb brew tap mongodb/brew brew install mongodb-community brew services start mongodb-community 최종적으로 잘 설치 되었는지 확인을 해보려면  $ mongo -version // MongoDB shell version v4.4.1 잘 나오는것을 확인할 수 있다. 한가지 또다른 방법은 $ brew list 를 통해 설치되어있는 파일들을 확인하는것이다.

에러의 원인은 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파일을 실행하는것이다. 하지만 위의 해결 방법들과 다른점이 존재하는데 이 속성을 사용하면 비동기적으로 코드가 동작한다는것이다. 프로그램은 코드를 해석할때 왼쪽에서 오른쪽으로...

일반적으로 에러가 발생하면 스크립트가 제대로 동작하지 못하게 된다. 이러한 에러를 사람이 완벽하게 예측하여 처리할 수 없기 때문에 try ~ catch 문법을 사용하면 예상치 못한 에러에대하여 대응을 할 수 있다. try ~ catch 문법은 try 와 catch 라는 필수적인 두개의 블록이 존재하며  상황에따라 추가하여 사용할 수 있는 finally 도 존재한다. try { // 수행할 코드 } catch ( error ) { // 에러 핸들링 } try 블럭 내부에 수행할 코드를 작성하고 해당코드가 정상적으로 실행되면 catch 블럭을 건너뛰고 다음 코드를 이어 실행한다. 반면에 try 블럭 내부에 수행할 코드에 에러가 발생하면 try 블럭 내부의 코드 실행이 중단되고 catch 블럭으로 에러에 대한 객체가 인자로 넘어가면서 catch 블럭안에서 에러를 처리할 수 있다. 매개변수 error로 전달되는 에러 객체에는 무슨 문제가 발생했는지에 대한 설명이 담겨있다. 인자로 전달된 error 객체에는 name, message, stack 프로퍼티가 존재한다. 각각의 프로퍼티를 알아보면 error.name : 에러 명칭 error.message : 에러에대한 상세 내용을 담고있는 메세지이다. error.stack : 에러가 발생한 순간의 스택 (디버깅시 사용) try ~ catch 문법은 런타임 환경에서 실행되며 런타임 환경에서 발생하는 Error를 런타임 에러(runtime error) 또는 예외(Exception)라고 부른다. 에러 던지기 throw try ~ catch를 사용하여 예외( Exception )를 잡아낼 수 있지만 에러 종류와 관계없이 동일한 방식으로 에러를 처리해 주기 때문에 디버깅을 어렵게 만든다. 그러므로 추가적인 자세한 정보를 담은 에러를 만들어야 한다, 사용방식은 아래와 같다. throw 'errrorrr' ; // 던지는 것에 타입 제한은 없으나 throw new Error ( 'throw erro...

console console.log는 요소를 HTML과 같은 트리 구조로 출력한다.  - console.log()의 원래 return 값은 undefined 이다. 우리가 알고있는 console.log('hello world')의 경우 원래 기능에 부가적으로 'hello world'라는 단어 출력을 요청한것이기 때문에 'hello world'를 출력할 뿐 원래 return값은 undefined 이다. console.dir은 객체의 속성 목록을 상호작용 가능한 형태로 표시. 객체를 펼쳐서 내부 속성들을 확인할 수 있다. console.clear은 콘솔의 내용을 지운다. console.count은 호출한 횟루를 출력한다. console.time time이 적힌 부분부터 시간을 측정하여  console.timeEnd timeEnd가 호출되는 부분까지의 시간을 측정한다. 코드가 얼마나 효율적인지 확인하고자 할때 사용한다. console.error 에러 로깅 console.trace 함수안에서 사용하면 호출스택을 보여준다. console.table 값을 테이블 형식으로 깔금하게 보여준다. console.log(__filename); 파일이름 확인 console.log(__dirname); 패스(경로) 확인 참조링크: 1번. https://developer.mozilla.org/ko/docs/Web/API/Console 2번. https://developers.google.com/web/tools/chrome-devtools/console?hl=ko

사진과 같이 에러코드가 발생하면 영어로나오는 TypeError를 확인하고 맨밑에 3:3이라는 숫자를보면  첫번째 3은 3번째줄 뒤에 3은 띄어쓰기포함 왼쪽으로부터 3번째  단어에 에러가 발생했다는 것이다.  해당부분에 문제가 발생한것이기때문에 해당부분을 확인한다.