Frontend (22) 썸네일형 리스트형 Property 프로퍼티란? + 프로퍼티에 접근하는 방법 NestJS 강의를 듣던 도중 '프로퍼티'라는 단어를 듣게 되었다. 이전에도 몇 번 들어본적은 있지만..? 설명하라고 하면 정확히 설명하지도 못하고 떠오르는 이미지도 딱히 없었기 때문에 이건 모르는 개념이다! 생각하여 프로퍼티에 대해 정리하고자 한다. Property '어떤 값' '객체 내부의 속성' 이해를 돕기 위해 위의 사진에서 코드화를 해보자면 객체.너비 객체.높이 객체.색상 객체.무게 이렇게 Dot Notation으로도 접할 수 있다. Property의 접근 1) Dot Notation let fruits = { kind1 : 'apple', kind2 : 'banana', kind3 : 'lemon', cafe : { juice : 'fruits juice', city : 'seoul' } } .. npm missing script "start" 에러가 계속 났던 이유 내가 개발을 하면서 제일 문제 있다고 생각하는 것이 바로 npm missing script 에러였다. 나름 에러를 찾아봐도 package.json에 script ~ start 이걸 추가해야 한다고 해서 추가하려고 했지만 이미 start와 관련된 script는 모두 추가가 되어있는 상황이었다. 근데 왜 계속 에러가 발생할까?에 대해 나름의 고민을 해봤다. 바로 터미널에서 프로젝트의 위치를 항상 이동시키지 않은 것이었다. 오늘 에러가 난 부분도 같았다. 1) 일단 터미널에서 처음에 nest new 키워드를 이용하여 nest_study_1_230314 프로젝트를 만들었다. 2) 그리고 그 안에 또 mkdir을 이용해서 nestjs-board-app 디렉토리를 생성해주었다. 3) cd nestjs-board-a.. TS2349: This expression is not callable. Type 'typeof cookieParser' has no call signatures. 문제 원인 nest 프로젝트를 clone해와서 내 로컬환경에서 실행하려고 보니, TS2349: This expression is not callable. Type 'typeof cookieParser' has no call signatures.와 같은 에러가 발생하였다. 문제 원인 정확한 원인은 못찾았으나, 아마 import * 에서 *을 할 때 인식이 잘 안되는건가?라는 추측을 했다. 문제 해결 문제 해결 이전 import * as cookieParser from 'cookie-parser'; 문제 해결 방법 import cookieParser from 'cookie-parser'; 위와 같이 바꾸어주었더니 해당 에러가 사라졌다. CORS(Cross-Origin-Resource-Sharing) <-> SOP(Same Origin Policy) 일을 하면서도, 예전에 프론트엔드를 나름 찍먹(?)을 해봤을때도 CORS라는 단어를 접했었다. 오늘 일을 하면서 CORS 접근 권한에 대한 추가 요청이 올때 추가해야 한다는 지시가 있었는데, 이참에 CORS에 대해 팀의 프론트엔드 개발자님께 한번 더 여쭈어보고 좀 더 찾아보았다. CORS(Cross-Origin-Resource-Sharing) = 쉽게 말하면, '방어막' 우리가 이곳저곳에서 가져오는 리소스가 '안전'하다는 최소한의 보장을 받은게 CORS이다. 서로 다른 출처간의 리소스 공유가능 ex) 만약 사이트A와 B가 있다. 이 두 사이트간의 서로 신뢰할 수 있는 사이트라면 HTTP 정보 요청과 반환이 가능하다. SOP(Same Orgin Policy) = CORS와 반대 같은 출처에서만 리소스 공유.. [오류] npm run start시 npm ERR! code ENOENT npm ERR! syscall opennpm ERR! path /Users/사용자이름/package.json ~ 에러 해결방법 문제 상황 똑같은 프로젝트여도 intelliJ와 vscode 둘 다 발생하는 에러였다. npm run start(:dev)를 했는데 npm ERR! code ENOENTnpm ERR! syscall opennpm ERR! path /Users/사용자이름/package.json ~ 와 같은 에러가 터미널에 출력되었다. npm ERR! code ENOENT npm ERR! syscall open npm ERR! path /Users/사용자이름/package.json npm ERR! errno -2 npm ERR! enoent ENOENT: no such file or directory, open '/Users/사용자이름/package.json' npm ERR! enoent This is related to .. npm으로 설치할때 --save 옵션은 무엇일까? nestJS에서 npm을 이용해서 postgreSQL을 이용한 typeorm을 설치하려고 했다. 터미널에 아래와 같이 입력하였다. npm install pg typeorm @nestjs/typeorm --save @nestjs/typeorm : Nest와 typeORM을 연결해주는 모듈 typeorm : typeORM 모듈 pg : Postgres 모듈 그런데 저 끝에 붙는 --save의 의미는 무엇일까? --save의 경우 아래의 형식으로 쓰인다. npm install --save --save의 의미 package.json의 dependency에 모듈을 추가한다는 의미이다. npm5 버전 이후부터는 --save 옵션을 쓰지 않아도 자동으로 추가된다고 한다. 가끔가다가 --save를 설치하는 방식을 쓰는.. 콜백함수(Callback)란? (+ 일급객체,고차함수) JS를 보다보면 '콜백함수'라는 말을 정말 많이 들어보았을 것이다. 나 또한 콜백함수의 존재는 알았으나, 설명하라고 하면 제대로 하지 못하기에 이참에 콜백함수에 대해 제대로 정리해보려고 한다. 콜백함수 나중에 호출할 함수 전달받은 함수에서 처리될 일이 끝나고 호출하도록 한다. 콜백함수는 Node.js에서 너무나 중요한 개념이다. JS에서 함수는 일급객체(First-class-citizen) 일급객체란? 변수할당, 함수 간 인자 전달 및 반환이 가능해야 하는 특징을 만족해야 한다. // 객체 생성 및 변수에 담음 const a = { msg: "hello 1급 객체" } // 객체를 인자로 전달 가능 function f1(a) { const b = a; b.msg2 = "hello 1급 객체..!"; //.. Event Loop란? (+ JS 엔진,비동기함수,setTimeout) Nest.js 책을 공부하다가 '이벤트 루프'라는 단어를 접하게 되었다. 사실 이벤트 루프의 경우에도 기존에는 '이벤트가 loop 반복 형태로 도는구나' 정도로만 생각했지, 나의 큰 착각이었다. 이번 기회에 Event Loop에 대해 다시 정리하고자 한다. JS 엔진 구성 (참고로, JS엔진에서 제일 유명한 엔진은 Google의 v8이다) https://v8.dev/ 일단 Nest.js의 근원이 되는 Javascript부터 거슬러 올라가야 한다. Javascript의 엔진은 2가지 영역으로 구성되어 있는데 바로 Memory Heap과 Call stack 형태로 구성되어 있다. Memory Heap - 메모리 할당 Call Stack - 코드 실행 시에 하나씩 Stack 형태로 쌓이는 장소. stack의 .. 프론트엔드 웹 성능 측정 프론트엔드 개발자분으로부터 크롬 개발자도구를 이용하여 Network > Preview 창을 보는 계기가 있었는데, 이때 프론트엔드에서 웹 성능 측정이 얼마나 중요한 부분인지 알게 되었다. 웹 성능 측정 = 웹 로딩 시간 웹 성능 측정 도구들 서버에서 콘텐츠(데이터)가 사용자에게 전달되기까지 여러 단계가 있기 떄문에 웹 성능을 결정짓는 요소는 다양하다. ex) 사용자의 디바이스 환경, 네트워크, DNS 응답속도, 웹 서버의 응답속도, 백엔드 처리속도, 프론트엔드 최적화 등 Name : 로드하는 파일의 이름 표시. 마우스로 클릭항 이미지 확인 & 파일 내용 확인 가능 Type : 파일 형식 표시 Size : 파일 크기 표시 Time : 로드되기까지 시간 표시 하단의 106 requests~ 이런 부분들은 사.. TS2440: Import declaration conflicts with local declaration of ~ 문제 상황 다른 파일에서 작성된 type 파일을 import 해와서 써주려고 했는데 제목과 같은 오류가 발생하였다. import만 해와서 쓰는데 뭐가 문제지?하고 생각했었다. 문제 원인 import 해온 파일로 다시 돌아가보자. 해당 파일에서는 파일 안에 type등 다 구현이 되어있고 나는 가져와서 쓰기만 하면 되는 것이다. ex) ~/components/pages/story/helloPage export interface AType { id?: String; articleId?: string; .... } import 해온 파일에 이런 내용이 작성되어있다고 가정해보자. 그럼 나는 새로 연 파일에서 위에서 작성한 helloPage를 import 해와서 사용하지 않을 것인가. 근데 내가 새로 연 파일에서 .. 이전 1 2 3 다음
