TIL_2023.03.19

이종현·2023년 3월 19일
0

Today_I_Learned

목록 보기
24/145
post-thumbnail

Today 요약

  1. Remarkable.js로 md 파일 렌더링하기
  2. GitHub, 로컬 충돌 해결
  3. 프로젝트 컨텐츠 관련 HTML,CSS 파일 작성

1. What I did?

1. 1 SPA_Router 프로젝트, 컨텐츠 관련 HTML 작성

메인 화면에서 컨텐츠 화면으로 라우터를 이용해서 SPA방식으로 이동해야 하니까, 컨텐츠화면에 대한 부분을 html파일로 작성했다. 그리고 나름 파일 전체를 중앙정렬하고, 상단의 이미지부분이나 프로필 부분은 정렬이 잘 되어야 하니까 CSS도 나름 작성했다. 이 부분은 5개의 컨텐츠 화면에 공통으로 적용시켰다.

2. What I Learned?

2.1 **Remarkable.js로 md 파일 렌더링하기**

md파일을 html로 변환시켜서 화면에 렌더링 시켜주기 위해 remarkable.js 라이브러리를 CDN을 이용해서 해결해봤다.
상세한 과정은 아래에 첨부한다.
https://velog.io/@dataliteracy/Remarkable.js%EB%A1%9C-md-%ED%8C%8C%EC%9D%BC-%EB%A0%8C%EB%8D%94%EB%A7%81%ED%95%98%EA%B8%B0

2.2 GitHub, 로컬 충돌 해결

md파일을 변환시켜서 적용시키다 보니까 제대로 렌더링 되지 않는 부분이 있었다. 이 부분을 수정하려고 이미 커밋이 완료되어 있는 상황이라 처음에는 깃허브에서 수정했다. 그런데 생각해보니까 로컬에서 수정을 안했으니, 나중에 충돌이 일어날 것 같아, 로컬에서도 원격이랑 동일하게 맞춘다고 수정을 했는데..(사실 pull origin으로 원격이랑 맞지 않는 부분을 나중에 해결했어도 됫었을텐데..) 이게 양쪽에서 수정사항이 맞지 않아서 문제가 발생했다.
그런데 이번에는 문제를 해결하는데만 집중하지 않고 멘토님 피드백대로 내가 시도했던 디버깅 과정을 기록했다.

상세한 과정은 이번에도 아래에 첨부해본다.

https://velog.io/@dataliteracy/GitHub와-로컬-양쪽에서-파일-수정시-발생한-충돌

4.What I difficult?

4.1 디버깅과정의 오랜 시간..

해결을 끝내고 디버깅 과정을 모두 정리하고 나면 뿌듯하다. 하지만 오늘 같은 경우에도 remarkable.js 적용하는 거랑 GitHub에서 발생한 문제를 해결하고 기록하는데만 4시간 정도 걸린 것 같다.;;
이 부분이 적응 안되긴 하지만 계속 반복할수록 오류를 처리하는 시간이나 기록하는 시간 모두 줄일 수 있을 거라 생각한다.


회고(Retrospective)

KPT

💡 KPT (프로젝트 회고)

  • Keep (프로젝트에서 만족했고, 앞으로의 업무에서 지속하고 싶은 부분)
    • 중간에 발생했던 이슈?에 대해서 그냥 해결했다고 넘어가지 않고 해결했던 과정을 글로 적어서 블로그에 옮겨봤다.
  • Problem (프로젝트에서 부정적인 요소로 작용했거나 아쉬웠던 점)
    • 오류가 발생했을 때 일단 기록부터하는 습관이 중요할 것 같다. 그점을 미리 하지 못해서 아쉽다.
  • Try (Problem에 대한 해결 방식으로 다음 프로젝트에서 시도해볼 점)-
    • 빨리 하는 것이 중요한 것이 아니라는 생각이 계속 든다. 프로젝트 과정을 상세하게 기록하는 습관을 들여보자.

5F

💡 5F (전체 회고)
  • Fact (사실: 무슨 일이 있었나?)
    • 총 공부시간은 5시간 정도, 주로 프로젝트 관련해서 진행했다.
  • Feeling (느낌: 무슨 느낌이 들었나?)
    • 디버깅 과정에 많은 시간을 쏟았지만 그래도 하루를 통틀어서 본다면 오늘도 뭔가 알차게 채워지는 느낌이다.
  • Finding (배운 점: 어떤 인사이트를 얻었나?)
    • 오류가 발생했을 때 미리 미리 기록했다면 조금 더 빨리 해결할 수도 있었다고 생각한다.
  • Future action (향후 행동: 앞으로 무엇을 해야 할까?)
    • 일이 잘 안 풀린다면 잠시 멈춰서 생각해보는 것도 중요할 것 같다. 시도해보자.
  • Feedback (피드백: 앞서 정한 향후 행동을 실천해본 뒤, 이에 대해 어떤 피드백을 받았나?)
profile
데이터리터러시를 중요하게 생각하는 프론트엔드 개발자

0개의 댓글