[항해99] Week 3 [7.4 - 7.9]
0. ✅Code Convention
그동안 고민해온 명명법들을 포함에 여러 규칙을 이참에 한가지로 정하기로 했다.
나 자신과의 약속에서 차후 협업의 약속, 회사와의 약속이 될 이러한 코딩 규칙이다. 습관이 될 때까지는 많은 반복과 노력이 필요 하겠지만 분명 그 결과는 코드 가독성을 향상시키고 이후 유지보수를 위해 큰 도움이 될 것이다.
명명법
폴더: 소문자js파일,컴포넌트: 대문자로 시작하는 CamelCase변수,className,id: 소문자로 시작하는 camelCasebucketlist //폴더 └BucketList.js //js파일 └ const BucketList /*컴포넌트 명*/ = (bucket) => { //매개변수 }
줄 형태
- 여는 괄호를 첫 번째 줄 끝에 놓기.
- 내부 내용 들여쓰기 하기
- 여는 대괄호 앞에 공백을 하나 사용하기.
- 닫는 대괄호를 새 줄에 넣기.
function TwoSum(n,v) { return n+v }
줄 길이 < 80
- 가독성을 위해 80자보다 긴 줄은 사용하지 않기.
└JavaScript문이 한 줄에 맞지 않는 경우 가장 좋은 위치는 연산자 또는 쉼표 뒤.
연산자
- 항상 연산자( = + - * / )와 쉼표 뒤에 공백 넣기.
1. 🔍React로 가기전에
1-0. 🔍DOM (Document Object Model)
DOM
DOM은 html 단위 하나하나를 객체로 생각하는문서객체모델이다. 예를 들면div라는 객체는 텍스트 노드, 자식 노드 등 하위의 어떤 값을 가지고 있다.
트리 구조의 형태로html이라는 거대한 줄기에서body와head가 나뉘고body안에section이 나뉘고 그 안에div가 나뉘고...
Javascript는 이러한 객체 모델을 이용하여 각 HTML의 요소에 접근하여 작업을 할 수 있다.//html 문서내 body의 style에 접근하여 배경색을 바꿀 수 있다. document.body.style.backgroundColor = "orange" //Id와 Class 등 여러가지 방법으로 DOM내부 요소에 접근할 수 있다. const title = document.body.getElementById("title"); //쓱싹. title.style.width = "50%";
가상DOM
가상 DOM은 메모리 위에서만 돌아가는 DOM이다. 이는 변화가 필요할 때 마다 DOM을 이용해 요소에 접근하여 매번 수정을 하던 것들의 연산을 줄이기 위해 생겨난 개념이다.
최초 렌더링 이후 데이터가 들어와 변화가 필요할 때, DOM과 동일하게 생긴 가상 DOM에 연산을 마친 후 DOM과 다른 점을 수정 적용하여DOM에 대한 전체적인 접근 횟수를 줄일 수 있다.
1-1. 🔍Serverless
서버
서버는 요청과 응답의 연속으로 이루어지는 웹페이지 형성에 있어서 필수적인 요소이다. 클라이언트가 접속하면 웹 구성요소도 제공하고 정보도 제공하고 데이터도 관리하고, 클라이언트에게 요청이 오면 또 응답하고 정말 바쁜 녀석이다.
서버리스
(Serverless)서버가 없다는 이야기가 아니다. 서버를 신경 쓸 필요가 없다는 말이다.
서버 인프라를 구축하고 만들 필요가 없는 환경, 백엔드 작업을 직접 할 필요가 없는 것을 이야기한다. 즉, 서버가 하는 어떤 동작들을 내가 직접 만들 필요가 없다는 말이다.
BaaS (Backend as a Service)그렇다. 직접 안만들고 빌려온다.
데이터베이스, 로그인, 지금까지 만들어본 API들을 제공받아 프론트만 만들면 된다.
예시로 파이어베이스 라는 서비스가 있다.
파이어 베이스 바로가기
2. 🔍React로 넘어가며
2-0. 🔍Component
Component
Component는 리엑트 화면을 구성하는 요소들의 단위이다.
이때, 컴포넌트는 두가지 데이터를 가지고 있다.
- 부모 함수로부터 가져온 데이터
props,- 자기 자신의 데이터
state가 있다.새로운 js파일에 컴포넌트 생성 시
//react 패키지에서 React 객체 가져오기 (최초에) import React from "react"; //다른 파일에서도 컴포넌트를 사용할 수 있도록 하기 (마지막에) export default 컴포넌트이름;
클래스형 컴포넌트 / 함수형 컴포넌트
컴포넌트는 그 구성 방식으로
클래스형과함수형이 있다. 리엑트에선 함수형 컴포넌트 업데이트 후 사용을 권장하고 있지만 현업에서 오래된 코드를 굳이 바꿀 이유가 없으니 어느정도 숙지할 필요는 있다.
클래스형 컴포넌트class LifecycleEx extends React.Component { //라이프 사이클, 내용 ### Lifecycle 참고 constructor(props) { } render(null) { } } //*. React.Component 클래스를 확장하여 클래스명(LifecycleEx)을 생성
함수형 컴포넌트function App() { return (null); }
2-1. 🔍Lifecycle (클래스형)
💡 클래스형 컴포넌트는 Lifecycle 를 가지고 있다.
컴포넌트는 생성 이후 사용자의 행동에 따라 업데이트를 거치며 최종적으로 제거된다.
💡 함수형 컴포넌트는 Lifecycle를 Hook을 이용해 구현 가능하다.
컴포넌트 생성 과정
constructor(props) { } //0.└생성자 함수, 컴포넌트가 생성되면 가장 먼저 호출된다. //*. 부모로부터 가져온 props로 state와 필요 데이터를 구축 render() //1.└주어진 데이터로 렌더링 내용 형성 및 DOM 적용 //*. 컴포넌트의 모양만 정의하고 state나 props를 건드려 데이터를 수정하지 않는 것이 좋음. componentDidMount() //2.└마운트 완료 후 일어나는 함수 //*. 첫 렌더링에만 1회 실행되며 리렌더링(업데이트) 할 때는 실행되지 않는다.
컴포넌트 업데이트 과정
render() //0.└주어진 데이터로 렌더링 내용 형성 및 DOM 적용 componentDidUpdate(prevProps, prevState) { } //1.└업데이트 완료 후 일어나는 함수업데이트 조건
props가 바뀔 때state가 바뀔 때- 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
- 또는, 강제로 업데이트 했을 경우
(forceUpdate()를 통해 강제로 컴포넌트를 업데이트할 수 있다.)
컴포넌트 삭제 과정
componentWillUnmount() //0. └업데이트 완료 직전 일어나는 함수삭제 조건
- 페이지를 이동할 때
- 그 외 사용자의 행동으로 인해 컴포넌트가 화면에서 제거될 때
(기존 컴포넌트 제공이 null로 바뀌며 중지될 때)
2-2. 컴포넌트 적용하기
- import 후 컴포넌트 적용
// 컴포넌트를 import.
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로 (확장자 생략 가능)];
import BucketList from './BucketList';
function App(){
return(
// BucketList 컴포넌트 적용
<BucketList/>
)
}💖 자식 컴포넌트에 값 물려주며 적용하기
import BucketList from './BucketList';
function App(){
return(
// BucketList 컴포넌트 에서 props.list로 이용 가능.
<BucketList list={['영화관 가기', '매일 책읽기', '수영 배우기']}/>
)
}3. ✅개인과제
리엑트를 이용해 간단하게 페이지를 만드는 개인과제가 있었다.
한 주 동안의 평점을 체크해서 평균 평점을 등록하는 사이트이다.
개인과제 훑어보기심화주차 과제 제출 초기설정 귀찮아서 가져다썼습니다.🐱👤
파이어베이스로 데이터베이스 관리를 하지 않았기 때문에 큰 의미가 있는 프로젝트는 아니었다.
단순히 React의 특징들을 접해보는 말 그대로 입문, 기초챕터였다.
물론 S3로 배포까지 해야했기에 한 주가 마냥 여유롭지는 못했다.
4. ✅주특기 입문주차를 마치며
정신이 없다.
Redux도 배우고 배운건 많았지만 정리할 여유가 없다.
과제도 많고 더위에도 무너지고 있다.
에어컨 해결하고 더 힘차게 나아가야지.
