🔥딱 8일간! 인프런x토스x허먼밀러 역대급 혜택

지금 바로 쿠폰 받기👉

[인프런 워밍업 스터디 클럽 4기_FE] 1주차 발자국 회고

[인프런 워밍업 스터디 클럽 4기_FE] 1주차 발자국 회고

rlwjd31 3개월 전

워밍업 클럽을 시작하기 앞서

 

react로 프로젝트를 하고 nextjs로 마이그레이션을 해보고 싶은 계획이 있었다. 하지만, 개인 블로그의 필요성을 느끼고 있었고 요새 컴퓨터 앞에 앉으면 바이브 코딩이다 노코드로 수익을 창출을 했다~와 같은 글들을 계속 볼 수 있었다. 시대가 ai를 활용하여 효율을 극대화 시키는 길목으로 들어서 감을 체감하는 도중 cursor ai + 블로그 + notion ai강의가 올라왔다!!!
난 대부분 공부 내용을 notion으로 정리한 것이 많고 notion api를 활용하여 블로그를 만들 기회를 엿보고 있었는데 마침 딱 이런 강의가 올라오다니 삼박자가 맞아떨어졌다. 주저 없이 강의를 아니..... 사실 강의비가 비싸 주저없이 하진 않았다....
하지만, 워밍업 클럽과 연계하는 것 같아 신청을 한 계기가 됐다.

 

수 많은 강의를 들어보면서 강의는 등대와 같이 가이드의 역할로 생각한다. 강의는 내 실력을 올려주겠지만 자신이 어떤 방식으로 하기 나름에 따라 개개인 마다 얻을 수 있는 부분의 갭의 격차가 많이 난다고 생각한다. 따라서, 아래와 같이 스스로 가이드를 통해 강의를 수강했다.

 

  1. 단순히 따라치지 말 것

  2. 결과를 보고 혼자 해 볼 것

  3. nextjs와 관련된 공식 문서를 훑어보고 공부할 것

  4. 능숙한 개발자가 아니기에 개발을 하고 나서 ai와의 차이점을 통해 스스로 인사이트를 기를 것

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    들어가며

     

     

     

     

    스터디가 시작하기 전에 틈틈히 공부를 하다 보니 이미 수강률이 80%에 가까워졌다. 따라서 스터디 기간에는 혼자 모든 것을 해보기로 마음먹었다. 그 전에 UI........를 해결해야 했는데 .... 이왕 블로그를 만드는 김에 같은 스타일은 죽어도 싫었다. 마침 figma도 AI를 제공하길래 figma AI를 사용해 봤다.....
    결론부터 말하자면 figma의 기본 기능을 모른다면 아직 사용은 추천하지 않는다...
    개발자가 ai의 도움을 얻어 디테일 한 것은 직접 수정해야 하듯이 figma ai또한 마찬가지이다.

    figma ai?

     

     

     

    figma ai는 유료이다. 한 달 안에 블로그를 완성 시킬 것이기에 따라서 딱 한달만 사용해보자는 마인드로 결제를 질러버렸다.

     

     

     

     

    "블로그 페이지 만들어줘~!!"

     

     

    image

    figma ai를 활용한 블로그 페이지이다. 하지만 보면 알겠지만, 이미지는 밖으로 삐져 나가 디테일한 부분은 직접 수정을 해주어야 한다. 그나마 다행인건 모든 layout을 "auto layout"으로 만들어줌은 편하단 건데....

블로그 카테고리 리스트를 추가하기 위해 다시 한 번 명령어를 내렸지만......
원하는 곳에 배치가 죽어도 안 되어 직접 넣어줬다.

이미지를 수정하기 위해선 frame선택이 아닌 image를 클릭하여 image생성하기라는 tab 기능을 이용해야 한다.

image

낫 뱃?

 

figma ai와 하루를 투닥거리다가 다음날에 드는 생각은 아직 figma ai를 통해 모든 것을 할 수 있는 것은 아니다라는 결론에 도달했다. 따라서, figma coummunity에서 shadcn ui component를 찾아 import후 figma ai가 만들어둔 초안을 대체해 가면서 만들고 있다.(아직 진행 중....)

하다보니 uizard ai도 알게되었고 난 uizard가 훨씬 뛰어나다고 생각한다. 하지만 이 또한 제한이 있기 때문에 유료로 전환은 하지 않고 "dribble과 pinterest" + "figma ai" + "shadcn component" 조합으로 ui를 으쌰으쌰 해 보고 있다.

 

NextJS learn

 

해당 강의는 ai를 활요한 강의이기 때문에 nextjs에 대해서 깊게 다루지 않는다. 따라서 "nextjs learn doc site"에서 nextjs를 공부하면서 병행하고 있다.

image

관련 resource와 guide가 친절하며 nextjs를 배우고자 하는 사람은 이것부터 해보는 것을 강력히 추천한다.

 

쏟아지는 에러와 무지

 

공부를 하면 할 수록 무지를 깨닫고 만나게되는 수 많은 에러를 타파하기 위해 수 많은 고민을 한다.....😖😖😖

아래는 지금까지 nextjs 강의를 수강하며 겪은 에러와 지식들이다.

 

  1. streaming이 무엇인가?

  2. nextjs에서 prefetching을 하는 시점

  3. nextjs에서 Image & Link component

  4. client와 server에서의 생성 날짜로 인한 hydration error -> time zone(UTC로 해결)

  5. 객체 자체를 component key로 넘길 시

  6. nextjs에서 client, server component

     

     

등등 많지만 나에게 impact가 남은 것을 작성하였다.

그리고 꼭 공유하고 싶은 것이 있는데 commit title과 body를 작성하는데 시간이 너무 오래 걸려 cursor ai 도움을 받을 수 있을까 하여 찾아보았는데 있었다!!!
vscode의 git tab에서 별표를 눌러서 작성하는 방법도 있지만 자주 사용할 것 같아 단축키로 등록해서 사용하고 있다.

vscode 명령에서 shortcut json에 들어가서 아래와 같이 추가해주면 staged된 변경 사항에 대해자동으로 작성해준다.

 

난 gitmessage template을 사용하는데 이 template 맥락에 맞춰서 작성해준다. 개꿀!

 {

"key": "cmd+m",

"command": "cursor.generateGitCommitMessage"

}

 

image

마치며

사실 이 강의를 통해 다시 공부하기 전에 슬럼프로 인해 cs공부를 조금씩 하면서 부모님 일을 도우며 시간을 보내고 있었다. 취준을 1월부터 시작하여 합격한 곳도 불합격 한 곳도 있었지만, 경기가 안 좋은 탓인가 내가 느낀 것은 기업들에 대한 인식들이 생각보다 좋진 않다 ㅜㅜ 하지만, 나에게 맞는 곳을 찾을 때까지 내가 하고자 하는 바를 이루며 내 할일을 하고 있으면 된다는 생각이다. 갑자기 생각난 말인데 완벽한 뱅기를 만들기 위해 5년간 투자하여 망한 보잉사?에 비해 일론 머스크와 같이 실패를 두려워하지 않고 도전하는 것이 좋다라는 인용구이다. 원래 난 완벽주의자 성격이 있어 완벽하게 한 후 다른 것으로 넘어가는 성격이었는데 개발하는데 있어 이것은 매우 큰 단점으로 인식하고 계속 고쳐나가는 중에 강의에서 강사님이 빠르게 개발해보고 수정하는 것이 좋다는 말에 격한 공감을 하면서 1주차를 마무리한다.

 

참고

 

댓글을 작성해보세요.

채널톡 아이콘