Today 요약
- 코테 문제 풀기
- 과제
1. What I did?
1.1 코테 문제 풀기
중복 문자 제거하기
이 부분은 처음에 좀 다른 방식으로 해결해보려고 일단 생각나는 대로 해결해보고 그 다음 점진적으로 바꿔나갈 생각으로 이중 for 문을 이용해서 해결하려 했으나, 결국 간단하게 set 객체를 이용해서 해결했다.
function solution(my_string) {
const set = new Set([...my_string])
const result = [...set].join('')
return result
}합성수 찾기
function solution(num) {
let arr = Array(num + 1).fill(false)
for (let i = 2; i * i <= num; i++) {
if (!arr[i]) {
for (let j = i * i; j <= num; j += i) {
arr[j] = true
}
}
}
return arr.filter((el) => el).length
}합성수 찾는 부분은 처음에는 스스로 해결하려고 해보다가 문득 합성수를 제외하면 소수가 남으니까, 소수를 구하는 부분을 구글링해서 코드를 약간 수정해서 해결했다.
소수를 구하는 부분이 아직도 명확하게 이해가 되지 않는다. 하지만 계속 자주 보다보면 이해할 날이 오리라 믿는다. 제곱근을 이용해서 소수를 구하는 부분을 약간 변형해서 작성한 코드 같은데.. 누군가한테 설명한다고 한다면 제대로 못할 것 같다. (그렇다는 건 명확하게 이해하지 못했다는 것..)
2. What I Learned?
2.1 과제
Next로 news API 사용해서 SSG 방식으로 뉴스 리스트 페이지 구현하기
뉴스 페이지를 하나만 구현하는 과제이기 때문에 라우팅을 사용할 필요가 없다. 그렇기 때문에 app 폴더 아래에 page.jsx에 구현하고 네비게이션 부분은 layout.jsx에 구현했다. 처음에 구조를 잡느라고 emotion을 사용하려고 했는데, CSS-in-JS의 경우 server 컴포넌트에서 구현이 어렵다고 해서.. 조금 시도해봤다가 tailwind로 갈아탔다. tailwind 설정 자체는 어렵지 않았는데, 계속 왜 안되는지 못 찾았다가… globals.css에 있는 코드를 모두 삭제하고 아래 코드를 붙혀넣고 해결했다.
**@tailwind base;
@tailwind components;
@tailwind utilities;**기존에 리액트에서는 css 코드가 있어도 중복으로 사용이 가능했는데.. next는 아닌가보다.
그렇게 tailwind로 구조를 대강 잡고서 news api에 있는 정보를 비동기적으로 받아오는 부분을 진행했다.
일단 News API 사이트에서 회원가입 하고 API Key를 받아온 다음에 사이트에 홈에 있는 다양한 api 중에 하나를 가지고 와서 fetch를 이용해서 데이터가 console에 잘 찍히는지 부터 확인한다.
그렇게 상위 컴포넌트에서 받아온 데이터를 NewsList 컴포넌트에 prop으로 전달해서 원하는 데이터만 표시한다.
하지만 과제의 요구사항은 SSG로 구현하는 건데, 내가 해결한 부분은 비동기적으로 데이터를 받아오는 거니까
useEffect를 사용해서 페이지를 새로고침할 때마다 서버에서 비동기적으로 받아와서 클라이언트에서 데이터를 가지고 렌더링을 해주는 것이기 때문에 SSG 방식은 아니라고 생각한다. 그리고 useEffect 코드를 사용하려면
‘use client’를 상단에 선언해주어야 하기 때문에 역시나 이 이유 때문이라도 SSG 방식으로 프로젝트를 해결한 건 아니라고 생각한다.
'use client'
import NewsList from '@/components/NewsList'
import { useEffect, useState } from 'react'
export default function Home() {
const [newsList, setNewList] = useState([])
const fetchNewsData = () => {
const url =
'https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=ea74632310774b6b9b0f1f677b4206b1'
const req = new Request(url)
const res = fetch(req)
.then((res) => res.json())
.then((data) => data.articles)
return res
}
useEffect(() => {
const fetchNewsInfo = async () => {
const newsData = await fetchNewsData()
setNewList(newsData)
}
fetchNewsInfo()
}, [])
return (
<main>
<div>
<ul className="flex-wrap">
{newsList.length > 0 &&
newsList.map((item) => <NewsList key={item.url} item={item} />)}
</ul>
</div>
</main>
)
}api로 받아오는 데이터를 서버에서 이미 페이지를 생성한 다음에 생성된 페이지를 통째로 가지고 오려면 어떻게 해야할까? useEffect를 사용하지 않고 클라이언트 컴포넌트가 아니라 서버 컴포넌트만을 사용해서 구현하라는 걸까? 과제를 완벽하게 해결하지는 못했지만, 오늘은 시간이 부족해 이 정도로 마무리했다. 그리고 일단 6주차에 강의를 들어보고 해결할 방법을 강구해봐야겠다.
