본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq
250710(목) 10일차
12줄의 코드로 시작하기
index.html 파일을 만들고 app.js를 연결,
parcel index.html 명령어로 앱을 실행하면 로컬 웹앱이 동작하게 된다.
웹앱은 입력 > 처리 > 출력의 과정
애플리케이션이란 입력 데이터를 받아서 무언가를 처리한 후, 출력으로 변환하는 구조
강사님이 매번 말하시는듯
이번 실습에선 입력 데이터를 해커뉴스 API에서 받아왔고 그걸 JavaScript로 처리해서
ul, li 형태로 화면에 출력하는 흐름을 만들어봤다
아주 기본적이지만, 이게 바로 모든 웹앱의 핵심 구조라는 점이 중요
네트워크에서 데이터 받아오기
XMLHttpRequest로 API 요청을 보낸 후,
.open()과 .send()를 사용해서 데이터를 받아왔다.
이 때 받은 데이터는 JSON 형태였고 이를 JSON.parse()로 객체로 바꿨다
이 과정을 직접해보니 프론트엔드가 단순히 버튼 눌러서 UI 바꾸는 것 이상으로
서버와 통신하고, 데이터를 다루는 작업이 핵심이라는 것을 실감했다
DOM 조작으로 화면 출력
받아온 데이터를 리스트로 출력하기 위해 코드로 ul, li 태그를 만들어 붙였다
DOM 요소를 문자열로 넣는 방식과 직접 생성하는 방식(CreateElement + appendChild)를 해보면서
JavaScript로 HTML을 조작하는 방법을 익혔다
반복문
하드코딩이 아닌 반복문 - for문을 통해
뉴스 데이터 배열을 순회하고 title을 꺼내 li로 출력했다
이번 강의를 통해 얻은 것은 단순한 UI 구현 기술이 아니라
웹앱이란 어떤 구조로 동작하고, JavaScript가 어떤 역할을 하는가에 대한 실질적인 감각이었다.
데이터는 어디서 오는가(입력), 데이터는 어떻게 변형되는가(출력), 결과는 화면에 어떻게 그려지는가(출력)
이 흐름은 모든 웹앱의 동작 구조
이 흐름을 한 번 체험해보니 웹앱의 구조가 어떤식으로 흘러가는지 알 수 있었다
