1. SPA Single Page Application 단일 웹 페이지로 돌아가는 애플리케이션 (ex. index.html) 브라우저에서 자바스크립트를 이용하여 단일 웹 페이지의 상위 HTML 요소를 동적으로 생성 및 조작 검색 엔진 최적화 (SEO)에는 적합하지 않음 [ 특징 ] 대표적인 SPA라이브러리 : React.js, Vue.js, Augular2 등 컴포넌트들이 모여 하나의 페이지를 작성하고, 이후 특정 부분만 데이터를 바인딩하는 개념 [ 장점 ] 사용자 친화적 초기에 한 번의 렌더링 후, 데이터만 받아오기 때문에 상대적으로 서버 요청이 적음 FE와 BE의 분리로 개발 업무의 분업화 및 협업에 용이 효율적인 개발을 할 수 있도록 함 [ 단점 ] 처음 화면을 로딩할 때, 모든 화면이 미리 준비되..

1. 일반 CSS 일반적으로 우리가 알고 있는 바로 그 CSS 소규모 프로젝트에 적합 별도의 라이브러리 필요 X 1.1 주의사항 CSS 작성 시 컴포넌트 별 클래스가 중복되지 않도록 작성하는 것이 중요 1) 클래스 생성 규칙 클래스의 이름을 생성할 때 중복되지 않도록 특정한 규칙을 정해둘 수 있음 이름-태그의 형식과 같이 규칙을 정할 수 있음 ex) App 컴포넌트에 헤더를 생성 => App-header 2) CSS Selector DOM트리 구조를 통해 원하는 DOM을 참조하여 꾸밀 수 있음 ex) .App .logo { ... } 1.2 CSS 모듈 사용 CSS의 모듈 형식을 사용하면 자동으로 클래스명이 생성 CSS의 파일명을 컴포넌트명.module.css로 생성 -> 사용하려는 js 파일에서 imp..

1. Component란? React에서 컴포넌트는 프로그램을 이루는 최소한의 단위 자바 스크립트에서의 함수와 유사 컴포넌트의 이름은 대문자로 시작되도록 함 컴포넌트를 통해 UI를 여러 개의 조각으로 나눈 뒤, 재사용이 가능하도록 함 각각의 조각들을 개별적으로 관리할 수 있도록 함 2. Component의 구분 2.1. 함수 컴포넌트 - function으로 정의 - return 문에 JSX 코드를 반환 함수 컴포넌트를 작성하는 방법은 function 사용 유무에 따라 다시 2가지로 나뉜다. 1) function 함수 사용 밑줄 친 부분은 함수 컴포넌트로, 해당 함수를 따라가서 살펴보면 function App() { return ( Hello ); } 이렇게 function으로 App 함수를 정의하고 있으..

1. Props Properties의 줄임말 속성을 나타내는 데이터 함수의 매개변수와 같이 컴포넌트끼리 값을 전달 읽기 전용으로, 컴포넌트 내부에서 값 수정이 불가 가장 중요한 마지막 특징을 살펴보자. function sum(a, b) { return a + b; } 위와 같은 간단한 함수를 보면 입력되는 값이 컴포넌트 내부에서는 바뀌지 않고 있다. 이는 즉, 더한 값이 리턴되지만, a와 b 자체의 값은 변하지 않는다는 것을 의미한다. 이러한 함수를 pure function 이라고 부른다. function withdraw(account, amount) { account.total -= amount; } 반대로 여기 이 함수를 보면 amount의 값이 함수 내부에서 바뀐다는 것을 볼 수 있다. amount..

JSX란? React에서 component는 꼭 저런 형식으로 작성이 되어야 하는데, 이 때 Javascript와 HTML이 합쳐진 문법 일종의 자바스크립트의 확장된 문법 JSX는 React로 개발할 때 주로 사용이 되며, 공식 자바스크립트의 문법이라고 할 수는 없음 JSX의 작성 방법 Javascript 언어 사용 JSX 내부에서 Javascript 언어를 사용하기 위해서는 { }로 코드를 감싸주어야 한다. div로 요소 묶기 하나의 컴포넌트 안에 여러 개의 요소가 존재하면 div 태그로 묶어주어야 한다. // 잘못된 코드 function App(){ return( Hello bad code ) } // 올바른 코드 function App(){ return( Hello good code ) } 조건 연..

앞서 작성한 프로그램 생성 법과 유사한 내용이지만 너무 간단하게 적었나 싶어 조금 더 자세하게 !! 과정을 한 번 더 작성한다. 1. create-react-app ?! - React를 만든 페이스북에서 제공하는 CLI 도구 (CLI : 커맨드 라인 인터페이스) - React를 사용해 프로젝트를 개발하고자 할 때, 아무것도 없는 상태에서 시작하는 것이 아닌 기본적인 틀을 잡아줌 2. 프로젝트 생성 npx create-react-app [ 프로젝트 이름 ] cmd에서 폴더를 만들 위치로 이동한 뒤,, 위에 보이는 명령어를 한 줄만 작성하면 끝이다! 그런 다음 기다리면 요렇게 진행 상황이 보여지고.. 조금만 더 기다리면..! 짠~~! 이렇게 프로젝트의 틀이 만들어진 것이다!! 이렇게 간편하게 만들어지다니 놀..