본문 바로가기

분류 전체보기

 (290)
컴포넌트 (Component) function Child(props){ console.log(props) // 이게 바로 props다. return 연결 성공 } 1️⃣ 3.1 클래스형 컴포넌트 리액트 컴포넌트를 표현하는 두 가지 방법 ✅함수형 컴포넌트( 공식 홈페이지에서는 함수형 컴포넌트 사용 권장) // props라는 입력을 받음 // 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return) function Welcome(props) { return Hello, {props.name}; } // 훨씬 쉬운 표현을 해보면 아래와 같죠. function App () { return hello } ✅클래스형 컴포넌트 class Welcome extends React.Component { render() { retur..
Styled Router Redux 구현 LV2 ✅1. IP 주소를 입력하세요. https://react-lv2-router-redux-styled.vercel.app/ ✅2. GitHub 주소를 입력하세요. https://github.com/webcreastory/LV2_RouterReduxStyled.git ✅ 3. 페어와 LV1 개인 과제 리뷰한 깃허브 이슈 링크를 입력하세요.(페어 김서연) https://github.com/webcreastory/16_WEEK_LV1/issues/1#issue-2057050011 ✅ 4. 상세 페이지 이동을 위해 react-router-dom 라이브러리를 사용하셨을 거예요, CRA 라우팅이란 무엇인가요? 사용자가 URL을 변경할 때마다 다른 React 컴포넌트를 렌더링하여 화면을 업데이트할 수 있습니다...
Virtual DOM, props, state ✅Virtual DOM은 React에서 사용되는 가상의 DOM 구조입니다. 가상의 DOM으로 실제 DOM과 동기화하여 성능을 향상시키는 역할을 합니다. 이는 UI를 업데이트할 때 전체 DOM을 새로 그리는 것이 아니라, 변경된 부분만을 찾아 실제 DOM에 적용하여 효율적으로 업데이트할 수 있게 해줍니다. 1️⃣ 가상의 복제품: 실제 DOM의 가벼운 복제품으로 React가 UI 상태 변경을 추적하는 데 사용합니다. 2️⃣ 효율적 업데이트: React는 가상 DOM을 사용하여 UI 변경 사항을 감지하고, 이전과 새로운 가상 DOM 사이의 차이를 계산합니다. 그 후 변경된 부분만을 실제 DOM에 반영하여 최소한의 업데이트만 수행함으로써 성능을 향상시킵니다. 3️⃣ 재조정 및 최적화: 변경 사항을 일괄적으로 처..
React_Lv1. My Todo List 만들기 ✅ 1. IP 주소를 입력하세요. https://16-week-lv-1.vercel.app/ React App 16-week-lv-1.vercel.app ✅ 2. GitHub 주소를 입력하세요. https://github.com/webcreastory/16_WEEK_LV1.git ✅ 3. JSX 문법이란 무엇일까요? JSX(Javascript XML)은 React에서 사용되는 JS확장문법으로 JS코드 내에 HTML(또는 XML)과 유사한 구조를 작성할 수 있게 해줍니다. 이를 통해 UI를 더욱 직관적으로 작성할 수 있게 하는데 효과적 문법입니다. ✅ 4. 애플리케이션의 상태 값들을 컴포넌트 간 어떤 방식으로 공유하셨나요? 애플리케이션의 상태 값들은 Todo 컴포넌트 내에서 useState를 사용하여 공유..
페어 프로그래밍 & 리액트 강의 시작 ✅ 지난주 회고 지난 주간 페어프로그래밍을 진행하며 42문항의 문제를 함께 풀어나갔다. 우선 네비게이토 & 드라이버를 나눠서 사전에 네비게이토 맡은 항목을 조직화해보고 개인적으로 상세하게 메소드와 코드주석을 작성하며 깊이 있게 이해한 후, 베스트 풀이까지 확인하고 문제를 제시하니 네비게이토 명칭대로 방향성을 분명하게 짚고 문제를 낼 수 있었다. ✅ 리액트 1주차 시작 아침에 잠이 확깨는 코드타카 시간~!! 우선 주어진 1주차 강의를 마무리 하고 My Todo List 1주차 과제에 들어갔다. 아무래도 리액트 강의와 연동된 과제이다보니 강의 후 과제를 진행하며 내용을 깊이있게 다가왔다. ✅ 좀 더 집중할 부분 강의 내용이 리액트에 정말 쌩초보인 나에게는 조금 채워져야 할 내용이 더 있는 것 같다. ✅ Pl..
DOM-API 실습 Document(HTML 파일)를 Javascript가 알아먹을 수 있는 Object 형태로 Modeling 한 것 브라우저에 기본적으로 내장되어 있는 API 중 하나에요 💡 API가 뭘까요? API는 무언가를 주문할 때 메뉴판과 같은 것이라고 생각해볼 수 있습니다. 예를 들어, 카페에서 커피를 주문할 때, 메뉴판을 통해 주문하게 됩니다. 메뉴판은 고객과 카페 사이의 인터페이스 역할을 하며, 고객은 메뉴판에서 주문할 음료나 음식을 선택하고, 카페는 해당 요청을 처리하여 음료나 음식을 제공합니다. API도 비슷한 개념입니다. 다른 시스템에서 데이터나 서비스를 요청할 때, API는 해당 시스템과 사용자 간의 인터페이스 역할을 합니다. 예를 들어, 날씨 앱에서 사용자가 현재 위치의 날씨를 확인하려면, 앱은 해..
DOM:Document object Model 기본 개념 (1) DOM의 기본 개념 ✅ javascript가 생긴 이유 a. 브라우저에서 쓰려고 만들어진 JS에요! b. 본연의 역할 : 웹 페이지를 동적으로 만들기 위해! 즉, HTML문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어 ✅ 웹 페이지가 뜨는 과정 1️⃣사용자가 브라우저에 ‘**www.naver.com’ 주소를** 입력 1. 클라이언트가 서버에게 ‘요청(request)’를 했네요. 2. 여러분이 크롬을 통해 클라이언트의 역할을 하는 것 🚀 💡 사용자 = 브라우저 = 클라이언트 (같은 의미)🙂 2️⃣ HTML 문서를 서버로부터 수신 네이버서버는 여러분(=브라우저 =클라이언트)에게 ‘응답(response)’형태 => HTML 문서(document) 3️⃣브라우저가 HTML 파일을 해석(parsi..
콜백함수 제너레이터(Generator) ✅ 이터러블 객체(Iterable): 반복할 수 있는 객체 제너레이터 문법이 등장해요. *가 붙은 함수가 제너레이터 함수입니다. 제너레이터 함수는 실행하면, Iterator 객체가 반환(next()를 가지고 있음) iterator 은 객체는 next 메서드로 순환 할 수 있는 객체. next 메서드 호출 시, Generator 함수 내부에서 가장 먼저 등장하는 **yield**에서 stop 이후 다시 next 메서드를 호출하면 멈췄던 부분 -> 그 다음의 **yield(:멈춤: 양보하다, 미루다)**까지 실행 후 stop 즉, 비동기 작업이 완료되는 시점마다 next 메서드를 호출해주면 Generator 함수 내부소스가 위 -> 아래 순차적으로 진행돼요 😊 var addCoffee = function (..
비동기 작업의 동기적 표현 - Promise ✅ 직전 예제의 반복부분을 함수화 한 코드에요. trigger를 걸어주기 위해 클로저 개념이 나왔지만, 여기서는 skip 하고, 다음 chapter에서 다루게 될거에요! var addCoffee = function (name) { return function (prevName) { return new Promise(function (resolve) { setTimeout(function () { var newName = prevName ? (prevName + ', ' + name) : name; console.log(newName); resolve(newName); }, 500); }); }; }; addCoffee('에스프레소')() .then(addCoffee('아메리카노')) .then(addCo..
콜백함수_promise ✅ 비동기 작업의 동기적 표현(1) - Promise(1) 💡 Promise에 대해 사실, Promise를 지금 완벽히 이해하기는 정말 어려운 일이에요. 비동기 작업의 동기적 표현 Promise는 비동기 처리에 대해, 처리가 끝나면 알려달라는 ‘약속’이에요. new 연산자로 호출한 Promise의 인자로 넘어가는 콜백은 바로 실행돼요. 그 내부의 resolve(또는 reject) 함수를 호출하는 구문이 있을 경우 resolve(또는 reject) 둘 중 하나가 실행되기 전까지는 다음(then), 오류(catch)로 넘어가지 않아요. 따라서, 비동기작업이 완료될 때 비로소 resolve(성공), reject(실패) 호출해요. 우리는 이 방법으로 비동기 -> 동기적 표현을 구현할 수 있습니다 🙂 .then(..

티스토리툴바