우아한테크코스 6기가 시작한 지도 어언 4달... 드디어 레벨2 방학을 맞이했다!
기분 탓일까? 레벨2는 레벨1보다 3배는 빨리 지나간 느낌이다. 레벨1 막바지에 글쓰기에 대한 면담을 받고, 레벨2를 시작하면서 꾸준히 블로그 포스팅을 하자는 계획을 세웠었는데 눈을 떠 보니 벌써 방학이다. 대문자 P에게 계획이란 글자 조각일 뿐 😅
사실 기존 블로그 서비스 중 썩 마음에 드는 게 없어서 글을 쓰는 데 재미를 붙이지 못했다. 그나마 티스토리가 제일 나은 것 같으니 쭉 쓰다가 시간이 나면 개인 블로그를 구축해 봐야겠다.
알쓸신잡
Panda CSS
마지막 대성공 스터디를 진행하던 중 모 크루가 요즘 Panda CSS가 대세라는 소식을 공유해 주었다. 새로운 스타일링 라이브러리? 당장 찍먹해 봐야지.
Panda CSS - Build modern websites using build time and type-safe CSS-in-JS
Build modern websites using build time and type-safe CSS-in-JS
panda-css.com
- CSS-in-JS
- 자바스크립트 또는 타입스크립트 코드에서 직접 CSS를 작성하여 스타일을 지정하는 스타일링 방법이다.
- 런타임에서 동적으로 스타일을 생성하여 런타임 오버헤드를 발생시킨다.
- 예시 - Styled Components, Emotion
- Atomic CSS
- 스타일을 작은 단위로 나누고 이름을 지정해 CSS를 작성하는 스타일링 방법이다.
- 사용하는 자체 스타일 네이밍을 숙지해야 하여 러닝 커브가 존재한다.
- 예시 - tailwindcss
Panda CSS는 CSS-in-JS 라이브러리지만 런타임 오버헤드가 없는 Zero-runtime 라이브러리다. 사실 복잡한 원리들은 아직 잘 모르겠고 느낌적인 느낌으로는 Styled Components와 tailwindcss를 합친 느낌이랄까. 가볍게 기존 미션에 적용해 봤는데 꽤 괜찮다.
다만, 여러 블로그 글에서 기존 CSS 네이밍을 그대로 사용할 수 있기 때문에 러닝 커브가 거의 없다는 설명을 덧붙이던데, 얕게 사용한다면 모르겠지만 제대로 사용하려면 꽤 시간이 소요될 것 같다. 아직 얼마 되지 않은 라이브러리라 그런가 자료가 많지 않다. 공식 문서에만 의존해야 하는데 그나마 공식 문서가 꽤 친절해서 불행 중 다행.
- Vite로 시작하기 - https://panda-css.com/docs/installation/vite
- Storybook으로 시작하기 - https://panda-css.com/docs/installation/storybook
- 스타일 작성하기 - https://panda-css.com/docs/concepts/writing-styles
- 패턴
(아직 수련이 필요함)- https://panda-css.com/docs/concepts/patterns
이미지 대체 텍스트
리뷰를 백 번 천 번 받아도 까먹는 그 이름, 이미지 대체 텍스트. 리뷰 반영하다가 괜찮은 글을 발견해서 기록할 겸 남겨 본다.
https://brunch.co.kr/@snclab/2
대체 텍스트 올바르게 제공하기- 1편
오류 유형으로 살펴보는 웹 접근성 지침 | 오류유형1. 이미지 요소의 alt 속성 제공 웹사이트에 이미지를 표현하고 싶을 때 여러 가지 방법을 이용할 수 있습니다. 그 중 가장 기본적이며, 흔하게
brunch.co.kr
- 이미지 대체 텍스트 속성을 생략해 버린 경우
- 스크린 리더가 이미지 요소에 대한 해석을 건너 뛰지 않는다.
- 개발자가 설정한 대체 텍스트가 없으므로, src를 음성으로 출력하게 된다.
- 이미지 대체 텍스트 속성을 생략하지 않고, 공백으로 두는 경우
- 이미지가 핵심적인 요소가 아님을 의미하여 스크린 리더가 이미지 요소를 해석하지 않는다.
window.navigator.onLine
이번 미션에서 API 통신 시 네트워크 오프라인 상태를 판단하기 위해 window.navigator.onLine을 사용했는데, 여러 이슈가 있는 기능인가 보다.
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/onLine
Navigator: onLine property - Web APIs | MDN
Returns the online status of the browser. The property returns a boolean value, with true meaning online and false meaning offline. The property sends updates whenever the browser's ability to connect to the network changes. The update occurs when the user
developer.mozilla.org
In Chrome and Safari, (...중략...) You could be getting false positives, such as in cases where the computer is running a virtualization software that has virtual ethernet adapters that are always "connected." Therefore, if you really want to determine the online status of the browser, you should develop additional means for checking.
https://tanstack.com/query/latest/docs/reference/onlineManager
OnlineManager | TanStack Query Docs
The OnlineManager manages the online state within TanStack Query. It can be used to change the default event listeners or to manually change the online state. This should reduce the likelihood of false negatives, however, it might mean false positives for
tanstack.com
In previous versions, navigator.onLine was used to determine the network status. However, it doesn't work well in Chromium based browsers. There are a lot of issues around false negatives, which lead to Queries being wrongfully marked as offline.
To circumvent this, we now always start with online: true and only listen to online and offline events to update the status.
This should reduce the likelihood of false negatives, however, it might mean false positives for offline apps that load via serviceWorkers, which can work even without an internet connection.
대충 해석하면, 크로미움 기반 브라우저에서 잘못된 오프라인 상태를 반환하는 문제가 있었는데 이를 해결하면서 서비스 워커를 통해 작동하는 오프라인 앱에서 잘못된 온라인 상태가 될 수 있는 문제가 생겼다 (뭐임) 란다.
특히 크롬이나 사파리에서는 추가적인 검사 과정이 필요하다고 하니 주의해서 쓰는 게 좋을 듯.
버퍼
지난주는 버퍼 기간이었다.
버퍼 기간은 미션이 진행되지 않는 재정비 시간인데, 왜 미션을 진행할 때 보다 바빴는지 모르겠다. 이래저래 벌여 놓은 일이 많아서 그런가.
MAT.ZIP
좋은 기회로 6기 MAT.ZIP 개발 팀에 합류하게 되었다.
몇 달째 요구 사항이 정해진 미션만 반복하다 보니 단조로운 느낌이 들어서 사이드 프로젝트를 함께 하고 싶다는 갈증이 있었는데 마침 슬랙에 팀원 모집 공고가 올라와 바로 신청했다.
하필 우테코 비공식 불행 조합 (같이 미션하면 자꾸 쓰잘데기없는 버그를 발견해서 같이 불행해지고 마는 조합이다) 지니, 해리와 함께 하게 되어서 무슨 일이 일어나게 될지 기대가 된다. 우선 아직까지는 다행히도 많이 불행해지지는 않은 것 같다.
맛집 열심히 해서 레벨3에 쏙쏙 써먹어야지.
나의 캐릭터 찾기
지난주 목요일에는 캐릭터 발견 워크샵이 있었다.
캐릭터 발견 워크샵이란 간단하게 나의 사소한 경험 조각들을 모아 나의 특성과 내가 어떤 것을 하는 이유, 즉 '나다움'을 찾는 과정이라고 할 수 있다!
나는 나 자신을 돌아 보는 걸 잘 못하는 편이라 오래 걸릴 줄 알았는데, 한번 물꼬가 트이니 생각보다 술술 써졌다. 그리고 내가 발견한 나의 캐릭터는 다음과 같다.
- 나는 '내 힘으로 해냈다!' 라고 느꼈을 때 성취감을 크게 느낀다.
- 나는 나의 노력에 적절한 보상을 받았다고 느꼈을 때 성취감을 크게 느낀다.
- 나는 흥미가 있으면 급속도로 몰입하는 타입이다. 반대로, 흥미가 없으면 몰입하지 못한다.
- 나는 나에게 보이는 부분을 중요하게 여기는 타입이다.
그리고 워크샵을 진행하면서 이런 점을 더 생각해 보면 좋겠다는 추천을 받았다.
- 내가 어떻게 하면 흥미로운 주제를 쉽게 발견할 수 있는지 생각해 보자.
- 내가 그동안 어떤 부분에서 흥미로움을 느꼈는가?
- 내가 흥미로움을 느끼지 않더라도 꾸준히 해왔던 것들이 있다면?
- 결국에 무엇이 진짜 문제였던 것인지 더 생각해 보자.
- 코드 리팩토링을 통해서 무슨 문제를 해결하려고 했던 걸까? (ex. 코드의 길이, 코드의 성능 등)
- UI/UX를 개선해서 무슨 문제를 해결하려고 했던 걸까?
할 땐 하더라도 놀 땐 놀아야지
내가 버퍼 때 바빴던 진짜 이유.
Girls' Night

노래방으로 시작해서 노래방으로 끝났던 우테코 프론트 걸스 나잇. 어쩌다 보니 내가 추진 위원회가 되었는데 무사히 잘 끝나서 다행이다. 걸나추위 짱 🍀
육칠이들



여전히 열심히 노는 육칠이들. 그런데 이제 독방 타임을 곁들인...
가족 여행





안동으로 떠난 정말 오랜만의 가족 여행.
기대가 크면 우여곡절도 많은 법인지 아무 이슈 없이 무난한 여행은 아니었지만, 그래도 즐거운 여행이었다. 유난히 집을 사랑하는 우리 가족이 다음을 기약했다는 것으로 만족!
'개발 > 우아한테크코스 6기' 카테고리의 다른 글
[우아한테크코스 레벨4] 코딩해듀오 사용자 피드백 행사 회고 (0) | 2024.12.12 |
---|---|
[우아한테크코스 레벨4] 9월 2주차 회고 (0) | 2024.09.16 |
[우아한테크코스 6기] 최종 코딩 테스트 회고 (0) | 2024.08.25 |
[우아한테크코스 6기] 프론트엔드 최종 합격 후기 (0) | 2024.08.18 |