이번 주에는?
- 브랜치 merge 이후 생긴 문제 해결...
- 백엔드 연동 & 배포 관련 공부
- Tailwind CSS 개인 프로젝트
새롭게 배운 것 & 배워야 할 것
- Tailwind CSS 사용하기
지난 주에 계획한 대로 Tailwind를 사용해서 개인 프로젝트를 시작했다. 공식 문서 살펴가면서 클래스 이름 익히는 중인데, 아직 사용자 정의 값으로 템플릿을 만드는 게 어색해서 임의 값 지정을 너무 많이 쓰는 게 조금 비효율적으로 느껴지기도... 🤔 또 기본적으로 inline 방식을 사용하게 되면서 스타일링 수정을 진행할 때 가독성이 떨어진다는 단점도 느꼈다. 처음 Tailwind를 접할 때는 styled component보다 더 나은 방식이 될 거라는 막연한 기대가 조금 있었던 것 같은데, 사용해 보니 확실히 장단이 있구나 싶음.
- React 빌드 후 화면 안 보임 문제 해결
이 문제 때문에 (핑계.) 이번 주 개발이 많이 밀렸다 🥲🥲 버전 정리를 위해 다른 develop branch와 main에서 merge를 진행했는데, 그 이후 정리된 버전으로 pull 받고 나니 빌드했을 때 localhost:3000에서 작성한 컴포넌트가 보이지 않기 시작했다...!!!!
구글링하면서 "리액트 안 보임" "리액트 흰 화면" "리액트 빌드 에러" 등등으로 정말 많은 글을 찾아본 것 같은데... 내가 겪은 문제랑은 다 유형이 달라서 너무 막막하고 답답하게 느껴졌다. 내 경우에는
→ 화면은 안 보이지만
→ 콘솔에 에러가 표시되지 않고
→ 개발자 도구를 열면 코드는 정상적으로 보이고
→ 컴포넌트를 선택했을 때 화면에 컴포넌트 영역이 제대로 표시되기까지 하는
상태였음...
브랜치 병합 이후 생긴 문제이다 보니 처음에는 라이브러리 버전 문제 같은 걸 의심하다가, 코드가 제대로 개발자 도구에서 확인되고 테스트해 봤을 때 렌더링 자체는 문제가 없다는 생각이 들어 그제서야 스타일링 문제를 의심하기 시작했다. 결국 이런저런 시도 끝에 페이지 컴포넌트의 가장 상위 요소에서 position: absolute를 빼고 나니 해결되었음 😂 조금 허무...
이 부분 코드는 변경되지도 않았는데 왜 문제가 생긴 건지는 그동안 밀린 태스크 따라잡아야 해서 아직 정확히 파악하지 못했다. 더 상위 요소에서 뭔가 스타일링 요소가 변경되었던 걸까...?
- 백엔드 api에 대해
개발 못하는 동안 (ㅋㅋ ㅠㅠ) 이론적인 부분을 좀 공부했었다. 테스트 - 배포에 대한 지식이 아직도 많이 부족하기도 하고, 프로젝트 초~중반쯤 백엔드 태스크를 작은 것이나마 받아서 수행해 봤을 때 프론트엔드이더라도 백엔드에 대한 기본적 이해가 있는 게 유리하다는 생각이 많이 들었음.
→ RESTful = REpresentational State Transfer
→ API = Application Programming Interface
api는 '프론트엔드(웹 브라우저) - 백엔드(데이터베이스) 간 통신을 가능하게 하는 인터페이스'로 이해했다. 데이터베이스에는 필요한 데이터가 저장되어 있고, api를 통해 그 상태를 전달하거나 수정, 삭제할 수 있는 것.
api를 정의하는 요소에는
→ URI (what. 어떤 리소스에 대한 통신인가?)
→ HTTP 메소드 (how. 리소스를 어떻게 할 것인가?)
가 포함.
- ps) 세그먼트 트리
백준에서 세그먼트 트리 문제를 하나 풀면서 복습도 좀 했다. 세그먼트 트리의 각 노드는 배열의 특정 범위에 대응됨. 루트에서 멀리 떨어진 (더 깊은) 노드일수록 배열에서 더 좁은 범위에 대응되며, 배열의 특정 부분에 대한 정보를 구하거나 수정할 때 log n의 시간복잡도를 가진다.
셀프 피드백
→ 문제 생기고 나서 구글링만 계속 하며 막막해 했었는데 진작 코드 수정해가면서 테스트해 볼 생각을 했으면 훨씬 빨리 해결했을 것 같다. 회피하지 말자... 마주하고 해결하자...... 🫠
→ 지난 주 피드백에 따라 TIL 작성을 꾸준히 한 것은 좋았다. 매일 작성하니 이날 뭘 했는지 요약이 되고, 동기부여도 되는 느낌!
다음 주 솔루션 💡
-
일정 없는 날은 되도록 낮 이전에 학교 갔다가 저녁에 돌아오는 루틴으로 작업해 보기
-
다음 주 목표!
1) (지난 주에 마치지 못한) 새롭게 퍼블리싱한 페이지 완성, 로직 구현
2) api / 퍼블리싱 분리되어 있는 부분 정리하기
3) React + Tailwind 개인 프로젝트 퍼블리싱까지 완성해 보기 (어렵다면 반응형 빼고라도!)
