#스토리북

스토리북을 어떻게 활용하는게 좋은건가요?

스토리북을 사용하면 컴포넌트를 먼저 개발할 수 있다는 장점이 있다해서 사용해보려고 설치하고 사용 중인데, 이것 외의 장점이 있나요? 예를 들어 저 같은 경우는 카드 컴포넌트를 하나 만들면 스토리북에서 확인하고 뷰포트에 따라 어떻게 보이는지 확인해봅니다. 그 뒤로는 그냥 웹 페이지에서 해당 컴포넌트 여러개 넣는다치면, 어떻게 배치할건지 직접보며 스타일 정의를 합니다. 그런데 궁금한게 이렇게 컴포넌트 하나 만들때만 활용하는 도구인건가요? 아니면 제가 모르는 스토리북을 사용하는 짱 좋은 이유라거나 엄청 편한 이유가 있나요? 스토리북은 어떻게 활용해야 좋은걸까요.. 사용하시는 분들은 어떻게 활용하는지 궁금합니다. 그냥 컴포넌트 개발할 때만 사용하시는가요? 😮..

스토리북에서 카카오맵 적용해보신분 있으신가요?

로컬 환경에서는 잘만 나오는데 스토리북에 컴포넌트 띄우니 하얀 빈 화면만 나오네요.. 도메인 등록도 잘 되어있는데 뭐가 문제일까요?

개발 공부를 어떻게 하는게 좋을까요? (feat. 프로젝트)

얼마 전 Next.js로 개인 프로젝트를 진행했습니다. 그런데 프로젝트를 진행해보며 제가 어떤 방식으로 개발 공부 뱡향성을 잡아야하는지 혼란스러워 질문드립니다 ,, 🙏 처음 Next.js 쓸 때는 복붙 ,, 같은 기능도 복붙해서 파일 여러 개 만들기를 하고, 서버 컴포넌트와 클라이언트 컴포넌트에 대해 잘 알지 못한채로 프로젝트를 했었습니다. (+ 상태관리나 ,, 이런 것도 아예 모르고 개발했었습니다 ,,) 이번에 제대로 공부해서 기능을 구현해보고 싶어 다시 시작해서 완성했습니다. 그런데 제가 작성한 코드를 다 이해하며 작성했지만, **제가 작성한 코드가 좋은 코드인지? 에 대한 의문이 생겼습니다.** 그래서 팀 프로젝트도 참여해보며 같은 프론트 팀원 분의 코드를 확인해보며 좋아보이는 부분은 참고도 했지만, 이 방법도 한계가 있었습니다. 더 잘해보고 싶어 빨리 보여져야하는 이미지는 이미지를 미리 로드한다거나, next/image로 이미지 최적화를 하고 최대한 코드 중복을 줄이고자 공통 컴포넌트들을 만들기 위해 노력하긴 했었습니다. (나중에 스토리북 이라는 라이브러리를 알게되어 이걸 사용해보지 못한게 아쉽긴 했습니다.) 그래도 많이 부족한거 같아 어떻게 더 나은 개발을 해야할지 잘 모르겠습니다 ,, 첫 프로젝트에서는 부트스트랩 외에는 사용해보지 않아 이번에 제대로 다양한 기술을 써보고자 시도도 해보았습니다. (> 서버 상태 관리를 위해 tansack query도 사용해보고 클라이언트 상태 관리를 위해 recoil을 사용하고, 스타일링에는 css in js가 궁금해 styled components, 직접 어느정도 깔끔한 디자인을 하고싶어 피그마 툴을 이용해보았습니다. 소셜 로그인도 넣어보고 몽고 db 사용하며 데이터베이스도 연결해보았는데 ,, 막상 완성하고 나니 제가 많이 부족하다는 생각이 들었습니다.) 🤔 제가 작성한 코드가 좋은 코드인지 ,, 더 나은 성능을 위해 어떤 개발을 하면 좋은지와 같은 부분은 제가 어떻게 학습하는게 가장 좋은 방법일까요? 또한 어떤 것을 더 배워서 적용해보는게 좋을까요? ,, (제가 생각했을 때 프로젝트를 완성은 했지만, 제 프로젝트의 매력적인 점이 없는거 같아 너무 아쉬운거 같습니다.)

프론트엔드 테스트에서 단위,통합,E2E 중 하나만 해야한다면 무엇을 해야할까요

안녕하세요. Nextjs를 사용하는 프론트엔드 신입 개발자입니다. 새 플젝을 시작하면서 테스트를 도입하려고 하는데 단위->통합->E2E 전체를 다 하기엔 시간적, 인력적 여유가 없을거같아 셋 중 하나만 채택하기로 결정되었습니다. 이런 경우 어떤 테스트를 진행해야 할까요? 현재 동료와 의견이 갈리고 있습니다. (컴포넌트 UI 테스트는 스토리북을 도입할 예정입니다) 동료의견 : 테스트에 많은 시간 할애할 수 없으니까 통합테스트를 하자. 단위는 작성할 코드가 많아서 시간이 오래걸릴거같다. E2E는 단위,통합 이후 부가적으로 진행되어야 하는거지 'E2E만' 하는건 제대로된 테스트가 안될거같다. 이런측면을 고려했을 땐 '통합테스트'만 하는게 좋을거같다 제 의견 : E2E에 대한 의견은 공감한다. 그런데 테스트에 들어가는 노동력을 최소화 하려면 오히려 단위테스트를 진행해야 할거같다. 통합테스트는 여러 기능이 유기적으로 얽혀있는 테스트 코드를 작성해야하니 오히려 테스트코드 작성에 시간이 더 오래 걸릴수도 있을거같다. 그리고 테스트 과정에서 문제가 발생하더라도 어느 기능이 문제인건지 추적하려면 단위테스트보다 훨씬 시간이 걸릴거같다. 사실 회사마다, 개발자마다 의견이 다른건 알고 있습니다! 하지만 저희가 시니어나 중간급 개발자가 없는 입장이라 조언을 구할곳이 없어 여기에 질문해봅니다. 감사합니다.

Nextjs dev mode에서 실시간으로 ESLint 경고를 띄울순 없나요?

현재 Nextjs 14.1.0 버전으로 스토리북까지 포함한 템플릿 프로젝트를 만드려고 합니다. Nextjs 프로젝트는 처음인데 이전에 리액트 기반으로 했을땐 dev 모드에서 eslint warning이 실시간으로 보였는데 next에서는 보이지가 않네용.. npm run lint로 확인하는 것 말고 실시간으로 확인할 순 없을까요?

테스트 코드 작성 단계

저는 리액트로 개발하는 프론트엔드 개발자 입니다. 초기세팅부터 시작하는 새로운 프로젝트를 진행하고 있는데 스토리북으로 컴포넌트 먼저 잡고 있거든요. 초기다보니 기획이 바뀔 가눙성도 있구요.. 스토리북에도 테스트 코드를 작성할 수 있더라구요. 그런데 테스트 코드는 지금 단계에서 하는 것 보다는 어느정도 기획이 고정되고 유지보수하는 단계에서 진행하는 것이라고 생각하는데.. 맞을까요?

Headless CMS 와 UI

안녕하세요 CMS를 UI와 관련해서 어떻게 사용해볼까 고민중인 프론트엔드 개발자입니다 회사에서 CMS를 통해서 컨텐츠admin 들이 컨텐츠와 UI를 수정하는걸 목표로 프로젝트를 진행하고있는데요 CMS경험이 없는 저는 그냥 백엔드가 하나 더 생긴다고 대충 생각하고 있었는데 만약에 CMS에서 컴포넌트나 스타일 메타데이타도 관리를 한다면 어떨까 생각을해서 알아보고있습니다. Builder.io 처럼 drag and drop으로 UI를 만드는 방법까진 아니더라도 FE개발자들이 컴포넌트들을 만들고 스토리북을 사용해서 레퍼런스를 제공하며 프로덕트나 CMS사용자쪽에서 참고해서 CMS를 통해 페이지를 만들거나하면 좋을거같은데요.. 이런 방식이 잘 사용되는지 사용된다면 장단점이있는지 사용하셨던 분들이나 사용하고 계신분들이 조언해주시면 감사하겠습니다🙏

API설계할때 백엔드와 커뮤니케이션 내용

현재 프로젝트가시작되엇는데 처음부터 정해가야합니다 일단 cna로 넥스트 만들고 스토리북 등 필요한 설정을 해놓은상태입니다만 뭐가 더 필요한지 잘모르겟어서 질문올립니다 1.일단 폴더구조를어떻게정해야할까요? 버튼 등 공통컴포넌트는 src밑에 콤포넌트폴더만들고 그안에 넣어놧고 그 걸 쓸 컨네이너 폴더는 src밑의 app폴더 밑에 각각폴더만들어서 작성해놓앗습니다 이대로 가도될까요? 2.스토리북설정해서 로컬에서확인하긴햇는데 이거를 나중에 다른사람하고 공유를 해야한다고알고잇는데 어떻게해야하나요? 3. Api 설계를 정해야하는단계인데 해본적이없어서 막막하네요 백엔드하고 어떤걸 상의하면되는걸까요? 구체적으로 알려주시면 감사하겠습니다 예를들어 프론트쪽에서는 뭘 하고 백엔드에서는 뭘 해야하는지요ㅜ