📖 오늘 학습 뽀인트!
- Test
- 간단한 Vi command 명령
- 서버 관련 용어정리
- 서비스 배포 절차
- React
1. Test
추후 프로젝트 진행 시 협업할 반을 공정하게 배정하기 위해 테스트를 진행했고 점수를 받았다.
HTML, CSS, JavaScript에 대한 전반적인 개념 문제가 19문제이고, DOM 제어 1문제, 구현 1문제였다.
구현의 경우, 시간이 부족해서 다 구현하지 못 하고 제출해 아쉬움이 남는 테스트였다.😂
2. 간단한 Vi command 명령
🕵️♀️ Vi Command란?
cmd, 터미널 등에서 파일을 편집 및 확인하는 명령어이다.mkdir 폴더명 // 폴더 생성 touch 파일명 // 파일 생성 rm 파일명 // 파일 삭제 pwd // 현재 위치하고 있는 디렉토리 경로 확인 cd // 디렉토리 이동 vi 파일명 // 파일 내부 수정 i // insert 모드로 변경(수정 모드) :wq! // write, quit, force 로 저장후 편집모드 나가기
❓ 왜 사용할까?
모든 환경이 사용자가 흔하게 사용하는 UI 환경이 아닐 수 있다. icon이 없고 클릭이 없을 수 있기 때문에 모든 환경에서 작업하기 위해 사용한다.
3. 서버 관련 용어정리
✍용어정리
서버 : 24시간 켜져있는 PC. 사용자로부터 요청을 받고 전달하는 PC
클라우드 : SaaS,PaaS,IaaS에 따라 SW, HW를 빌려서 사용하는 것.
AWS : 클라우드 서비스(EC2-server, S3-storage 등)
Lightsail : AWS 서비스 중 하나, 가상 서버 서비스.
Node : 자바스크립트 런타임 중 하나로 자바스크립트를 실행시키는 실행기
npm : node package manager(구글 스토어 같은 느낌)
MTV와 MVC : 디자인 패턴으로 Django는 MTV, Node에 express는 MVC이다.
Model(백그라운드 데이터), V(사용자에게 보여지는 화면), C(Router 개념)
Model(백그라운드 데이터), T(MVC 패턴의 View와 동일), C(Router 개념)
SQL injection 공격 : form 창 같은 곳에 SQL query를 입력하여 사용자가 서버 데이터를 가져가는 공격 방법. react에서 jsx로 어느정도 방어 가능.({}로 처리되는 것은 String으로 처리)
4. 서비스 배포 절차
- URL 구매(AWS)
- Lightsail 서버 설치
- 정적 IP를 구매한 후 구매한 URL과 연결
- Lightsail 서버에 코딩한 코드 clone
- DB 설치(MySQL, MS SQL, PostgreSQL, SQLite3, MongoDB...)
- 코드와 DB 연결
- Node 코드가 죽지 않도록 죽으면 살리는 코드 작성
5. React
🕵️♀️ React란?
React는 jQuery와 같은 프론트엔드 개발을 위한 '라이브러리' 이다.
✍ 특징
- Facebook에서 관리
- 컴포넌트 관리 → 재사용
- Virtual DOM(바뀌는 부분만 업데이트) → 빠른 렌더링 속도
- JSX(JS + XML)
- 싱글페이지 어플리케이션 만들기 좋음(링크가 바뀌지 않음, 공식홈페이지) → UX
❓ 컴포넌트
쪼갤수 없는 단위까지 잘개 쪼개진 페이지를 구성하는 가장 작은 단위.
❓ JSX
const card = <h1>안녕하세요</h1>위에 코드처럼 자바스크립트에 XML을 사용하는 것이 JSX이다.
❓ React를 사용하는 이유
react는 결국 컴포넌트들의 집합체이기 때문에 컴포넌트 사용 이유가 곧 react 사용 이유가 된다. 컴포넌트를 사용함으로 코드가 간결해지고 재사용성 때문에 사용한다.
💬 가장 큰 단점
작성할 때<div id="root"></div>하나만 작성되어 있어 검색 엔진에 노출되지 않는다.(SEO)
