DDOstory

🖥️ 안드로이드 스튜디오 Koala 다운로드https://developer.android.com/studio?hl=ko에 접속하여 안드로이드 스튜디오 Koala 다운로드 클릭 Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android DevelopersAndroid Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.developer.android.com 이용약관에 동의 선택하고 안드로이드 스튜디오 Koala 다운로드 클릭안드로이드 스튜디오 프로그램..

🛜 useCounter() Custom Hook 만들기useCounter Hook은 초기 카운드 값을 파라미터로 받아서 카운트라는 이름의 state를 생성하여 값을 제공하고 카운트 증가 및 감소를 편리하게 할 수 있도록 함수를 제공하는 HookuseCounter Hook을 사용하면 어떤 함수 컴포넌트에서든지 카운트 기능을 쉽게 사용 가능🛜 Accommodate Component 만들기Accommodate 컴포넌트는 useCount 훅을 사용하여 카운트를 관리최대 카운트 개수는 maxCapacity라는 이름의 상수로 정의되어 있고 카운트 개수가 최대 용량을 초과하면 경고 문구가 표시되며 더 이상 입장이 불가능useEffect 훅의 작동 방식을 사용하기 위해 일부러 두 개의 useEffect 훅을 사용하..

🖨️ Component컴포넌트 기반의 구조라는 중요한 특징을 가지고 있음모든 페이지가 컴포넌트로 구성되어 있으며 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성컴포넌트를 끼워 맟춰서 새로운 컴포넌트를 개발하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어 자연스레 개발 시간과 유지 보수 비용도 줄일 수 있음자바스크립트의 함수와 비슷React 컴포넌트의 역할은 어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴React 컴포넌트는 만들고자 하는 대로 props. 즉 속성을 넣으면 해당 속성에 맞춰 화면에 나타날 엘리먼트를 만들어주는 것🖨️ Props리액트 컴포넌트의 입력Props는 prop 뒤에 복수형을 나타내는 s를 붙여서 props이 여러 ..

😭 Automatic Batching앞에서 배운 것처럼 리액트 컴포넌트는 상태가 업데이트될 때마다 재렌더링이 이뤄지기 때문에, 함수 컴포넌트에서 각각의 스테이트가 업데이트될 때마다 재렌더링이 발생유즈 스테이트 훅을 사용해서 선언한 각 스테이트들의 set 함수를 거의 동시에 호출하더라도 호출된 횟수만큼 재렌더링이 발생이러한 문제를 해결하기 위해서 여러 상태의 업데이트가 동시에 발생하면 이 작업들을 묶어서 한번에 처리하는 것이 배칭배칭은 컴퓨터 공학에서 여러 가지 작업을 한 번에 처리한다는 의미를 갖고 있음리액트에서의 배칭은 여러 상태의 업데이트 작업을 한 번에 묶어서 처리하는 것이라고 이해하면 됨기존 리액트 버전에서는 이러한 배칭이 리액트 이벤트 핸들러 내에서만 이루어짐리액트 버전 18에서 오토메틱 배칭..

10. 자바스크립트 브라우저 객체 모델😺 브라우저 객체 모델자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것  브라우저 창의 크기, 주소 표시줄, 히스토리를 포함하고 있는 것😺 Window 객체의 속성자바스크립트 객체 중 최상위 객체😺 Window 객체의 함수 alert()나 prompt()도 window 객체의 함수 -> window.alert(), window.prompt()window 객체는 기본 객체이기 때문에 window를 생략하고 alert(), prompt()로 사용할 수 있음 😺 Window 객체의 함수 alert()나 prompt()도 window 객체의 함수 -> window.alert(), window.prompt()😺 Naviga..

15.리액트 styled-components를 사용하여 컴포넌트 스타일링 🤯 css와 styled Components를 사용하여 직접 컴포넌트를 스타일링 코드를 작성하기 전에 styled-components 패키지 설치npm install 명령어는 npm이라는 패키지 관리 서비스에 등록되어 있는 패키지를 설치할 수 있도록 하는 명령어Blocks 컴포넌트는 실제로 스타일드 컴포넌트를 사용하여 스타일링하는 컴포넌트스타일드 컴포넌트를 사용하는 방법과 css 코드의 전체적인 구조를 잘 기억해야함블락스 컴포넌트를 화면에 렌더링하기 위해서 index.js 파일 수정vscode의 상단에서 Terminal -> New Terminal을 눌러 새로운 터미널을 하나 실행시킴웹 브라우저의 창이 열리면서 포트에 접속이 됨화..

15. 리액트 styled-components🤯 리액트 styled-components 설치명령어를 통하여 최신 버전의 리액트 style-components 설치# npm을 사용하는 경우npm install --save styled-components# yarn응ㄹ 사용하는 경우yarn add styled-components스타일이 잘 적용되었다면 회색 배경에 흰색 글씨로 안녕 리액트라는 문자열을 출력하는 컴포넌트가 잘 작동하면 이러한 화면이 등장리액트 styled-components의 MainPage.jsx 파일을 생성하여 코드를 작성한 후 꼭 index.js 파일에서 Mainpage를 import 해주어야 npm 실행 명령어인 npm start 작성시 실행 가능🤯 리액트 styled-compone..

React 리액트 스타일링🍿 CSS웹 개발을 할 때 스타일링을 하기 위해 가장 대표적으로 사용하는 것Cascading Style Sheets스타일링을 위한 일종의 언어여러가지 스타일이 정의되어 있고 각 스타일은 해당 스타일이 적용되는 규칙을 갖고 있음하나의 엘리먼트가 여러 개의 스타일 규칙을 만족할 경우에는 해당 스타일들을 우선순위를 가지고 하나씩 적용하게 됨하나의 스타일이 여러 개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러 개의 스타일이 적용될 수 있음🍿 CSS 기본 구조Selector를 먼저 쓰고 이후에 적용할 스타일을 중괄호 안에 세미콜론으로 구분하여 하니씩 기술Selector에는 해당 스타일이 적용될 HTML 엘리먼트를 넣게 됨HTML 태그를 직접 넣거나 다른 조건들을 조합하여 셀..

React 리액트 테마 변경 기능메인 컨텐츠 컨포넌트는 씸 컨텍스트로부터 현재 설정된 테마 값을 받아와 실제 화면의 컨텐츠를 렌더링하는 역할테마 변경 버튼을 누를 경우 씸 컨텍스트로부터 받은 roggleTheme함수를 호출하여 씸 컨텍스트의 값을 변경하는 역할도 함Theme 컨텍스트의 값을 가져오기 위해 Theme 컨텍스트.consumer 컴포넌트를 사용하는 방법 대신에 use-context-hook를 사용darkOrlight 컴포넌트는 방금 전에 만든 메인 컨텐츠 컴포넌트를 자식으로 갖고 있는데 이는 ThemeContext.Provider로 감싸서 theme-context의 값을 하위 컴포넌트들이 사용할 수 있도록 해줌SimContext.Provider로 감싸주지 않으면 하위 컴포넌트들이 SimCont..

[React] Card 컴포넌트 제작카드 컴포넌트는 하위 컴포넌트를 감싸서 카드 형태를 보여주는 컴포넌트두 가지 합성 방법을 모두 사용하여 구현children을 사용한 부분이 containment 이고 title과 background를 사용한 부분이 specialization이라고 할 수 있음카드 컴포넌트는 범용적으로 재사용이 가능한 컴포넌트프로필 카드 컴포넌트는 카드 컴포넌트를 사용하여 타이틀에 이름을 넣고 배경 색상을 녹색으로 설정children으로는 간단한 소개 글을 넣었음카드 컴포넌트가 사용자의 프로필을 나타내는 프로필 카드 컴포넌트가 됨배경색이나 타이틀 그리고 내부에 들어가는 컨텐츠들을 바꿔 보면서 다양한 카드를 만들어보는 것이 좋음 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 만들고, 만든 ..