Starting Front-end : day26~day30

Hanna·2024년 11월 13일

CSS DOMTree JavaScript VS Code html 브라우저 프론트엔드

KOSMO 24.10~25.03

목록 보기

4/12

day26. 24-11-12-화

(day25 프론트엔드 수업 내용)

앞으로의 진도

- 백엔드 : java
- 프로트엔드 :
   - html + css3 + javascript(이벤트처리), 
   - nodejs(웹서비스 이해와 개요[Restful API, 쿠키] 
   - express 플랫폼), reactjs
- 개발도구 : VSCode

- 파이썬 & 크롤링 수업
- 시각화
- 빅데이터 분석
- 머신러닝
- 딥러닝
- 강화학습
- 자연어 처리
--------------
- 트랜스포머
- 컴퓨터 비전

nodejs 설치

v22.11.0 -> 7z으로 설치 -> C:로 옮겨서 실행
터미널 에디터 Cmder 설치 : https://url.kr/pih4a6 따라하기 -> <Cmder 컨텍스트 메뉴 추가> 까지 수행

번들러란?

여러개(html, css, javascript, 이미지 ...)의 파일을 하나의 파일이나 몇 개의 파일로 합쳐주는 도구
복잡한 어플리케이션을 효율적으로 관리하고 배포하는 데 도움
ex) parcel
왜 필요한가?
현대 웹어플리케이션은 다양한 기능을 갖춘 여러 파일로 구성되어있음
이를 하나씩 불러온다면 로딩 속도가 느려지고 사용자가 불편함
-> 파일을 번들로 묶어 배포함으로써 파일 로딩을 최소화해서 성능을 향상시킴

웹 어플리케이션 만들기

그 과정에서 프로그래밍이 무엇인지 배워본다
어플리케이션이란?
- 입력된 데이터를 가지고 ...필기 삭제됨..;ㅎ

수업 진도

VS Code로 html, css 작성해보기
- D:/workspace_js/js_step1/coordinate, position 폴더
오후 : 메신저 프로젝트 -> 친구 찾기(에러-강사님해결), ID/PW 찾기 - 강사님UI코드

로컬 어플리케이션을 공부, 코딩, 개발, http

(참고: https://velog.io/@hailey199535/HTML-CSS-JavaScript)

웹(web -http(s)) 어플리케이션 구현
- http프로토콜은 인증서가 없는 웹 사이트 요청하기
- https는 인증서가 있는 (확인된)
protocol
- 컴퓨터 또는 전자 기기 간의 원활한 통신을 위해 지키기로 약속한 규약
- 프로토콜에는 신호 처리법, 오류 처리, 암호, 인증, 주소 등을 포함한다
http
- 웹에서 Server와 Client 사이에서 이루어지는 request/respnse 프로토콜
- 하이퍼 링크로 여러 페이지들이 연결되어 있다
  -> stateless
  - 서버가 클라이언트의 상태를 유지하지 않는다. - 비상태프로토콜
  - 연결을 유지하지 않아 빠른 속도로 응답 - 비연결성
배민/쿠팡이츠 : 하이브리드앱(웹+앱)
JVM(XXX.jar) -> API(class)
브라우저 : 인터프리터역할 - 번역, 통역
html5 : UI 제공
- HyperText Mark-up Language
- 프로그래밍 언어가 아니라 마크업 정보를 표현하는 마크업 언어로,
  문서의 내용 이외에도 문서를 구조나 서식으로 표기(나무위키)
css3 : 일괄적인 색상변경, 문서 편집, 글꼴 등
javascript : 이벤트처리
- 버튼은 html태그로, 이벤트처리는 javascript
- 컴파일을 하지 않는다 -> non-time시에 타입이 결정된다 -> 초기값으로 결정
- 로컬에서 동작x, 서버에서 동작함 - WAS에서
NodeJS -> javascript 잘하면 가능
-> 이렇게 작성된 파일 실행 - WAS 사용 (Web Application Server) -화면 제공

웹, 네이버 구동 설명

www.naver.com과 같은 URL을 브라우저에 입력하고 엔터를 눌렀을 때 일어나는 일은 매우 복잡한 과정으로, 여러 단계로 나눌 수 있습니다. 이 과정은 DNS 조회, TCP 연결, HTTP 요청 및 응답 등 여러 네트워크 레벨의 작업과 브라우저 내부에서 발생하는 렌더링 작업까지 포함됩니다.

URL 입력 및 처리
사용자가 브라우저 주소창에 www.naver.com을 입력하고 엔터를 누르면, 브라우저는 이를 처리합니다.
브라우저는 사용자가 입력한 문자열이 URL 형식인지, 검색어인지 판단합니다. www.naver.com은 명백히 URL이므로, 이를 통해 네트워크 요청을 수행합니다.
DNS 조회
www.naver.com은 도메인 이름으로, 실제 서버의 IP 주소로 변환되어야 네트워크에서 통신이 가능합니다. 이 작업은 DNS(Domain Name System)를 통해 수행됩니다.

브라우저는 DNS 캐시를 먼저 확인하여, 최근에 해당 도메인의 IP 주소가 캐시되어 있는지 확인합니다. 만약 캐시에 없으면, 운영체제나 네트워크에 연결된 DNS 서버에 www.naver.com에 대한 IP 주소를 요청합니다.
DNS 서버는 도메인 이름을 IP 주소(예: 125.209.222.142)로 변환해 브라우저에 응답합니다.

TCP 연결 및 TLS 핸드셰이크 (HTTPS일 경우)
브라우저는 DNS를 통해 얻은 IP 주소로 서버와 연결을 시도합니다. 이때 TCP(Transmission Control Protocol) 연결이 설정됩니다.

TCP 3-way 핸드셰이크: 브라우저와 서버는 데이터를 전송하기 전에 안전하고 신뢰할 수 있는 연결을 설정하기 위해 3단계 과정을 거칩니다.
SYN: 브라우저가 서버에 연결을 요청합니다.
SYN-ACK: 서버가 요청을 승인하고 응답합니다.
ACK: 브라우저가 이를 확인하고 데이터 전송을 시작합니다.
만약 HTTPS 프로토콜을 사용하는 경우, TCP 연결 후 TLS/SSL 핸드셰이크가 추가로 진행됩니다. 이 과정에서 클라이언트(브라우저)와 서버가 암호화된 통신을 위한 키를 교환하여 보안을 강화합니다.

HTTP 요청
TCP 연결이 설정되면, 브라우저는 서버에 HTTP 요청을 보냅니다. 이 요청은 웹 페이지에 필요한 리소스(HTML, CSS, JavaScript, 이미지 등)를 요청하는 과정입니다.

GET 요청: www.naver.com에 대한 요청은 보통 GET 요청으로 이루어집니다. 이는 서버에게 특정 리소스를 달라는 요청입니다.
HTTP 헤더: 요청에는 여러 정보를 포함한 HTTP 헤더가 전송됩니다. 예를 들어, 브라우저 정보(User-Agent), 쿠키, 캐시 상태 등이 포함됩니다.

서버 응답
서버는 클라이언트의 요청을 처리하고, HTTP 응답을 보냅니다.

HTTP 상태 코드: 응답에는 상태 코드가 포함됩니다. 200은 정상적인 응답, 404는 요청한 페이지를 찾을 수 없다는 의미입니다.
HTML 문서 전송: 서버는 요청한 리소스를 응답으로 보내는데, 이때 브라우저는 HTML 문서를 우선적으로 받습니다. 이 문서가 웹 페이지의 뼈대입니다.

브라우저의 HTML 파싱 및 DOM 생성
브라우저는 서버에서 받은 HTML 문서를 파싱하기 시작합니다. 이 과정에서 DOM(Document Object Model) 트리가 생성됩니다.

브라우저는 HTML을 한 줄씩 읽어가며 DOM 트리를 구성합니다. 이때 img, script, link 등의 외부 리소스를 요청하는 태그를 만나면 추가적으로 요청을 수행합니다.

CSS 및 JavaScript 처리 -> API가 처리해줌
HTML을 파싱하는 과정에서 CSS와 JavaScript 파일도 함께 요청되고 처리됩니다.
CSSOM 생성: 브라우저는 CSS 파일을 요청하여 파싱하고 CSSOM(CSS Object Model) 트리를 생성합니다. 이 트리는 DOM 트리와 결합되어 페이지의 스타일과 레이아웃을 정의합니다.
JavaScript 실행: 자바스크립트는 브라우저의 JavaScript 엔진(크롬의 경우 V8 엔진)에서 실행됩니다. 자바스크립트는 DOM을 조작하거나 이벤트를 처리하는 등의 역할을 합니다.
만약 script태그가 defer 속성이 없다면, 파싱이 멈추고 스크립트를 먼저 실행합니다.
이미지 및 기타 리소스 로딩
HTML, CSS, JavaScript가 모두 처리되는 동안, 브라우저는 이미지, 폰트, 비디오와 같은 추가적인 리소스를 비동기적으로 요청하고 다운로드합니다.

이러한 리소스는 페이지의 렌더링 과정에 추가적으로 영향을 줍니다. 특히, 큰 이미지나 비디오 파일은 페이지 로드 속도에 영향을 미칠 수 있습니다.

렌더 트리 생성 및 레이아웃
브라우저는 DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 이 렌더 트리는 화면에 표시할 요소들을 기반으로 만들어집니다.

레이아웃 계산: 브라우저는 각 요소의 위치와 크기를 계산합니다. CSS 규칙과 화면 크기(뷰포트)에 따라 페이지 레이아웃이 설정됩니다.

페인팅 (Painting)
브라우저는 계산된 레이아웃을 기반으로 페이지를 페인팅(Painting)하여 화면에 표시합니다.

이 과정에서 브라우저는 각 요소를 픽셀 단위로 렌더링하고, 화면에 그려지게 됩니다.

페이지 표시 및 사용자 상호작용 처리
이제 브라우저는 완전한 웹 페이지를 렌더링하고, 사용자는 이를 볼 수 있습니다. 이후에는 페이지에서 발생하는 사용자 상호작용(클릭, 입력, 스크롤 등)을 처리하고, 자바스크립트가 동적으로 DOM을 조작하며 페이지를 업데이트할 수 있습니다.

요청-처리-응답 -> 웹서비스 개요
html+css+javascript
하나의 패키지로 묶어줌 - 번들러 지원
- 웹팩(무겁,다양한 서비스), parcel
번들링 -> dist폴더 생성, 그 안에 배포 버전 파일 존재
웹페이지 요청 : get방식(디폴트), post방식
같은 요청 -> 브라우저에서 인터셉트, 이전의 출력결과 내보냄 - 응답 (브라우저도 캐시메모리를 사용)
post방식은 브라우저가 인터셉트X
- 해당 요청이 이전에 있었던 요청인지 아닌지 모름
무조건 서버로 요청 -> 연결 끊었다가 다시 응답 오면 연결, 응답 다운로드
클라이언트의 요청 및 응답 처리 -> 브라우저(캐시) ==> WAS 실행
WAS 안에서
- workspace_js(작업공간) 실행 <- 번들러로 묶음(parcel 사용)
  - js_step1 파일 (프로젝트이름)
- npm init -y -> package.json 생성 : 의존성 관리
parcel번들러가 배포하면 dist에 담고 관리하고 있다
브라우저 안에 내장 객체가 있다(API)

API란? 
  API는 Application Programming Interface(애플리케이션 프로그램 인터페이스)의 줄임말입니다.    
  API의 맥락에서 애플리케이션이라는 단어는 고유한 기능을 가진 모든 소프트웨어를 나타냅니다.
  인터페이스는 두 애플리케이션 간의 서비스 계약이라고 할 수 있습니다.

JAVA, 백엔드 쪽 진로

자료구조, 알고리즘(코테), DB 공부!!
-> 백준 알고리즘 참고

html 실습

html문서는 위에서 아래로 순차적으로 읽어 처리(자바와 다름) : 절차지향적
javascript는 html태그의 요소에 접근해야 함
-> html화면이 모두 랜더링이 된 다음에야 그 요소를 참조할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coordinate</title>
    <!-- 주석이다: 주석색 변경:settings.json 36번줄 -->
    <!-- html문서는 위에서 아래로 순차적으로 읽어 처리(자바와 다름):절차지향적
    javascript는 html태그의 요소에 접근해야 함 
    -> html화면이 모두 랜더링이 된 다음에야 그 요소를 참조할 수 있다. 
    -->
    <script src="./main.js"defer></script>
    <link rel="stylesheet" href="./main.css"/>
</head>
<body>
    <div class="line horizontal"></div>
    <div class="line vertical"></div>
    <img src="../images/target.png" alt="target" class="target">
    <span class="tag">Hello</span>
</body>
</html>

CSS 문법

position : relative(디폴트) or absolute
- absolute : 무조건 기준점이 부모태그가 아니라 position이 있는 부모 요소 중에 가장 가까운 요소가 기준점이 된다. 그래서 p태그에 부모인 right에 position이 없으니 위에 wrap을 보는데 여기도 position이 없으니까 부모인 body의 위치를 따라간다
- 결론
  relative : 자기 영역 유지하며 위치
  absolute : 자기 영역 무시, 뜯어져 나옴

day27. 2024-11-13-수

복습

html의 DOM Tree (Document Object Model)
- head : 보이지 않음
- body 보이는 것은 이것! (출처: https://url.kr/uzhxqg)

프론트 엔드

document -> main.html
선택자의 종류
- class 선택자 - .test{}
- id 선택자 - #root{}
- node선택자(태그tag선택자) - body {}
세가지 선택자에 접근할 수 있는 함수 : querySelector() -> document내장객체가 지원
- document.querySelector(".test"); .클래스
- document.querySelector("#test"); #id
- document.querySelector("test"); 노드

html 실습

- div -

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: black;
        }
        div{
            width: 250px;
            height: 250px;
            background-color: blanchedalmond;
            margin-bottom: 4px;
            border-radius: 6px;
        }
        .special{
            background-color: lightsalmon;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="special"></div>
    <div></div>
    <div></div>
</body>
</html>

선택자를 접근할 수 있는 API가 있다
document, 함수이름: querySelector(클래스선택자|아이디선택자|태그선택자)
-> 브라우저가 지원하는 내장객체 - document, window - Javascript영역
무엇을 보았나?
div는 블록요소이다.(span은 인라인 요소)
블록요소는 크기가 있어서 노드가 차지하는 공간을 제외한 나머지는 여백으로 채운다

- span -

  span.html>>>>>>>>>>>>>>>>>>>>>>
  <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: black;
        }
       
        span{
            /* display: inline-block; */
            width: 250px;
            height: 250px;
            background-color: blanchedalmond;
            margin-right: 4px;
            border-radius: 30%;
        }
        
    </style>
</head>
<body>
    <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</body>
</html>

span태그는 인라인 요소 - 자체크기가 없어 화면출력x
span은 width와 height적용 되지 않음
- display 속성 필요 -> div블록요소처럼 사용 가능

- a.html - 
<body>
<script src="./main.js"defer></script>
<div class="root"></div>
</body>

xxx.html, xxx.js, xxx.css 모두 로컬에 다운로드 된 후에 로컬 브라우저가 처리
- 다운로드 되는데 시간이 걸린다
시점의 문제로 인해서 special선택자를 찾을 수 없는 상황 발생할 수 있음
- html문서는 절차지향적이라서 위에서 아래로 읽어간다
- 따라서 main.js를 먼저 실행하면 아직 DOM Tree가 그려지지 않은 상태라서 undefined 발생
- 예시)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const div_root = document.querySelector(".root");
        alert(div_root)
    </script>
    <div class="root"></div>
</body>
</html>

결과)

--> div를 script보다 우선으로 두어야 정상적으로 작동한다

css 사용법

div*10 -> Emmet단축키로 검색
.wrap > .left+.right : Emmet단축키

javascript 실습

main.js -> 타점 이동시키기

//자바 주석과 같음
const vertical = document.querySelector(".vertical"); //상수 선언
const horizontal = document.querySelector(".horizontal");
const target = document.querySelector(".target");
const tag = document.querySelector(".tag");

document.addEventListener('mousemove',(event)=>{
    const x = event.clientX; //상수 선언 
    const y = event.clientY;
    console.log(`${x}, ${y}`)
    vertical.style.left = `${x}px`;
    horizontal.style.top = `${y}px`;
    target.style.left = `${x}px`;
    target.style.top = `${y}px`;
    tag.style.left = `${x}px`;
    tag.style.top = `${y}px`;

    tag.innerHTML = `${x}px, ${y}px`;
    
})

상수 선언 - const - 재정의 불가 - for문 사용 불가
변수 선언 - let - 변하는 값을 할당 - for문에서 사용
- in java) 상수 final String msg =null / 변수 String msg =null

Postman - 해커뉴스

해커뉴스 커뮤니티 사이트를 참고하여 기능 구현해보기

실습 목표

웹애플리케이션을 먼저 만들어보면서 그 과정에서 프로그래밍이라는 것이 무엇인지 알아본다.

DOM API를 활용해보기 (목표: 브라우저가 DOM Tree 그리게 하자)

애플리케이션이란?

입력된 데이터를 가지고 처리과정을 거쳐서 출력 형태로 변환하는 과정 -> 본질
핵심 감각 -> 핵심 기술 익히는 데 도움

해켜뉴스 애플리케이션 만들기

입력 데이터 만들기
- 지금은 해커뉴스의 입력데이터 얻어오는 사이트 사용 (원래는 서버 만들어 처리)
서버가 없다는 재약 -> 해커뉴스에서 수급
비동기화는 고려하지 않기

html, js 작성

<<<news.html>>>
  
  
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>해커뉴스-step1</title>
    <script src="./news.js"defer></script> <!-- defer 반드시 붙여야함 -->
</head>
<body>
    <div id="root"></div>
</body>
</html>

<<news.js>>>
  
  
const NEWS_URL = "https://api.hnpwa.com/v0/news/1.json"; //상수 선언
//비동기와 동기를 지원하는 객체 - XMLHttpRequest
const ajax = new XMLHttpRequest();

ajax.open("GET", NEWS_URL, false);
ajax.send(); //실제 요청 진행

console.log(ajax.response);

const newList = JSON.parse(ajax.response);

const ul = document.createElement("ul");

for(let i = 0;i<20;i++){
    const li = document.createElement("li");
    li.innerHTML = newList[i].title;
    ul.appendChild(li);
}

document.querySelector("#root").appendChild(ul); //id선택자 root

결과 : 화면 출력 (제목: 해커뉴스-step1)

쿼리문 실습

--사원의 부서이름을 알아보자!

select empno, ename, dname
 from emp, dept;
 
 -- 조회결과는 14명의 사원에 대한 부서이름을 출력한다
 --14 ,4 -> 14*4= 56이 출력 - 카타시안 곱
 -- 조인 : 문제 해결 방법 
 
--ERD(Entity Relation Diagram) -> ER win

-- 하나의 부서에 근무하는 사원이 몇명인가요?

select count(empno) from emp where deptno=40;

select count(empno) from emp where deptno=30;

select count(empno) from emp where deptno=20;

select count(empno) from emp where deptno=10;


select deptno, count(empno) from emp group by deptno;

--원래 문제로 돌아가서 사원의 부서이름을 알아보자!
--Natural 조인, euql 조인
--emp에 부서이름은 없지만 부서번호가 있다!
-- emp, dept는 부서번호(dept의 pk)로 연결되어있음

- UID바 (unique identifier bar)
- 테이블 각 엔티티에 대한 고유 식별자를 표시
- 그 대상은 주로 pk를 시각적으로 나타냄
- 각 엔티티가 특정 속성을 통해서 고유하게 식별될 수 있도록 함
- empno, deptno : 고유식별자(UID)
- PK는 인텍스 제공됨, UNIQUE, NOT NULL
- FK는 중복 허락, 인덱스 없다
-- emp에서 empno는 pk, deptno는 fk

새로운 테이블 만들기 : DDL

ER win : 항목 만들기

오라클
F5 누르기 -> 하단에 "Modified" -> 생성완료

메신저프로젝트 : 내 친구 찾기

오라클 쿼리문
- talk_member DB
- talk_friend DB

문제: 멤버아이디 : 나, 'kiwi' + 내친구의 이름을 출력
결과

자바 언어 문법

리스트 내부 값 살펴보기

System.out.println(tvo);
System.out.println(tvo.toString()); 
//tvo는 변수담는곳, 두 결과 똑같이 내부 값 보여줌
System.out.println(tList);
System.out.println(tList.toString());
//tList와 tList.toString()은 동일하게 내부 리스트 내용 출력

결과

TalkVO(mem_id=12, mem_pw=null, mem_nick=123, mem_name=123, gender=null, zipcode=0, mel_addr=null, gubun=mem_id, keyword=1)
TalkVO(mem_id=12, mem_pw=null, mem_nick=123, mem_name=123, gender=null, zipcode=0, mel_addr=null, gubun=mem_id, keyword=1)
[TalkVO(mem_id=12, mem_pw=null, mem_nick=123, mem_name=123, gender=null, zipcode=0, mel_addr=null, gubun=mem_id, keyword=1)]
[TalkVO(mem_id=12, mem_pw=null, mem_nick=123, mem_name=123, gender=null, zipcode=0, mel_addr=null, gubun=mem_id, keyword=1), TalkVO(mem_id=12, mem_pw=null, mem_nick=123, mem_name=123, gender=null, zipcode=0, mel_addr=null, gubun=mem_id, keyword=1)]

day28. 2024-11-14-목요일

수업 진도& 생성파일

js.step1 > news.step1 - 화면에 기사 제목 출력하기
news.step2
news.step2.test : js 기초 연습 파일들
src.classes.repeat : java 기초튼튼 복습

복습

http -> s : stateless - 상태가 유지되지 않는다 - 비상태프로토콜
로컬서비스 -> 웹서비스로 넘어가는 것
전처리와 후처리를 신경쓰자 -> 결국 코잘러가 됨
javascript도 백엔드에 사용 -> 잘하자~~

html, css, js 출력가능한 사이트

https://jsbin.com/?html,css,js,output

해커뉴스

코드로 무엇을 할 것인가?

DOM API를 활용해보기(브라우저가 DOM TREE를 그린다)

DOM API 활용하기

제공되는 함수를 사용할 수 있어 편리함, 가독성은 나쁨(DOM Tree 구조가 안보임)
xxx.html을 객체로 받아주는 내장객체가 있다 - document
태그를 생성하는 함수는 createElement(태그이름);
태그도 상속관계
- ul은 상위태그, li는 하위태그
- li태그를 for문 처리가 가능함
- appendChild(태그변수명) : 부모(ul)태그를 생성한 후에 자손태그(li)를 추가하는 함수

해커뉴스 STEP2

STEP1: 기사 제목 출력
-> STEP2 : 기사 제목 클릭 > 기사 내용의 데이터 가져오기, UI에 데이터 타이틀을 다른 뷰로 처리하기
INTRO
- 클라이언트 어플리케이션 만들때, 화면 전환이 제일 관심사. 어떻게 화면전환 할것인가?

JavaScript js

내장객체 : 변수 & 함수 있음 (ex - document)
내장함수 검색 : mdn API에서 (java의 오라클 api 같은 표준)
- document : DOM API - CSS, JS를 객체로 HTML이 받아주게 한다
js에는 자바의 List, Map 같은 자료구조 없음, 배열만 있다
같은 이름의 함수 생성 불가 (java의 overloading 없음)

여러 메모

postman에서 사용하는 url : 크롬 부라우저에서도 사용 가능 -> json 확장자 설치해주면 보기 좋게 출력해준다
hashchange : event 처리해주는 > step2에서 기사제목 클릭했을 때 이벤트 처리 하겠다 - 화면 전환
- The hashchange event is fired when the fragment identifier of the URL has changed (from mdn)

ajax = new XMLHttpRequerst();
ajax.open("GET","URL", false) // 설정
						// false : 비동기로 하겠다. (true-동기)
						// GET 방식으로 요청한다
ajax.send(null) // 서버로 요청 전송

요청 : stateless 상태로 브라우저에 연결(요청시에만 연결된 상태가 된다)
js 기초 연습: test.js 만들고 확장자 JS REPL 활성화 시켜서 해보자
substring() : js 함수 (1,5)처럼도 사용가능 (이미지 맨 아래줄)

postman은 무엇인가?

https://binit.tistory.com/17

java 기초 튼튼 복습!!!

생성자에는 리턴타입이 없다. 클래스 이름이 온다.

day29. 2024-11-15-금

생성파일

vscode : JS_step1.JSLab -> 기초 배우기
news.step2 : 클릭하면 이벤트 처리 --> 한줄씩 주석 설명넣음!!!!!!!
news.step3 : 반복되는 코드 함수, 상수 선언 통해서 줄이기
news.step4 : DOM API 사용하지 않고 문자열로 DOM Tree가 잘보이도록
news.step1.1.json/json1~2.html : 1.json의 정보 출력하기
new.step2.moveTo : url 버튼 만들자~
news.step2.query.html : 사용자가 입력한 url 파라미터 읽어오자-백엔드기능

JS 기초 실습

변수 선언 및 컴파일 설명
undefined
벡틱이란 무엇일까?

setTimeout(()=>{},1000);
- ()=>{}함수를 1000ms(1초) 이후에 실행하도록 함
- () : 함수 안에서 사용할 파라미터가 없다면 비워놔둬 된다
  
  (this를 사용하지 않는 경우에는 function() {}와 () => {}는 거의 동일하게 동작한다고 생각할 수 있습니다. _<html, Javascript 기초 문법> 글 참고하기 )

자료형 (Data Type)
- 원시형 자료(Primative type)
  - 특정값이 메모리에 바로 저장
  - 문자(String)
  - 숫자(Number)
  - 논리형(boolean)
  - undefined : 변수를 선언하고 그 값을 할당하지 않으면 이게 저장됨(에러상황)
- 참조형 자료(Reference type)
  - 값이 위치하고 있는 참조 주소값만 메모리에 저장(관련 내장 함수까지 포함)
  - null(Object) : 명시적으로 특정 변수의 값을 비워둘 때
  - array(Object) : 배열 매우 중요 - 연관된 값들을 그룹을 묶어서 관리하는 자료 형태
  - 객체 : Object데이터를 key라는 인덱싱을 통해서 자료를 구조적으로 묶어놓은 형태

연관된 데이터 관리
얕은복사인가? - 한 객체를 바꾸면 전부 바뀐다 : 하나로 공유!!!!!

${} 안에 있는것이 객체임

js, html 실습

가독성 비교
- 비추천
- 추천

JSON

https://velog.io/@surim014/JSON이란-무엇인가

url 버튼 만들쟈 - html

a태그에 링크드인을 만들어 줄때 : href 꼭 사용

리팩토링

news.step3에서 함수 < getData >

		function getData(url){
		    //반복되는 ajax코드는 호출주소url은 매번 다름 -> 함수 파라미터로 넣어줌
 		   ajax.open("GET", url, false);
 		   ajax.send(); //실제 요청 진행
 		   return JSON.parse(ajax.response); //처리 결과를 반환하자
		}
		//ajax.open("GET", NEWS_URL, false);
		//ajax.send(); 
		const newsList = getData(NEWS_URL);
		//ajax.open("GET", CONTENT_URL.replace("@id",id), false);
		//ajax.send(); 
		const newsContent = getData(CONTENT_URL.replace("@id",id))

실제로 네트워크를 통해서 데이터를 가져오고 js 객체로 반환하는 코드를 위임
사용하는 코드쪽에서 단순해짐.
-> 네트워크 사용이 많아지더라도 코드의 양은 늘어나도 복잡도가 늘어나는 일이 없도록 함
==> 리펙토링 : ui 변화는 거의 없으나, 내부 코드를 개선함을 의미 (ui 개선도 리펙토링이긴 함)

news.step4.개선해보자

DOM API를 이용해서 UI의 구조가 잘 드러나지 않는 문제점

HTML의 구조 알기 힘듦
- 코드로 li,a,div,ui태그를 다루고 있음
  createElement(), appendChild() 등등
  -> 일일이 살펴보며 진행과정을 읽어봐야 파악이 됨
  -> 실제 마크업 elementemf, 즉 태그의 구조, 위계, 위치가 명확하게 보임
- ui는 간단함에도 불구하고 실제 코드 파악 어려움
  -> ui 복잡해지면 코드(DOM API)로 ui의 마크업이 구조파악 훨씬 힘들어진다
  ===> 개선 필수다!!!

개선 전)

개선하자

-> DOM API 자체를 최대한 사용하지 않는 것 --아이러니ㅎㅎ
===>> 바로 문자열을 가지고 UI를 만드는 방법! - 템플릿 리터럴 소개(`` : 벡틱)

개선 후)

Hanna

computer sight

이전 포스트

학습 day21-day25

다음 포스트

Starting Front-end : day26~day30

KOSMO 24.10~25.03

앞으로의 진도

nodejs 설치

번들러란?

웹 어플리케이션 만들기

수업 진도

로컬 어플리케이션을 공부, 코딩, 개발, http

웹, 네이버 구동 설명

JAVA, 백엔드 쪽 진로

html 실습

CSS 문법

복습

프론트 엔드

html 실습

- div -

- span -

css 사용법

javascript 실습

Postman - 해커뉴스

해커뉴스 커뮤니티 사이트를 참고하여 기능 구현해보기

실습 목표

애플리케이션이란?

해켜뉴스 애플리케이션 만들기

쿼리문 실습

새로운 테이블 만들기 : DDL

메신저프로젝트 : 내 친구 찾기

자바 언어 문법

수업 진도& 생성파일

복습

html, css, js 출력가능한 사이트

해커뉴스

코드로 무엇을 할 것인가?

DOM API 활용하기

해커뉴스 STEP2

JavaScript js

여러 메모

postman은 무엇인가?

java 기초 튼튼 복습!!!

생성파일

JS 기초 실습

js, html 실습

JSON

url 버튼 만들쟈 - html

리팩토링

news.step3에서 함수 < getData >

news.step4.개선해보자

DOM API를 이용해서 UI의 구조가 잘 드러나지 않는 문제점

개선 전)

개선하자

개선 후)

학습 day21-day25

day31~day39

0개의 댓글