Recording/멋쟁이사자처럼 BE 13기

[멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_24일차_"자바스크립트"

LEFT 2025. 1. 6. 17:24

🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁
TIL 회고 - [24]일차

🚀24일차에는 CSS의 float속성, clear속성, 폰트 사용법 등과 함께 자기소개 페이지의 틀을 만들어볼 수 있었다.

자바스크립트를 시작하면서 자바와 비슷하면서도 다른 면이 많은 문법을 배울 수 있었다.타입을 정확히 선언하지 않지만 var, let, const 변수에 담을 수 있는 것과 var은 더이상 권장하지 않는 다는 점을 배울 수 있었다.

SPA

  • Single Page Application (단일 페이지 애플리케이션)
  • 사용자의 몰입도를 높이기 위한 기술로 OTT, 인스타그램 앱 같은 서비스에서 사용
  • 웹페이지의 최신 업데이트를 빠르게 반영하여 로딩 속도 향상 및 트래픽 감소 가능
  • 페이지 전환이 부드러워지고, 페이지 로딩 시간을 단축하여 높은 몰입도 제공

  • ❓SPA 등장 이유
    ➡️브라우저에서는 HTML페이지 하나를 만들어놓고 요청하는 곳에서
    클라이언트 단에서 자바스크립트를 활용해 동적으로 페이지를 꾸미게만들어 웹페이지 로딩속도와 성능향상을 개선

  • 정리하자면,
    ➡️사용자 요청 페이지를 서버가 생성해서 요청 시 마다 전달하지 않고
    클라이언트에서 동적으로 페이지를 리로딩하는 방식
    따라서 첫 페이지 요청시에만 리소스를 로딩하고,
    그 이후에는 페이지 새로고침이 필요없이 필요부분만 서버로부터 받아 화면을 갱신.

React

  • 페이지의 UI를 만들기 위한 자바스크립트 라이브러리
  • React로 작성된 Application은 SPA(Single Page Application)이라 부름

Next.js

  • React를 기반으로 웹 애플리케이션 개발에 필요한 틀, 솔루션 등을 제공해주는 도구이자 웹 개발 프레임워크

앵귤러 (Angular)

  • 복잡한 기능도 안정적으로 개발 가능한 자바스크립트의 프레임워크
  • 웹, 모바일프로젝트 생성, 테스팅, 빌드, 배포 까지의 다양한 기능까지 제공
  • 웹 애플리케이션과 네이티브 앱을 개발하기 위해 사용되는 “오픈소스 프레임워크”
  • TypeScript로 개발되며 리액트, 뷰와 함께 자주 언급되는 프론트엔드 기술
  • SPA 이기때문에 페이지를 이동해도 필요부분만 부분적으로 교체하게되어 성능적으로 효율적

❓프레임워크와 라이브러리의 차이점

➡️애플리케이션의 제어 흐름 주권을 누가 가지느냐의 차이
프레임워크는 제어 흐름의 주권을 스스로 가지는 반면 라이브러리는 제어 흐름의 주권을 개발자가 가짐

➡️라이브러리와 달리 프레임워크는 이미 개발자가 반드시 따라야하는 규칙을 가지고 있다.
(ex. DB연동 방법 등에 대한 규칙)

➡️프레임워크
- 개발자가 따라야 하는 가이드를 제공하고, 개발할 수 있는 범위가 정해져있다는 특징
- ex.
JAVA 서버 개발 = Spring Framework
웹 개발 = Angular, Vue.js
Python 서버 개발 = Django, Flask
안드로이드 앱 개발 = Android

➡️라이브러리
- 단순 활용가능한 도구들의 집합으로 미리 작성된 (코드, 변수, 함수, 클래스) 포함
- 재사용가능한 코드들의 모음으로 "프로그램에 직접 포함되어 실행됨"
- ex.
JAVA = java.lang, java.util, java.io, MAVEN
자바스크립트 = jQuery, React

❓앵귤러 (Angular) vs 뷰(Vue) vs 리액트(React)

➡️앵귤러와 뷰는 프레임워크이기에 부가적 설계가 필요하지 않지만
➡️리액트는 라이브러리이기때문에 기능 구현을 위해서는 부가적 설계가 필요

규모가 크고 기능이 다양하게 필요한 프로젝트 - 앵귤러, 뷰를 사용
- 앵귤러는 양방향 데이터 바인딩 개념으로 데이터 값이 한쪽에서 변화하면 다른 쪽에서 바로 업데이트
- 반면 리액트나 뷰는 단방향 데이터 바인딩으로 화면 업데이트 코드를 매번 작성해놔야하는 번거로움

float 속성

  • 객체가 “뜬다”는 개념
  • 따라서 두 객체(box1, box2)의 기존 위치를 (0,0)이라 가정했을때
    float속성이 없는 box1과 float속성을 가지는 box2는 겹쳐지게 된다.
  • 즉 box1위에 box2가 위치할 수 있게된다. (box1 위에 떠있는 개념인 것(겹치게 된다))
  • float:left, float:right 등의 옵션값이 사용
  • ex. float:right
    ➡️가장 우측을 기준으로 우측부터 box1, box2가 배치되는 순서

  • 만약 float를 사용한 객체와 겹쳐지지 않게하기 위해서는 clear:both; 속성을 추가
.box1 {
  float: left;
}
.box2 {
  float: left;
}
.box3 {
  clear: both;
}
  • box3 객체 : float속성에 포함되지 않고 float속성의 객체들 그 다음으로 배치해달라는 의미이므로
    float객체들과는 구분되어져 존재하게 된다.

  • 왼쪽은 box3에 clear:both를 사용하지 않은 결과, 오른쪽은 box3에 clear:both를 사용한 결과

text-shadow 속성

  • 그림자 속성
  • text-shadow : 오른쪽 / 아래 / 흐림도 / 색상
  • text-shadow : 5px 5px 5px black

CSS 분리

  • HTML에서 <head> → <style>태그 안에 CSS를 작성할 수도 있지만 일반적으로는 CSS파일을 분리
  • .css : 따로 CSS파일을 작성하여 HTML에 CSS 사용을 명시
    ➡️<link rel=”stylesheet” type=”text/css” href=”exam.css”/>
    ➡️stylesheet을 생성하고 타입은 text로 된 css파일, 경로는 exam.css

  • 여러 개의 css파일도 <link>로 선언 가능하다.

  • ❓CSS분리의 이유
    ➡️다른 HTML에서도 사용가능하고, 유지보수 용이, 코드 재사용성이 증가

웹폰트 사용

  • 구글 폰트 검색
  • Get Font를 통해 <link>는 <head>에 삽입, <style>에는 css코드 삽입
  • 폰트를 사용하고자 하는 태그에서 class=”폰트이름”으로 접근

CSS 초기화

  • 브라우저마다의 불러오는 스타일이 다를 수 있으므로 CSS 초기화 코드를 이용하여 css를 초기화
  • ex. <li>태그들이 css 초기화 코드의 ul { list-style:none; } 로 인해 리스트처럼 보이지 않고 일반 텍스트로 보이게된다.

▶️실습 - common.css 작성

  • CSS 초기화 후에는 사용자가 직접 CSS를 정의하며 작성해나감
  • common.css : 공통적으로 가져야할 css를 정의
  • 하이퍼링크에 밑줄 속성과 색깔 제거
a {
	text-decoration:none;
	color:inherit;
}
  •  <a 태그>에서 하이퍼링크의 밑줄 속성 제거와 글자 색은 상속받아 사용 (기본값인 검은색)

body{
    width:1080px;
    margin:0px auto; /*상하(0px), 좌우(auto)*/
    background-color: rgb(208, 235, 177);
}
  • 일반적으로 body의 너비는 1080px, margin은 상하, 좌우를 나눠 지정한다.

 

header,
section.main,
footer {
  margin: 0px auto;
  background-color: rgb(167, 245, 211);
  box-sizing: border-box;
  margin-bottom: 10px;
}

header ul {
  float: right; /*메뉴 레이아웃이 오른쪽에 붙을 수 있게 설계*/
  margin-top: 20px;
  margin-right: 20px;
}

header ul li {
  /*메뉴의 레이아웃은 가로로 정렬하도록 inline설정*/
  display: inline-block; /*각 메뉴들이 각자의 너비를 가질 수 있도록 변경*/
  width: 100px; /*각 메뉴들의 너비 설정*/
  background-color: rgb(71, 93, 84);
  border-radius: 20px;
  padding: 10px;
  box-shadow: 1px 2px 7px 1px grey;
  
  /*텍스트 설정*/
  color: aliceblue;
  font-weight: bold;
  text-align: center;
}
  • 그 후 header, section의 main, footer 등의 CSS를 작성해나가며 초기화했던 css들을 완성하게됨

  • 사진 페이지 추가 (모서리 속성 추가, 그림자 속성 추가, 글자 가운데 정렬 등)

사진 페이지

  • 사진 테두리 추가, 사진 기본 크기 (width, height) 설정, 콘텐츠들 정렬, 사진 Description 추가 등

자바스크립트

 

페이지 다루기

▶️실습 - Google 홈페이지의 "Gmail" 텍스트 변경

  • 구글의 Gmail을 내가 원하는 텍스트로 변경
  • 개발자 도구 F12에서 선택 도구로 Gmail의 클래스이름을 알아내고 Console에서 querySelector() 활용
document.querySelector(".Gmail클래스이름");

  • .innerHTML로 문구 변경

 

  • 이처럼 자바스크립트는 HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 언어
    ➡️클라이언트 단에서 브라우저의 내용을 수정할 수 있도록함

▶️실습 - Google 홈페이지의 "이미지" 텍스트 변경

  • “Gmail”과 “이미지 검색”은 class 이름이 같은 것을 확인할 수 있다 (gb_W)
  • 이 둘을 구분하기 위해서는 “Gmail”이나 “이미지”처럼 텍스트가 다르므로
    텍스트를 기반으로 구분지어야한다.

  • gb_W클래스에 해당하는 모든 클래스 요소를 선택하고 각 요소의 텍스트를 체크한 후 원하는 요소 선택

// 1. 모든 gb_W 클래스 요소 선택
const AllgbW = document.querySelectorAll(".gb_W");

// 2-1. 위의 AllgbW 활용 ("이미지" 텍스트를 가진 요소 찾기)
const imageElement = Array.from(AllgbW).find(el => el.textContent.includes("이미지"));

// 2-2. from에서 바로 참조 ("이미지" 텍스트를 가진 요소 찾기)
const imageElement = Array.from(document.querySelectorAll(".gb_W").find(el => el.textContent.includes("이미지"));

// 3. 텍스트 변경
imageElement.innerHTML = "Juunb's Image";
  • querySelectorAll() : 해당 이름을 가진 모든 클래스를 AllgbW변수에 담는다.
  • imageElement : AllgbW 변수로부터 받아온 값들을 배열로만들고 find()함수를 활용
    EL 표현식으로 textContent(혹은 innerText)의 조건을 찾음.

  • includes("이미지") : 해당 클래스 태그의 텍스트가 "이미지"인 것을 찾음
  • imageElement.innerHTML : 해당 클래스 태그의 텍스트를 원하는 값으로 변경함

Gmail과 이미지 를 모두 변경한 결과

자바스크립트 개념

  • <head> 태그 안에서 <script>를 통해 자바스크립트 사용 가능
  • 또한 <body> 태그 안에서도 <script>를 통해 자바스크립트 사용 가능
  • <script src=”inner.js”.../>
    ➡️src 속성을 통해 속성값으로 경로명을 넣어주어 사용 가능

회원가입 로직 분석해보기

  • 클라이언트가 브라우저에서 회원가입을 하고자할때
    - 회원가입 요청
    - 회원가입 폼 전송 요청

  • 2가지의 요청이 서버에 전달

  • 회원가입에 대한 정보를 입력할때 모든 정보를 서버에 전송 후
    다시 그 정보에 대한 응답을 재전송하는 과정은 불필요할 수 있다.
  • 자바스크립트를 사용하면 비밀번호에 대한 조건을 체크할때 브라우저가 자바스크립트로서 브라우저에서 바로 처리

자바스크립트 문법

  • console.log(”안녕”); ➡️ 콘솔 창에 “안녕”출력

  • alert(”안녕”); ➡️ 알림창 “안녕” 발생

  • typeof(변수);
    ➡️ 해당 변수의 타입을 출력
  • ex. typeof(alert); ➡️ function이 출력된다.

  • 문자열은 “ “ (큰 따옴표) 혹은 ‘ ‘ (작은 따옴표) 로 감싸서 선언

  • 자바스크립트에서의 “없음” 데이터 타입
    ➡️null : const data = null; 처럼 “실제 값이 없을때” 사용
    ➡️undefined : let data; 처럼 “아직 값이 설정되지 않은 것”을 의미

  • 두 값의 일치를 비교할때는 == 대신 === 사용 권장 (실수 방지)
  • 두 값의 불일치를 비교할때는 !== 대신 !== 사용 권장 (! = 은 타입 검사를 하지 않는다)
    ➡️!= : 알아서 형변환해서 비교, 타입이 달리고 값이 같으면 true
    ➡️!== : 타입과 값이 모두 일치할때 true

▶️실습 - (== 와 ===의 차이점)

const i = 1;
const j = "1";

console.log(i == j); // 타입을 알아서 형변환해서 비교 : 값이 같으므로 true
console.log(i === j); // 타입과 값이 모두 일치하는지 비교 : 타입이 다르므로 false

 

▶️실습 - 일반적인 함수 선언 방법

const a = 1;
const b = 2;
function add(a, b){
	return a + b;
}

 

▶️실습 - 사용자에게 입력받기 (prompt())

  • prompt() : 사용자에게 입력 받기
let number = prompt("숫자를 입력하세요");
console.log(typeof number); // 문자열 타입
  • 숫자를 입력받고 그 숫자의 타입을 바로 출력 (prompt()로 받은 데이터는 “문자열” 타입으로 출력)
  • number를 숫자로 사용하기 위해서는 형변환이 필요

▶️실습 - 형변환

let castTest = parseInt(number);
let castTest2 = Number(number);
  • 자바스크립트의 형변환 2가지 방법
    ➡️1번째 방법 : 내장 함수 parseInt() 사용
    ➡️ 2번째 방법 : 내장 함수 Number() 사용

일급 객체

  • 하나의 객체로 취급한다는 의미
  • 자바스크립트는 함수를 “일급 객체”로 취급 (파이썬 또한 “일급 객체”로 취급)

▶️실습 - 일급 객체

  • 변수 안에 함수를 넣어주는 것이 가능
  • 함수도 하나의 객체로 취급
//일급객체
function jsFunc(){
    console.log("JS FUNCTION");
}

// 함수가 객체로 취급
let a = jsFunc;

// 함수의 매개변수로 함수를 넣을 수 있음
function outerFunc(jsFunc){
    jsFunc();
}

a(); // 함수가 된 변수 a를 실행
  • 자바에서는 class가 타입이 될 순 있었지만 메소드는 객체가 아닌 단순한 기능만 수행한다.
    따라서 타입처럼 사용할 순 없다.
  • 하지만 자바스크립트는 함수도 하나의 객체로 취급하기때문에 함수를 타입처럼 사용할 수 있다.
  • 또한 함수 안에 매개변수로 함수를 넣을 수도 있다.
  • 따라서 a()로 실행해보면 jsFunc()함수가 들어갔으므로 jsFunc()의 함수의 기능을 똑같이 수행

 

function genNum(){
	return 10;
}

let b = getNum(); // b = 10;
  • 변수에 함수 호출을 넣게되면 함수 호출의 결과값이 들어가는 단순한 결과를 가짐

자바스크립트 변수

  • 자바스크립트는 (var, let, const의 변수)를 사용하는 “약형 언어”
  • var : 자바스크립트의 초기부터 사용하던 예약어
  • let, const : 나중에 추가된 예약어

❓약형 언어

➡️약형 프로그래밍 언어 (Weakly Typed Programming Language)
약하게 타입을 지정한다는 의미를 가진다 볼 수 있다.
이 언어의 특징은 텍스트, 숫자같은 데이터의 타입을 자동으로 판단한다.
(자바에서 미리 변수의 타입을 정의하는 것과는 다른 개념)

❓타입스크립트 (Typescript)

➡️자바스크립트에서 타입을 명시해주지 않았을때의 단점을 보완하기위해 자바스크립트를 기반으로
타입을 명시해야한다는 기준을 가지고 나온 언어

변수 VAR

var name = “Isak”; 

// 중복 선언
var data = 10;
var data = 20;

 

❓변수 var 사용을 권장하지 않는 이유

➡️변수의 범위(스코프)가 불분명함. (함수 단위)
➡️중복 선언 가능 : “의도치 않게 다른 값을 사용할 수도 있게된다”
➡️호이스팅 된다 : 자바스크립트가 인터프리터 언어이지만 실행시에 이미 전체적인 구조를 읽어서
해당 변수가 있다는 것은 알기때문에 변수의 값은 출력되지 않더라도 undefined가 출력된다.

⭐정리하자면
➡️모던 자바스크립트에서는 var사용을 권장하지 않는다.
구형 브라우저에서 let, const 등의 변수를 사용할 수 없는 문제점은 Babel과 같은 도구로 변환작업을 통해 해결할 수 있다.

▶️실습 - var의 호이스팅

console.log(varData);

var varData = 10;
  • console보다 뒤에 varData가 선언되었지만 varData를 console로 출력해보면
  • 값은 출력되지 않지만 undefined로 변수는 출력됨을 알 수 있는 예제

▶️실습 - var 변수 스코프

function varScopeTest(){
    if(true){
        var varScope = 10;
    }
    console.log(varScope);
}
  • varScope라는 변수는 블록 안에서만 사용될 것 같지만
  • console.log를 출력해보면 정상 출력이 된다. if블록 안에서 선언되었음에도 출력이 되고 있는 것이다.

  • 일반적으로 범위는 블럭 범위(스코프)와 함수 범위(스코프)를 가진다.
    ➡️블럭 스코프 : if문 블럭 안 에서 변수가 선언되었으면 if문이 끝날때 사라져야함
    ➡️함수 스코프 : if문 블럭 안에서 변수가 선언되었어도 블럭 범위에 상관없이
    이 함수 내에서는 계속 변수를 사용 가능

  • let(변수), const(상수) : 이 변수들은 함수 스코프를 가지는 var와 달리 블럭 스코프를 가진다.

 

▶️실습 - let 변수 스코프

function letScopeTest(){
    if(true){
        let letScope = 10;
    }
    console.log(letScope);
}
  • let변수는 블럭 스코프를 가지므로 console.log(letScope)를 통해 출력이 되지 않는다.

 

▶️실습 - const 상수 선언

const constI = 10;
const constI = 20; // (X) 불가능
  • 상수이므로 constI는 최초 선언때를 제외하고는 값을 변경할 수 없다.
  • 나머지는 let 변수의 특성과 동일하다.

  • ❓자바스크립트에서 const를 많이 사용하는 이유
    ➡️프로그래밍에서의 불변성은 데이터 안정성, 예측 가능성을 높여주는 중요한 개념인데
    const키워드로 값 재할당을 방지함으로써 불변성을 부분적으로 구현하게 된다.

▶️실습 - 자바스크립트에서 id가져오는 방법

<body>
    <div id="test"></div>

    <script>
        const testDiv = document.getElementById("test");
        console.log(testDiv);
        testDiv.innerHTML = "Hello";
    </script>
</body>
  • getElementById()를 사용
  • innerHTML을 이용하여 id가 test인 div의 텍스트를 “Hello”로 설정할 수 있음

자바스크립트 실행

  • ➡️기존 방법. 해당 경로로 들어간 Terminal에서 “node exam.js” 입력

 

  • 🚀다른 방법. Extensions → Code Runner 설치
    실행 방법 1. JS 파일 우클릭 후 Run Code
    실행 방법 2. 해당 파일에서 ➡️Ctrl + Alt + N

템플릿 리터럴

  • Template Literals
  • 문자열 조합 시 (+ 연산)을 사용하는 방법을 개선한 방법
  • ES6 (ECMAScript 6)에서 추가된 문법
    ➡️ES6 : 자바스크립트의 버전을 뜻하며 각 버전마다 새로운 문법이 추가됨
printName("Barnes");

// 1. 문자열 사용 방법
function printName(name){
	console.log("Hello" + name + "!");
}

// 2. 템플릿 리터럴 사용 방법
function printName(name){
	console.log("Hello, ${name}!");
}

화살표 함수

  • function 키워드 대신 => 문자를 활용하여 함수를 구현
  • 화살표 좌측 (함수 파라미터), 화살표 우측 (코드 블록)
console.log(addFunc(3, 5));

// 화살표 함수
const addFunc = (a, b) => {
	return a + b;
};

// 화살표 함수 개선 (바로 return 하는 경우 - 한 줄 입력 가능)
const addFunc = (a, b) => a + b;

자바스크립트의 객체

const dog = {
    name : "강아지",
    age : 2
};

const cat = {
  // 공백 사용 시에는 따옴표로 감싸기
  "sick cat name": "아픈 고양이",
  age: 1,
};
  • 하나의 변수에 여러 종류의 값을 넣을 수 있다.
  • 객체 선언 시에는 { } 안에 원하는 값들을 (키 : 원하는 값) 형태로 넣어준다.
  • name, age와 같은 “키” 는 공백이 없어야하지만 공백이 있는 경우 “따옴표”로 감사주면 된다.
// 공백 사용한 변수는 [ ] 안으로 참조 가능
console.log(dog.name + "의 나이 : " + dog.age + "살");
console.log(cat["sick cat name"] + "의 나이 : " + cat.age + "살");

🚀 HTML에서 자기소개 페이지를 만드는 실습을 해보았는데 이전에 만들었던 프로필 페이지와

달리 구조적으로 틀을 잡아가면서 하나하나 수정해나가는 과정이 HTML+CSS를 잘 배우고 있다는 느낌이 들게끔 했다.

또한 자바스크립트의 기본 문법들을 배우면서 React를 조금 사용해봤던 기억이 떠오르기도 했다.

기본기가 안되어있는 상태로 React를 사용해서 문법이 복잡해보이고 힘들었던 기억이었는데

자바를 처음 배울때처럼 자바스크립트도 차근차근 올라가는 느낌으로 의욕을 불태워야겠다.

저작자표시