Mission
1~4주차 영상을 보고 코드를 따라치면서 내용 이해하기
실습
1주차
- CSS를 이용하여 class와 id 값으로 HTML 파일안에 다양한 태그를 구별해서 꾸며줄 수 있다.
- 반응형 웹페이지란 페이지의 크기를 키우거나 줄였을 때 요소의 배치 방식을 바꾸는 웹페이지이다.
- CSS를 사용하고 싶다면 style태그에 내용을 입력하는 방법, CSS 파일을 link로 불러오는 방법이 있다.
2주차
인스타 웹페이지를 클론 코딩해보는 실습을 진행하였다.
1. 전체적인 HTML 구조를 짜고 태그를 배치한다. id나 class 값으로 추후 CSS를 이용해 선택해 꾸며줄 수 있도록 내용을 작성한다.
2. javascript는 html 파일을 읽어서 만들어진 DOM을 조작할 수 있다. 문서객체를 조작하기 위해서 태그를 잡아와 변수에 저장하는 과정이 필요하다.
<script>
function like(id){
let countElement = document.querySelector("#count"+id);
let likeIcon = document.querySelector("#like"+id);
count = parseInt(countElement.innerText);
if (count % 2 == 0){
likeIcon.innerHTML = "<i class='fa-solid fa-heart'></i>";
countElement.innerText = count + 1;
}
else {
likeIcon.innerHTML = "<i class='fa-regular fa-heart'></i>";
countElement.innerText = count - 1;
}
}
</script>- 좋아요 버튼을 눌렀을 때 검은 하트 이모지로 바뀌고 다시 눌렀을 때는 하얀 이모지로 바꿀 수 있었다. 또한 좋아요 갯수는 1씩 늘고 줄고하는 것을 확인할 수 있었다.
3주차
암호화폐 거래소에서 제공하는 API를 이용하여 비트코인 실시간 현재가를 받아와 출력해보는 실습을 하였다. 그 다음은 타이핑 게임을 만들어보는 실습을 하였다.
- 빗썸에서 제공하는 api를 가져와서 HTML 파일 내의 태그 안에 TEXT에 입력해보았다. 내가 원하는 ITEM이 어디있는지 확인하기 위해서는 console.log나 console.dir를 이용하여 콘솔창에 띄워서 그 구조를 파악해서 가져오면 된다.
# 용어정리
1. API : 서비스를 버튼화
2. JSON : 데이터를 구조화 해놓은 하나의 형태, 중괄호안에 키와 값이 쌍을 이루고 있다.
3. XML : 데이터를 구조화 해놓은 하나의 형태, HTML같이 태그에 감싸져있다.
4. AJAX : 페이지의 이동없이 백단에서 서버와 HTTP 통신을 하는 기술
## 비동기
1. promise
.then 으로 사용, 비동기를 동기처럼 사용할 수 있음
2. async, await<script>
const openingPrice = document.querySelector(".opening_price");
const closingPrice = document.querySelector(".closing_price");
fetch("https://api.bithumb.com/public/ticker/BTC_KRW")
// 응답값이 함수의 최초 매개변수에 값으로 들어온다.
.then(function(res){
return res.json(); // json 응답값을 오브젝트 형태로 바꾼다.
})
.then(function(result){
openingPrice.innerText = result.data.opening_price;
closingPrice.innerText = result.data.closing_price;
})
</script>- 타이핑 게임을 만드는 것도 앞부분의 순서는 비슷하다. 웹페이지 구조를 정하고 html파일을 작성하고 css로 선택자를 꾸며준다. 게임을 만들기 위해 필요한 차이점은 1) 버튼을 눌렀을 때 내가 원하는 동작을 하는것, 2) 타이머를 구현하기 위해 비동기 함수인 timeInterval를 사용하는 것이다.
1) 이 버튼을 눌렀을 때 gameStart() 함수를 실행시키라는 코드
<input type="button" value="Game Start" class="start" onclick="gameStart()">
<input type="button" value="Game Reset" class="reset" onclick="gameReset()">2) gameStart() 함수
// 랜덤단어를 제공하는 API를 가져와서 wordList 변수에 저장한다.
function gameStart(){
//reset 버튼은 보이게 하고 start 버튼은 안보이게
start.style.display = "none";
reset.style.display = "block";
wordInput.disabled = false;
fetch("https://random-word-api.herokuapp.com/word?number=10")
.then(function(response){
return response.json();
})
.then(function(result){
// 단어 보여지게 하는 기능
let wordList = result;
let count = 0;
let time_left = DEFAULT_TIME;
wordDisplay.innerText = wordList[count];
time.innerText = DEFAULT_TIME;
// 단어를 입력하고 엔터를 쳤을 때, 단어가 일치하면 점수가 올라가고, 시간을 초기화한다. wordInput.addEventListener("keydown", function(){
if (event.code === "Enter"){
// 사용자 입력값 : wordInput.value
// 보여지는 값 : wordDisplay.innerText or wordList[0]
count++;
if (wordDisplay.innerText === wordInput.value){
if (count === wordList.length){
//disabled 처리
wordInput.disabled = true;
clearInterval(timeInterval);
return false;
}
wordDisplay.innerText = wordList[count];
wordInput.value = "";
score.innerText = count;
time.innerText = DEFAULT_TIME;
time_left = DEFAULT_TIME;
}
}
})
//setInterval (실행될 함수, 몇초)
//js에서 제공하는 몇몇 함수값은 경우 비동기 가지고 활용
timeInterval = setInterval(function(){
time_left--;
time.innerText = time_left;
if (time_left == 0){
wordInput.value = "";
wordInput.disabled = true;
clearInterval(timeInterval);
}
}, 1000)
})
}4주차
리액트를 다운로드 받고 뉴스 웹 페이지를 만들어 본다.
SPA
웹 브라우저는 서버를 호출할 때마다 새 HTML 페이지를 응답받는다. 이 뜻은 어떤 버튼 하나만 눌러도 아예 전체 페이지를 다시 받아와야 한다는 것을 뜻한다. 속도나 성능, 그리고 사용자 경험이 나쁘기에 SPA가 등장했다. Single Page Application 으로, AJAX 호출을 사용한다. AJAX는 HTTP 와는 다르게 백단에서 JSON파일을 주고 받으며 웹 페이지를 동적으로 업데이트 할 수 있게한다.
React
웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. html, css, js를 이용해 웹페이지를 만들때, 다양한 기능을 제공해준다.
JSX
javascript를 확장한 문법이다. html 태그의 형태이다. js 코드안에서 태그관련 작업을 할 때 편하게 작성할 수 있게 해준다.
컴포넌트
재사용 가능한 각각의 독립된 모듈을 의미한다. 코드 재활용성 증가, 코드 유지보수 용이, 해당 페이지가 어떻게 구성되어 있는지 파악 용이의 장점이 있다.
