<div id="readability-page-1" class="page"><div>글의 "읽음여부"를 표시하고싶다. 
읽음여부 마킹에 대한 정보를 저장해야한다.
<code>방법1. 글을 읽을 때 마다 글의 id를 저장하고, 목록에서 비교하여 마킹처리한다.</code> 
<code>방법2. 데이터 목록을 가져왔을 때, 읽음여부 속성을 추가한다.</code>
방법 2를 사용하자.
현재 전역상태에 데이터를 따로 저장하지 않고있다. (페이징 상태만 저장한다.) 
즉, 매번 모든 목록데이터를 네트워크를 통해 불러오는 문제점이 있다.
방법2를 적용하면 위의 문제도 함께 해결할 수 있다. 
한번 가져온 목록데이터에 "읽음여부"속성값을 추가해서 목록을 앱 전역상태에 저장한다. 
목록 데이터를 전역상태에 관리하므로, 불필요한 중복 데이터 호출도 막을 수 있다.
<h2 id="전역상태에-추가">전역상태에 추가</h2>
<pre><code>// ...
const store = {
 currentPage: 1,
 feeds: [],
};

// ...
function newsFeed() {
 let newsFeed = store.feeds;
 const newsList = [];

 if (newsFeed.length === 0) {
 newsFeed = store.feeds = getData(NEWS_URL);
 }
 // ...
}</code></pre>
<h2 id="읽음상태-추가">읽음상태 추가</h2>
<pre><code>function makeFeeds(feeds) {
 return feeds.map((f) =&gt; ({
 ...f,
 isRead: false,
 }));
}

function newsFeed() {
 let newsFeed = store.feeds;
 const newsList = [];

 if (newsFeed.length === 0) {
 newsFeed = store.feeds = makeFeeds(getData(NEWS_URL));
 }
 //...
}</code></pre>
<h2 id="읽음처리">읽음처리</h2>
<pre><code>function newsDetail() {
 const id = Number(location.hash.substr(7));
 const newsContent = getData(CONTENT_URL.replace("@id", id));
 //...
 
 const curFeedIdx = store.feeds.findIndex((f) =&gt; f.id === id);
 if (curFeedIdx &gt; -1) {
 store.feeds[curFeedIdx].isRead = true;
 }
 // ...
}

function newsFeed() {
 let newsFeed = store.feeds;
 const newsList = [];
 //...
 
 for (let i = (store.currentPage - 1) * 10; i &lt; store.currentPage * 10; i++) {
 newsList.push(`
 &lt;div class="p-6 ${
 newsFeed[i].isRead ? "bg-red-500" : "bg-white"
 } mt-6 rounded-lg shadow-md transition-colors duration-500 hover:bg-green-100"&gt;
	.....
 &lt;/div&gt;
	`
 }
 //...
}</code></pre>
<h2 id="결론">결론</h2>
기능을 추가하고, 추가한 기능에 문제가있으면 개선하면서 애플리케이션의 규모가 점점 커진다. 
기능이 많아질수록 규모가 커지는걸 막을 수 없다.
<blockquote>
다만 규모가 커지더라도 복잡도가 높아지지않는 구조를 찾는게 개발자의 일이자, 역량이다.
</blockquote>
복잡도가 낮아야 빠르고 쉽게 고칠 수 있다. 
프로그래밍 테크닉을 배운다는 측면은 어떻게하면 복잡도를 높이지않고 규모를 키울 수 있을까가 중요한 연구주제중 하나다.</div></div>

ginameee.log

Jangchun Lee

글의 "읽음여부"를 표시하고싶다.
읽음여부 마킹에 대한 정보를 저장해야한다.
방법1. 글을 읽을 때 마다 글의 id를 저장하고, 목록에서 비교하여 마킹처리한다.
방법2. 데이터 목록을 가져왔을 때, 읽음여부 속성을 추가한다.
방법 2를 사용하자.
현재 전역상태에 데이터를 따로 저장하지 않고있다. (페이징 상태만 저장한다.)
즉, 매번 모든 목록데이터를 네트워크를 통해 불러오는 문제점이 있다.
방법2를 적용하면 위의 문제도 함께 해결할 수 있다.
한번 가져온 목록데이터에 "읽음여부"속성값을 추가해서 목록을 앱 전역상태에 저장한다.
목록 데이터를 전역상태에 관리하므로, 불필요한 중복 데이터 호출도 막을 수 있다.
전역상태에 추가
// ...
const store = {
 currentPage: 1,
 feeds: [],
};
// ...
function newsFeed() {
 let newsFeed = store.feeds;
 const newsList = [];
 if (newsFeed.length === 0) {
 newsFeed = store.feeds = getData(NEWS_URL);
 }
 // ...
}
읽음상태 추가
function makeFeeds(feeds) {
 return feeds.map((f) => ({
 ...f,
 isRead: false,
 }));
}
function newsFeed() {
 let newsFeed = store.feeds;
 const newsList = [];
 if (newsFeed.length === 0) {
 newsFeed = store.feeds = makeFeeds(getData(NEWS_URL));
 }
 //...
}
읽음처리
function newsDetail() {
 const id = Number(location.hash.substr(7));
 const newsContent = getData(CONTENT_URL.replace("@id", id));
 //...
 const curFeedIdx = store.feeds.findIndex((f) => f.id === id);
 if (curFeedIdx > -1) {
 store.feeds[curFeedIdx].isRead = true;
 }
 // ...
}
function newsFeed() {
 let newsFeed = store.feeds;
 const newsList = [];
 //...
 for (let i = (store.currentPage - 1) * 10; i < store.currentPage * 10; i++) {
 newsList.push(`
 <div class="p-6 ${
 newsFeed[i].isRead ? "bg-red-500" : "bg-white"
 } mt-6 rounded-lg shadow-md transition-colors duration-500 hover:bg-green-100">
 .....
 </div>
 `
 }
 //...
}
결론
기능을 추가하고, 추가한 기능에 문제가있으면 개선하면서 애플리케이션의 규모가 점점 커진다.
기능이 많아질수록 규모가 커지는걸 막을 수 없다.
다만 규모가 커지더라도 복잡도가 높아지지않는 구조를 찾는게 개발자의 일이자, 역량이다.
복잡도가 낮아야 빠르고 쉽게 고칠 수 있다.
프로그래밍 테크닉을 배운다는 측면은 어떻게하면 복잡도를 높이지않고 규모를 키울 수 있을까가 중요한 연구주제중 하나다.

[실습1] 상태를 가져보자 (읽은글 표시)

댓글