투명한유리구슬처럼보이지만 투명한유리구슬처럼보이지만

Map 타입 맵 타입은 키와 값의 짝을 저장한다. 순서대로 값을 저장하는데 중점을 두는 리스트와 달리 키를 이용해서 원하는 값을 빠르게 찾는데 중점을 둔다. Map 맵이름 형식으로 생성한다. void main() { Map dictionary = { 'Harry Potter':'해리 포터', 'Ron Weasley':'론 위즐리', 'Hermione Granger':'헤르미온느 그레인저', }; print(dictionary['Harry Potter']); // 해리 포터 print(dictionary['Hermione Granger']); // 헤르미온느 그레인저 } 키와 값 반환받기 void main() { Map dictionary = { 'Harry Potter':'해리 포터', 'Ron Weas..

다트 입문 1. 다트는 UI를 제작하는 데 최적화되어 있다. (완전한 비동기 언어이며 이벤트 기반) 2. 핫 리로딩을 통해 코드의 변경 사항을 즉시 화면에 반영 가능 3. 멀티 플랫폼에서 로깅하고 디버깅하고, 실행할 수 있다. 4. 자바스크립트로의 완전한 컴파일을 지원한다. 컴파일이란? 다트(Dart) 언어가 자바스크립트로의 완전한 컴파일을 지원한다는 것은 다트 코드를 자바스크립트 코드로 변환할 때 완전한 변환을 지원한다는 의미 5. 백엔드 프로그래밍을 지원한다. void main() { print('hello world'); } 이걸 출력하려면 터미널에서 dart lib/main.dart 명령어를 실행하면 'hello world'가 출력된다. 다트는 프로그램 시작점인 엔트리 함수 기호로 main()을 ..

css-in-js는 성능에 민감하기 때문에 외부로 분리해주는게 중요하다. 외부로 분리했을 경우 스타일 렌더링 될때마다 직렬화 되지 않는다, 또한 스타일 관련 코드를 분리해서 로직에 집중하고 jsx를 볼때 조금 더 간결하게 볼 수 있다. 객체 Props 지양하기 두 객체 모두 그냥 눈으로 봤을때는 같지만 실행을 시켰을때는 false로 나오게된다. 리액트는 다른점을 찾아내서 리렌더링을 시키는데 두개가 같지 않다고 나오면 불필요한 리렌더링이 일어나게 된다. 해결방법 1. 변하지 않는 값이라면 외부로 드러내기 2. 필요한 값만 객체를 분해해서 Props로 내려준다. const [propArr, setPropArr] = useState(['hello''hello']) return( ) 결국 props를 특정값이 ..

useReducer useState와 같이 상태를 get할수도 있고 set할수도 있다. 초기값으로는 첫번째 인자 : reducer, 두번째 인자 : 초기상태를 줘야한다. reducer에는 redux의 reducer와 비슷하다 const [state, dispatch] = useReducer(reducer, INUT_STATE) // dispatch는 액션을 트리거한다. [ reducer 정의 ] 사용할땐 dispatch를 사용해서 type을 바꿔줌으로써 상태를 변경할 수 있다. 상태를 숨겨서 추상화를 시킬 수 있다. --- 상태 로직 Custom Hooks으로 useprefix를 지키면서 해야한다! jsx 문법을 제외한 로직을 따로 커스텀훅으로 빼서 사용할 수 있다. 이렇게 하면 로직이 간단해보이고 재사..

리액트 설치 Vite개발황경에서 진행 yarn create vite ${폴더명} --template react 이전에는 Create React App 을 이용해서 리액트를 설치했었는데 2021-12-14이후로 업데이트 되고있지 않으며 웹팩의 결속력이 강하고 커스텀도 강하며 엣날 환경이기 때문에 느리다. State 상태란? 사물이나 현상이 놓여있는 모양이나 형편 컴포넌트 상태, 전역 상태, 서버 상태(ex: TanStack Query), 상태 변경, 상태 최적화, 렌더링 최적화, 불변성, 상태 관리자 올바른 초기값 설정 초기값을 넣지 않으면 undefined가 된다. 업데이트가 되지 않는 값 이경우에는 리액트 컴포넌트 내부에 있기 때문에 매번 렌더링 될때마다 같은 값이더라도 또다시 참조에 대해서 트리거하고..

특성선택자 컨셉 특성 선택자(속성 선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다. 클래스 속성을 가지고 있는 요소를 선택하기 [class]{ background-color: tomato; } 클래스가 “item”인 요소를 선택하기 [class="item"]{ background-color: tomato; } 값 확인 기호를 추가하여 요소를 선택하는 방식을 다양화할 수 있다. /* 클래스 값에 "it"가 포함되는 요소를 선택하기 */ [class *= "it"]{color: white;} /* 클래스 값에 "it"로 시작되는 요소를 선택하기 */ [class ^= "it"]{color: white;} /* 클래스 값에 "it"로 끝나는 요소를 선택하기 */ [class $= "it"]..

flexbox 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다. 1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 특성 때문 flex컨테이너라고도 한다.(요소들을 포함하기 때문) 컨테이너를 만들기 위해서는 컨테이너에 display:flex를 적용해야 한다. display:flex - 자식요소가 가지고있는 기본 마진값을 무시하고 자기의 진행에 방향대로 요소를 배치한다. 하나 둘 셋 flexbox에는 ‘주축(main-axis)’과 ‘교차축(cross-axis)’이 있다. flex-direction flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다. row - 기본값, 주축은 행이고 방향은 ..

박스모델 (Box - Model) 브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영억을 차지하게 된다. 이영역을 ‘박스’라 표현하며, css는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정할 수 있다. 하나의 박스는 다음 네 개의 영역으로 구성된다. 콘텐츠 영역 : width, height 안쪽 여백 : padding 바깥쪽 여백 : margin 경계선 (테두리) : border-width padding과 margin 다양한 경우의 수 여백은 상하좌우 네 개의 면에 존재하는 영역이다. 하위속성 정의하기 padding-top,padding-left, padding-right, padding-bottom 여러 값을 한 번에 정의하기 padding: 20px 상, ..