네트워크/HTTP 기초 알아보기 1편 [ 아키텍처 ] 2티어 아키텍처 상품 정보 같은 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처 또는 클라이언트-서버 아키텍처라고 부른다. 클라이언트와 서버는 요청과 응답을 주고 받는 관계이다. 클라이언트-서버 아키텍처에서 요청이 선행, 그 후에 응답이 온다. 리소스를 사용하는 앱 : 클라이언트 리소스를 제공하는 곳 : 서버 3티어 아키텍처 리소스를 저장하는 공간을 데이터베이스 라고 부른다. 기존 2티어 아키텍처에 데이터베이스가 추가된 형태를 3티어 아키텍처라고 부른다. [ 클라이언트-서버 통신과 API ] 클라이언트 - 서버 간의 통신은 HTTP프로토콜을 이용해 통신한다. 서버 가 클라이언트에게 리소스를 잘 활용할 수 있도록 인터페이스를..
Props 알아보기 Props 란 ? 외부로부터 전달받은 값 / 부모 컴포넌트로부터 전달받은 값 / 변하지 않는 값 컴포넌트의 속성(property)을 의미 객체 형태 Props 사용법 const Parent = () => { const itemOne = "myossi는"; const itemTwo = "React를 배우고 있습니당"; return ( ); }; const Child = (props) => { return {props.text}; }; export default Parent; 간단 설명 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다. props를 이용하여 정의된 값과 속성을 전달한다. 전달받은 props를 렌더링한다. 풀어서 보자. 부모 컴포먼트에서 itemOne , i..
State 알아보기 State 란 ? 컴포넌트 내부에서 변할 수 있는 값 애플리케이션의 상태라고 할 수 있다. 쇼핑몰 장바구니를 예시로 들어보면, 장바구니내에서 체크 된 상태와 체크 되지 않은 상태로 상태를 구분할 수 있다. State hook, useState useState는 React에서 state를 다루는 방법 중 하나이다. useState 사용 1. 사용 할 파일내에서 react에서 useState를 import 해야 한다. import { useState } from "react"; 2. 컴포넌트 안에서 useState 호출 1. 수도 코드 const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값); 2. 문법 예시 function CheckboxExampl..
자주 나오는 질문 목록에 대해 답변을 준비 해보도록 합시다. 특히 별표가 들어간 부분은 더 자주 나온다고 함 HTML, CSS px, em, rem 의 차이에 대해 설명해주세요. 반응형 웹을 구현할 때는 이 단위 중에서 어떤 단위를 주로 사용하시나요? vw, vh에 대해 설명해주세요. 반응형 브레이크 포인트는 보통 어떻게 잡으시나요? CSS 선택자의 우선순위에 대해 설명해주세요. 페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 CSS를 어떻게 설정해야될까요? Flexbox에 대해 설명해주세요. float의 동작에 대해 설명해주세요. CSS에서 Cascading에 대해 설명해주세요. ⭐ SCSS에 대해 설명해주세요. ⭐ postition 속성에 대해 설명해주세요. margin과 paddin..
Router를 알아보기 전에 SPA는 뭐였나요 ? SPA는 경로에 따라 다른 뷰를 보여줄 수 있습니다. SPA는 하나의 페이지만 가지고 있지만 한 종류의 화면만 사용하지 않습니다. 그래서 경로에 따라서 다른 뷰를 보여주는 라우팅의 과정이 필요합니다. 이 때 사용하는 것이 Router 입니다. SPA에 대해 자세히 알고 싶다면 클릭하세오 [ React 기초 ] React SPA 알아보기 React SPA를 본격적으로 알아보기 전에 , React SPA가 생긴 이유부터 알아봅시다. React SPA가 왜 도입되었을까요 ? React SPA가 도입되기 전의 전통적인 웹 사이트에서는 사용자가 웹 사이트 내의 다른 페 wldbseja.tistory.com 아무튼, 이제부터 Router 사용에 대해 자세히 알아봅시..
React SPA를 본격적으로 알아보기 전에 , React SPA가 생긴 이유부터 알아봅시다. React SPA가 왜 도입되었을까요 ? React SPA가 도입되기 전의 전통적인 웹 사이트에서는 사용자가 웹 사이트 내의 다른 페이지로 이동하면 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 페이지 전체를 불러와야만 했습니다. 또한, 웹 사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되었습니다. 이러한 문제점들을 보완하기 위해 등장한 것이 React SPA 입니다. 그래서 React SPA가 뭐에오 React SPA는 위에 있는 문제점들을 보완하여 HTML 문서 전체가 아니라 업데이트에 필요한 데이터만 받아 javascript가..
React JSX 알아보기 JSX ? React에서 사용되는 JavaScript의 확장 문법이다. JavaScript와 HTML을 혼합한 형태로 작성할 수 있기 때문에 React 컴포넌트의 UI를 구성하는 것이 유용하다. 그렇다면 JSX로 JavaScript 코드가 바로 실행되나 ? JSX는 JavaScript가 확장된 문법이지만 브라우저가 바로 실행을 할 수 있는것이 아니기 때문에 Babel 을 이용해서 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해야 한다. Babel ? Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 해주며, 컴파일 후에 JavaScript를 브라우저가 읽고 화면에 렌더링 해줄 수 있다. 그래서 JSX가 DOM보다 좋은 이유가 뭐에오 D..
React 알아보기 React ? 리액트는 자바스크립트 기반의 라이브러리이다. 사용자 인터페이스 (UI)를 구축하기 위한 라이브러리로,HTML,CSS등과 함께 사용 되어 웹 애플리케이션을 만드는데 활용된다. 리액트에서 모든 UI 요소들은 컴포넌트로 이루어져 있으며, 이러한 컴포넌트들이 결합되어 전체 애플리케이션을 구성한다. 주로 자바스크립트 언어와 함께 사용된다.(문법,함수,객체,배열 등과 같은 요소들을 활용하여 리액트 애플리케이션을 구현한다.) 헷갈리지 않을 것 ! 리액트는 자바스크립트 기반의 라이브러리이지만,자바스크립트 언어 자체의 일부분은 아니며, 자바스크립트 코드를 작성할 때 리액트 라이브러리를 사용하여 필요한 기능을 구현하는 것 입니다. 컴포넌트 ? React에서 제일 중요한 부분을 맡고 있다...
