Eslint: Function component is not a function declaration(react/function-component-definition) 원인 리액트는 보통 함수형 컴포넌트를 사용한다. react/function-component-definition 규칙을 사용하려면, 이 함수형 컴포넌트를 어떤 함수 유형으로 사용할지 미리 정하고, .eslintrc의 rules에 명시해두어야 에러가 발생하지 않는다. 해결 함수 유형에 따른 함수 유형을 지정해주어야 한다. // 타입1 : 기명함수 선언식 컴포넌트 // "react/function-component-definition": [ // 2, {"namedComponents" : "function-declaration" }] func..
SequelizeValidationError: notNull Violation: Comment.content cannot be null at InstanceValidator._validate (C:\Users\hipho\Desktop\develop\nodebird\back\node_modules\sequelize\lib\insta nce-validator.js:50:13) at processTicksAndRejections (node:internal/process/task_queues:96:5) at async InstanceValidator._validateAndRunHooks (C:\Users\hipho\Desktop\develop\nodebird\back\node_modules\se quelize\..
에디터에서 eslint, prettier 적용문제 (에러 표시, 자동 설정 등) Eslint, prettier 확장 툴 설치 되어있는지 확인 VSC 또는 웹스톰 등 에디터에서 설정이 되어있는 확인 또는 eslintrc, prettier 설정 파일에 오타가 없는지 확인 Parsing Error: No babel config file detected for 경로 eslint 설정파일에서 "parser": "@babel/eslint-parser" "parserOptions" : { requireConfigFile: false, } 추가 "parser": "@babel/eslint-parser", "parserOptions": { "ecmaVersion": 2020, "sourceType": "module", ..
Window 객체는 ? Window 객체는 브라우저의 요소들과 자바스크립트 엔진, 모든 변수를 담고 있는 객체입니다. Window 인터넷 브라우저를 보면 탭들도 있고, 주소창, 즐겨찾기, 툴바 등이 있습니다. 그 다음부터는 웹사이트가 표시됩니다. 여기서 브라우저 전체를 담당하는 객체가 Window객체입니다. 웹사이트만 담당하는 게 Document 객체 이구요. 물론, Document 객체 또한 Window 객체 안에 들어있습니다. Document 객체는 양이 어마어마하게 많기 때문에 다음시간에 다뤄보겠습니다. 콘솔에 window를 쓰고 .(점)을 치는 순간 여러 추천 목록이 나옵니다. 이게 바로 윈도우(window) 객체의 속성과 메소드들입니다. 이 포스트에서는 자주 사용하는 것들만 추려볼 생각입니다. ..
SWR dispatch로 인해 코드량이 많아진다면 SWR를 이용해서 코드량을 줄일 수 있습니다. 자동으로 data 값과 error값이 들어가 있고, 노드버드는 axios를 이용하고 있으므로 fetcher를 이용할 수 있습니다. Moment moment는 날짜를 사용할 수 있는 라이브러리입니다. moment, date-fns, dayjs 등이 많이 사용됩니다. moment: 가장 많이 사용되는 라이브러리. date-fns: moment가 불변성을 지키기때문에 사용하기 까다롭기에 다음으로 많이 사용되는 라이브러리. dayjs: 데이터용량이 제일 적기 때문에 사용됨. 리트윗하거나 게시글이 작성될 때 작성 날짜가 게시글의 오른쪽에 나오게 할 것이므로 위와 같이 작성해줍니다. 다양한 표현 메서드들이 있으니 for..
CI CI(Continuous Integration) 즉 지속적인 통합(병합)을 의미합니다. 어플리케이션의 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 레포지토리에 통합되는 것을 의미 보통 형상관리툴(Git, SVN 등)을 사용하는데, 기능 추가할 때마다 commit으로 레포지토리에 업데이트를 하게됨 업데이트될 때마다 빌드/테스트/병합하기엔 번거로움이 있음 자동화된 빌드&테스트는 원천 소스코드의 충돌을 미리 방지하는데 있습니다. 따라서, CI의 핵심 목표는 아래와 같습니다. 버그를 신속하게 찾아서 해결 소프트웨어의 품질개선 새로운 업데이트의 검증 및 릴리즈 시간의 단축 CD CD(Continuous Delivery or Continuous Deployment)로 지속적인 서비스제공 or ..
서버사이드 렌더링 CSR(Client Side Rendering) 서버에서 HTML을 처리하지 않고, 브라우저의 자바스크립트를 통해 상호작용하여 전달해주는 방식. 장점 사이트 상호작용에 있어 활발 초기 로딩 후 빠른 웹사이트 렌더링 웹애플리케이션에 좋음 자바스크립트 라이브러리 활용 단점 제대로 구현하지 않을 시 SEO(검색최적화)가 취약 초기 로딩에 많은 시간이 걸림 대부분 추가적인 라이브러리가 필요 SSR(Server Side Rendering) 서버에 HTML 파일을 저장해두었다가 요청이 발생할 때 모든 파일을 브라우저에 전달하는 방식. SEO, 크롤링에 최적화 되어 있습니다. 장점 검색엔진 SEO에 최적화 초기 화면 로딩이 빠름 단점 잦은 서버 요청 전체적으로 느린 페이지 렌더링 모든 페이지를 리로..
쿼리스트링과 lastId 방식 현재 스크롤을 내리면 같은 게시글을 계속 불러오는 버그가 있습니다. 여러 방법 중 lastId 방식으로 이 문제를 해결하는데, 먼저 mainPosts의 마지막(첫번째) 게시글의 id를 찾아서 이걸 lastId로 데이터를 전달해줍니다. 하지만, get방식은 데이터를 보낼 수 없기 때문에 넣으려면 쿼리스트링(`/주소?key=${value}`)를 이용해야 됩니다. 쿼리스트링의 값은 req.query에 담겨있으므로 req.query.lastId를 백엔드에서 값으로 사용합니다. 또한, 서비스가 처음 시작되는 경우, lastId의 값이 undefined가 되어버려서 에러가 발생할 수 있습니다. 초기로딩이 아닐시에는 if(parseInt(req.query.lastId, 10)) 구문을 ..
