일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 모션비트
- 백준
- 소켓
- 크래프톤정글
- HTML
- Java
- CSS
- corou
- 스택
- 알고리즘
- userprog
- 나만무
- 크래프톤 정글
- 프로그래머스
- 리액트
- 사이드프로젝트
- Flutter
- Vue.js
- 자바스크립트
- TiL
- 정보처리기사
- 4기
- 핀토스
- 큐
- 시스템콜
- pintos
- 자바
- 코드트리
- defee
- JavaScript
- Today
- Total
문미새 개발일지
개발 회고 본문
매번 과제 전형이나 코테에서 떨어지는데, 실력이 미숙해서 그런지 아직도 취업의 길은 멀다. 하지만 여러 과제 전형을 맛보면서, 그동안 고려하지 않았던 부분이나 놓치고 있던 지식들을 습득할 수 있었기에 도움이 많이 되었다.
먼저, 본인은 개발할 때 어떤 기능을 구현해야 하면 성능과 최적화를 보류하고 순 기능만을 개발하곤 한다. 이후로 추가적인 수정을 통해 부족한 부분을 메꾸면 좋은데, 기능 구현에 만족해서 리팩토링을 많이 하지 않고 컴포넌트 분리정도까지 하여 코드 정리만 했었다. 그러다보니 최적화에 대한 질문에 뭐라 답을 하기가 어려웠다. 아는게 없으니..
가장 인상 깊게 배운 건 css 스타일에 관한 질문이었다. 지금까지 스타일에 대한 부분은 유지보수성이나 애니메이션의 효율성 정도만 고려하며 작성했었는데, 애니메이션 최적화의 경우도 애니메이션을 자주 사용했던 모션비트 프로젝트가 끝난 후에나 학습했었기 때문에, 여전히 모션비트 코드에는 opacity와 margin들이 넘쳐난다. 현재는 조금이라도 애니메이션을 구현할만한 부분이 있다면 translate와 display를 주로 사용하려고 한다.
CSS-in-JS에 대해 어떤 생각을 가지고 있냐는 질문에 본인은 대충 스타일 코드를 바깥에서 작성하는지, 같은 코드파일 내에 작성하는지 정도로만 알고 있었기에 해당 질문에 대한 답변을 만족스럽게 못 드린 것 같다.
특히, css in js의 돋보이는 단점인 FOUC에 대해 알게 되었는데, 이는 CSS-in-JS가 런타임 시 스타일 적용이 되기 때문에 이미지가 스타일을 적용받지 못하고 깜빡이는 현상을 말하며, 본인은 해당 현상이 무조건 발생하는 것이라 생각해 opacity를 주거나 useEffect를 사용해 늦게 보이게 하는 코드로 틀어막고 있었다. 물론 코드에 정답은 없지만, 스타일에 대해 학습하고 나니 더 좋은 방법이 있음에도 개선하지 않는건 미련하다고 생각해서, useEffct 코드를 지우고 styled-components를 tailwind로 변경했다.
물론 본인은 가독성과 유지보수성이 좋았으면 해서 CSS-in-JS를 좋아한다. 그러던 중 오정민 개발자분이 만드신 devup UI 라이브러리를 알게 되었으며, CSS-in-JS의 단점을 보완한 라이브러리라고 하길래 사용해보고 싶었으나 라이브러리 문서를 못 찾은건지 사용법을 잘 모르겠더라. 하지만 태그를 <Box>와 <Text>로만 구현하는게 되게 흥미로웠고 아마 특정 인자값에 p, span 등 태그명을 넣어서 사용하지 않을까 싶다. 나중에 찾게 되면 즐겨 사용할 것 같다.
그리고 상태 관리 라이브러리 중 Zustand라는 더 편한 것도 알게 되었다. 분명 공고들의 자격 요건에 써있었을 테지만, 본인의 무관심과 리덕스를 사용할 줄 아니 괜찮다고 생각한게 큰 원인이었을 것이다. 공식문서를 읽어보니 리덕스 코드의 반절 이상이 줄은 것 같더라.

간단한 상태 관리의 경우 공식 페이지에 있는 이 코드로 끝나며, 상태를 더 추가하려면 useStore 내부에 작성하면 된다.
const useStore = create((set) => ({
count: 1,
name: "Zustand",
isActive: true,
inc: () => set((state) => ({ count: state.count + 1 })),
toggle: () => set((state) => ({ isActive: !state.isActive })),
}))
제대로 사용해본적은 없어서 지금 만들고 있는 미니게임 페이지를 구현할 때 꼭 사용할 예정이다.
효율적인 라이브러리의 추가로 트렌드에 맞춰 따라가야 하는데, 기존에 배워둔 것이 아까워 한 가지 방식에만 머물러있는 것을 반성했다. 꾸준히 라이브러리와 프레임워크들의 업데이트 동향을 확인하고 신 기능을 사용해보는 것을 목표로 잡고 있다.
그리고 자동화에 대한 질문을 회고하면서 웹 개발을 꾸준히 하려면 무조건 경험해보는 게 맞다 생각하여 GitHub Action을 통해 CI/CD를 구현해보려고 한다. 모션비트 때 현우님이 구현한 부분이나, Corou때 재희님이 구현한 부분을 보고 똑같이 해봐야겠다.
둘 다 개발을 매우 열정적으로 하기 때문에 같이 학습하면서 배울 점이 많았는데, 하고 있는 작업만으로 벅차서 주변을 못 둘러본게 지금 생각하면 너무 아쉽고 후회된다. 재희님은 아직도 연락 주면서 상황을 파악하고 도움을 주려고 하는 것 같지만, 자신감도 점점 떨어지고 취업 못한게 부끄러워서 너무 할말이 없더라 ㅋㅋ.. 물론 본인 생각이라 어떻게 생각하실진 모르겠다. 어떻게든 취업해서 내 역량을 늘리고 적용시킬 수 있게 다시 맘 잡고 개발할 예정이다.
현재 목표는 4월 20일에 있는 정보처리기사 실기 시험 대비와 현재 만들고 있는 토이 프로젝트인 미니게임을 계속 개발하려고 한다. 현재 퍼즐 게임만 간단히 구현되어 있는데, Tailwind에 익숙하지 않아 gpt에 의존하고 있어서 css 학습할 때 처럼 중요 스타일은 외워서 사용할 것이다. 퍼즐도 이미지의 크기나 업로드 부분에 있어 정확한 기획을 짜지 못해서 다시 리뉴얼 시킬 예정이고, 지금은 야추 다이스 게임을 웹 소켓을 사용해 멀티로 만들 계획을 가지고 있다.
오랫동안 취업이 안되서 마음이 많이 급하지만, 개발 자체를 즐기려고 한다. 계속 담고 있던 고민도 해결하고 있고 무엇보다 내 마인드가 매우 중요하기 때문에 텐션 유지가 관건이다.
'개발 TIL' 카테고리의 다른 글
앱플레이어 expo 연동, 구글 로그인 구현 중 (0) | 2025.04.02 |
---|---|
React-Native Expo에 Tailwind 적용하기 (0) | 2025.03.31 |
vercel 배포 (0) | 2025.02.27 |
supabase 연결, 랭킹 페이지 구현 (0) | 2025.02.25 |
퍼즐 만들기 메인 페이지 추가 (0) | 2025.02.19 |