개발

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 모두 원시값에 해당한다..

[북TIL] 실용주의 프로그래머 2장

오늘 TIL 3줄 요약 ETC) 내가 방금 한 일이 전체 시스템을 바꾸기 쉽게 만들었을까 어렵게 만들었을까? 코드중복과 지식중복은 구분되어야 한다. (후자는 허용) DRY) 코드의 중복: 의도나 기능을 수정할 때 여러 라인의 같은 코드들을 수정해야하지 않을까? TIL (Today I Learned) 날짜 2022. 05. 15. SUN 오늘 읽은 범위 2장 책에서 기억하고 싶은 내용을 써보세요. 우리가 소프트웨어를 개발하는 속도는 요구사항, 사용자, 하드웨어의 변화를 앞지를 수 없다. 그렇기 때문에 직교성, 결합도 등을 고려해 유지보수하기 쉽게 만들어야한다. 거대 공학적 접근 방식(각각의 모듈 작성 -> 결합)과 반대되는 예광탄 코드를 활용하라. 오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요 정보..

[북TIL] 실용주의 프로그래머 1장

오늘 TIL 3줄 요약 잊지말라. 무엇보다 중요한 것은 즐기는 것이다. 자기의 기예(craft)에 관심을 가져라 훌륭한 잔디밭은 매일 조금씩 손질해주어야 한다. 소프트웨어의 엔트로피, 깨진 창문을 내버려 두지 말라. 시작 피로를 깨기 위해서는 일단 ‘돌멩이’를 내놔라.(돌멩이 수프 이야기) TIL (Today I Learned) 날짜 2022. 05. 15. SUN 오늘 읽은 범위 서문~ 1장 책에서 기억하고 싶은 내용을 써보세요. 이튼칼리지의 훌륭한 잔디밭처럼, 과업은 하루아침에 만들어지지 않는다. 다만 꾸준하고 점진적인 노력이 필요할 뿐. 오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요 혼자 완성해나가는 프로젝트에서 '일단 만들자!' 라는 생각으로 진행하다보면 결국엔 스파게티 코드가 되어버려 방..

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..

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

|| 는 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로 명시해줘야한다. 파일명은 ..

[네스트js] 컨트롤러, 프로바이더, 모듈 + validation

Controllers are responsible for handling incoming requests and returning responses to the client. (like a router in express) Providers are a fundamental concept in Nest. Many of the basic Nest classes may be treated as a provider – services, repositories, factories, helpers, and so on. The main idea of a provider is that it can be injected as dependency; this means objects can create various rel..