프로젝트 진행사항
공통
백엔드
프론트엔드
글 작성/조회/삭제/수정 기능 구현
해야할 일
글 작성 화면 클론 [X]
글 작성 기능 구현 [X]
글 조회 기능 구현 [X]
TIL
GET 요청 및 mapping
1. 데이터가 제대로 안불러와지는 오류
작성한 question(게시글)을 GET요청을 통해 불러와서 map을 이용해 HOME 화면에 뿌려주는데 자꾸 오류가 발생한다...
첫 번째 콘솔에는 등록된 데이터들이 잘 들어오는데 두번째 콘솔에서 이상한 데이터가 들어온다
검색 결과 key는 실제 데이터 내부에 없어도 된다는 것을 개발자 친구의 값진 설명을 통해 알게된 후 for문을 지우고 data 그 자체로 받아 QuestionList.js에 넘겨줬다.
2. useState() 초기값 변경
콘솔로 찍힌 데이터가 {data: XX , pageInfo:{..}}로 찍히는 것을 발견.. (서버 쪽에서 페이지네이션을 쉽게하기 위해 이렇게 설정해놓은 부분)
이에 맞춰 useState 초기값도 다음과 같이 바꿔주었다.
const [questions, setQuestions] = useState({ data: [], pageInfo: null });3. ?.로 문제해결
참고 사이트:
1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
2. https://ko.javascript.info/optional-chaining
개발자 친구의 도움으로 ?.(optional chaining)을 써서 문제를 해결했다.
QuestionList.js 파일
<ul>
{props.questions.data?.map((data) => (
<QuestionBox
key={data.postId}
title={data.title}
content={data.content}
/>
))}
</ul>Optional Chaining(?.)이란?
?.앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환해줌
예를 들면, 여러 사용자 중 몇 명만 주소정보를 가지고 있다고 할때, user.address.street으로 주소 정보에 접근하면 다음과 같이 에러가 발생한다
let user = {}; // 주소 정보가 없는 사용자
alert(user.address.street); // TypeError: Cannot read property 'street' of undefined반면 ?.을 쓰는 경우 에러가 발생하지 않는다
let user = {}; // 주소 정보가 없는 사용자
alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.나의 경우는,
쌓여있는 데이터들 중 처음 데이터가 빈 배열이어서 map이 돌때 에러가 났던 것 같다
주의점
꼭 있어야 하는 값인데 없는 경우에 ?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없으므로 이런 상황을 만들지 말도록 해야한다고 한다!
<에러가 해결된 화면>
current.value.trim() 에러
1. titleRef.current.value.trim() !== ''
참고사이트: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
trim() 메서드는 문자열 양 끝의 공백을 제거해준다.
Title과 Content를 담고 있는 Form.js의 유효성 검사를 위해 useRef를 선언하여 input이 공백 시 통과되지 않도록 하는 작업을 하는 중 ..
titleRef.current.value.trim() !== '' // 에러발생자꾸 에러가 발생하여 검색해보았다
검색결과, String처리를 해주고 거기에 .trim()메소드를 적용해야했다
<에러 해결 코드>
const enteredTitleIsValid = String(titleRef.current.value).trim() !== ''저장된 데이터 불러올 때 줄바꿈
이 화면을 클론하는데,
dummy파일을 만들어 map으로 뿌려주었다.
분홍색 상자 안의 정보를 div 한 개에서 처리해줘야하는데.. 문제가 줄바꿈이었다.
우선 <br/>로 처리해 보았다.
menu: [
{
idx: 1,
title: 'Summarize the problem',
body: 'Include details about your goal <br/> Describe expected and actual results <br/> Include any error messages',
}, ...이렇게 했더니 줄바꿈은 되지 않고 화면에
이 그대로 노출되었다..
폭풍 검색 후 white-space: pre-wrap의 존재를 알게되었다 !!
1. dummyData 작성 시 줄바꿈이 필요한 곳에 /n을 넣는다
2. 해당 css 부분에 white-space: pre-wrap를 추가한다
이렇게 하면 /n부분을 읽어서 자동으로 줄바꿈 처리를 해준다!!!
로고 이미지 잘라서 쓰기
footer 클론을 하는데 필요한 로고가 문자를 제외한 아래 분홍색 박스 부분이었다.
문제는 스택오버플로우에서 제공하는 로고는 문자가 들어간 아래 로고밖에 없었다는 것..
저화질의 이미지파일을 구글에서 다운받아 쓰고싶진 않았다
이때 생각났던 것!!
네이버에서는 필요한 모든 이미지를 한 파일로 모아놓고 좌표를 설정해 필요한 부분을 잘라서 쓴다는 얘기가 생각났다. 코드스테이츠 교육내용 중 있었다
결론적으로,
아래와 같이 css코드를 써주었더니
깔끔하게 문자부분을 날리고 이미지 부분만 얻을 수 있었다!
max-width: 35px;
overflow: hidden;객체안에 객체 mapping
타이틀을 map돌리는건 쉬웠지만 문제는 submenu에 들어가있는 배열안의 객체들을 map 돌리는 것이었다..
몇 번의 시도 끝에
다음 코드를 통해서 해결했다!
<S.MenuContainer>
{footerTitleData.map((data) => (
<li key={data.id}>
<h2>{data.title}</h2>
<S.Submenu>
{data.submenu.map((data) => (
<div key={data.idx}>
<h4>{data.name}</h4>
</div>
))}
</S.Submenu>
</li>
))}
</S.MenuContainer>완성된 화면
