지금까지 공부해온 기초적인 Front-End 개발 지식을 종합해서 정리해보도록 하겠습니다.이 과정을 이해하게 되면 서버 통신을 하고 데이터를 수신한 후 브라우저 화면에 뿌리는 FE 개발 과정에 대해 전반적으로 이해하는데 도움이 될 것 같습니다.다음과 같은 선행 기초지식이 필요합니다.
지금까지 공부해온 기초적인 Front-End 개발 지식을 종합해서 정리해보도록 하겠습니다.이 과정을 이해하게 되면 서버 통신을 하고 데이터를 수신한 후 브라우저 화면에 뿌리는 FE 개발 과정에 대해 전반적으로 이해하는데 도움이 될 것 같습니다.다음과 같은 선행 기초지식이 필요합니다.
1. HTML + CSS 기초 2. Bootstrap 기초 (출력물을 쉽게 장식하기 위해 사용하는 정도) 3. Java Script 기초 문법 – 변수, 배열, 객체 이해 – for 문을 이용한 배열 (객체) 핸들링 – DOM 조작 4. Ajax 이해 (* fetch 사용한 서버 통신) 5. json基礎+VSC(Visual Studio Code)
인기글
1) HTML 빈 템플릿을 만듭니다.VSC사용시! (느낌표) 하나 붙여서 TAB키를 치면 Emmet기능으로 짠! 만들어집니다.lang=”ko”를 수정하고 title에 적당한 이름을 기입.(※ IDE에서의 Emmet 사용의 기초가 필요합니다.)
<!DOCTYPE html><context lang=”ko”><head><context charset=”UTF-8″><contents http-equiv=”X-UA-Compatible”content=”IE=edge”><파일 이름=”viewport”content=”width=device-width, initial-scale=1.0″><키 워드>fetch()json아에서</title></head><body></body></html>
2)Bootstrap링크 삽입하고 읽은 데이터를 깨끗이 정렬하기 위해서 Bootstrap를 사용하려구요.(하드 코딩하면 노가다이라서 부트 스트랩을 사용)부트 스트랩 CSS를 사용하기 때문에<link rel=”stylesheet”href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css”>코드를<head>안에 추가(※Bootstrap기초 이해가 필요합니다.사용법은 https://getbootstrap.com/에 있습니다.
<!DOCTYPE html><context lang=”ko”><head><context charset=”UTF-8″><contents http-equiv=”X-UA-Compatible”content=”IE=edge”><파일 이름=”viewport”content=”width=device-width, initial-scale=1.0″><키 워드>fetch()json아에서</html><link rel=”stylesheet”href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap.min.html”></head><body></body></html>
3)json데이터의 읽기 및 연동 확인 TEST서버가 없어서, json데이터는 https://jsonplaceholder.typicode.com에서 읽습니다.테스트용 json정보를 제공하는 사이트 같습니다.게시판 형태로 출력하기 위해서 https://jsonplaceholder.typicode.com/posts경로의 자료를 받고 싶습니다.(※json에 대한 기초 이해가 필요합니다.)접속하자면 이렇게”배열”이 되고 있습니다.<script>fetch(‘https://jsonplaceholder.typicode.com/posts’). then(response=>response.json(). then(data=>console.log(data)</script>fetch는 ajax뭐라고 하는데 용어가 복잡하다고 마음도 복잡하고 학습 목적에 어긋나므로 그냥 정보를 받을 때 쓰는 문법!정도로 넘어가겠습니다.fetch를 사용하여 해당 경로에서 정보를 수신합니다.fetch(‘https://jsonplaceholder.typicode.com/posts’)응답(response)을 받게 되면(then)응답을 json형식으로 변환합니다..then(response=>response.json()변환이 완료되면 console에 찍어 봅니다. then(data=>console.log(data)나는 위에서 data라는 변수 이름을 사용했으나 각각 마음대로 이름을 붙일 수 있습니다(※참고, fetch오류 동작에 대응하기 때문.캐치를 사용할 수도 있지만, 학습 목적에 집중하기 위한 생략합니다.)한편=>은 화살표 함수(콜백 함수)의 사용 문법입니다.https://blog.naver.com/comalone/222651983913누구야, 너는? 자바스크립트 화살표 함수의 기초 개념 정리는 언제부터인가… 자바스크립트 소스 코드 안에서 프로그래머가 아닌 내 눈에도 화살표 함수가 보이기 시작하고… blog.naver.com아래는 지금까지의 전체 소스아래는 지금까지의 전체 소스Chrome에서 F12(개발자 모드)를 누르고 콘솔(console) 창을 보시면 이렇게 나와있을 겁니다.100개의 데이터가 [배열] 안에 {객체} 형태로 들어있습니다.어떻게 아셨냐고요?[대괄호] = 배열 {콧수염 괄호} =객체, 객체입니다. (※배열, 객체의 기초 이해가 필요합니다!) 화살표를 누르고 열어보면이렇게 데이터가[순서]형태로 들어 있을 것입니다.그럼 이것을 어떻게 사용할 수 있습니까?4)데이터를 깨끗하게 표시하는 Bootstrap적용 https://getbootstrap.com/docs/5.2/layout/grid/에서 클립 보드 아이콘을 클릭하여 Copy to clipboard 합니다.그리고 HTML <body>에 붙입니다. (※HTML 기초 이해가 필요합니다.)<!DOCTYPE html><context lang=”ko”><head><context charset=”UTF-8″><contents http-equiv=”X-UA-Compatible”content=”IE=edge”><파일 이름=”viewport”content=”width=device-width, initial-scale=1.0″><키 워드>fetch()json받에게</filter><link rel=”stylesheet”href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/presponse/bootstrap.min.html”><script>fetch()https://jsonplaceholder.typicode.com/posts’). then(응답=>response.json(). hten(데이터=>콘솔). log(data)</script></head><body><div class=”container text-center”><div class=”low”><div class=”col”>칼럼<div><div class=”col”>칼럼<div></div></body></filtschar>칼럼 3개의 코딩인데, 나는 칼럼을 하나만 넓게 사용하기 때문에 HTML 코드를 아래와 같이 수정했습니다.<!DOCTYPE html><context lang=”ko”><head><context charset=”UTF-8″><contents http-equiv=”X-UA-Compatible”content=”IE=edge”><파일 이름=”viewport”content=”width=device-width, initial-scale=1.0″><키 워드>fetch()json받에게</filter><link rel=”stylesheet”href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/presponse/bootstrap.min.html”><script>fetch()https://jsonplaceholder.typicode.com/posts’). then(응답=>response.json(). hten(데이터=>콘솔). log(data)</script></head><body><div class=”container text-center”><div class=”row”><div class=”col-lg-12″>칼럼</div><div></body></flow><div class=”col-lg-12″>라는 것은 부트 스트랩 코딩으로 칼럼(col)을 넓은 화면(lg=large)에서 12그리드를 사용한다는 약속.(부트 스트랩은 칼럼을 12등분하여 사용합니다.)https://getbootstrap.com/docs/5.2/content/tables/에서 Copy to clipboard 합니다.(※CSS및 부트 스트랩의 기초 이해가 필요합니다.)그리고 <div class=”col-lg-12″> 내\column 텍스트가 있는 위치에 복사한 내용을 붙여넣습니다.tbody 아래 tr는 하나만 사용하기 때문에 불필요한 코드를 지우고 정리.출력되는 게시판은 일련번호|글 제목|글 내용 정도만 출력하므로 최종 아래와 같이 코드를 정리해 줍니다.<!DOCTYPE html><context lang=”ko”><head><context charset=”UTF-8″><contents http-equiv=”X-UA-Compatible”content=”IE=edge”><파일 이름=”viewport”content=”width=device-width, initial-scale=1.0″><키 워드>fetch()json받 response.json()</module><link rel=”stylesheet”href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap.min.ht”><script>fetch()https://jsonplaceholder.typicode.com/posts’). then(응답=>response.json(). then(데이터=>컨트롤러를 취득합니다.log(data)</script></head><body><div class=”container text-center”><div class=”row”><div class=”col-lg-12″><table class=”table”><thead><tr><th scope=”col”>아니오.</th><thscope=”col”>제목</th><thscope=”col”>목차</th></tr><thead><tbody><tr><td>련에게 보내는답할</td><td>제에게 보내는답곳</td><td>일내어로</td><tbody></tr>></tbody></table>/div>/div></body></context>아래 부분은<tbody>안에서 “반복”가 되는 부분이므로 fetch에서 받은 배열 데이터를 가지고 javascript의 for반목문을 통해서 동적으로 생성해야 합니다.<tr><td>일련 번호 표시 앞</td><td>제목 표시 앞</td><td>글 내용 표시 앞</td></tr>5) javascript 코드 작성의 반복문으로 데이터를 가공하기 위해 DOM 조작을 통해 표기하기 위해 자바스크립트 코드를 작성합니다.then(data => console.log(data) 부분에서 console.log(data) 위치에 데이터 핸들링을 위한 javascript 코딩을 하는 것이 포인트이하, 완성된 최종 코딩입니다.이하, 완성된 최종 코딩입니다.javascript 반복 문법은 이전 포스팅을 참고하실 수 있습니다.저는 for… of를 썼어요.https://blog.naver.com/comalone/222815761611[JavaScript]for, for···in , for···of것+forEach, 우선 저는 forin문을 Python에서 외웠어요.프로그래밍을 처음 배울 때,”어라?제가 천···blog.naver.com아래 반복문에서 주목할 부분은 백틱(`) 기호를 사용하여 (작은 따옴표가 아님!) 문자열 구간을 만들고 변수는 ${}의 형태로 사용한다는 점입니다.자주 사용하는 +기호로 문자열을 연결하는 것보다 확실히 간편하고 좋다고 생각합니다.let table_module = []; ( let item of data){ table_module.html(` <tr> <sl>${item.id }</html> <slot>${item.html}<slot> ${item}<slot> ${item}<html>。body}</module> </tr> `);let table_contents = [ ];빈 배열을 하나 만들어서 변수에 할당하고json을 파싱한 data에 접근해서for of 반복문을 돌면서table_contents에 계속 push 해 넣는것이핵심 요령입니다。그러면, table_contents라는 배열에는이런 식으로 data가 담기겠죠？테이블_set = [“tr”]<td>1 <td> sunt auto></td> <td>누가 </td></td>”, “”’quiesta<… td>< tod><status</ tod></ tod></ tod>< tod><ati”>3.반복문을 다 돌고난 이후 document。querySelector(.table > tbody’)。innerHTML = table_contents.join(”);구문을 실행하게 됩니다.join(”)를 통해서 [배열] → ‘문자열’로 만들어주고(왜냐하면, HTML 코드 형태로 만들어줘야 하므로)그 문자열 결과를<tbody> 위치를 찾은 후,innerHTML로 넣어주게 됩니다.(※ 이 부분 이해를 위해서는javascript 문법 기초와javascript DOM 조작 기초 필요.)문서 저장 후 브라우저에서 결과를 확인해보면아래와 같이 100개의 게시물이잘 나타나는 것을 확인할 수 있습니다。(Bootstrap 덕분에 무려 ‘반응형’으로 말이죠!!)내가 공부한 내용을 정리하면서 앞으로 되돌아 보면 잊혀질 자신을 위해서 필요한 부분만 포스팅한 것으로 선행하고 필요한 기초에 대한 학습이 없으면 도중에서 헤매기도 합니다.그런 경우는 마지막 코드를 IDE에 붙이고 한줄씩 지적하면서 막힐 때마다 구글에서 검색하고 필요한 기초를 확인/이해하는 것이 매우 중요합니다.한편 sql을 통해서 DB에서 데이터를 받을 경우에도 json이 퍼싱되고 배열에 들어왔듯이 data의 위치에 “문자열”또는[순서]또는{객체}형태로 들어가겠지~어떻게 보면 결국 앞에서는 제대로 데이터 핸들링( 물어뜯고 맛을 보는 것이 매우 중요한 영역이라는 생각이 들었습니다.https://jsonplaceholder.typicode.comJSONPlaceholder-무료 가짜 REST API{JSON}플레이스 홀더 테스트 및 프로토 타입을 위한 가짜 API을 무료로 제공합니다.JSON Server+LowDB탑재.XV에서 시험을 치뤘구.2021년 10월 현재 매달 최대 17억건의 신청곡을 제공하고 있습니다.스폰서 JSON플레이스 홀더는 GitHub상의 이하의 기업과 스폰서로 지원되고 있습니다.체크하세요 귀사의 로고 herejsonplaceholder.typicode.com1개월 정도 지나면 애매할 때, 여기에 있는 다른 json파일에서도 복습하고 보면 활용 패턴에 익숙해져서 나에게는 좋은 공부라고 생각합니다.HTML의 날 코딩을 겨우 한 게 어제 같은 것에 프로그래밍을 통해서 활용하도록 되어’~!!이렇게 편리한데도 왜 이제서야!!라는 공부 얘기가 있습니다.인생 뭐 있는가?재미 있으면 끝!앞으로도 계속 화이팅!!!!