[TIL] 23Y01M29D
![[TIL] 23Y01M29D](/assets/img/til.png)
Facts(사실, 객관)
개인 포트폴리오를 만들면서 .json파일을 만들었으며 해당 파일에는 나의 프로젝트 정보들을 담아두었다. 정보에는 프로젝트 이름, 내용등이 들어있었고 나는 내용을 가져와서 줄 바꿈이 자동적으로 일어나게 하고 싶었다.
그리고 이제 포트폴리오가 거의 다 만들어져서 Vercel을 이용한 배포까지 진행하려고 했다.
Feelings(느낌, 주관)
json파일에 개행을 하는 것은 생각보다 쉬워보였는데 막상 찾아보니까 내가 원하는 내용이 잘 나오지 않았다. 그래서 답답하고 이게 왜 잘 안나오지? 분명 있을텐데라고 계속 생각하고 있었다.
그리고 Vercel을 이용해서 배포하기 위해 npm run build를 이용해서 빌드를 진행했는데 생각보다 에러가 몇개 나와서 당황했다. 예전에 클론 코딩으로 진행했을때 빌드에서 에러가 나온 적이 없었는데 혼자 하니까 에러가 나와서 좀 당황했다.
Findings(배운 점)
json파일 안에 \n을 넣으면 개행이 된다고 해서 \n을 넣어보니까 개행이 되지 않았다. 그래서 다시 구글링을 해보니 pre태그를 이용하고 json파일안에 \n을 넣어주게 되면 \n있는 곳에서 개행이 된다고 해서 사용해봤더니 개행이 되었다.
그런데 나는 css의 white-space를 이용해서 내가 지정한 크기에 따라 자동으로 개행이 되게 하려고 했으나 white-space를 사용하니 json파일에서 지정한 개행 부분은 되지 않았다. 그래서 찾은 방법이 .split()메서드를 이용해서 json파일안에 \n로 지정한 부분을 찾아서 map()함수를 따로 개행을 시켜주면 되는 것이었다.
Vercel배포 부분에서는 map()함수를 사용하여 엘리먼트를 넣어주게 될 경우 키 값이 없으면 에러가 나와서 key값을 따로 지정해 주었다. 또한, 나는 나의 소개란을 I’m MinwooKim blur blur~라고 작성해주었는데 single quote인 ‘ 가 IE에서는 지원이 안된다고 해서 ‘ 부분을 제거 해쥔 정상적으로 빌드가 완료되었다.
Example Code
// split를 이용한 개행
{props.summary.split('\n').map((line) => (
<p className='mt-4' key={line}>
{line}
<br />
</p>
))}
Affirmation(자기 선언)
개인 포트폴리오를 막상 혼자하려고 하다 보니까 잘 되지 않았고 에러도 많이 발생해서 고생했던거 같다. 아직 json객체가 깔끔하고 이쁘지는 않지만 좀 더 깔끔하게 보이게 하기 위해서 더 찾아보고 있다. 그래도 첫번째 과제인 빌드 후 배포까지는 완료해서 나름 뿌듯했지만 계속해서 가독성을 높이기 위해 리팩토링을 진행할 예정이다.
