[2023.10.31] 개발자 교육 27일 차 : 강의-html, css, JavaScript [구디 아카데미]

DaramGee·2023년 10월 31일

JavaScript float parcel position 번들러

클라우드 활용 자바개발자 양성과정(구디)

목록 보기

27/95

오늘 정리

웹구현시? 웹언어도 코드를 작성하며 개선을 하는 부분이 있다는 것은 같다. 중복되는 부분은 줄이고, 보다 직관적으로 유지보수하기 유리하게 코드를 작성하는 것이 필요하다.

자바스크립트? 스크립트언어란 컴파일하지 않고 실행하는 프로그래밍 언어를 말한다.

강의 내용

번들러 실습 - Parcel with 해커뉴스 API
- 관련개념
  - 변수선언
    - var - 지변, 전역화 되어서 처리됨 → 호이스팅이슈 있음.
    - const - 상수선언 시 사용(ES6), 재정의 x
    - let - 변수, 재정의 o
```
const content = document.createElement('div');
const title = document.createElement('h1');
content.appendChild(title); 
-------             ------
//h1을 품은 div 생성
//<div><h1>제목{텍스트노드 : 태그 이름 없고 값 있음.}</h1></div>
```
  - 객체
    - XMLHttpRequest() - 브라우저가 제공하는 비동기 통신 객체(호출 시 open(), send() 호출)
      - 파라미터 (전송 방식(**RESTful API**), 요청하는 URL, true-동기/false-비동기)
      - **RESTful API :** 두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 인터페이스(방식 : get, post, put , delete 등)
      - 동기 방식으로 처리 시 굳이 해당 객체를 사용하지 않아도 됨.
      - response속성값을 통해 서버측의 응답을 받아옴.
    - location - URL 정보를 가져오는 객체
  - 태그
    - a - 링크
  - 함수 🖥️
    - document.write(’<>’) - 해당 태그 브라우저에 생성
    - document.createElement(’요소’) - 브라우저에 (요소)를 생성만
    - document.getElementById(’root’).appendChild(변수명) - 브라우저에 해당 요소 붙이기
      - 파라미터에 변수를 넣기 위해 변수를 생성하는 작업이 선진행되어야 함.(생성이 먼저, 사용은 나중)
    - innerHTML - 태그 내부에 텍스트노드를 결정
- 번들러 시작하기 (parcel)
  - 링크(https://ko.parceljs.org/getting_started.html)
  1. npm으로 parcel 설치
  2. package.json 파일 생성
  3. index.html index.js 파일 생성
  4. 진입 파일을 지정
  - 터미널에 입력
```
GD@GD MINGW64 /d/vscode_web/news_step1
$ **npm install -g parcel -bundler**
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility

added 195 packages in 9s

85 packages are looking for funding
  run `npm fund` for details

GD@GD MINGW64 /d/vscode_web/news_step1
$ **npm init -y**
Wrote to D:\vscode_web\news_step1\package.json:

{
  "name": "news_step1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

GD@GD MINGW64 /d/vscode_web/news_step1
$ **parcel index.html**
Server running at http://localhost:1234
✨ Built in 7ms
```
- API 연결하기 (포스트맨)
  - 포스트맨 해커뉴스 검색 → add fork → get에 링크 넣어 사용
  - js에서 변수로 만들어서 해당 api 사용 가능
```
const TITLE_URL = 'https://api.hnpwa.com/v0/news/1.json';
const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json';
```
- JSON.parse()
  - 링크(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)
  - JSON 오브젝트 제공 함수 → 구문을 분석, js값이나 객체를 생성한다.
```
JSON.parse(text) //text = JSON으로 반환할 문자열   
```
- ECMAScript(ES6) template literals
  - div.root 클래스를 쓸 때는 .으로 표시
  - div#root id를 쓸 때는 #으로 표시
  - Arrow function
    - 함수명 = (파라미터) ⇒{실행문 - 변수선언, 재정의, 제어}
    - JS는 함수도 객체로 인식하기 때문에 Function 생략이 가능함
    - 파라미터자리 비어도 합법
- 사용 속성
  - window.onhashchange : 새 해시값을 확인

개선점(step3)

ajax - 비동기처리 방식(관심사) - 표준을 기본으로 학습

반복코드 정리

변수로 만들기

함수로 바꾸어 양 줄이기

해커뉴스가 응답으로 JSON 포맷으로 데이터셋을 줌
JSON → Array 변경(JSON.parse(ajax.response))

function 함수명(){ return}

const ncontent = getData(CONTENT_URL.replace('@id', id));
  // const ncontent = JSON.parse(ajax.response);
  // ajax.open('GET', CONTENT_URL.replace('@id', id), false);
  // ajax.send();

function getData(url) {
  ajax.open('GET', url, false);
  ajax.send(); //서버측에 요청 보내고 응답 기다리는 중
  return JSON.parse(response);
}

getData = (url) => {
  ajax.open('GET', url, false);
  ajax.send(); //send()호출될 때 비로서 서버측에 요청이 일어남
  return JSON.parse(ajax.response);
};

DOM API 제공 createElement(), appendChild() → DOM Tree 그려지지 않음
- 양을 늘리더라도 DOM Tree가 잘 보이는 코드로 작성하여 직관적, 유지보수 유리

개발자도구센터로 코드 직접 입력 가능(단, 코드에 반영되진 않고, 빠르게 결과 확인하는 용도로만 사용함

Position & 배치(https://developer.mozilla.org/ko/docs/Web/CSS/position)
- 속성
  - static : 일반적 배치 시 사용
  - relative : 하나만 이동할 때 지정하는 속성(다른 요소, 현재 레이아웃에 영향 x) 사용
  - absolute : 가까운 요소에 대해 상대적으로 배치(현재 레이아웃에 영향 o) 사용
    - 가까운 요소의 포지션 설정 여부에 따라 위치의 기준이 달라질 수 있음.
  - fixed, sticky

relative

absolute

position 실습

가상선택자 : 부모요소에 사용한다면? 자손요소를 감싸게 해줌(인라인 요소)

부모요소 ::after{ }

//::after 를 이용해서 clear: both;

.wrap ::after {
    content: "";
    display: block;
    /* 밀려나는 것을 방지한다 */
    clear: both;
}

clear : both → ‘취소하다’라는 개념 (float left/rigth와 짝궁 개념)

  clear: both; 오른쪽/왼쪽을 취소, 가장 많이 사용
  clear: left; 왼쪽을 취소
  clear: right; 오른쪽을 취소
  clear: none; 기초값을 clear값을 설정하지 않은 것과 같다

여백 속성
- margin : 요소의 외부에 투명한 공간을 확보
- padding : 요소의 내부에 공간 확보(테두리와 콘텐츠 사이의 공간)

💡 padding은 요소의 내부에 빈 공간을 추가합니다. 반면 margin은 요소의 주위에 빈 공간을 만듭니다.

Java & JavaScript??

강의 마무리

라우터, 현재 소스의 개선점 내일 학습 예정

DaramGee

이전 포스트

[2023.10.30] 개발자 교육 26일 차 : 강의-웹 시작, html, css, JavaScript [구디 아카데미]

다음 포스트