스페이스 루미

UI 묘사 : JSX로 마크업 작성 JSX는 자바스크립트 파일 안에 HTML과 유사한 마크업을 작성할 수 있게 해주는 자바스크립트용 구문 확장자입니다. 컴포넌트를 작성하는 다른 방법도 있지만, 대부분의 React 개발자는 JSX의 간결함을 선호하며, 대부분의 코드베이스에서 이를 사용합니다. 학습 내용 React가 마크업과 렌더링 로직을 혼합하는 이유 JSX가 HTML과 다른 점 JSX로 정보를 표시하는 방법 JSX: 자바스크립트에 마크업 넣기 웹은 HTML, CSS, 자바스크립트를 기반으로 구축되었습니다. 수년 동안 웹 개발자들은 콘텐츠를 HTML에, 디자인을 CSS에, 로직을 JavaScript에 각각 별도의 파일에 보관했습니다. 콘텐츠는 HTML 안에 마크업되고, 페이지의 로직은 자바스크립트 안에 별..

UI 묘사 : 컴포넌트 가져오기 및 내보내기 컴포넌트의 마법은 재사용성에 있습니다. 다른 컴포넌트로 구성된 컴포넌트를 만들 수 있습니다. 하지만 점점 더 많은 컴포넌트를 중첩할수록 다른 파일로 분리하는 것이 좋습니다. 이렇게 하면 파일을 쉽게 찾고, 더 많은 곳에서 컴포넌트를 재사용할 수 있습니다. 학습 내용은 다음과 같습니다. 루트 컴포넌트 파일이란 무엇인가요? 컴포넌트 가져오기 및 내보내기 방법 기본 및 명명된 가져오기 및 내보내기를 사용하는 경우 하나의 파일에서 여러 컴포넌트를 가져오고 내보내는 방법 컴포넌트를 여러 파일로 분리하는 방법 root 컴포넌트 파일 첫 번째 컴포넌트에서 프로필 컴포넌트와 이를 렌더링하는 갤러리 컴포넌트를 만들었습니다: 이들은 현재 루트 컴포넌트 파일에 있으며, 이 예제에..

UI 묘사 : 당신의 첫번째 컴포넌트 React는 사용자 인터페이스(UI)를 렌더링하기 위한 자바스크립트 라이브러리입니다. UI는 버튼, 텍스트, 이미지와 같은 작은 단위로 구성됩니다. React를 사용하면 이들을 재사용 가능하고 중첩 가능한 컴포넌트로 결합할 수 있습니다. 웹 사이트부터 휴대폰 앱까지 화면의 모든 것을 컴포넌트로 분해할 수 있습니다. 이 장에서는 React 컴포넌트를 만들고, 사용자 정의하고, 조건부로 표시하는 방법을 배웁니다. 이 장에서는 첫 번째 React 컴포넌트를 작성하는 방법 멀티 컴포넌트 파일을 생성하는 시기와 방법 JSX로 JavaScript에 마크업을 추가하는 방법 JSX와 함께 중괄호를 사용해 컴포넌트에서 JavaScript 기능에 접근하는 방법 props로 컴포넌트를 ..

프로미스 Promise 자바스크립트는 비동기처리를 위한 하나의 패턴으로 콜백함수를 사용하는데, 이는 콜백 지옥으로 인해 가독성이 나쁘고, 비동기 처리도중에 발생한 에러처리가 곤란하며, 비동기 처리를 한번에 하는데도 한계가 있다. 콜백지옥, 에러처리 등을 해결하기위해 나온것이 프로미스다. 프로미스는 비동기 처리상태와 처리 결과를 관리하는 객체다. 호출을 하면, 결과값을 주는 일종의 약속. 결과값은 then에 저장되어 원할때 쓸 수 있다. 비동기 함수에서의 콜백함수 호출은 비동기로 동작하기때문에 콜백함수 내부에서 처리 결과를 반환하거나, 상위 스코프의 변수에 할당하면 기대한대로 동작하지 않는다 (setTimeout 함수의 경우, 고유한 타이머 id를 반환하므로 콜백함수에서 값을 반환하는것은 무의미하다.) l..

GitBook - Where technical teams document. GitBook makes it easy to research, plan and document products, from start to ship. www.gitbook.com 깃북에 대해 알게되었는데.. 대충 써보니 가독성, 사용성이 노션이나 블로그에 비해 훨씬 좋은것 같다. 컬렉션을 삭제해도 url path가 그대로 잔류하는 단점이 있지만(직접 path수정을 해주지 않으면 404로 이동한다) 사용자측면에서 문서를 읽기에 훨씬 편하다. 메뉴 구조도 훨씬 직관적이다. 티스토리는 유지하되, 문서화를 제대로 할 항목들은 깃북으로 이중작업을 해볼까 생각하고있다. 아직 seo 테스트도 안해봤고.. 완전히 옮기는건 좋은생각은 아닌듯 하여...

React로 사고하기 React는 여러분이 바라보는 디자인과 빌드하는 앱에 대해 생각하는 방식을 바꿀 수 있습니다. React로 사용자 인터페이스를 빌드할 때는 먼저 컴포넌트라고 하는 조각으로 분해합니다. 그런 다음 각 컴포넌트에 대해 서로 다른 시각적 상태를 설명합니다. 마지막으로 컴포넌트를 서로 연결해 데이터가 흐르도록 합니다. 이 튜토리얼에서는 React로 검색 가능한 제품 데이터 테이블을 구축하는 사고 과정을 안내합니다. 목업으로 시작하기 이미 디자이너가 제공한 JSON API와 목업이 있다고 가정해 보겠습니다. JSON API는 다음과 같은 데이터를 반환합니다: [ { category: "Fruits", price: "$1", stocked: true, name: "Apple" }, { cate..

리액트 공식문서 번역 * 스터디 공부용으로 리액트 공식문서 한글번역 을 병행 합니다. * DeepL 번역기를 적극 사용하였고, 가독성을 위해 수정 혹은 의역한 부분이 있습니다. * 도전과제는 일부 생략한 부분이 있습니다. * React docs beta 원문 링크는 https://beta.reactjs.org/ 입니다. * 공유하던 깃북을 닫았습니다. * 최근 리액트 베타가 공식문서로 전환되었습니다. https://react.dev/ 이 사이트는 무엇인가요? 우리는 몇 가지 차이점을 가지고 React 문서를 다시 작성하고 있습니다: 모든 설명은 클래스가 아닌 Hook을 사용하여 작성되었습니다. 대화형 예제와 시각적 다이어그램을 추가했습니다. 가이드에는 이해도를 확인할 수 있는 챌린지(솔루션 포함!)가 포..

동기처리와 비동기처리 자바스크립트 엔진은 한번에 하나의 태스크만 실행할 수 있는 싱글스레드 방식으로 동작한다. (단 하나의 실행 컨택스트 스택을 갖는다.) 현재 실행중인 태스크가 종료할때까지, 다음 태스크가 대기하는 방식을 동기처리라고 한다. 싱글 스레드로 동작하는 것은 브라우저가 아니라 내장된 자바스크립트 엔진이다. 브라우저는 멀티스레드로 동작한다. 따라서 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업중단)이 발생하는데, 태스크를 블로킹(작업중단)하지 않는 것을 비동기처리 라고 한다. [일반함수가 호출되었을때의 콜스택 플로우] 함수 호출 > 실행 컨텍스트 생성 > 콜스택에 푸시 > 실행 컨텍스트 실행 > 함수 종료 > 콜스택에서 팝 동기처리는 실행순서를 보장하지만, 비동기처리는 순서를 보장하..

호출 스케줄링 일정 시간이 경과된 이후에 호출되도록 함수를 예약하는 것. JS는 타이머함수 setTimeout과 setInterval, 타이머를 제거할수있는 clearTimeout과 clearInterval을 제공한다. 타이머 함수는 호스트객체다. JS는 하나의 실행컨텍스트를 갖기때문에, 두가지 이상의 일을 동시에 처리할수없다(싱글스레드) 따라서 타이머함수는 비동기 방식으로 동작한다. setTimeout n 초뒤 콜백함수를 실행한다. setTimeout(item => console.log(`print ${item}`),1000, 'nintendo'); // 1초뒤 'print nintendo' 출력. 콜백함수, 만료시간, 콜백에 넘길 인자 순 setTimeout은 1초뒤에 태스크 큐에 콜백함수를 등록하는..

이벤트 핸들러 이벤트가 발생했을때 브라우저에 의해 호출될 함수를 이벤트 핸들러 라고 한다. 브라우저에게 이벤트 핸들러의 호출을 위임하는것을 이벤트 핸들러 등록이라고 한다. window, document, HTMLElement 타입의 객체는 onclick과 같이 특정 이벤트에 대응하는 다양한 이벤트 핸들러 프로퍼티를 가진다. 자주 사용하는 이벤트 타입 이벤트의 종류를 나타내는 문자열이다. 약 200가지가 존재하고, 아래는 자주쓰는 이벤트들. 최근에 사용하지않는것들은 생략하였음. click : 마우스 버튼클릭 dblclick : 마우스 더블클릭 mousedown : 마우스버튼 눌렀을때 mousemove : 마우스 커서 움직였을때 mouseenter : 마우스 커서를 HTML요소 안으로 이동했을 때 (버블링되..

DOM (document of model) 문서 객체 모델.. 노드 객체들로 구성된 트리 자료구조를 말한다. DOM 트리 라고도 한다. 노드객체는 종류가있고, 상속 구조를 갖는다. 총 12종류의 노드타입이 있는데, 중요한 노드는 아래와 같다. 문서 노드 : 최상위 루트노드 document 객체. Document, HTMLDocument 인터페이스를 상속받는다. 요소 노드 : html 요소. Element 인터페이스를 상속받는다. 어트리뷰트 노드 : 요소의 어트리뷰트를 가리키는 객체. Attr을 상속받는다. 텍스트 노드 : html 요소의 텍스트를 가리키는 객체. 자식노드를 가질수없는 리프노드이다. CharacterData 인터페이스를 상속받는다. 모든 노드객체는 Object, EventTarget, No..

브라우저 렌더링 과정 1. HTML, CSS, JS, Asset(이미지, 폰트) 등을 Server에 요청한다. 2. 서버에서 받은 응답의 HTML CSS를 파싱한다. (link 태그를 만나면 HTML 파싱을 중단하고 CSS 파싱) 3. DOM, CSSOM 을 생성한다. ( 바이트 > 문자 > 토큰 > 노드 > DOM 생성. Meta 태그의 Charset 인코딩을 기준으로 변환한다.) 4. 렌더트리를 생성한다. 브라우저 화면에 렌더링되지 않는 노드는 포함되지 않는다. 5. 페인팅한다. * DOM(Document object Model)은 HTML 문서를 파싱한 결과물이다. * 파싱 : text문서를 읽어 문자열을 token으로 분해, 문법적 의미와 구조를 반영하여 파스트리 생성 * HTML을 파싱하다가 s..

약 2주간 프론트엔드 면접에 참여하면서, 면접 지원자들에게 할 질문지 작성을 맡게 되었다. 질문들을 선정하는 작업을 거치면서, 기본개념을 리마인드하는데 도움이 많이 되었다. 나에게도 아주 좋은 경험이였다고 생각한다. 아무래도 함께 일할 동료를 찾다보니, 어떤 질문이 좋을지에 대한 고민을 상당히 많이 한 듯 하다. 추린다고 추린 질문들이 30문항 정도 되는데, 타이트하게 진행했음에도 40분을 훌쩍 넘겼다. 면접은 2년차 이하 대상이였기 때문에, 근본적인 질문과 경험을 물어보는게 좋을것같다고 판단했고, 정리차원에서 핵심 키워드 위주로 적어본다. (FE 기술질문 외, 이력서에 기재한 맞춤 질문들은 모두 생략하였음) Q. 시맨틱 마크업을 왜 준수해야 하는지 설명해주세요. 웹 접근성, 웹표준, SEO, 가독성 Q..

Set 중복되지 않는 값들의 집합. 배열과 유사하지만, 값이 중복될수없고, 순서에 의미가 없으며 인덱스로 접근할수없다. 교집합, 합집합, 차집합, 여집합 등을 구현할수있다. set 객체는 이터러블이다 for ... of로 순회 가능하며 스프레드, 디스트럭처링의 대상이 될수있다. new 연산자와 함께 Set 생성자 함수로 생성한다. const set = new Set(); console.log(set) // Set(0) {size: 0} const set1 = new Set([1,2,3,3,3]); console.log(set1) // Set(3) {1, 2, 3} // 중복제거 함수 const uniq = (arr) => arr.filter((item, idx, self) => self.indexOf(i..

이터레이션 프로토콜 Iteration protocol ES6에서 도입된 Iterable (순회 가능한) 데이터 컬렉션을 만들기 위해 약속한 규칙이다. 이를 준수한 객체를 이터러블 이라고 한다. 이터러블은 Symbol.iterator를 프로퍼티키로 사용한 메서드를 직접 구현하거나, 프로토타입 체인을 통해 상속받은 객체를 말한다. typeof [][Symbol.iterator] === 'function'; // true typeof ''[Symbol.iterator] === 'function'; // true typeof new Map()[Symbol.iterator] === 'function'; //true typeof new Set()[Symbol.iterator] === 'function'; // tr..

Symbol 이란? ES6에서 도입된 7번째 데이터 타입.. 변경불가능한 원시 타입의 유일무이값이다. 중복위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용된다. 심벌함수는 호출 될때마다 유일무이한 심벌 값을 생성한다. const mySymbol = Symbol(); // new 연산자 없이 생성한다. // ** 그래서 이 mySymbol은 어따쓸수있지??? new Symbol(); // Symbol is not a constructor console.log(mySymbol); // Symbol() 심볼은 값을 외부로 노출하지않는다 const newSymbol = Symbol('test') newSymbol + 1 // Cannot convert a Symbol value to a number !!new..

다운그레이드 install 해준다 yarn add swiper@6.0.2 다운그레이드 안하면 별짓을해도 안되니까 다운그레이드하자. index.tsx에 스타일을 박아준다 import "swiper/components/navigation/navigation.scss"; import "swiper/components/pagination/pagination.scss"; import "swiper/swiper.scss"; // core Swiper 나는 navigation이랑 pagination을 쓸거기때문에 이렇게 적었다 import 컴포넌트에 사용할 것들을 임포트 해주고 import SwiperCore, { Navigation, Pagination, Parallax } from "swiper"; import ..

메모이제이션 useMemo 맨 처음 계산한 값을 메모리에 저장(캐싱)해서, 필요할때 꺼내서 쓴다. 함수로써의 기능도 충분히 가능하지만, useMemo의 의도된 설계가 아니며 지연된 연산을 통해 "값"을 기억하는 게 주된 목적이다. useMemo는 인자를 전달할수없다. (함수의 응답값을 메모할 필요가 없는것이고, 리액트의 useMemo 설계 의도와 어긋난다) 매개변수로 하여금 값을 뽑아내고 싶다면, useCallback 훅을 사용한다. 하지만 이 함수의 응답은 memoize될 수 없다. * 함수는 렌더링이되면 모든 내부변수가 초기화되고, 재할당 과정을 거친다. * 함수형 컴포넌트또한 함수이므로 재렌더링 시 컴포넌트 내 선언된 변수가 초기화되는 과정을 거친다. * state가 변경되면, 함수는 재랜더링 되고..

나는 분명 자식 컴포넌트에서 type정의를 제대로 한것같은데 왜 부모에서 에러가 뜨는걸까??? Type '{ images: MediaFile[] | undefined; }' is not assignable to type 'IntrinsicAttributes & MediaFile[]'. type Props를 따로 정의를 해줬다. type Props = { images?: Array; } const GoodsImagesList = ({images}:Props) => { ... } images:MediaFile[] 로 바로 정의할때는 안되었는데.. 따로 Props 타입들을 정의 해주니 해결되었다. 잘 생각해보니, Props는 디스트럭쳐링 형태로 뽑아써야한다는걸 이해했다. (props.images 이렇게..) ..

표준 빌트인 객체 Number 생성자 함수 객체이므로, new와 함께 호출 하여 인스턴스를 생성할 수 있다. new 연산자를 사용하지 않고 호출하면, Number인스턴스가 아닌 숫자를 반환하고, 이를 통해 명시적으로 타입을 변환하기도 한다. Number(true) // 1 Number(false) // 0 Number('0') // 0 Number.EPSILON Number.EPSILON은 2.2204460492503130808472633361816E-16 값으로, 1과 1보다 큰 숫자 중에서 가장 작은 숫자와의 차이와 같다. (이게 몬소리지? 아래 예제를 보자) 부동소수점 산술 연산은 정확한 결과를 기대하기 어렵다. 0.1 + 0.2; // 0.30000000000000004 0.1 + 0.2 === ..

배열 이란? 여러개의 값을 순차적으로 나열한 자료구조. 나열한 값을 요소라고 부른다. 0이상의 정수인 Index를 갖는다. JS에 배열이라는 type은 존재하지않는다. 배열은 객체 타입이다. (해시테이블로 구현된 객체이다.) 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료구조인데(밀집배열) 자바스크립트의 배열은 각각의 메모리 공간은 동일한 크기를 갖지 않아도 되며, 연속적으로 이어져있지 않을수도있다.(희소배열) 따라서 엄밀히 말하면 자료구조에서 말하는 일반적인 배열의 동작을 흉내낸 특수객체다. const empty = [ ,2, ,4]; console.log(empty.length); //4 console.log(empty) // [비어 있음, 2, 비어 있음, 4..

JS에서 클래스란? 클래스는 새로운 객체 생성 매커니즘이다. 클래스는 인스턴스를 생성하기위한 생성자 함수다. 기존 프로토타입 기반 패턴을 클래스기반 패턴처럼 사용할 수 있게 해준다. 클래스와 생성자 함수는 매우 유사하지만 몇가지 차이점이 있다. 클래스는 new 연산자없이 호출하면 에러가 발생하지만, 생성자 함수는 일반 함수로서 호출된다. 클래스는 extends, super 키워드를 제공하며, 상속관계 구현에서 더 명료하다. 클래스는 호이스팅이 발생하지 않는것처럼 동작한다. 모든 선언문은 런타임 이전에 먼저 실행되고, var, let, const, function, class 키워드로 선언된 모든 식별자는 호이스팅된다. 다만 TDZ에 빠지기 때문에 호이스팅이 발생하지 않는것처럼 동작한다. 클래스는 암묵적으..

ES6 메서드는 인스턴스를 생성할 수 없는 non-constructor 이다. (생성자 함수로서 호출 할 수 없다) prototype 프로퍼티가 없고, 프로토타입도 생성하지 않는다. *표준 빌트인 객체가 제공하는 프로토타입 메서드와 정적 메서드도 모두 non-constructor이다. 화살표 함수 const arrow = () => {}; const test = x => x * 10; test(3) // 30 const num = (a, b) => ({a, b}) // 객체 리터럴을 반환할 경우 소괄호로 감싼다. num(3,4) // {a: 3, b: 4} // const num2 = (a, b) => {return {a, b}} 이것과 같다 화살표함수도 고차함수(HOF)에 인수로 전달될 수 있다. [1..

표준 빌트인 객체 (Standard built in object) ECMAScript에 정의된 객체로, 전역객체의 프로퍼티로서 제공된다. 전역변수처럼 언제나 참조 가능 Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 생성자 함수 객체다. 호스트객체 (Host object) JS실행환경 (브라우저, Node.js 환경)에서 추가로 제공하는 객체. 브라우저에서는 클라이언트사이드 Web API를 제공하고, Node.js환경에서는 고유의 API를 제공한다. 사용자 정의 객체 (user defiend objects) 사용자가 정의한 객체 원시값과 객체 원시값은 객체가 아니므로 메서드나 프로퍼티를 가질수없지만, 원시값을 마침표 표기법이나 대괄호 표기법으로 접근하면, 자바스크립트 엔진은 원시값을..

실행 컨텍스트 소스코드를 실행하는데 필요한 환경을 제공하고, 실행 결과를 관리한다. 식별자와 스코프는 실행 컨텍스트의 렉시컬 환경으로 관리하고, 코드 실행 순서는 실행 컨텍스트 스택으로 관리한다. 실행 컨텍스트는 LexicalEnvironment 컴포넌트와 VariableEnvironment 컴포넌트로 구성된다. 렉시컬 환경은 EnvironmentRecord와 OuterLexicalEnvironmentReference 두개의 컴포넌트로 구성된다. 스코프는 실행 컨텍스트의 렉시컬 환경이다. 코드의 평가와 실행 전역객체 생성 > 전역 코드 평가와 실행 > 함수1 평가와 실행 > 중첩함수2 평가와 실행 > 함수1로 복귀 > 전역코드로 복귀 * 함수1이 실행되면 전역코드의 실행을 일시중단하고 함수내부로 코드제어..

JS에서 this는 자신이 속한 객체, 또는 생성할 인스턴스를 가리키는 자기참조변수다. 자신이 속한 객체 또는 인스턴스를 참조하면서 프로퍼티나 메서드를 참조할 수 있다. this 바인딩은 함수 호출 방식에의해 동적으로 결정된다. 또한 this는 코드 어디서든 참조 가능하다. *strict mode가 적용된 일반함수에서는 undefiend를 가리킨다. 일반함수에서 this는 Window를 가리킨다. console.log(this) // Window function test(){ console.log(this) } test() // 일반함수에서 this는 Window 메서드 내에서 this는 자신을 호출한 객체를 가리킨다 const user = { getThis(){ console.log(this); } }..

strict mode function test(){ x = 'test' } test(); console.log(x) // test 엄격 모드를 선언하지 않으면, 전역 객체에 x 프로퍼티를 동적으로 추가하여, 전역 변수로 사용할수있다. (암묵적 전역) 이는 개발자의 의도가 아니기때문에 오류를 발생시킬수있다. 따라서 언제나 키워드 let, const 를 사용하여 변수를 선언해야한다. 전역의 선두에 use strict;를 추가한다. 'use strict'; function test(){ x = 'test' } test(); console.log(x) // x is not defiend at test 전역에 적용하면, script 단위로 적용된다. 이는 바람직하지 않다. 함수단위로 strict mode를 사용하..

프로그래머스 LV0 > 코딩테스트 연습 > 문자열 밀기 문제 : https://school.programmers.co.kr/learn/courses/30/lessons/120921 [문제해결] 1. 민 문자열이 같으면 0을 리턴 2. 기본 문자열 끝에꺼 제거후 앞에 끝에것을 붙여준 후 비교한다. 3. for문 다 돌아도 없으면 -1리턴 * 더 신박한 풀이법이 있더라.. function solution(A, B) { if (A == B) return 0 for(let i=1; i(b+b).indexOf(a) // 민 문자열을 더한값에서 몇번째에 A가 있는지를 찾는다.. 없으면 당연히 -1이 리턴됨 와 신박하다.

객체는 리터럴로 생성하는것이 일반적이다. 근데 단점은 하나밖에 생성을 못한다는 것. 객체 생성자 함수의 장점은 프로퍼티 구조가 동일한 객체를 많이 만들때, 간편하게 생성할수있다는것이다. 마치 클래스처럼 객체(인스턴스)를 생성할수있다. new 연산자와 함께 호출하면 생성자 함수로 동작한다. 최근 트렌드가 new 연산자는 안쓰는거지만 레거시 코드를 마주할 수 있으니.... 알아보도록 하자~ function Square(n){ this.n = n; this.getSquare = function(){ return n*n; } } const sq1 = new Square(5); // Square {n: 5, getSquare: ƒ} const sq2 = new Square(10); // Square {n: 10,..

Property Attribute JS 내부적으로 실제로 동작하지만, 개발자가 접근할수 있도록 오픈된 프로퍼티는 아니다. 다만, 간접 접근 수단을 제공한다. JS엔진은 프로퍼티 생성시 프로퍼티의 상태를 나타내는 어트리뷰트를 기본값으로 자동 정의한다. 모든 객체는 프로토타입 내부 슬롯 [[prototype]]을 가진다. 이는 __proto__를 통해 접근이 가능하다. 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티가 있다. const test = {} test.__proto__ 프로토타입 (Prototype) 프로토타입은 어떤 객체의 부모객체의 역할을 하는 객체다. 프로토타입은 자식객체에게 자신의 프로퍼티와 메서드를 상속한다. 하위객체는 부모객체의 프로퍼티나 메서드를 자유롭게 사용할수있다. 프로토타입은 생성자..