항해 99
항해99 - 3주차 후기
ble194
2022. 7. 29. 14:26
항해99에서의 3주차는 주특기 입문 주차였다.
나는 프론트엔드와 백엔드를 고민하다가 프론트엔드를 선택하게 되었다.
그래서 나의 주특기 언어는 React가 되었는데,
자바스크립트랑 생각보다 차이가 많아서 많이 어려웠다.
자바스크립트로 간단한 홈페이지도 만들고, 알고리즘에서 메서드도 활용해서 자만하다가 크게 한방 맞았다.
리액트를 활용해서 폴더구조도 나누고, todolist를 만드는 과제가 있었다.
해당 과제에서 요구하는 기능은 인풋두개의 값을 받아 제목과 내용(+완료 혹은 취소, 삭제버튼)이 있는 리스트를 만들고,
해당 리스트를 삭제하거나 완료를 누르면 취소구역, 취소를 누르면 완료구역으로 이동하는 과제였다.
주어진 강의와 자료들을 보면서 생각보다 쉽다고 생각했지만, 막상 손으로 잡으니 너무 어려웠다.
처음에 인풋값 두개를 한 구역에 넣는 부분과, 완료와 취소의 구역을 옮겨주는 부분이 어려웠는데,
이 두개를 많이 고민한 덕에 props를 다루는 방법을 많이 알게 되었다.
결과물 - https://github.com/Jone4865/Todolist-1
아래는 공부하며 적은 메모
참고 자료 : https://developer.mozilla.org/ko/docs/Web/API/Document
자바스크립트 메소드 모음 : http://www.silverwolf.co.kr/javascript/5406
vs 정렬키 알트+쉬프트+f
1. *React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. 프론트엔드 개발자사이에서는 앵귤러, 뷰와 더불어 가장 많은 인기를 얻고 있습니다. SPA를 전제로 하고 있으며, Virtual DOM을 활용하여 업데이트 해야하는 DOM요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 빠른 퍼포먼스를 낼 수 있습니다.
SPA = Single Page Application의 약자이다. 말 그대로, 페이지가 하나인 어플리케이션이다.
2. -- 화살표 함수 알아두기
- Function keyword
function sayHello () {
return "hello world!"
}
- Arrow function 방식 1
const sayHello = () => {
return "hello world!"
}
- Arrow function 방식 2
- **return 을 생략**하는 방식입니다.
const sayHello = () => "hello world!"
- Arrow function 방식 3
- **코드 줄 안(inline)에서 무명함수**로 생성하는 방식입니다.
// 예시 1
<App onClick={ ()=>{} } />
// 예시 2
{array.map((item)=> <div>{item}</div>)}
3. 구조 분해 할당은 ES6의 등장과 함께 구현된 방식이다. 리액트에서 구조 분해를 사용하면 객체 안에 있는 필드 값을 원하는 변수에 대입할 수 있다. 코드의 가독성을 높이고 간략화를 할 때 유용하게 사용된다.
6. ES란, ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다.
뒤에 숫자는 버전을 뜻하고 ES5는 2009년 ES6는 2015년에 출시되었다.
7. yarn 단축어
# npm install
yarn install 또는 yarn
# npm i <package> --save
yarn add <package>
# npm i <package> --save-dev
yarn add <package> --dev : --dev 옵션은 -D 와 같다.
# 패키지 삭제
yarn remove <package>
# dependencies와 devDependencies 모두 (package.json 에 명시된) version rule 에 따라 최신 버전으로 업그레이드.
# 만약 어떤 패키지가 semantic versioning([segVer](https://github.com/semver/semver/blob/master/semver.md))를
# 따르지 않는다면, version rule이 무색해져 하위 호환성이 보장되지 않는 업그레이드일 수도 있다.
yarn upgrade
# 특정 패키지를 특정 버전으로 업그레이드
yarn upgrade <package>@<version>
# 목록들 중에서 원하는 패키지만 최신버전으로 업그레이드하는 interactive terminal ui 를 제공한다.
yarn upgrade-interactive
# production 환경서 필요한 dependencies 만 설치
NODE_ENV=production yarn install 또는 yarn install —production
8. 컴포넌트란 무엇인가?
리액트 세계에서 말하는 컴포넌트(블럭)는 즉 함수입니다. 누군가 와서 “컴포넌트를 만들어 보세요" 라고 한다면 우리는 html을 return 하는 함수를 만들면 됩니다.
컴포넌트(함수) 코드를 볼 때는 영역을 나누어서 보면 조금 더 편합니다. 컴포넌트 밖에서는 내가 필요한 파일을 `import` 하거나, 또는 `export default` 라는 기능을 통해 내가 만든 컴포넌트를 밖으로 내보내는 코드가 있습니다.
컴포넌트 안에서는 자바스크립트를 쓸 수 있는 부분이 있습니다. 여러분이 컴포넌트 안에서 어떤 자바스크립트 코드를 작성하고 싶다면 여기에다가 작성합니다.
그리고 `return` 을 기준으로 아랫부분에서는 HTML(정확히 말하면 JSX입니다. 나중에 배워요!) 을 작성할 수 있습니다. **여기에 작성한 html 코드와 값들이 화면에 보여집니다.
- 컴포넌트를 만들 때 반드시 가장 첫 글자는 **대문자**로 만들어야 합니다. 🔥
- 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓습니다.
----
리엑트 1주차
html javascript css 세개 합쳐서 정적자원
클라이언트(요청) - 서버(응답) 웹의 동작 끗..!
프론트엔드 개발자는
1. html css로 페이지를 그린다
2. 데이터를 끼얹는다
서버리스란?
백엔드 없이 개발 확인하는 방법(서버를 빌려온다)
------
html(hypertext markup language)
마크업 = 표시한다
태그는 요소를 만들때 열고 닫는거
요소는 <button>열기</button> 처럼 한개가 요소
Dom(document of model) = 문서 객체 모델이란?
요소 하나하나를 객체로 생각하는 모델,
돔은 트리구조(서로 포함하고 포함되는 구조) 부모자식관계(부모요소, 자식요소)
네모난 구역을 갖는다
-------
css
selector = 어떤 걸 꾸밀건지 선택하는 아이
(1) #id{}
(2) .class{}
(3) tagname{} - 그 태그에 해당하는 내용을전체적으로 선택할때 사용
(4) #id, .class{} - 여러 요소 선택할때 ,로 엮어서 써줄 수 있다.
(5) 수도 클래스 선택자 = 어떤 요소가 특정 상태(마우스 올림 등) 일 때에만 선택하게 해주는 선택지
ex)button:hoveer{}
1em = 16px
그리드 시스템 - 레이아웃을 잡는데 사용하는 것
박스의 가장안쪽 박스는 컨텐츠 영역
디스플레이 블록은 가로 영역을 다쓴다는 의미
디스플레이 플렉스는 영역을 유동적으로 준다는 의미
css 사칙연산
calc(20% -20px); 부모요소의 20%보다 -20작게 속성을 준것
------
자바스크립트 기초
띄어쓰기가 있을부분 마다 대문자로 표시해주는것 = camel case(낙타 등 같아서)
위는 돔요소들을 가져와서 활용하는 예시.
위는 돔요소를 새로 붙이는 예시.
var는 함수 레벨 스코프
- 아래두개는 블록레벨{} 스코프(블록 안에서만 사용가능)
let은 변수 재할당이 가능
const는 상수 재할당이 불가능
함수만드는 방법3개
함수 선언식 – 주로 쓰는거
함수 표현식 – 함수를 변수에 넣어놓은 느낌
화살표 함수 – 함수 표현식을 줄여서 쓴 느낌
클래스 안에
constructor() 생성자함수 – 초기값설정
this는 블록의 주체
extends() 다른 클래스를 상속받을거야
super() 자식 클래스에서 부모 클래스의 접근하는 방법
new() 새로운 객체를 만들거다
자식 클래스와 부모 클래스가 똑같은 이름을 쓰면 자식 클래스의 이름을 가져온다
= 할당
== 비교
=== 엄격한 비교
스프레드 연산자 ...은 껍데기를 벗긴다
return안에는 if문을 사용할 수 없다. 삼항연산자로 조건을 줄 수 있음
콜백함수는 함수 안에서 실행하는 또 다른 함수
파라미터 = 매개변수
배열의 내장함수 중요한거 네개
map = 반복문과 비슷함 배열만큼 알아서 반복되는 내장함수 원본 배열을 카피(건들지 않음)
filter = 걸러내는 내장함수
concat = 합치는 내장함수(중복 제거 x)
from
----
9. nvm을 왜 써야하는가?
nvm = node version manager 노드 버전 관리 프로그램 노드 위에서 리엑트가 돌아갈거라 노드 버전관리 해야함
10. jsx가 뭘까? -리액트에서 사용하는 문법같은것
리액트에서는 jsx문법을 사용해서 리액트 요소를 만들어 주고 dom에 렌더링(엎는다)해서 뷰를 그려준다. html을 품은 자바스크립트가 jsx이다.
jsx 사용법(문법)
(1) 태그는 꼭 닫아주어야 한다.
(2) 무조건 1개의 엘리먼트를 반환해야 한다(하나의 덩어리만 리턴안에 들어가야한다)
(3) jsx에서 자바스크립의 값을 가져오려면 {}안에 변수명 넣으면 됌.
(4) class 대신 className을 사용한다 id는 걍 id
(5) 인라인으로 style을 준다
<input type=“text” /> 하면 태그를 바로 닫아준다.
11. 라이프 사이클이란?
동작을 요청하고 눈에 보이는 순간부터 사라지는 순간까지를 라이프 사이클이라 한다.
처음에 돔을 그린다
*가상돔 – 1. 메모리에 올라가있는 가짜dom에 변경 사항을 전부 넣는다.
2. dom과 가상dom을 비교해서 변경된 부분만 바꿔 넣어준다.
연산이 적어지니까 빨라진다.
요소가 적을때는 진짜 돔에 직접하는게 빠를 수도 있다.
컴포넌트의 라이프사이클
1. 생성 될 때(돔에 얹혀진다 mount된다) – 처음에 그려질 때
2. 클릭 등으로 업데이트 할 때
3. 제거 될 때(unmount)
컴포넌트가 수정될 경우 네가지
1. 컴포넌트 자신의 데이터가 바뀌었을 때 setState()
2. 부모 컴포넌트가 자식 컴포넌트에게 주는 정보가 바뀌었을 때 (props가 바뀌었을 때)
3. 부모가 리렌더링 되었을 때
4. 강제 업데이트 되었을 때
받아온 데이터는 바꿀 수 없다.
리액트에서 컴포넌트는 두가지가 있다.
(1) 클래스형 컴포넌트(앞에 Life~가 자식 컴포넌트 React~가 부모 컴포넌트)
- constructor() 생성될때
- render() 붙일거야
- componentDidMount() 돔에 완벽히 올라가고 실행(업데이트 시에는 실행 x)(ajax 콜등 돔 관련 처리시 사용)
- componentDidUpdate(prevProps, prevState) 리렌더링이 끝난 후 실행(돔 관련 처리시 사용)
파라미터 값은 각각 부모와 나의 값 (현재, 이전 데이터 비교시 씀)
- componentWillUnmount() 사라질 때
클래스형 컴포넌트에는 생성자 함수와 리턴되는게 1개가 필수이기 때문에 렌더가 필수
(2) 함수형 컴포넌트
폴더명은 소문자로 시작
js파일과 컴포넌트는 카멜케이스 사용
위는 함수형 컴포넌트의 기본 생김새
컴포넌트는 만들고 끝이 아니라 어디서든 가져다 쓸 수 있게 export 해주어야 한다
(1) export {컴포넌트};
(2) export default 컴포넌트;
사용할땐 임포트
(1) import 컴포넌트 from ‘./컴포넌트’;
(2) import {컴포넌트} frop “./컴포넌트”;
함수형 컴포넌트에서는 렌더를 먼저봐야한다
뷰의 구성도 보고 어떤 값을 어디에서 사용하는지 보려고.
이벤트리스너 추가하는 것을 구독한다고 함
1. 클래스형 컴포넌트에서 이벤트리스너 다루는 방법 :
componentDidMount() {
console.log(this.circle);
this.circle.current.addEventListener("mouseover", this.hoverEvent);
}
componentWillUnmount() {
this.circle.current.removeEventListener("mouseover", this.hoverEvent);
}
이벤트리스너는 실행한 뒤 없애줘야함(클린 업)
2. 함수형 컴포넌트에서 이벤트리스너 다루는 방법 :
리액트 훅 useEffect()
첫 번째 렌더링이 일어날 때에는 화살표 함수 안을 실행
두 번째 부터는 의존성배열(Dependency Array)의 요소를 확인하고 바뀐 것이 있을때에만 실행함
React.useEffect(() => {
return () => {
컴포넌트가 사라질 때 동작하는 것을 넣으면 됨
}};)
----
페이지에서 페이지로 이동하는 방법(라우팅)
MPA(Multi Page Application) html을 여러개 가지고 있는 사이트이다
SPA(Single Page Application) html을 한 개만 사용한다
react-router-dom 패키지
BrowserRouter(브라우저라우터)는 웹 브라우저가 가지고 있는 주소 관련 정보를 props로 넘겨주는 친구입니다. 주소창을 보고 내 컴포넌트를 분기할 수 있게 도와줌.
현재 내가 어느 주소를 보고 있는 지 쉽게 알 수 있게 도와줘요.
Route가 페이지 식별 도와줌 분기점을 알려줌
exact={true} – 페이지를 그때만 보여줘라
index.js가 프로젝트의 시작점
<Route path="/cat/:cat_name" component={Cat} /> 동적라우팅 = /:파라미터 명
1. useParams() react-router-dom의 훅으로 파라미터 값 받아오기
2. <Route path="/dog" component={Dog} /> 부모 컴포넌트에 컴포넌트 어쩌고 붙이기
console.log(props.match.params) 자식 컴포넌트에 붙이기(매치까지면 다 확인가능)
링크 이동시키기
1. import { Route, Link } from "react-router-dom"; 사용할 곳 위에 임포트
<Link to="/">홈가기</Link> 사용
2. 부모에 컴포넌트={}주기
<div onClick={() => {
props.history.push("/home")
}}>강아지 화면이에요.</div> 사용
----
호출
응답
링크이동 porps로 하는거 다시보기//////////
잘못된 경로 처리하는 방법
1. 리액트라우터돔에서 Switch 사용
스위치로 라우터 감쌈
<Route>
<NotFound/>
</Route>붙임
- 버튼에 (버튼명).goBack(); 뒤로가기
------
리덕스 – 전역상태저장소 – 전역데이터저장소
리덕스에서 데이터 저장하는곳 = 스토어
데이터를 수정하는곳 = 리듀서
yarn add redux react-redux
리액트리덕스는 리덕스 편하게 해주는 아이
나 수정할래 = 액션을 일으킨다
액션(객체) = 어떻게 바꿀래
액션크리에이터 = 액션을 객체로 만들어 리턴해주는거
리듀서 = 데이터를 실제로 바꾸는 곳
스토어 = 리듀서가 모여있는곳
리덕스 스토어는 한 개만 쓴다
스토어의 데이터(state)는 오직 액션으로만 변경할 수 있다.
리듀서는 순수한 함수여야한다
순수한 함수는 (1) 같은 값을 주면 같은 값을 줘야한다
(2) 이전 상태는 수정(건드리지)하지 않는다
(3) 리듀서는 이전 상태와 액션을 파라미터로 받는다
스테이터 직접 건드리면 안됌
모듈을 작성할 때 기능별로 묶는 것을 덕스구조 라고 한다.