웹 개발

배포의 단계 개발(develop) - 빌드(build) - 배포(deploy) 개발 - 만드는 단계 빌드 - 어플리케이션 가동의 필요한 것들을 통합하고, 경량화 시키는 단계 (배포를 위한 준비과정) 배포 - 서버에 반영을 하는 것 웹앱을 무료로 배포하는 다양한 방법이 존재합니다. 깃허브페이지 구글 firebase 기타등등 이번에는 firebase를 이용해서 배포를 진행하도록 합니다. ----------------------------------------------------------------------------------------------------------------------------------------------------------------- 리액트 빌드하기 1. 프로젝트 최상위..

★ ContextAPI 잘 알아두기 ★ 데이터를 전역으로 관리하자 ContextAPI or Redux API문서 https://ko.reactjs.org/docs/context.html React를 하다보면 여러 컴포넌트를 거쳐서 자료를 전달해야 하거나, 동시에 같은 자료를 사용해야 하는 경우가 생깁니다. Context는 리액트 컴포넌트 간에 어떠한 값을 공유 할 수 있게 해주는 기능입니다. 주로 Context는 전역적(global)으로 필요한 값을 다룰 때 사용합니다. Props로만 데이터를 전달하는 것은 한계가 있다. 리액트 에서는 일반적으로 컴포넌트에게 데이터를 전달해 주어야 할 때 Props를 통해 전달합니다. 그런데, 이 컴포넌트의 형태가 복잡하다면 어떻게 될까요? G에서 변경된 값을 J로 가져..

목차 Ajax란? ES6의 fetch를 이용해서 리액트에서 데이터 처리하기 Axios로 데이터 처리하기 async, await 적용하기 AJAX ( Asynchronous Javascript and XML) 은 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술입니다. 웹 어플리케이션에서 데이터를 가져올 때 서버쪽 데이터가 필요할 때 ajax기법을 사용하게 됩니다. 이 작업은 시간이 오래 걸릴 수도 있기 때문에 비동기적으로 처리하게 됩니다. 비동기(asynchronous)는 요청이 끝날 때 까지 기다리는 것이 아니라, 동시에 여러 작업을 수행하게 됩니다. 나중에 react에서는 다른 서버의 REST API와 통신을 이용하여 데이터베이스 데이터를 가져올 수 있습니다. ---------------------..

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

리액트 스타일링 1. 태그에 직접 지정하기 2. 일반 css파일로 적용하기 3. css모듈로 적용하기 1. 태그에 직접 지정하기. 태그에 직접 디자인을 적용 할 때는 {}로 묶어줍니다 css속성중 - (타이푼)은 카멜표기법으로 대체됩니다. ★ style={{css속성: 값, css속성: 값}} 안녕하세요!! *변수에 style을 적용할 객체를 선언해놓고 변수를 가져와서 style 값 자리에 대입해도 됩니다. //직접스타일링하기: -은 카멜표기법으로 변경됩니다 const myStyle = { color : "red", textAlign : "center" } 헤더입니다(직접스타일링) 2. 일반 CSS 파일로 적용하기 *일반CSS문법으로 디자인을 해주면 되고 import로 가져오면 됩니다. *css파일 이름..

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