Eundms

Overflowoverflow-x : 가로 영역이 넘칠 때 어떻게 할 것인가overflow-y : 세로 영역이 넘칠 때 어떻게 할 것인가 속성의 종류에는 5가지가 있다 1. visible블록 수준을 벗어난다 할지라도 다 보여준다스크롤 없음2.hidden블록 수준을 벗어나면 숨긴다스크롤 바 없음 3. clip클립과 숨김의 차이점은 클립 키워드가 프로그래밍 방식 스크롤을 포함한 모든 스크롤도 금지한다는 것이다. 4. scoll요소의 패딩 상자 내부에 가로로 맞도록 필요한 경우 오버플로 콘텐츠가 잘립니다. 브라우저는 콘텐츠가 실제로 잘리는지 여부에 관계없이 가로 방향으로 스크롤 막대를 표시합니다. (이렇게 하면 내용이 변경될 때 스크롤 막대가 나타나거나 사라지는 것을 방지할 수 있습니다.)  5. auto내용..

😎 지식/자바스크립트_타입스크립트_리액트🌐 2024. 9. 2. 18:29

- Props Drilling 피하기 위해 context를 사용해 데이터를 전달하는 과정이 필요하다 Context 사용 전에 먼저 고려해야 할 사항1. Props 전달2. 컴포넌트를 추출하여 JSX를 Children으로 전달  Context 적합한 사용 예시 1. 테마 지정 : 최상위에서 조정2. 현재 계정 정보3. 라우팅 정보4. reducer를 context와 함께 사용 문제 상황 예시)export default function Section({children}) { return ( {children} );}   Context 사용 예시) - Heading 이Context에서 Level 정보를 알 수 있도록 함export default function Hea..

😎 지식/자바스크립트_타입스크립트_리액트🌐 2024. 7. 15. 09:16

Webpack자바스크립트 애플리케이션의 모듈 번들러로 사용되는 도구  하나 이상의 진입점에서 내부적으로 종속성 그래프를 구축한 다음프로젝트에서 사용하는 모든 자바스크립트 파일을 하나 또는 여러 개의 번들 파일로 결합함 - entry내부 종속성 그래프를 시작하기 위해 웹팩이 사용해야 하는 모듈Webpack은 진입점이 의존하는 다른 모듈과 라이브러리를 파악함 기본값 : ./src/index.jsmodule.exports = { entry: './path/to/my/entry/file.js',}; - outputwebpack이 생성한 번들을 내보낼 위치와 이러한 파일의 이름을 지정하는 방법기본값 : ./dist/main.jsconst path = require('path');module.exports = {..

😎 지식/자바스크립트_타입스크립트_리액트🌐 2024. 7. 3. 17:51

type vs interface1) type : 정적으로 결정되어 있는 것 / union, intersection 타입 2) interface : 확장될 수 있는 basis 정의하거나 어떤 object 구성을 설명하는 요소 / extends, implements 사용 any 타입- 어떤 타입이든 any 타입에 할당 가능, any 타입은 어떤 타입으로도 할당 가능 (never 제외)- noImplicitAny 옵션 활성화해서 타입이 명시되지 않은 변수의 암묵적인 any 타입에 대한 경고를 발생시킬 수 있음어쩔 수 없이 사용해야 할 때 (런타임 오류를 방지하고 싶다면 쓰지 말자)1) 개발 단계에서 임시로 값을 지정해야 할 때2) 어떤 값을 받아올지 또는 넘겨줄지 정할 수 없을 때3) 값을 예측할 수 없을 때..

😎 지식/자바스크립트_타입스크립트_리액트🌐 2024. 6. 30. 13:02

MobX는 상태(State), 동작(Action), 파생(Derivation) 개념을 구분한다 1. State : 애플리케이션을 구동하는 데이터 todo 아이템과 같은 도메인 별 state현재 선택된 요소와 같은 view state 원하는 데이터 구조에 state을 저장한다import { makeObservable, observable, action } from "mobx"class Todo { id = Math.random() title = "" finished = false constructor(title) { makeObservable(this, { title: observable, finished: observable, ..

😎 지식/자바스크립트_타입스크립트_리액트🌐 2024. 5. 20. 10:09

Flux 아키텍쳐 React를 이용한 UI 구성에서 데이터의 흐름을 관리하는 어플리케이션 아키텍쳐 React는 단방향 데이터 흐름(View-> Model)만 가능하다 반면에 Vue는 v-model로 양방향 데이터 바인딩이 가능하다 MVC구조와 Flux 구조의 차이 MVC 구조 : 양방향 데이터 흐름 Controller가 Model의 데이터를 조회하거나 업데이트 할 수 있고, Model이 업데이트 되면, View는 이를 화면에 반영함 View가 Model을 업데이트할 수 있고, Model이 업데이트 되어 View가 따라서 업데이트되고, 업데이트된 View가 다른 Model을 업데이트한다면 또 다른 View가 업데이트 될 수 있음 Flux구조 : 단방향 데이터 Action이 발생하면 Dispatcher로 전..

😎 지식/자바스크립트_타입스크립트_리액트🌐 2024. 2. 27. 13:08

Interface는 Object 타입을 선언할 때 사용한다 type-alias는 모든 타입(Primitive, Tuple, Union, Object type)을 선언할 때 사용할 수 있다 Object 타입에서 Interface와 type-alias의 차이점은 인터페이스는 선언 병합이 가능하지만 type-alias는 동일한 이름으로 또 선언하게 되면 `Duplicate Identifier 타입 이름`이라는 에러가 발생하게 된다 즉, 인터페이스는 공개된 타입이거나 라이브러리를 사용하는 상황에서 추가적으로 속성을 선언할 때 유용하다

😎 지식/자바스크립트_타입스크립트_리액트🌐 2024. 2. 21. 14:09