diff --git a/index.js b/index.js new file mode 100644 index 0000000..c2aa1a8 --- /dev/null +++ b/index.js @@ -0,0 +1,12 @@ +const button = document.getElementById('top'); + +let opacity = 0; +button.style.opacity = opacity; +window.addEventListener('scroll', function() { + + const scrollPosition = window.scrollY / (document.documentElement.scrollHeight - window.innerHeight); + + opacity = scrollPosition; + + button.style.opacity = opacity; +}); \ No newline at end of file diff --git a/problem4.css b/problem4.css index 3823cb2..7e573bf 100644 --- a/problem4.css +++ b/problem4.css @@ -1,126 +1,173 @@ - -h1{ - background-color:rgb(180, 238, 219); color:black; - text-align: center; - width: 50%; - border-bottom: 2px solid gray; - margin:0px auto 15px auto; -} -.totalsum{ - border-radius:20px; - border: 5px solid black; - background-color: rgb(180, 238, 219); color:black; - text-align: center; - width:50%; height:100%; - margin:0 auto 0 auto; -} -.totalsum p{ - font-size:40px; - margin-bottom:15px; -} -h3{ - margin:5px 0 5px 0; -} -div.total -{ - display: flex; - justify-content: space-evenly; - margin-bottom: 10px; - } -div.allincome{ - color:blue; -} -span.plus-button { - display:inline-block; - width:20px; - height:20px; - border-radius: 100%; - border-color: black; - border: 1px solid; - font-size: 14px; - background-color: aliceblue; -} -div.alloutcome{ - color:red; +h1 { + background-color: rgb(180, 238, 219); + color: black; + text-align: center; + width: 50%; + border-bottom: 2px solid gray; + margin: 0px auto 15px auto; +} +.totalsum { + border-radius: 20px; + border: 5px solid black; + background-color: rgb(180, 238, 219); + color: black; + text-align: center; + width: 50%; + height: 100%; + margin: 0 auto 0 auto; +} +.totalsum p { + font-size: 40px; + margin: 0px 0 15px 0; +} +h3 { + margin: 5px 0 5px 0; +} +div.total { + display: flex; + justify-content: space-evenly; + margin-bottom: 10px; +} +div.allincome { + color: blue; +} +span.plus-button { + display: inline-block; + width: 20px; + height: 20px; + border-radius: 100%; + border-color: black; + border: 1px solid; + font-size: 14px; + background-color: aliceblue; +} +div.alloutcome { + color: red; } span.minus-button { - display:inline-block; - width: 20px; - height: 20px; - border-radius: 100%; - border-color: black; - border: 1px solid; - font-size: 14px; - background-color: aliceblue; + display: inline-block; + width: 20px; + height: 20px; + border-radius: 100%; + border-color: black; + border: 1px solid; + font-size: 14px; + background-color: aliceblue; } div.date { - box-sizing: border-box; - width:50%; margin:30px auto 0 auto; - display:flex; - justify-content: center; - border-top: solid 2px; - border-color: gray; - padding:10px 0 20px 0; -} -button.left, .right{ - border:none; - background-color: white; + box-sizing: border-box; + width: 50%; + margin: 30px auto 0 auto; + display: flex; + justify-content: center; + border-top: solid 2px; + border-color: gray; + padding: 10px 0 20px 0; +} +button.left, +.right { + border: none; + background-color: white; } section.main { - box-sizing: border-box; - width:50%; - margin:0 auto 0 auto; - display: flex; - flex-direction: row; - justify-content: space-between; - border-bottom: solid 1px; - padding-bottom: 20px; - border-color: rgb(190, 188, 188); -} -button.income, button.outcome { - border-radius: 10px; - background-color: rgb(17, 127, 90); - color:white; + box-sizing: border-box; + width: 50%; + margin: 0 auto 0 auto; + display: flex; + flex-direction: row; + justify-content: space-between; + border-bottom: solid 1px; + padding-bottom: 20px; + border-color: rgb(190, 188, 188); +} +button.income, +button.spend { + border: none; + background-color: white; +} +div.item { + box-sizing: border-box; + width: 50%; + margin: 15px auto 10px auto; + display: flex; + justify-content: space-between; + border-radius: 30px; + background-color: rgb(180, 238, 219); + color: black; + padding: 15px; +} +.category { + font-size: 14px; +} +section.details { + height: 400px; + overflow-y: scroll; + width: 50%; + margin: 0 auto 0 auto; +} +.money_minus { + color: red; +} +.money_plus { + color: blue; +} +button.x { + border: none; + background-color: rgb(180, 238, 219); +} +footer { + width: 50%; + margin: 0 auto 0 auto; + background-color: rgb(180, 238, 219); + border-radius: 5rem; + height: 2rem; +} +div.plus_button { + display: flex; + justify-content: center; + text-align: center; + height: 2rem; +} +.last { + display: inline-block; + width: 10%; + border: none; + margin: 0; + padding: 0; + border-radius: 5rem; + background-color: rgb(112, 179, 112); +} + +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.4); +} + +.modal-content { + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; } -button.income:hover, button.outcome:hover { - background-color:pink; - color:black; -} -div.item{ - box-sizing: border-box; - width:50%; - margin:15px auto 10px auto; - display: flex; - justify-content: space-between; - border-radius: 30px; - background-color: rgb(180, 238, 219); - color:black; padding:15px; -} -.category{ - font-size: 14px; -} -section.details{ - height: 400px; - overflow-y: scroll; - width:50%; - margin:0 auto 0 auto; -} -.money_minus{ - color:red; -} -.money_plus{ - color:blue; -} -button.x{ - border:none; - background-color: rgb(180, 238, 219); -} -footer.plus_button{ - text-align: center; -} -button.last{ - display:inline-block; - width:50%; - margin:0 auto 0 auto; -} \ No newline at end of file diff --git a/problem4.html b/problem4.html index 2a56a7d..2eb8c3f 100644 --- a/problem4.html +++ b/problem4.html @@ -1,69 +1,73 @@ - - - - + + + + 가계부 - - -

어디보자 얼마 남았나?

-
-

호주머니

71000

-
-
+ 총수입 150000
-
- 총지출 79000
-
-
-
- 10월 12일 -
-
-내역리스트 -
- - -
-
-
-
쇼핑 - 모던자바스크립트 -
- 40500 -
-
-
식비 - 워크샵 1차비용 -
- 13700 -
- -
-
식비 - 워크샵2 차비용 -
- 2800 -
-
-
용돈 - 추석용돈 -
- 150000 -
-
-
식비 - 세븐일레븐 -
- 10800 -
-
-
교통 - 고속버스 -
- 11200 -
+ + +

어디보자 얼마 남았나?

+
+

호주머니

+

0

+
+
+ + + 0 + +
+ - + 0 +
+
+
+
+ 10월 12일 +
+
+ 내역리스트 +
+ + + + +
-
- - \ No newline at end of file +
+ +
+
+ +
+
+ + + + + + + + diff --git a/problem4.js b/problem4.js new file mode 100644 index 0000000..8ee6f78 --- /dev/null +++ b/problem4.js @@ -0,0 +1,212 @@ +let INIT_BALANCE = 0; +let HISTORY_LIST = [ + { category: "쇼핑", detail: "모던자바스크립트", money: -40500 }, + { category: "식비", detail: "워크샵 1차비용", money: -13700 }, + { category: "식비", detail: "워크샵 2차비용", money: -2800 }, + { category: "용돈", detail: "추석용돈", money: 150000 }, +]; +let HISTORY_spend = [ + { category: "쇼핑", detail: "모던자바스크립트", money: -40500 }, + { category: "식비", detail: "워크샵 1차비용", money: -13700 }, + { category: "식비", detail: "워크샵 2차비용", money: -2800 }, +]; +let HISTORY_income = [ + { category: "용돈", detail: "추석용돈", money: 150000 }, +]; + +const CATEGORIES = { + '수입': ['용돈', '알바비', '환불액'], + '지출': ['여행비', '식사비', '교통비'] +}; + +const emptylist = []; +function Showlist(selection) { + INIT_BALANCE = 0; + const balanceElement = document.querySelector(".totalsum strong"); + const detailsSection = document.querySelector(".details"); + let AllInputadd = document.querySelector(".incomevalue"); + let AllOutputadd = document.querySelector(".outcomevalue"); + let AllInput = 0 ; + let AllOutput = 0 ; + detailsSection.innerHTML = ""; + + for (const historyItem of selection) { +//------------- 초기값 업데이드 + INIT_BALANCE += historyItem.money; + + const itemElement = document.createElement("div"); + itemElement.classList.add("item"); + + const categoryElement = document.createElement("span"); + categoryElement.classList.add("category"); + categoryElement.textContent = historyItem.category; + + const detailElement = document.createElement("strong"); + detailElement.classList.add("detail"); + detailElement.textContent = historyItem.detail; + + const moneyElement = document.createElement("span"); + moneyElement.classList.add( + "money_" + (historyItem.money >= 0 ? "plus" : "minus") + ); + moneyElement.textContent = " " + Math.abs(historyItem.money); + + const deleteButton = document.createElement("button"); + deleteButton.classList.add("x"); + deleteButton.textContent = "x"; + + if(historyItem.money>0){ + AllInput += historyItem.money; + } + else{ + AllOutput += Math.abs(historyItem.money); + } +// click관련된 함수 + deleteButton.onclick=function(){ + detailsSection.removeChild(itemElement); + INIT_BALANCE -= historyItem.money; + balanceElement.textContent = INIT_BALANCE; + + if(historyItem.money>0){ + AllInput -= historyItem.money; + AllInputadd.textContent ="총 수입 "+AllInput; + } + else{ + AllOutput -= Math.abs(historyItem.money); + AllOutputadd.textContent ="총 지출 "+AllOutput; + } + + }; + + itemElement.appendChild(categoryElement); + itemElement.appendChild(detailElement); + itemElement.appendChild(moneyElement); + itemElement.appendChild(deleteButton); + detailsSection.appendChild(itemElement); + } + balanceElement.textContent = INIT_BALANCE; + AllInputadd.textContent ="총 수입 "+AllInput; + AllOutputadd.textContent ="총 지출 "+AllOutput; + + +} +Showlist(HISTORY_LIST); + +const inputBox = document.getElementById("input_box"); +const outputBox = document.getElementById("output_box"); + +function filtering() { + if (inputBox.checked && outputBox.checked) { + Showlist(HISTORY_LIST); + } else if (inputBox.checked) { + Showlist(HISTORY_income); + } else if (outputBox.checked) { + Showlist(HISTORY_spend); + } else { + Showlist(emptylist); + } +} + +inputBox.addEventListener("change", filtering); +outputBox.addEventListener("change", filtering); + + +var modal = document.getElementById('entryModal'); +var showModalBtn = document.getElementById('showModalBtn'); +var closeBtn = document.getElementsByClassName('close')[0]; +var addEntryBtn = document.getElementById('addEntry'); +var incomeBtn = document.getElementById('incomeBtn'); +var expenseBtn = document.getElementById('expenseBtn'); +var typeSelect = document.getElementById('typeSelect'); +var amountInput = document.getElementById('amountInput'); +var descriptionInput = document.getElementById('descriptionInput'); + +var currentType = ''; // '수입' 또는 '지출' + +showModalBtn.addEventListener('click', function() { + modal.style.display = 'block'; +}); + +incomeBtn.addEventListener('click', function() { + currentType = '수입'; +}); + +expenseBtn.addEventListener('click', function() { + currentType = '지출'; +}); + +closeBtn.addEventListener('click', function() { + modal.style.display = 'none'; +}); + +// 모달 바깥쪽 클릭 시 모달 닫기 +window.addEventListener('click', function(event) { + if (event.target == modal) { + modal.style.display = 'none'; + } +}); + + + +addEntryBtn.addEventListener('click', function() { + // 수입/지출, 종류, 금액, 내용 값을 가져옵니다. + const type = currentType; + const category = typeSelect.value; + const detail = descriptionInput.value; + let money = parseFloat(amountInput.value); + if((money == 0)||isNaN(money)){ + return; + + }; + + // 지출일 경우 음수로 변환 + if (type === '지출') { + money = -money; + } + + // 생성된 항목을 HISTORY_LIST에 push + const newEntry = { category, detail, money }; + HISTORY_LIST.push(newEntry); + + // 필요한 경우, HISTORY_income 또는 HISTORY_spend에도 추가 + if (money > 0) { + HISTORY_income.push(newEntry); + } else { + HISTORY_spend.push(newEntry); + } + + // 모달을 닫고, 업데이트된 목록을 다시 표시 + alert("저장완료"); + Showlist(HISTORY_LIST); + + // 입력 필드 초기화 + currentType = ''; + descriptionInput.value = ''; + amountInput.value = ''; +}); + + +function updateCategoryOptions(type) { + // typeSelect의 현재 옵션을 모두 제거합니다. + while (typeSelect.firstChild) { + typeSelect.removeChild(typeSelect.firstChild); + } + + // 선택된 타입에 따라 적절한 카테고리 옵션들을 추가합니다. + CATEGORIES[type].forEach(category => { + const optionElement = document.createElement('option'); + optionElement.value = category; + optionElement.textContent = category; + typeSelect.appendChild(optionElement); + }); +} + +incomeBtn.addEventListener('click', function() { + currentType = '수입'; + updateCategoryOptions(currentType); +}); + +expenseBtn.addEventListener('click', function() { + currentType = '지출'; + updateCategoryOptions(currentType); +}); \ No newline at end of file diff --git a/week1.css b/week1.css index 47e6d10..878952b 100644 --- a/week1.css +++ b/week1.css @@ -1,125 +1,166 @@ -header.preview{ - background-color: rgb(39, 39, 86); - color:beige; -} -section.preview{ - display:flex; - justify-content: space-between; - overflow-x:scroll; -} -section.preview img{ - width:250px; - height: 350px; - padding-left:10px; - padding-right: 10px; -} -nav{ - text-align:center; - margin:20px 0px 20px 0; - box-sizing: border-box; - padding: 50px 0 50px 0; - border: 2px solid gray; - background-color: rgb(188, 168, 184); -} -header.sticky h2{ - background-color: aquamarine; - color:black; -} -div.nav{ - font-size: 30px; - text-align: center; -} -a{ - text-decoration-line: none; - padding:0 10px 0 10px; +header.preview { + background-color: rgb(39, 39, 86); + color: beige; +} +section.preview { + display: flex; + justify-content: space-between; + overflow-x: scroll; +} +section.preview img { + width: 250px; + height: 350px; + padding-left: 10px; + padding-right: 10px; +} +nav { + text-align: center; + margin: 20px 0px 20px 0; + box-sizing: border-box; + padding: 50px 0 50px 0; + border: 2px solid gray; + background-color: rgb(188, 168, 184); +} +header.sticky h2 { + background-color: aquamarine; + color: black; +} +div.nav { + font-size: 30px; + text-align: center; +} +a { + text-decoration-line: none; + padding: 0 10px 0 10px; } a:hover { - color: yellow; - text-decoration: underline; -} -header.sticky{ - position: sticky; - top:0px; -} -div.one{ - display:flex; - justify-content:center; - flex-wrap: wrap; - margin: 0px 100px 0px 100px; -} -.one > img { - width: 200px; - height: 200px; - padding:10px; -} -article.containers{ - display:flex; - justify-content:center; - margin:0 200px 0 300px; - padding-top: 5px; -} -div.two{ - display:flex; - flex-wrap:wrap; - padding-right:100px; -} -div.two img{ - width:200px; - height:200px; - padding:5px 0 5px 10px; -} + color: yellow; + text-decoration: underline; +} +header.sticky { + position: sticky; + top: 0px; +} +section.one { + display: flex; + justify-content: center; + flex-wrap: wrap; + width: 70rem; + margin: 0 auto; +} +div.garden { + width: 12rem; + height: 12rem; + margin: 1rem; + position: relative; +} +.information:hover p { + opacity: 1; +} +.information:hover { + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 12rem; + width: 12rem; + background-color: rgba(0, 0, 0, 0.5); +} +.information p { + opacity: 0; + color: white; + text-align: center; +} + +.maintext { + font-size: 1.5rem; +} +img.oneday { + width: 100%; + height: 100%; +} +.hovertext { + font-family: verdana, sans-serif; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + font-size: 1rem; +} +div.container { + display: flex; + justify-content: center; + padding-top: 5px; +} +div.two { + display: flex; + flex-wrap: wrap; + justify-content: center; + width: 28rem; +} +div.two img { + width: 13rem; + height: 13rem; + padding: 5px 0 5px 10px; +} -#bigpic{ - width :600px; - height:410px; - padding:5px 0 5px 0; -} -article.container{ - display:grid; - margin:0 150px 0 250px;; - grid-template-columns:repeat(7,1fr); - grid-template-rows:150px 150px 150px 100px; - grid-gap: 1rem; - -} -.image{ - width: 100%; - height:100%; - object-fit: cover; +#bigpic { + width: 28rem; + height: 27rem; + padding: 5px 0 5px 0; +} +article.container { + display: grid; + margin: 0 150px 0 250px; + grid-template-columns: repeat(7, 1fr); + grid-template-rows: 150px 150px 150px 100px; + grid-gap: 1rem; +} +.image { + width: 100%; + height: 100%; + object-fit: cover; } -.image:first-child{ - grid-column: 1/4; - grid-row: 1 ; +.image:first-child { + grid-column: 1/4; + grid-row: 1; } -.image:nth-child(2){ - grid-column: 4/7; - grid-row: 1/3; +.image:nth-child(2) { + grid-column: 4/7; + grid-row: 1/3; } -.image:nth-child(3){ - grid-column: 1/4; - grid-row: 2; +.image:nth-child(3) { + grid-column: 1/4; + grid-row: 2; } -.image:nth-child(4){ - grid-column: 1/5; - grid-row: 3/5; -} -.image:last-child{ - grid-column: 5/7; - grid-row: 3/5; -} -.end{ - text-align:center; - margin:20px 0 20px 0; - box-sizing: border-box; - padding:50px 0 50px 0; - border: 2px solid gray; - background-color: rgb(188, 168, 184); - font-size: 25px; -} -#top{ - position:fixed; - bottom:10px; - right:5px; -} \ No newline at end of file +.image:nth-child(4) { + grid-column: 1/5; + grid-row: 3/5; +} +.image:last-child { + grid-column: 5/7; + grid-row: 3/5; +} +[name="3일차"] { + margin-bottom: 0; +} +.end { + text-align: center; + margin: 20px 0 20px 0; + box-sizing: border-box; + padding: 50px 0 50px 0; + border: 2px solid gray; + background-color: rgb(188, 168, 184); + font-size: 25px; +} +#top { + position: fixed; + bottom: 10px; + right: 5px; +} diff --git a/week1.html b/week1.html index 5e56023..69ffd9f 100644 --- a/week1.html +++ b/week1.html @@ -1,73 +1,145 @@ - - - - + + + + 여행 일기 - - + +
-

   쭌미 싱가폴 일기!

-
- 창이공항 - 네이티리 아크란 - 식물원 꽃 - 식물원 포토존 - 식물원 꽃 - 식물원 꽃 - 식물원 조형 - 식물원 나무조형 +

   쭌미 싱가폴 일기!

+ +
+ 창이공항 + 네이티리 아크란 + 식물원 꽃 + 식물원 포토존 + 식물원 꽃 + 식물원 꽃 + 식물원 조형 + 식물원 나무조형
-
-
-

1일차

-
- 창이공항 - 벽화 - 풍경 - 벽화 - 식물원 나무조형 - 식물원 나무조형 - 아바타 - 아바타 - 식물원 나무조형 - 호텔 조식 +
+

1일차

+
+
+
+ 창이공항 +
+

전시물

+

창이공항에 있던 꽃 전시물

+
+
+ +
+ 벽화 +
+

벽화

+

모닝커피 한 잔하는 나

+
+
+ +
+ 풍경 +
+

인도거리

+

타지마할같이 생긴 건물 앞에서

+
+
+ +
+ 벽화 +
+

바구니 벽화

+

좁은 길을 통해 뒤돌아보면 있는 바구니 벽화

+
+
+ +
+ 식물원 나무조형 +
+

나무 조형

+

식물원에 숨겨진 새 조형물

+
+
+ +
+ 식물원 나무조형 +
+

나무 조형

+

식물원에 숨겨진 사자 조형물

+
+
+ +
+ 아바타 +
+

아바타

+

식물원에 있는 아바타 전시물

+
+
+ +
+ 아바타 +
+

아바타

+

식물원에 있는 아바타 전시물

+
+
+ +
+ 식물원 나무조형 +
+

나무 조형

+

식물원에 있는 용 조형물

+
+
+ +
+ 호텔 조식 +
+

조식

+

다양한 음식이 가득한 호텔조식

+
+
+
+
+

2일차

+
+
+ 마리나 베이 샌즈 +
+ 수족관 + 수족관 + 센토사 섬 + 센토사 섬 +
-
-
-

2일차

-
- 마리나 베이 샌즈 -
- 수족관 - 수족관 - 센토사 섬 - 센토사 섬 -
-
-
-
-

3일차

-
- 수족관 - 수족관 - 벽화 - 떨어진 꽃잎 - 머라이언 상 -
+
+
+

3일차

+
+
+ 수족관 + 수족관 + 벽화 + 떨어진 꽃잎 + 머라이언 상 +
- top -
싱가폴 여행 끝~
- - - \ No newline at end of file + top +
싱가폴 여행 끝~
+ + + diff --git a/week1.md b/week1.md deleted file mode 100644 index a0ad8ac..0000000 --- a/week1.md +++ /dev/null @@ -1,15 +0,0 @@ -# 웹 접근성은 무엇일까? - -웹 접근성이란 좁은 범위에서 보면 장애가 있는 사람들이 웹에 손쉽게 접근할 수 있도록 편의성을 제공하는 것 같지만, 단순히 모든 기기를 통해 모든 유저가 쉽게 웹에 접근하는 것을 말하는 것뿐이 아닌, 장애가 있는 사람은 해당 장애로 불편을 느끼지 못하면서 웹에 접근할 수 있는 서비스를 만드는 즉, 모든 사용자의 니즈를 충족시켜주는 유연성을 의미하는 것 같다. - -# 접근성을 위한 개발은 어떤 것들이 있을까? - -사용자의 니즈를 충족시켜주는 의미에 개발이 포함될 것이며, 시각장애인의 경우 웹페이지의 정보를 읽어주는 화면리더를 사용하는 것, 청각장애인이나 조용한 환경에서 사용할 수 있도록 캡션을 넣어주는 것 등의 예시를 들 수 있습니다. - -# 접근성을 위한 개발을 꼭 해야 할까? - -장애가 있는 사람들이 웹을 이용하고, 웹에 대한 접근이 쉬워지면 더 많은 사람들이 웹을 사용하게 될 것이다. 이에 따라 정보가 더 다양해지고 사용자가 다양한 정보와 더 많이 접하기에 사용자에게 홍보도 쉽게 되며 사용자와 개발자 간의 만족도와 이익이 상승하여 서로가 상부상조할 것으로 보여지기에 접근성을 위한 개발이 꼭 장애가 있는 사람 뿐만 아니라 개발자와 사용자 각자의 이익을 위해서 꼭 필요하다고 생각한다. - -# 검색엔진 최적화를 하는 방법에는 무엇이 있을까? - -최적화 방법에는 첫째로 문법에 맞는 HTML을 작성해야 한다. p태그와 br태그를 봤을 때 단순히 줄바꿈이 아닌 단락을 나눠 작성한다면 검색엔진에게도 이해하기 쉬운 웹 문서가 되고, 상대적으로 순위가 높아질 것이다. 두번째로 title의 중요성인데 구체적이고 간결하게 구성하여 검색했을 때 검색어가 잘 나타나도록 해야 우선순위에 나올 것이다. 마지막으로 이미지에 alt 속성을 기재하여 이미지가 로딩되지 못했을 때 알아보기 쉽고 또한 alt 속성 안의 텍스트를 통해 인덱싱을 하기 때문에 검색엔진 최적화에도 좋다고 생각한다. diff --git a/week2.md b/week2.md new file mode 100644 index 0000000..f50a3d4 --- /dev/null +++ b/week2.md @@ -0,0 +1,43 @@ +# 명령형 프로그래밍과 선언형 프로그래밍은 무엇일까? + +명령형 프로그래밍 : 프로그램의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 프로그래밍 패러다임의 일종이다. + +선언형 프로그래밍 : +첫 번째는 프로그램이 무엇을 해야 할지를 나타내는 경우를 선언형이라고 한다. +예를 들어 컴퓨터 화면에 웹 페이지를 나타낼 때 "어떤 방법"으로 페이지를 나타내야 하는지 보다 제목, 본문, 그림 등과 같이 "무엇"을 화면에 나타내야 할지를 고민하는 것이 선언형 프로그래밍이다. + +두 번째는 프로그램이 함수형, 논리형, 제한형 프로그래밍 언어 등으로 작성된 경우에 선언형이라고 한다. + +# 각각의 방식을 따르는 언어는 무엇이 있을까? + +명령형 언어: C, C++, C#, Java +선언형 언어: SQL, HTML + +# 각각의 방식은 어떤 상황/유형에 쓰는 것이 적합할까? + +명령형 언어의 적합한 상황: + +프로그램의 흐름을 세밀하게 제어해야 할 때, 명령형 언어는 명시적인 명령을 통해 순차적으로 작업을 수행하게 됩니다. +하드웨어 리소스를 직접적으로 관리하거나 최적화해야 할 경우, 명령형 언어는 그런 저수준의 작업에 더 유용합니다. +알고리즘의 구체적인 단계를 명확하게 표현하고자 할 때, 명령형 언어는 알고리즘의 각 단계를 명시적으로 나타내기 좋습니다. +선언형 - 작동 순서가 중요치 않아서, 개발 속도가 빠르고 가독성이 적합하다. +대상 보다 원래 있는 자료에 대해 표시하는 HTML과 같은 느낌~ + +선언형 언어의 적합한 상황: + +어떤 결과를 얻고자 하는지는 알지만, 그 결과를 얻기 위한 과정이나 방법에 대해 신경 쓰지 않아도 될 때, 선언형 언어는 그 결과의 정의에 집중할 수 있습니다. +데이터의 변환, 쿼리 및 조작에 중점을 둘 때, 선언형 언어는 고수준의 추상화를 제공하여 복잡한 연산을 간단히 표현할 수 있습니다. +복잡한 연산의 세부 로직보다는 전체적인 문제 해결 전략에 집중하고자 할 때, 선언형 언어는 프로그래머가 더 넓은 시각으로 문제를 바라볼 수 있게 합니다. + +# JavaScript 에서는 어떤 방식을 선택하는 것이 좋을까? + +JavaScript에서는 상황과 필요에 따라 명령형, 선언형 스타일을 혼용하여 사용할 수 있다. + +명령형 프로그래밍: +일련의 작업을 명확하게 설명하고 싶을 때 선택 +JavaScript의 기본적인 문법과 구조를 사용하여 코드를 작성할 때 + +선언형 프로그래밍: +데이터의 흐름과 변환에 중점을 둘 때 유용하다. +React와 같은 프레임워크에서 UI를 구축할 때, UI의 상태를 선언적으로 표현하는 것 +복잡한 애플리케이션의 상태 관리나, 데이터의 흐름을 추적하고 싶을 때 \ No newline at end of file