자바스크립트

헤로쿠 503에러 해결 (code=H10 desc=App crashed)

노마드코더에서 youtube 클론코딩 강좌를 듣고 완성 후 heroku를 이용해 배포했었다. 그런데 얼마전 몽고db 아틀라스에서 장기 미활동으로 인해 클러스터를 정지시킨다는 예고 메일이 왔었다. 이후 클러스터는 자동으로 정지되었고 뒤늦게 배포 사이트를 들어가보니 이미 db가 꺼져버려 정상 접속이 되지 않았다. 위 안내 메세지대로 로그를 확인해보니 위처럼 503 에러를 뱉고있었다. 루트페이지와 파비콘 등 초기 페이지 전체가 정상적으로 처리되지 않는다. 뒤늦게 mongoDB에 접속해 다시 클러스터를 켜주고 헤로쿠 환경 변수 DB_URL을 새롭게 업데이트 해줬다. (몽고디비 클러스터 0를 inactive -> active 해주는 과정에서 db 안 date들이 초기화되었기에 해주었다. 실제 url이 변경되는지 ..

[타입스크립트] 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", "..

자바스크립트의 비동기 처리

> 비동기처리란 특정 코드 연산이 끝날 때까지 기다리는 것이 아니라, 멈추지 않고 다음 코드를 실행하는 특성 서버에서 응답을 언제 줄 지 모르기 때문에 다양한 요청을 비동기로 처리 > 문제점 비동기 처리 방식은 효율적이지만 때로 문제를 일으킴 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 모두 원시값에 해당한다..

자바스크립트 논리연산자 단축평가

|| 는 or 연산, &&이 and 연산인건 아는데, {!movies && Loading...} 리액트에서 'movie' state가 undefined일 때 왜 우항의 로딩이 렌더링 되는지 궁금해서 찾아봤더니 단축평가라는게 존재했다. 간단하게 좌항이 true일때와 false 일 때 존재하는데 1. true || something 일 때 우항을 볼 필요도 없이 좌항 값이 반환된다. ex) "apple" || false; // "apple" "apple" || true; // "apple" 2. false || something 일 때 우항 값이 반환된다. apple" && "banana" // "banana" 출처: https://curryyou.tistory.com/193 [카레유]

익명함수와 즉시실행함수표현(IIFE)

익명함수 : 함수의 이름이 생략된 함수 차이점은 어디서 오냐면, 위에서 언급한 호이스팅의 개념에서 온다. 일반함수의 경우, 함수 전체가 전부 맨 위로 올라가므로 함수를 호출하는 위치에 상관없이 사용될 수 있다고 했다. 반면, 리터럴 방식으로 사용되는 익명 함수의 경우, 호이스팅 시 함수를 담는 변수의 선언부만 위로 올라가고, 익명 함수 자체는 변수가 호출되었을 때 실행되기 때문에, 선언부가 호출 위치보다 위에 있어야 한다. (티스토리 사막하는 개발여우님 블로그 - https://dev-note-97.tistory.com/273) 즉시실행함수 (function () { statements })(); 이는 Self-Executing Anonymous Function 으로 알려진 디자인 패턴이고 크게 두 부분..

[NextJS] 넥스트JS 개념

Node.js를 기반으로 구축된, 리액트 서버사이드 렌더링 프레임워크 리액트는 자바스크립트 라이브러리, 넥스트는 프레임워크. 둘의 가장 큰 차이는 Inversion of Control"(통제의 역전) 라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있다 그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출한다. 라이브러리 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림 프레임워크 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름 => 리액트에서는 Component, Rount 등 원하는 위치와 파일명으로 자유롭게 import, export해서 사용했지만 넥스트JS에서는 클라이언트에게 보낼 화면을 pages폴더 안에 export default로 명시해줘야한다. 파일명은 ..

[리액트] React-hook-form

리액트에 내장된 hook만으로 컴포넌트 속 form을 검증하기 위해서는 const [toDo, setToDo] = useState(""); const [toDoError, setToDoError] = useState(""); const onChage = (event: React.FormEvent) => { const { currentTarget: { value }, } = event; setToDoError(""); setToDo(value); }; const onSubmit = (event: React.FormEvent) => { event.preventDefault(); if (toDo.length < 10) { return setToDoError("To Do Should Be Longer"); } ..

[리액트] - styled component

1. props 활용 - 동일한 컴포넌트에 특정 prop에 다른값을 주고싶을때 const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; //inside of rendered component 2. extend 활용 - 이미 만들어진 컴포넌트를 확장하여 사용 const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; const Circle = styled(Box)` border-radius: 50px; `; 3. as - 컴포넌트 내 prop은 같되 html..

노마드코더 유튜브 클론 보충

2021.08.08 user athentication 파트 공부 중 부족한 부분 URLsearchParams() html 헤더, 바디, 그리고 github api의 어센티케이션 flow ES6 화살표함수 / await async(promise)와 then의 명확한 차이 2021.8.10 {...} 문법 비구조화할당/ 구조분해 할당 표현식 [a1, a2, a3, a4, ...restOfA] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] console.log(a1) // 1 console.log(a2) // 2 console.log(a3) // 3 console.log(restOfA) // [4, 5, 6, 7, 8, 9, 10] 전개 연산자 이후 변수가 있을경우 혹은 좌항 우항의 속성이 다를..