1. 리액트 라우터 (책 p.403) 1) spa란? - 하나의 페이지로 만들어진 어플리케이션을 의미합니다. 전통적 웹 어플리케이션 vs SPA - SPA는 html파일을 브라우저 측에서 로드하고, 필요한 데이터는 API와 ajax통신을 이용해서 처리합니다. - 브라우저에서 사용자가 상호작용 하면 필요한 부분만 업데이트 해서 처리합니다. - 멀티플랫폼 Android, IOS에 대응하여 웹뷰로 처리하는 목적으로도 사용됩니다. 2) SPA의 단점 - 앱의 규모가 커지면, JS파일도 너무 커져서 로딩이 오래걸리게 됩니다. - 브라우저에서 렌더링이 완료되기 까지 비어있는 화면이 나오게 됩니다. - 그래서 규모가 큰 어플리케이션은 SSR(서버사이드 렌더링) 방식으로 처리합니다. (웹팩 설정 필요) 3) 라우팅이란..

1. 리액트 스타일링 1) 태그에 직접 지정하기 2) 일반 css파일로 적용하기 3) css모듈로 적용하기 2. css 파일 이름 규칙 - 컴포넌트의 이름을 반드시 포함해서 만듭니다. ex) App.js - App.css 1] 태그에 직접 디자인을 적용 할 때는 {}로 묶어줍니다 - css 속성 중 - 은 카멜표기법으로 대체됩니다. style={{css속성: 값, css속성: 값}} 안녕하세요!! 2] 일반 CSS 문법으로 디자인을 해주면 되고 import로 가져오면 됩니다. * App.css .app_header { height: 50px; line-height: 50px; background-color: #000; margin: 0; padding: 0; } * App.js import './css/..

1. 리액트 기본 훅 * hook이란? - 리액트 컴포넌트는 클래스형 컴포넌트(Class component)와 함수형 컴포넌트(Functional component)로 나뉩니다. - 리액트 훅은 새로운 기능으로 React 16.8버전에 새로 추가된 기능 - 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다. (useState, userEffect 등) - 리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다. * 훅의 규칙 - 최상위 에서만 Hook을 호출해야 한다 - 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다. - 이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다. - 리액트 함..

* IterationComponentQ.js - 2번째 코드블럭의 경우 1, 3, 2 순서로 끌어 올려주면 handleContent 사용 가능 /* 이미지를 가져오는 방법 1. 외부 서버에서 경로를 참조 받는 방법(가장 일반적인 방법) 2. src폴더 밑에 img 파일 참조 가능 (선호 X) // import img1 from '../img/img1.png'; 3. public 폴더 밑에 넣는 경우 이미지를 바로 참조 할 수 있다. (추천) */ import { useState, useTransition } from "react"; const IterationComponentQ = () => { //1. 데이터 - public 폴더 밑에 예시로 사용하기 위해 넣습니다. const arr = [ { src..

1. state - 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다 - state가 체인지 되면 변화를 감지하여 리렌더링을 수행합니다. - 클래스 vs 함수형 컴포넌트에서 사용하는 방법이 다릅니다. - 함수형 컴포넌트에서는 훅 Hook개념을 이용해서 더욱 쉽게 사용 가능 합니다. * 나의 첫번째 훅 - useState(초기값) - useState() : 배열 반환 - 첫번째 배열의 요소에는 현재 값을, 두번째 요소는 상태를 변경하는 (setter)-function을 반환합니다 const [data, setData] = useState('초기값') - state는 어떤 타입이던 상관 없습니다. (str, number, object) - state는 여러개 일 수도 있습니다. - st..

1. 리액트 - 리액트는 자바스크립트 라이브러리 입니다. - 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리 입니다. - SPA란? - Single Page Application의 줄임말 입니다. - index.html하나만 로드하고 실행시키는 구조입니다. - 어떻게? - 번들러(Webpack)가 이 모든것을 해줍니다. Webpack이란 어플리케이션을 동작시키는데 필요한 자원(JS파일들, CSS, Image 등)을 하나로 묶어서 조합하여 경량화 하여 결과물을 만들어 주는 도구입니다. - 번들러는 node.JS를 통해 직접 설정 할 수 있지만, 리액트 프로젝트를 생성시 자동으로 포함됩니다. - DOM (Document Object Model) 이란? - HT..

1. 프로젝트 개요 1) 개발 동기: 색상, 휠 시트 등 자신이 원하는 커스텀 자동차를 만들 수 있는 페이지를 구현 해본다. 2. 프로젝트 상세 1) 기능 구현 - 색상 변경 기능(onclick을 통해 색상을 선택하면 img src를 변경) - 환율 정보를 api로 받아와서 국기를 눌렀을 때 변경처리가 되게끔 구현(국기 누르면 시간도 대한민국, 미국 시간도 변경) - 카카오 map api를 통해 자신의 지역과 가까운 곳을 선택해 상담을 신청할 수 있음. - 쿠키를 사용하여 오늘 하루 이 창을 열지 않기를 눌렀을 때 하루동안 팝업창이 뜨지 않게끔 함. 2) 시연 3. 느낀점 처음에는 클론 코딩으로 기존과 비슷한 기능을 구현하는 방식으로 프로젝트 방향성을 잡았었는데 하다보니 욕심이 생겨 조금 더 발전된 사이..

1. let과 const 1) let 변수는 중복 선언이 불가능하다. 2) let 변수의 유효범위는 {} 블록이다. //let변수는 같은 블록에서 내에서 중복이 불가능하다. let y = 1; // let y = 100; //에러 //let변수의 유효범위는 {}블록이다 let z = 10; if(true) { let z = 100; console.log(z); //100 } console.log(z); //10 const GENDER = "남자"; // var GENDER = "여자"; //에러 // GENDER = "여자"; //에러 const arr = ["홍길동", "이순신", "홍길자"]; // arr = ["김철수"]; //에러 arr[0] = "김철수"; //내부의 값 변경은 허용 arr.pu..