프로그래밍 공부 노트

      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

어느 페이지에서 현재페이지로 왔느냐에따라 다르게 처리하고 싶은 경우가 있다. 이때 react-router-dom의 history.push()로 간단하게 처리할 수 있다. 일반적으로 react-router-dom으로 라우팅할 경우 아래와 같이 많이 작성한다. history . push ( ' /payment Page ' ) 하지만 간단하게 아래와 같이 작성하면 어느페이지에서 현재페이지로 왔는지 props를 넘겨주어 현재 페이지에서확인할 수 있다. history . push ( { pathname : " / payment Page " , state : { _id : " 0001 " , name : " detailPage " }} )  경로를 받아올 때는 history.location을 사용해서 pathname 값과 state값을 현재 페이지에서 받을 수 있다. 위 코드에대한 결과는 아니고 프로젝트에서 사용했을때 console.log()로 history.location을 확인해보면 아래와 같이 해당 페이지에서 경로와 값들을 받을 수 있는것을 확인할 수 있다. 나의 경우 프로젝트에서 결제페이지로 넘어오는 경로가 장바구니 목록에서 온것인지 아니면 상품을 바로 선택해서 결제페이지로 넘어온것인지에 따라 다르게 처리하는데 사용했다. 참고: https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-link-redirect-in-react-router-v4

프로젝트를 진행하던 중 특정 Collection에서 데이터가 정상적으로 저장되지 않는 문제가 발생했었다.  자세히 설명하자면 videos Collection에 사용자가 업로드한 영상에 관련한 데이터들을 담아야하는데 따로 업로드 횟수 제한등을 설정하지 않았는데도 불구하고 한명의 유저가 여러개의 영상을 업로드 하더라도 단하나의 Documents만 생성되는것이었다. DB에는 사용자가 업로드한 영상이 제대로 들어와서 저장되었지만 mongoDB Atlas에서 videos Collection에 Documents가 유저별로 단 하나씩만 생성되고 추가로 업로드하는 영상에대한 Documents가 생성되지 않는 문제가 발생했었다. 따로 에러코드가 발생하지도 않아서 내가 코드를 잘못 작성해서 그런가 싶어서 프론트에서 넘긴 데이터가 백엔드쪽으로 제대로 전달이 안되고있는건가 콘솔을 다 찍어보면서 확인해 보고 인터넷에 검색해 봤지만 몇 시간 동안 해결방법을 못 찾았다. 그러던 중 무심코 지나쳤던 MongoDB Atlas Collection에  탭들이 보였다. 그 중 indexes 탭을 눌러봤는데 mongoose로  schema model을 작성할 때 초반에 nickname에 실수로 unique 속성을 작성한것이 그대로 mongoDB Atlas에 저장되어있던것이었다.  schema model에 unique가 작성되어있는 상태에서 이미 데이터가 하나 저장되어있었고 그 후에 내 코드 편집기에서 unique 속성을 수정했지만 이미 데이터를 하나 저장하면서 MongoDB Atlas 에는 해당 unique 속성이 적용되어있었기 때문에 유저별로 하나씩의 Document만 저장되는 것이었다. 옆에 Drop index를 눌러 unique 속성을 지우고 다시 시도해보니 내가 원하던데로 저장이 되었다. 이미 수정을 모두 마친뒤라 위에 users Collection으로 사진을 대체했다. 아래는 User.js 모델 const mongoose = require ( " m...

Video.js(model) const mongoose = require ( " mongoose " ) ; const Schema = mongoose . Schema ; const videoSchema = mongoose . Schema ( { writer : { type : Schema . Types . ObjectId , ref : " User " , }, nickname : { type : String , }, title : { type : String , maxlength : 50 , }, description : { type : String , }, genre : { type : String , }, cost : { type : Number , }, filePath : { type : String , }, views : { type : Number , default : 0 , }, duration : { type : String , }, thumbnail : { type : String , }, preview : { type : String , }, likes : { type : Number , default : 0 , }, }, { timestamps : true } ) ; const Video = mongoose . model ( " Video " , videoSchema) ; module.exports = { Video }; routes/video.js (rout...

프로젝트를 진행하다보면 공개하기 민감한 정보들이 프로젝트내에서 코드들과 함께 작성되어있게 된다. 이럴때 공개되면 안될만한 정보들을 관리할 수 있는것이 환경변수이다. 이러한 환경변수를 사용하기 위해서는 라이브러리가 필요하다. $ npm install dotenv https://www.npmjs.com/package/dotenv 사용법은 간단하다. import dotenv from " dotenv "; dotenv . config () ; 다운받은 라이브러리를 이렇게 프로젝트 상단에 import 해오고 프로젝트 최상단 디렉토리에 .env 파일을 생성한다. src 디렉토리가 아닌 package.json과 동일한 깊이의? 디렉토리에 놔두어야 한다. 일반적으로 환경변수를 작성할때에는 아래와 같이 작성한다. KAKAO_MAP_API=abcabcabcabcabc GOOGLE_MAP_API=1a2a3a4a5a6a7a8a9a 🌟주의 :  " " 쌍따옴표나 ' ' 작은 따옴표등으로 감싸면 동작하지 못하니 주의해야 한다. 띄어쓰기 등도 하면 안된다. 이렇게 선언한  환경변수는 process.env.변수명 으로 사용할 수 있다. 하지만 React(리액트)에서는 조금 다른 방식으로 환경변수를 사용할 수 있다. React 의 경우는 환경변수 앞에 필수적으로 아래의 키워드 REACT_APP_ 키워드를 붙여줘야 한다. REACT_APP_ react 에서도 똑같이 process.env.변수명으로 접근하여 환경변수를 사용할 수 있다. ex) 마지막으로 제일 중요한 부분!!! .gitignore 파일에 .env 작성하기!!!

  원시 타입 let num : number = 555 ; let str : string = ' this is string ' ; let bool : boolean = true ; let nullType : null = null; let undefinedType : undefined = undefined; let symbolType : symbol = Symbol ( ' mySymbol ' ) ; 배열 타입 let arr : number [] = [ 1 , 2 , 3 ] ; let arr1 : Array < number > = [ 1 , 2 , 3 ] ; let arr3 : Array < number | string | boolean > = [ 1 , true , ' sss ' ] ; Tuple(튜플) 튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다. 주의할 점은 튜플의 경우 push하는 행위는 막지 못한다. let tuple : [ boolean , number , string ] = [ true , 111 , ' 11 ' ] ; 상수 일반적으로 const로 상수를 선언하면 값을 변경하거나 재할당 할 수 없다. 하지만 객체와 배열의 경우 const로 상수를 선언하였다 하더라도 아래와 같이 값의 재할당이 가능하다. 이러한 재할당을 방지하여 완전한 변경없는 객체를 만들고자 할 때에는 as const 키워드를 사용하면 된다. const obj = { a : 1 , b : 2 }; obj . a = 3 ; //값을 재할당 할 수 있다. const objAsConst = { a : 1 , b : 2 } as const ; objAsConst . a = 3 ; //Error 발생 Enum enum 멤버에 숫자로 값을 할당하면 1씩...

웹 서비스를 만들때 제일 기본적으로 구현해야하는 부분중의 하나가 인증이라고 생각한다. 처음에 아무것도 모를때는 localStorage나 sessionStorage와 같은 브라우저 저장소를 사용했다. 위와 같은 브라우저 저장소를 사용하면 장점도 있지만 단점으로 보안적인 문제가 있다. 위 두가지와 cookie 관련해서도 블로그에 적어둔 글이 있어서 링크를 남긴다. https://seungwon-code.blogspot.com/2019/11/ddd7.html 브라우저 저장소는 자바스크립트로 값을 쉽게 저장하고 가져와서 사용할 수 있기 때문에 편리하지만 이렇게 자바스크립트로 제어가 가능하다는것은 곧 XSS(cross-site scripting) 공격에 취약할 수 있음을 의미한다. XSS를 간략하게 설명하면 해커가 자바스크립트 코드를 웹페이지에 심어두어 사용자의 정보를 탈취하는 종류의 공격이다.  웹에서 사용자로부터 많은 데이터들을 입력받게 되는데 이때 해커가 작성해둔 자바스크립트 코드로 해커가 원하는것을 얻을 수 있게 된다. 많이 알려진 공격 방식이라서 필터링 하는방법이 있다고 한다. 그럼에도 불구하고 다양한 우회방법이 존재할 수 있기 때문에 완벽하게 방어하기란 쉽지 않다고 한다. localStorage와 sessionStorage 이외에도 cookie(쿠키)가 있다.  앞에서의 두가지 브라우저 저장소와 달리 cookie는 조금 더 보안적으로 안전하다. XSS 공격을 방어할 수 있는 HttpOnly 옵션을 작성해주면 되기때문이다. 하지만 이방식에서도 CSRF(cross-site request forgery)라는 또 다른 공격에 취약할 수 있다. cookie의 작동 방식을 간략히 설명하면 사용자 인증을 하게 될 때 서버측에서는 헤더를 통해서 토큰을 보낸다. 브라우저는 이를 통해서 쿠키를 생성하고 토큰을 저장한다.  이후에 api 요청을 하게 될 때 브라우저가 자동으로 해당 쿠키를 같이 보낸다. 따로 쿠키를 서버에 직접 전달하지 않아도 자동으로 ...

타입스크립트 설치 $ npm i typescript 컴파일 Typescript로 작성된 코드는 브라우저가 해석하지 못하기 때문에 브라우저가 해석 가능한 자바스크립트 코드로 컴파일 해주어야 한다. 아래 명령어와 같아 npx tsc 파일명 을 입력한다. 그러면 자바스크립트로 컴파일된 js 파일이 생성된다. $ npx tsc index.ts 컴파일러 옵션 설정하기 (tsconfig.json) 타입스크립트 설정파일인 tsconfig.json 파일은 타입스크립트를 자바스크립트로 변환할 때 특정한 기준으로 변환하도록 설정을 정의해놓은 파일이다.  아래 명령어를 입력하면 tsconfig.json 파일이 생긴다. $ tsc --init tsconfig.json에  컴파일러 옵션을 설정해주면 해당 옵션에 맞추어서 컴파일해준다. 컴파일러 옵션에대해서 아래에 표가있지만 몇가지 대표적인 옵션만 확인해보면  target 타입스크립트 파일을 자바스크립트 코드로 컴파일 했을때 생성될 자바스크립트 버전을 설정하는 옵션이다. module 모듈 코드 생성 지정에는 여러 종류가 있지만 대체적으로 "CommonJs" 를 사용한다. allowJs 타입스크립트 컴파일 작업시 자바스크립트 파일도 포함할지 설정하는 옵션이다. 기존에 존재하는 자바스크립트 프로젝트에 타입스크립트를 점진적으로 적용할 때 사용하면 좋은 옵션이다. outDir 타입스크립트에서 자바스크립트로 컴파일된 파일을 특정 경로, 폴더에 저장할 수 있도록 해주는 옵션이다.  strict 모든 엄격한 타입 검사 옵션을 활성화 한다.  strict 옵션을 사용하지 않으면 typescript를 사용하는 이유가 사라진다. noImplicityAny any 타입으로 암시한 표현식과 선언에 오류를 발생시킨다. strict와 같이 엄격한 타입 검사를 위한 옵션이다. lib lib은 library의 약자이다. 타입스크립트 파일을 자바스크립트 파일로 컴파일 할 때 포함될 라이브러리 목록이다. lib은 특정 메서드...