// App.js
function App() {
const Login = lazy(() => import('./page/Login'));
const LogOut = lazy(() => import('./page/LogOut'));
const SignPage = lazy(() => import('./page/SignPage/SignPgae'));
const Questions = lazy(() => import('./page/Questions'));
const CreateQuestionPage = lazy(() => import('./page/CreateQuestionPage'));
const Post = lazy(() => import('./components/Post/Post'));
const AnswerEdit = lazy(() => import('./page/AnswerEdit'));
//const User = lazy(() => import('./page/User'));
const Tags = lazy(() => import('./page/Tags'));
const User = lazy(() => import('./page/User'));
const [datas, setDatas] = useState(dummyData);
return (
<Router>
<GlobalStyles />
<Main>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
// ... 생략
<Route
path="/questions/:id"
element={<Post datas={datas} setDatas={setDatas} />}
/>
// ... 생략dummyData에서 데이터를 datas 배열로 가져와서 Post 로 보내줬다.
그리고 Post에서 꺼내와서 {} 로 값을 동적으로 주면 되는데 datas 에서 어떻게 꺼내야 할 지 감을 전혀 못잡고 있었다
//dummyData.js
const dummyData = [
{
id: 1,
title: '게시글 제목',
likes: 0,
answers: 0,
views: 2,
body: `I am building a large project on a remote machine using Bazel. Clean build times are around 30 minutes. Incremental builds (changing code in 1-2 files) typically take around 10-20 seconds.
The problem I have is that when I log out of my machine and log back in again after 1-2 days the build command takes around 10 minutes even though I have not modified any source code.
If I call bazel shutdown and then call bazel build again the "no-build" op takes around 5-10 seconds (i.e. much better than the other "no-build" op).
If I log out and log back in again immediately I can see there is still a bazel process running in the background, which disappears when I call bazel shutdown. I am guessing that when I do not shut bazel down properly it gets killed in such a way that corrupts or deletes cached data. The long "no-build" op then spends a long time reconstructing data that was previously stored in the Bazel cache.
Is there a way to automatically shut down the bazel server when I am disconnected? Preferably this should work both when (i) I call exit from the command-line to log out, (ii) I get automatically disconnected through some kind of timeout or interruption in network connectivity.`,
tag: ['java', 'c++'],
user: {
username: 'Heera',
createdAt: 'asked 46 secs ago',
},
},
{
id: 2,
title: '2번째 글',
likes: 2,
answers: 10,
views: 56,
body: '2번재 오랜만에 글을 작성해 보는데 말이죠... 이거는 정말,.. 제가 할 수 있는 일인가에 대한걸 다시 고민해봐야 할 시점인것 같습니다만.. 얼마나 길게 쓴게 잘려서 나올지 한번 테스트 해보도록 하겠습니다.. 이정도면 엄청 길게 쓴게 아닐까요?? 정말 고민이 많이 됩니다.. 이게 한꺼번에 다 나오지 않아야 할텐데 말이죠... 조금만 더 길게 적어보겠습니다.조금만 더 길게 적어보겠습니다.조금만 더 길게 적어보겠습니다. 이정도면 될거같은데, 사이즈가 늘어나 버려서 더 길게 작성하고, 크기 가 넘어가는 내용은 안나오는지 확인해 보려고 합니다~',
tag: ['java', 'javascript', 'python'],
user: {
username: 'seoyeon',
createdAt: 'asked 46 secs ago',
},
},
{
id: 3,
title: '세번째 글입니다만...',
likes: 34,
answers: 668,
views: 23234,
body: '안녕하세요 제 질문은요/..',
tag: ['java', 'logic', 'nameerror', 'firebase-authentication'],
user: {
username: 'kim.s.y',
createdAt: 'asked 5 mins ago',
},
},
{
id: 4,
title: '4번째 글',
likes: 2,
answers: 8,
views: 45,
body: '444444 내용이랄게 없지만서도 적으면 또 적을수도 있는데,.. 데체 긴 내용은 어떻게 길이를 줄일까요',
tag: ['java', 'c++'],
user: {
username: 'harnry',
createdAt: 'asked 7 mins ago',
},
},
//... 생략
]
export default dummyData;더미 데이터는 배열 안에 객체가 들어가있는 형태.
객체다 보니까 인덱스 값이 없었다.
const { id } = useParams();
를 사용해 console.log({id})를 찍어보면 url의 id 값이 잘 찍혔다.
{ id }과 datas의 id 값이 같은 걸 찾아서 post에 뿌려주면 될 거 같다는 윤곽이 잡혔다.
그런데 datas.id 가 계속 null 혹은 undefined가 나왔다 (객체니까....)
여기서부터 6시간 이상을 별 시도를 다 해봤다.
이것저것 찾다가 아래의 글을 보고 아이디어를 얻었다.
[js] object 요소에 접근하고 순회하기
info 객체에 키를 생성하고 값을 할당해주려고 한다. 키와 값은 변수를 통해 받아온다.위와 같은 변수가 주어졌을 때, info 객체에 키와 값을 할당하는 방법은 2 가지가 있다.객체의 요소는 인덱스(
velog.io
for in 문으로 객체를 순회해서 datas[i].id 를 구하고 그것을 { id } 와 비교하자!
개발자도구에 바로 시도를 해봤다.
잘 뜬다!
이걸로 시도를 해봤다
시도한 코드
=> 문제점
- if문이 제대로 작동을 안함
- {id} ==! datas[i].id 가 false 인게 맞다면 error 가 떠야하는데 <Container> 가 화면에 뜸
- {id} 를 콘솔에 수십번을 찍어봤는데도 문자열이라는 걸 눈치못챔
- {id} 는 url의 `.../:id` 에 맞게 변하는데 datas[i].id 는 1에서 변하질 않음
- 그래서인지 질문리스트에서 다른 제목을 눌러봐도 {id}만 제대로 바뀌고, 안에 Post 내용들은 1번째 글이랑 똑같이 뜸...
const Post = () => {
const { id } = useParams();
const [datas, setDatas] = useState(dummyData);
for(let i in datas){
if({id} ==! datas[i].id){
return(
<div>result error</div>
)
}
console.log(`data[i].id`, datas[i], datas[i].id, {id})
return(
<>
<div>
<Container>
<Nav />
<Content>
<div className="div-css">
<div>
<PostTitle datas={datas[i]} setDatas={setDatas} />
</div>
<div className="div-inline-block">
<div className="div-flex">
<Like />
<PostMainText datas={datas[i]} />
<PostAside>
<div>aside</div>
</PostAside>
</div>
</div>
<Answers />
</div>
</Content>
</Container>
<Footer />
</div>
</>
);
}
}
구글링으론 원하는 결과가 안 나와서 유튜브에 검색했다.
검색어 : js useParams
그러다가 아래의 영상을 보게 되었다.
유레카!!
아무 기대없이 봤는데 내 상황에 써먹을 수 있겠다는 생각이 들어 침대에서 벌떡 일어나 다시 노트북을 켰다
수정한 코드
=> 문제점
.map() 을 사용해 data.id와 {id} 가 같은 데이터를 Post에 뿌려주기 때문에 id가 같으면 post가 똑같은 내용이 두번 뜸하지만 ID는 고유값이기 때문에 괜찮음 ㅎ
Answers 컴포넌트도 .map() 안에 넣어야 함.Answers의 답변 내용들도 질문마다 다르기 때문에 넣어야함 근데 넣으면 레이아웃 잡아둔 거 난리날까봐 내일수정하기로 함
const Post = () => {
const { id } = useParams();
const [datas, setDatas] = useState(dummyData);
const datasSame = datas.filter((data) => data.id === Number(id));
console.log(`dataSame`, datasSame);
return (
<>
<div>
<Container>
<Nav />
<Content>
<div className="div-css">
<div className="예시">
{datasSame.map((data) => (
<>
<div key={data.id}>
<div>
<PostTitle datas={data} setDatas={setDatas} />
</div>
<div className="div-inline-block">
<div className="div-flex">
<Like />
<PostMainText datas={data} />
<PostAside>
<div>aside</div>
</PostAside>
</div>
</div>
</div>
</>
))}
</div>
<Answers />
</div>
</Content>
</Container>
<Footer />
</div>
</>
);
};
=> 추가 (22.11.08)
map 과 필터를 지워져도 정상적으로 구동되게 코드를 아래와 같이 변경하였다.
기존과는 다르게 app.js 데이터를 props 로 내려주지 않고, Post.js 에서 fetch 로 데이터를 바로 받아오면서 수정하게 된 코드이다.
const Post = ({ qid, setQid,setAid, setAnswerEditContent }) => {
const { id } = useParams();
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch(
`url주소/${id}`,
{ method: 'GET' },
)
.then((response) => response.json())
.then((post) => {
setPosts(post.data);
setQid(id);
});
}, [id]);
return (
<>
<div>
<Container>
<Nav />
<Content>
<div className="div-css">
<div className="예시">
<div key={posts.questionId} className="div-css">
<div>
<PostTitle datas={posts} key={id} />
</div>
<div className="div-inline-block">
<div className="div-flex">
<div className="div-inline-flex">
<div className="div-inline-block">
<div className="div-flex">
<Like datas={posts} />
<PostMainText datas={posts} />
</div>
<Answers answers={posts.answers} qid={qid} setAid={setAid} setAnswerEditContent={setAnswerEditContent}/>
</div>
</div>
//...생략'Codestates > Pre-project' 카테고리의 다른 글
| [Pre-project] css 안 되는 것들 해결 방법 (0) | 2022.11.02 |
|---|---|
| [Pre-project] git commit 원하는 것만 올리기가 안 될 때... (0) | 2022.11.01 |
| [pre-poject] error 목록 (0) | 2022.10.25 |