안녕하세요, 퀘스트의 쓴맛으로 인해.. 맨땅에 헤딩했던 과거의 림졍,
오늘도 각설이마냥 돌아왔습니다.💁🏻♂️ (두둥.)
집 내부 공사로 인해 컨디션 디버프 효과(?)로
이번 퀘스트는 1탄, 2탄으로 나누어 작성하도록 하겠습니다..🥲
대깨T (X가리가 깨져도.. TIL 작성하는) 림졍의 두 번째 퀘스트 도전기,
우선 결과물부터 부시죠.
두번째 친구는 [한식 메뉴] 렌더링 하기.
저번 게시글을 보고 오신 분들은 아시겠지만.. 저는 JavaScript 에 집중하는 편입니다..
(Html은 뼈대라 볼 것이 많이는 없고.. CSS는 값만 주어지면 잘 작동하기 때문이죠.)
이번 실습의 경우 지난 시간에 배웠던 함수에 이어 배열과 반복문에 대해서 알아볼 것이다.
"이전 내용에 대해 잘 모르겠어요." "지난 게시물, 어디서 봐요?" 라고 하신다면..
냅다 중요한 부분만 설명해 볼 예정이니 믿고(?) 따라오시면 됩니다.
언제나 그렇듯이.. 내용을 제대로 숙지하고 실습하는 것을 추천합니다. 가보자고.
(그렇지 않다면.. 더 이상의 설명은 생략한다.. 🤦🏻♂️)
맛보기 (?) - Html로 뼈대 만들기
스크립트를 적용하려면, 뼈대인 html부터 만들어 줘야 한다.
이번 코드 템플릿은 결과 이미지를 활용하여 제작하도록 하겠다.
실습 코드 템플릿
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>한식 메뉴</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 20px;
}
</style>
</head>
<body>
<div>
<h1 class="tit">한식 메뉴</h1>
<ul id="menu-list"></ul>
</div>
</body>
<script>
/* 주어진 데이터 */
const menuItems = [
{ name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리' },
{ name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리' },
{ name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리' },
{ name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식' },
{ name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리' }
];
</script>
</html>
보다시피, 우리는 아직 꾸미지도 않았고, 조건마저 지정하지 않았기 때문에
CSS와 JavaScript를 활용하여 이 친구를 다듬어줘야 한다.
자, 이제 본격적인 내용에 들어가보도록 하자.
JavaScript 1단계 - 함수 간단 정리
함수의 기본 형태 정리
//변수 선언이나 값을 할당할 때 사용되는 명령어 (function 전이나 내부 객체로 사용되니 참고)
let a = 10;
const name = "림졍";
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
+) Javascript 명령어들은 <body> 안에 넣는 것을 권장한다.
(<head>에 넣었을 경우, 브라우저 렌더링에 영향을 주게 되어 사용자 입장에선 느리게 느껴질 수도 있다.)
JavaScript 2단계 - 배열 및 반복문 알아보기
배열은 데이터의 집합을 효율적으로 관리하고 접근하게 할 수 있는 자료 구조이다.
간단하게 설명하자면.. 여러 데이터를 하나의 변수에 저장할 수 있도록 만들어주는 서랍 같은 느낌으로 생각하면 편하다.
배열의 기본 선언
/* 배열 선언코드, 둘은 같은 배열을 출력함 */
let colors = ["red", "yellow", "blue"];
const colors = ['red', 'yellow', 'blue'];
둘 다 colors 라는 변수에 동일한 배열을 할당하고 있지만..
변수 선언 방식에서 차이가 약간 있다.
let의 경우, 변수 재할당이 가능하지만, const의 경우 상수로 선언되어 재할당이 불가능하다는 점을 참고하자.
let colors = ["red", "yellow", "blue"];
colors = ["green", "purple"]; // 재할당 가능
const colors = ["red", "yellow", "blue"];
// colors = ["green", "purple"]; // 오류 발생: 재할당 불가능
colors.push("green"); // 배열 내부는 수정 가능
반복문은 코드가 여러 번 반복 실행되도록 만들어주는 명령어 중 하나이다.
주로 배열이나 객체 같은 자료 구조에서 효율적인 데이터 처리가 가능하도록 만들어준다.
대부분 for와 while,for.. of 문이 사용되지만,
배열 관련 메서드를 활용한다면 놀랍게도 반복문 없이 간결하게 데이터 처리가 가능하다.
(이것이 진정한 딸깍- 이 아닐까...🙄)
따라서 우리는 반복문 대신 관련 메서드에 대한 내용을 알아보도록 하겠다.
반복문에 사용되는 배열 메서드 정리
/* 반복문 for 정리 */
for (let i = 0; i < 3; i++) { // i가 0부터 3이 될 때까지(3은 포함X)
alert(i);
} // 출력결과 : 0, 1, 2
/* 배열 관련 메서드 정리, 공통점 : 배열의 각 요소를 순회하며 특정 작업수행 or 신규 배열 생성에 사용 */
/* forEach() : 주어진 배열의 요소 출력, 반환값이 없어 주로 단순작업 수행 시 사용 */
const fruits = ['사과', '바나나', '포도'];
fruits.forEach(fruit => {
console.log(fruit);
}); // 사과, 바나나, 포도
/* map() : 주어진 함수의 결과를 새로운 배열로 반환, 원본 배열은 변경X */
const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num + num);
console.log(squared); // [2, 4, 6, 8]
/* filter() : 조건을 만족하는 요소만을 모아 새로운 배열로 반환 */
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]
/* reduce() : 배열의 모든 요소를 하나의 값으로 축약, 합산 or 누적에 사용 */
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 10
우리는 함수 결과를 출력하는 메서드가 필요하므로.. forEach()를 사용해도 되지만,
리스트를 활용하여 원하는 데이터값만 출력할 수 있도록 만들 예정이기 때문에,
map()을 통해 내부에 원하는 값만 출력할 수 있도록 만들어보겠다.
JavaScript 3단계 - 렌더링
렌더링이란, Html, CSS, JavaScript 등의 코드를 기반으로 브라우저가 화면에 콘텐츠를 표시하는 과정으로
렌더링을 사용한다면, 동적인 웹페이지 제작이 가능하다. (in JavaScript)
렌더링의 방법은 다양하지만, 그중 innerHTML을 소개하고자 한다.
innerHTML은 요소의 내부 html을 읽거나 수정할 때 사용되는 속성이다.
HTML 태그와 같은 구조를 그대로 넣을 수 있어 동적인 콘텐츠를 생성하는 데 유용하지만,
보안 위험이 있으므로 신뢰할 수 없는 데이터를 직접 사용하면 안 된다는 단점이 있다.
우리는 innerHTML을 활용하여 해당 자리에 신규 값이 렌더링 되도록 만들 예정이다.
innerHTML
/* innerHTML을 활용한 기존 내용에 새로운 콘텐츠 작성하는(덮어쓰는) 코드 */
let element = document.querySelector('#content');
element.innerHTML = '<h1>새로운 제목</h1><p>이것은 새로운 문단입니다.</p>';
이를 활용하여 스크립트를 작성해 보면 다음과 같다. (복사 후, <body> 밑에 붙여 넣어 적용시켜 주자.)
<script>
const menuItems = [
{ name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리' },
{ name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리' },
{ name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리' },
{ name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식' },
{ name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리' }
];
let menuList = document.querySelector('#menu-list');
menuList.innerHTML = menuItems.map(item => `
<li class="menu-item">
<h2 class="menu-item__tit">${item.name}</h2>
<p class="menu-item__txt">${item.description}</p>
</li>
`).join('');
</script>
행복하게 바로 결과물을 확인하러 가신분들은..
"뭐야 지금 이거 장난하자는 건가..? 결과물 나온다며;;" 라는 생각을 하고 계실 거라 생각한다.
그렇다. 우리는 아직 '꾸미기'를 하지 않은 상태이다.
그 말인즉슨, 이제는 CSS를 넣어줘야 할 시간이라는 거..
CSS 1단계 - 명령어 파악 및 정리
위의 결과물과 비교했을 때 차이점을 적어보자면 다음과 같다.
- 뒤에는 회색배경
- 상자와 글씨, 중앙에 위치
- 렌더링된 메뉴, 하얀색 박스로 구성됨
+) 둥근 모서리 & 약간의 그림자, 그리고.. 점이 없다!
이를 통해 필요한 디자인 요소들은 다음과 같다.
- 회색 배경
- 중앙정렬
- 하얀 박스 - 테두리 곡선, 그림자
추가) <li> 태그 관련 CSS
<li> 태그를 사용하게 되면, 기본적으로 점(불릿)이 생성되며, 자동으로 들여쓰기가 적용된다.
(그래서 저렇게 점을 달고 다닌다..)
관련 부분을 없애는 방법은 우선 불릿은 list-style을 none으로, 들여쓰기의 경우 padding으로 조절해주면 된다.
/* li 태그 사용시, 저절로 생기는 점 친구들 및 들여쓰기 제거 */
ul{
list-style:none;
padding-left:0px;
}
나머지 CSS 관련 내용은 Day_4 에 정리해놓았으니, 참고하길 바란다.
CSS 2단계 - 최종 CSS 정리 및 코드 공유
CSS 코드스니펫 (복사하여 <head>에 적용시키면 된다.)
<style>
/* 배경 및 정렬 CSS */
body {
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 40px 20px;
background-color: #f6f6f6;
}
/* 모든 요소의 기본 여백 제거 */
* {
margin: 0;
padding: 0;
}
/* 제목 관련 CSS */
.tit {
font-size: 30px;
text-align: center;
margin: 0 0 30px;
}
/* li 태그 CSS */
.menu-item {
text-align: center;
padding: 30px;
margin: 10px auto;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 메뉴 이름 CSS */
.menu-item__tit {
font-size: 24px;
margin: 0;
}
/* 메뉴 설명 CSS */
.menu-item__txt {
font-size: 16px;
color: #333;
margin: 10px 0 0;
}
/* 불릿 및 들여쓰기 제거 */
ul {
list-style: none;
padding-left: 0px;
}
</style>
마무리
각 코드를 위치에 맞게 잘 복사하여 적용한다면, 결과물과 같은 이미지가 출력될 것이다.
간단하게 원큐에 복붙하고 싶은 분들을 위해, 아래에 html을 포함한 코드스니펫을 첨부해 본다.
이후 해당 부분을 응용하는 내용은.. 피곤하니 2탄에서 봅시다.
내일 봅시다. 세굳빠.⭐️ ('Say, Good-Bye.' 의 줄임말입니다.)
목표 결과물 코드 공유
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 한식 메뉴 </title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 40px 20px;
background-color: #f6f6f6;
}
* {
margin: 0;
padding: 0;
}
.tit {
font-size: 30px;
text-align: center;
margin: 0 0 30px;
}
.menu-item {
text-align: center;
padding: 30px;
margin: 10px auto;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.menu-item__tit {
font-size: 24px;
margin: 0;
}
.menu-item__txt {
font-size: 16px;
color: #333;
margin: 10px 0 0;
}
ul{
list-style:none;
padding-left:0px;
}
</style>
</head>
<body>
<div>
<h1 class ="tit"> 한식 메뉴 </h1>
<ul id = "menu-list"></ul>
</div>
</body>
<script>
const menuItems = [
{ name: '비빔밥', description: '밥 위에 나물, 고기, 고추장 등을 얹고 비벼 먹는 한국 요리' },
{ name: '김치찌개', description: '김치와 돼지고기 등을 넣고 끓인 한국의 찌개 요리' },
{ name: '불고기', description: '양념한 고기를 구워서 먹는 한국 요리' },
{ name: '떡볶이', description: '떡과 어묵을 고추장 양념에 볶아 만든 한국의 간식' },
{ name: '잡채', description: '당면과 여러 채소, 고기를 볶아 만든 한국 요리' }
];
let menuList = document.querySelector('#menu-list');
menuList.innerHTML = menuItems.map(item => `
<li class="menu-item">
<h2 class="menu-item__tit">${item.name}</h2>
<p class="menu-item__txt">${item.description}</p>
</li>
`).join('');
</script>
</html>'React TIL' 카테고리의 다른 글
| [React] Day_9 데일리 정리 (2) | 2024.09.10 |
|---|---|
| [React] Day_8 맨땅에 헤딩하는 실습일기 Part 2 - (2) (3) | 2024.09.07 |
| [React] Day_6 데일리 정리 (이어서) (0) | 2024.09.05 |
| [React] Day_5 데일리 정리 (3) | 2024.09.03 |
| [React] Day_4 맨땅에 헤딩하는 실습일기 - (2) (2) | 2024.09.02 |
