개발/자바스크립트
자바스크립트 논리연산자 단축평가
|| 는 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..
[리액트]react-beautiful-dnd
"아름답고 쉬운" React list drag and Drop - react-beautiful-dnd Beautiful and accessible drag and drop for lists with React. Latest version: 13.1.0, last published: 10 months ago. Start using react-beautiful-dnd in your project by running `npm i react-beautiful-dnd`. There are 1175 other projects in the npm registry us www.npmjs.com 위 그림처럼 DragDropContext -> Droppable -> Draggable로 감싸준다. onDragEnd는 드래그..
[리액트] 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"); } ..
[리액트] Recoil - state management
REDUX? or RECOIL? -> Nico said, "Everytime you learn or use libraries, framworks and other skills, You MUST know why you need and use those." Because those are built to sort out things. State management의 필요성? 다크모드, 유저의 로그인 여부 등 리액트 앱의 각종 state를 일일이 부모/자식 컴포넌트까지 argument로 전달해준다면 수많은 interface를 생성하고 반영해주어야함. => global state(atoms)를 사용하면 이를 해결할 수 있음! const isDark = useRecoilValue(isDarkAtom); const..
[타입스크립트] 타입스크립트 기본개념 + 병합연산자
타입스크립트 자바스크립트의 확장판 자바스크립트는 타입시스템이 존재하지 않기에 변수에 여러 타입이 할당가능함 -> 변수에 잘못된 타입(값)이 할당 되었을 때, 코드를 실행해야만(=런타임 환경에서만) 에러가 발생했음을 알 수 있음 그러나 타입스크립트는 이러한 자바시스템에 강한 타입시스템을 적용해 코드 작성환경(컴파일 단계 혹은 이전)에서 에러를 확인할 수 있음 const plus = (a, b) => a + b 자바스크립트 const plus = (a:number, b:number) => a + b 타입스크립트 함수 인자들이 타입화되었음 실제론 저렇게 사용X. 컴포넌트 생성 후 prop 보내주면 된다. - 0. 인터페이스는 변수, 함수, 클래스에 타입 체크를 위해 사용 됨. 자바스크립트 리액트의 propTy..
[리액트] - 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..
ternary operation, absolute/relative url
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator 조건 ? 참일경우실행 : 거짓일경우실행 conditon 조건이 참이면 ? 뒤를 실행. false면 : 뒤를 실행. 다중 삼항도 가능. - href="경로" '경로' 가 /로 시작하면 절대경로 else: 상대경로. 중요한건, 경로를 더하는게 아님. 마지막 경로를 바꾼다. 즉 videos/13 페이지에서 href="/edit" 링크를 누른다면 videos/13/edit 으로 가는게 아니라 videos/edit으로 간다! 만약 videos/13/edit 으로 가고 싶다면, relative url을 이용해 href=`${video.id}/edit..