개발/자바스크립트
헤로쿠 503에러 해결 (code=H10 desc=App crashed)
노마드코더에서 youtube 클론코딩 강좌를 듣고 완성 후 heroku를 이용해 배포했었다. 그런데 얼마전 몽고db 아틀라스에서 장기 미활동으로 인해 클러스터를 정지시킨다는 예고 메일이 왔었다. 이후 클러스터는 자동으로 정지되었고 뒤늦게 배포 사이트를 들어가보니 이미 db가 꺼져버려 정상 접속이 되지 않았다. 위 안내 메세지대로 로그를 확인해보니 위처럼 503 에러를 뱉고있었다. 루트페이지와 파비콘 등 초기 페이지 전체가 정상적으로 처리되지 않는다. 뒤늦게 mongoDB에 접속해 다시 클러스터를 켜주고 헤로쿠 환경 변수 DB_URL을 새롭게 업데이트 해줬다. (몽고디비 클러스터 0를 inactive -> active 해주는 과정에서 db 안 date들이 초기화되었기에 해주었다. 실제 url이 변경되는지 ..
타입스크립트 angle brackets, 꺾쇠 괄호 <>
타입스크립트의 angle brackets, 꺾쇠 괄호 노마드코더 타입스크립트 10일차 과제는 abstract classes, generics 그리고 overloading 을 이용해 fake API를 만드는 과제다. 과제를 진행하는도중 타입스크립트의 다양한 타입 형태가 나를 헷갈리게 한다. abstract class AbLocationStroage { [key: string]: T } /// LocalStorage를 흉내낸 class class LocalStorageAPI { private stroage: AbLocationStroage = {} } setItem(key: string, value: T) { if (this.stroage[key]) { console.log(`${key} already ex..
Framer-motion 리액트 애니메이션 라이브러리
Framer-motjon 리액트를 위한 오픈소스 프로덕션레디 모션 라이브러리 프로덕션 레디란? 사용자의 요구-사용성, 의존성, 가용성-을 충족 시키는 소프트웨어. 실제 운영 환경에서 구동이 가능한 코드. 설치 npm install framer-motion import { motion } from "framer-motion" export const MyComponent = ({ isVisible }) => ( ) Animations Motion 컴포넌트를 animate 속성을 통해 제어하며, 간단한 애니메이션은 animate props에서 직접 값을 설정할 수 있습니다. Gestures 제스쳐는 리액트 이벤트 시스템을 확장하여 사용하며 호버, 탭, 드래그를 지원합니다. Variants Variants를 통..
[타입스크립트] CRA를 활용하지 않은 TS프로젝트 생성
CRA를 사용하지 않고 타입스크립트 프로젝트를 생성하기 콘솔창에 npm init -y 를 입력, package.json 파일 생성 npm i -D typescript 입력, devDependency에 타입스크립트 추가 타입스크립트 설정 파일 tsconfig.json 생성 이 파일을 통해 vscode는 TS로 작업하는 것을 감지하고 자동완성을 제공한다. { /* Directories for compiled JS */ "include":[ "src" ], "compilerOptions":{ "outDir" : "build", /* Product will be located at */ "target":"ES6", /* Product will be compiled in ES6 */ "lib": ["ES6", "..
[타입스크립트] Call Signatures
TS의 다양한 함수 표현 중 Call signiture에 대해 찾아보던 중, TS핸드북의 예제 코드가 이해되지 않았다. 스택오버플로우의 친절한 설명덕에 이해할 수 있어 정리해본다. Call Signitures 타입스크립트에서, interface로 function을 정의하는 것은 콜 시그니쳐를 추가해주면 가능해진다. type Add = (a:number, b:number) => number; const add:Add = (a,b) => a+b 프로퍼티로 호출 가능한 것을 설명하려면 객체 타입에 Call Signature을 작성할 수 있습니다. Call Signatures는 다음과 같이 함수의 매개 변수(parameter)와 반환 타입을 지정합니다. // JS에서는 fucntion도 object이기 때문에 ..
자바스크립트의 비동기 처리
> 비동기처리란 특정 코드 연산이 끝날 때까지 기다리는 것이 아니라, 멈추지 않고 다음 코드를 실행하는 특성 서버에서 응답을 언제 줄 지 모르기 때문에 다양한 요청을 비동기로 처리 > 문제점 비동기 처리 방식은 효율적이지만 때로 문제를 일으킴 API에서 응답을 받고 처리해준다던지 페이지가 완전히 로드되기 전에 응답을 받아와 빈 값을 리턴하는 경우가 있었음 > 해결방법 콜백함수 사용 그러나 콜백함수는 중첩될 경우 가독성이 떨어지고 로직 변경도 어려움 /// 예시 $.get('url', function(response)) { parseValue(response, function(id) { auth(id, function(result) { display(result, function(text) ..
null undefined의 차이
Null 과 Undefined 차이 // 정의되지 않고 초기화된 적도 없는 foo foo; //ReferenceError: foo is not defined // 존재하지만 값이나 자료형이 존재하지 않는 foo var foo = null; foo; //null // null은 어떤 값이 의도적으로 비어있음을 표현 typeof null === 'object' // true var x; // 값을 할당하지 않고 변수 선언 console.log("x's value is", x) // "x's value is undefined" 출력 // undefined는 선언한 후 값을 할당하지 않은 변수 혹은 주어지지 않은 인수에 자동 할당. null, undefined 모두 원시값에 해당한다..
AWS 배포 중 이미지, 비디오 리소스를 받아오지 못하는 경우
개발환경에서 컴퓨터를 이용한 서버에서는 crossorigin 미들웨어를 사용했다. app.use((req, res, next) => { res.header("Cross-Origin-Embedder-Policy", "require-corp"); res.header("Cross-Origin-Opener-Policy", "same-origin"); next(); }); 그러나 AWS로 배포해보니 이미지 소스나 영상 소스를 가져오지 못하고 ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 혹은 AccessControlListNotSupported: The bucket does not allow ACLs 등 다양하게 ACL, crossor..
[NextJS] Fast refresh가 작동하지 않을 때 (React 18)
React 18이 정식으로 릴리즈되어서 모든 버전을 최신으로 업데이트하면 Hot reloading이 잘 작동합니다! NextJS는 Fast refresh를 기본 기능으로 제공한다. (https://nextjs.org/docs/basic-features/fast-refresh) 패스트 리프레시란? 스타일 등의 컴포넌트를 변경할 때 빠른 리프레시는 매우 편리합니다. 현재 페이지에만 앱을 로드합니다. 대부분의 편집은 1~2초 이내에 표시됩니다. 핫 새로고침은 앱을 실행 상태로 유지하고 런타임에 편집한 파일의 새 버전을 주입하는 것입니다. Fast Refresh의 경우 React 컴포넌트만 내보내는 모듈을 편집하면 Fast Refresh는 해당 모듈의 코드만 업데이트하고 컴포넌트를 다시 렌더링합니다. React..
[NextJS] getSererSideProps
넥스트JS의 가장 큰 장점인 SSR을 살리기 위해서는 getServerSideProps를 export해주어야한다. export default function Home({ results }) { // 데이터 렌더링! } export async function getServerSideProps() { const { results } = await ( await fetch("http://localhost:3000/api/movies") ).json(); return { props: { results, }, }; } 이때 넥스트js는 반환된 데이터를 사용해 req에서 페이지를 pre-render하게 된다. 요 getServerSideProps는 서버측에서만 실행되며 클라이언트에서는 X 사용자에게 api에서 fe..