Tech Spec
- 서비스에 접근한다
- 유저가 액션을 하면, 서비스는 입력을 받는다.
- 입력받은 데이터를 서버에 저장한다.
- 현재 자산을 서버로부터 받아온다.
- 서버로부터 받은 데이터를 화면에 보여준다.
1.서비스에 접근한다.
구현 목표: 유저가 브라우저에서 화면을 확인할 수 있도록 한다.
필요
1.유저가 브라우저에 접근한다.
2.유저가 확인할 수 있는 화면이 그려진다.
Tech Flow
1.브라우저를 사용하여 url에 접속한다.
2.서비스에 필요한 파일을 load한다.
3.load한 파일을 사용하여 화면을 그린다.
2.유저가 액션을 하면, 서비스는 입력을 받는다.
구현 목표: 유저의 액션을 서비스에 입력받는다.
필요
1.유저가 액션할 수 있는 UI
2.유저의 입력을 받을 수 있는 준비
Tech Flow
로 숫자를 입력한다.
2.input에 등록된 이벤트가 실행된다.
3.입력받은 데이터를 브라우저에서 확인할 수 있다.
3.입력받은 데이터를 서버에 저장한다.
구현 목표:유저에게 입력받은 데이터를 서버에 저장한다
필요
1.서버
2.서버와 브라우저간 통신(API)
Tech Flow
1.유저가 버튼을 클릭한다.
2.버튼에 등록된 서버 전송 이벤트가 발생한다.
3.API를 통해 서버에 데이터 저장을 요청한다.
4.서버는 요청사항이 완료되면, 브라우저에게 알려준다
4.현재 자산을 서버로부터 받아온다
구현 목표:현재 자산 데이터를 서버로부터 받아온다.
필요
1.서버
2.서버와 브라우저간 통신(API)
Tech Flow
1.API를 통해 서버와 데이터 조회를 요청한다.
2.서버에서 데이터를 응답해준다
5.서버로부터 받은 자산 데이터를 화면에 보여준다
구현 목표:서버로부터 응답받은 데이를 화면에 보여준다.
필요
1.서버로부터 응답받은 데이터
2.응답 데이터를 유저가 보기 쉽게 처리하는 로직
3.유저가 확인할 수 있게 화면에 그리기
Tech Flow
1.응답 데이터를 유저가 보기 쉽게 처리한다.
2.처리된 데이터를 화면에 다시 보여준다.
3가지 레이어
웹/유저/서버 간 인터랙션
1.웹-> 유저: 화면을 보여준다.(렌더링)
2.웹<- 유저: 액션 입력 받을 수 있도록 한다.
3.웹-> 서버: 데이터 조회/저장/수정 요청 받는다.
웹<-서버:요청사항에 대한 응답을 받는다.
렌더링
기본 렌더링(HTML)
- HTML 파일에 문서를 작성
- 최초 파일이 로드될 때, 브라우저에 의해 HTML을 읽어 화면에 그림
런타임 때 렌더링(javascript)
- 런타임때 JS로 화면을 조작
- 액션이 있을때 UI를 변경해야 하는 케이스
DOM(Document Object Model):HTML 문서와 상호작용할 수 있는 인터페이스
node와 object로 문서를 표현하며 트리 구조를 통해 부모/자식 관계를 형성한다.
렌더링 과정
1. HTML 마크업 파싱 - DOM 트리 구축
2. CSS 마크업 파싱 - CSSOM 트리 빌드
3. DOM과 CSSOM을 결합하여 렌더링 트리 형성
4. 렌더트리 배치
5. 렌더트리 페인팅
런타임 때 렌더링 조작
- 트리거링이 있을때 UI를 변경해야 하는 케이스
- 런타임떄 자바스크립트로 DOM을 조작하여 렌더링
- 리렌더링 - 리페인팅, 재배치 발생
- 자바스크립트로 DOM 노드를 선택
- 노드 조작
-> 선택한 노드에 새로운 노드를 추가
-> 선택한 노드를 수정 삭제
- Document 인터페이스를 통해 접근
DOM 노드 선택
- document.querySelector(선택자)
- document.querySelector(".classname")
- document.querySelector("#idname")
- querySelector, querySelectAll,getElementbyId....
DOM 노드 조작
- 노드 생성
-> document.createElement(태그이름) - 노드 추가
Node.AppenChild(Node)
이벤트
- "유저가 클릭을 했다면 작동이 일어난다"를 JS로 구현하기 위해서는
- 원하는 버튼에 클릭 이벤트를 부여하고
- 해당 클릭 이벤트가 수행하는 함수나 동작을 설정해야 한다.
EventTarget : 이벤트의 타겟이 되는 객체 가 EventTarget 객체를 구현
-> Document.Window...
이벤트를 수신할 수 있는 수신기가 있음(listner)
이벤트 유형:
->유저와의 상호작용, 기본 상태의 변화
->click.focus(input),blur(input)
- addEventListener
Node.addEventListener(이벤트 유형, 콜백함수)
요소를 생성할 때, 이벤트 리스너도 등록해야함
서버간 통신
데이터 조작을 위해 클라이언트와 서버간의 통신이 필요함
서버 통신에는 물리적인 시간 지연 발생
-> 요청과 동시에 바로 처리 불가능
-> 요청이후 응답이 오기까기 기다렸다가, 응답 신호를 받아야 함
자바스크립트에서는 이런 상황에 필요한 처리기가 필요함
-> 콜백 함수
-> Promise 객체
-> await - async 객체
Promise
미래의 어떤 시점에 함수를 처리하겠다는 약속을 의미하는 객체
Promise 객체의 세가지 형태
1. 대기 pending : 수행 중
2. 이행 fulfilled : 수행 완료
3. 거절 rejected : 수행 거절
메소드 :
then-fullfilled일 경우
catch-rejected의 경우
동기와 비동기
동기:synchronous
직렬적으로 작업을 수행하는 방식
요청 이후, 응답을 받아야만 다음 동작이 수행되는 방식
비동기:Asynchronous
병렬적으로 작업이 수행되는 방식
요청 이후, 응답 수락과 관계없이 다음 동작이 수행되는 방식
await - async
비동기 처리 패턴 중 하나
Promise의 단점 보완, 가독성을 높여줌
함수에 async 키워드를 붙여 Promise 인스턴스를 반환하게 해줌
await를 Promise 인스턴스 앞에 추가하여,
성공 처리 이후 다음 함수가 실행되도록 함
프로젝트 세팅
프로젝트를 위해 코딩하는 동안 코딩 생산성과 재사용성, 다른 프로그래머와의 협업을 위한 많은
추가적인 라이브러리나 프로그램 등이 있다.
NPM (Node Package manager)
타인이 개발한 라이브러리를 쉽게 설치, 버전 관리, 커스텀 등을 가능하게 하는 툴
Saas
바닐라 CSS의 코드 작성간의 불편한 점을 개선하고 쉽게 관리하도록 만드는 툴
번들러
코드를 압축함거나 모듈화 함으로써 코드 재사용성이나 코드 실행 속도의 최적화를 도와주는 툴
Git
협업 및 버전 관리 툴, 작업한 내용을 저장하고 로그를 남김으로써 프로그램의 버전과 패치 내용, 필요 시 Branch 기능을 활용해 여러 기능을 동시에 개발하는 등 협업에 큰 도움을 주는 툴
GitHub
Git 사용을 편하게 하기 위해 온라인 상에 깃에서 커밋된 내용들을 저장하고 보관하고 다시 인출 가능하게 만듬으로써 Git의 원격 저장소
