#상태관리

Next 서버 컴포넌트와 전역 상태관리

안녕하세요. Next15에서 서버 컴포넌트를 적극적으로 도입하여 프로덕트를 개발하고 있는데, 고민이 되는 부분이 있어 여러 분들의 도움을 얻고자 질문을 남깁니다. 서버 컴포넌트에서 받아온 데이터와 클라이언트 컴포넌트에서 사용하는 zustand가 적절히 사용되고 있는지 고민이 듭니다. 현재 GET 요청의 경우 각각의 서버 컴포넌트에서 fetch를 통해 진행하고, 해당 데이터를 자식 클라이언트 컴포넌트에서 사용할 경우 props로 내려 사용하고 있는데, 이때, 드릴링이 심해질 경우 zustand와 같은 전역 상태관리 라이브러리를 함께 사용하려고 합니다. 예를 들어, 서버 컴포넌트의 첫 번째 자식인 클라이언트 컴포넌트에서 zustand를 사용하고, 이후 자식 클라이언트 컴포넌트에서는 zustand를 통해 상태관리 할 때 자식인 클라이언트 컴포넌트의 업데이트가 진행되는 부분에서 try/catch를 통해 요청을 보내고, router.refresh()를 통해 서버 컴포넌트에서 데이터를 새로 받아옵니다. 이후 클라이언트 컴포넌트에서는 useEffect로 서버 컴포넌트에서 props로 받아온 데이터가 바뀌는 것을 감지하고, 해당 props를 zustand에서 사용하는 데이터로 업데이트하려고 하는데 문제가 될만한 점이 있을까요? 이와 관련된 링크나 답변이 있으시다면 감사히 받겠습니다!

React 상태관리질문

학원에서 프로젝트를 진행중인데 기능이많아 상태관리가 많아요. React useContext와 Redux중 어떤상태관리를 사용하는게 유리할까요?? 그리고 현업에서는 어떤방법을 택하는지 궁금합니다

프론트엔드 경력(혹은 그에 준하는 실력) 모집하는데, 이력서에 백엔드 경력은 아예 안 쓰는게 좋을까요?

저는 자바 스프링 백엔드 경험이 2년 반 정도 있는데, 프론트엔드로 전향하고 싶어서 퇴사후 1년정도 typescript, react, next.js, react 상태관리 라이브러리 공부해서 프로젝트 만들고 이제 이력서 작성하려고 하는데요.. 이력서에 자바 스프링 웹개발 경력은 아예 빼는게 좋을까요? 아니면 웹개발 경험을 해봤다는 것 자체가 플러스 요인일 수 있으니 기술스택이 달라도 넣는게 좋을까요?..

성과를 수치로 작성하는게 어려워요

안녕하세요, 현재 퍼블리셔로 일하고 있습니다. 업무를 진행하며 이직 이력서를 작성 중인데, 성과를 수치로 나타내는 것이 어렵습니다. 대부분 과업 특성이 어떤 레이아웃 혹은 기능을 구현하는 수준에서 결과물이 도출했다 라는 것인데요 "성과를 수치로 작성하는 것이 참으로 어렵습니다." 예를 들어 x%에서 xy%로 시간 단축/혹은 고객확보 이런식으로요 제가 구현한 UI가 사용자/고객에게 어떤 불편함이 있었고 혹은 이전 대비 어떤 차이점이 있는지 확인하기가 어렵습니다. 저와 같은 고민에 있었거나/ 있는 분들은 어떻게 이런 이슈를 해결하셨나요? 저와 같은 경우, 관심있는 라이브러리/언어로 개인 포트폴리오로 어필을 해야할까요, 현재 회사에서 다음의 작업을 진행했고/하고 있습니다, : 회사 홈페이지, 웹&모바일 리뉴얼 및 JS인터렉션 기능 추가 : GSAP으로 서비스 가이드 애니메이션 구현 => GSAP을 회사에서 정해준게 아니라, 필요한 기능이 GSAP으로 할 수 있는거 같아, 진행함 : 리액트로, 채팅앱 UI 프론트 담당 - 비동기 통신, 상태관리를 제외한 채팅앱 UI 기능 구현(프론트 담당) > 비동기 통신, 상태관리 데이터 구조는 백엔드 개발자가 정리한 목업 데이터를 가져다 사용하다 보니 - 컴포넌트 기능 개발(ex) 아코디언, 체크박스 등등 ) 성과-> 수치에 대한 방법에 대해 의견있는 분 있을까요? P.S 1. 혹시 저와 같이 퍼블리셔인데 리액트 업무를 하시는 분들은 어떻게 진행한 리액트 작업/업무는 어떻게 어필을 하면 좋을까요? 2. 현재 리액트 코드는 (회사에서) 작업 중 인데, 리펙토링하게 된 계기와 이유 혹은 코드 정리하는 것으로 성과(수치)를 설명해야 할까요? 감사합니다

신입 개발자 취준 고민이 있습니다

안녕하세요 신입 개발자로 취업을 하고싶은 준비생입니다. 부트캠프 수료한 지가 곧 있으면 1년이 다 되어가서 얼른 취업을 해야하지만 서류에서 광탈을 하는 상황입니다. 혼자서 생각하기에는 좀 고민되는게 있어서 경험이 많으신 분들에게 질문을 드리고 싶어서 글을 작성하게 되었습니다. 기존 포트폴리오는 자바스크립트,리액트 nodejs을 사용한 프론트, 백엔드를 둘다 다룬 프로젝트로 팀플 1개개인 프로젝트가 1개가 있고 구직기간 중 학습한 것을 바탕으로 만든 플러터 앱 프로젝트로 총3개가 있습니다. 취업을 위해 기존 프로젝트를 보완하거나 기존 스택을 이용하고 좀더 발전된 코드로 새로운 프로젝트를 추가하는 노력을 하는게 나을까요? (예를 들어서 상태관리 폴더 구조 관심사 분리 데이터베이스 설계 등을 기존 프로젝트보다 레벨업해서 새로 프로젝트 만들기) 아니면 취업을 위해 다시 한번 6개월 정도의 부트캠프를 다니는 것은 좋은 선택이 아닌걸까요? 찾아본 부트캠프로는 자바 풀스택 부트캠프 (지금까지 자바스크립트 기반으로 공부를 했기 때문에 자바까지 공부하게되면 이도저도 아닌 것 같이 보일까 걱정이긴하지만, 수료 후 취업 할 수 있는 기업수가 많아질 수 있어 좋겠다고 생각했고) 혹은 플러터 부트캠프가 있습니다. (기존 포트폴리오에 플러터 프로젝트가 하나 있어서 이와 연계해서 좀더 딥다이브하기 위해 플러터 부트캠프를 다니려고 했습니다

플러터 상태관리 어떤거 많이 쓰시나요?

현업에서는 어떤게 많이 쓰이는지 궁금합니다

상태 관리 라이브러리 무엇을 선택해야할지 궁금합니다.

프론트엔드 부트캠프 수강 중인 학생입니다. 현재 팀 프로젝트를 들어가기전에 상태관리 라이브러리를 활용해서 간단한 redux(CRUD), zustand(CRUD)까지 구현 해봤습니다. 질문1) 팀플젝을 장점인 많은 zustand로 하려고 했으나 취업 합격자들, 취업어플 정보들을 봤을때 redux와 recoil이 많더라구요. 그래서 저도 redux, recoil을 한정해서 플젝을 해야할까요? 질문2) zustand로 플젝해도 회사 자격요건에 회사에서 redux를 쓴다던가 redux경험 우대사항이 적혀 있다던가 하면 불이익이 있을까요?

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

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

react-hook-form 복잡한 form에서 궁금점이 있습니다 !

안녕하세요 현재 진행하는 프로젝트에서 form을 recoil로 관리하고있습니다. 이유는 form과 화면구성이 너무 복잡한 형태라 props drilling도 심하고 (부모에서 자식까지 5~7 depth) 관리해야하는 데이터가 많아 store에서 관리하고있습니다. react-hook-form이 복잡한 form에서 효율을 낸다고 해서 마이그레이션 해볼까 생각중인데 궁금점이 있어 작성합니다 ! 1. 이렇게 전역적으로 관리를 해야하는 복잡한 form에서도 좋은 효율을 내고 전역 상태관리 라이브러리보다 좋은 방향일까요?! (FormProvider 를 사용) 2. form에서는 input 필드만이 아닌, tab클릭, 드랍다운 클릭, 체크박스 클릭, 이미지 업로드, 라디오 클릭 등등 이러한 경우가 많은데 react-hook-form 을 사용해도 좋은 방향인가요?! 어떨때 react-hook-form을 사용하면 좋은지 궁금합니다 !

react에서 복잡한 상태를 관리할때.. 한번에 관리? 분리해서 관리? (jotai, recoil, useState)

안녕하세요 react를 이용해서 복잡한 작성 페이지를 만들고있습니다. 아래의 타입은 예시입니다. type payload = { name: string; message: string; type: string; url: { pc: string; mobile: string; }; contents: { images: { url: string; name: string; }[]; buttons: { name: string; url: string; }[]; }; conditions: { ... }, .... }; 위처럼 복잡한 데이터를 서버로 보내줘야해서 데이터를 관리해야하는데 현재는 페이지내에 구조가 복잡하고 컴포넌트도 매우많아 props drilling이 너무 심해질거같아서 recoil, jotai와 같은 상태관리 라이브러리를 이용해서 작업을 진행하고있습니다. 이러한 상황에서 관리하는 데이터를 한객체에 모아서 관리하는게 좋은지 아니면 const nameAtom = atom(''); const messageAtom = atom(''); const typeAtom = atom(''); const urlAtom = atom({ pc: '', mobile: ''}); .... 처럼 일일히 쪼개서 관리하는게 맞는 방향인지 모르겠어서 질문드립니다 ! (사수가없어서 물어볼곳이없어요...) 현재는 아래와같이 쪼개서 작업한뒤 submit시에 합쳐주는 방식으로 구현해놓았는데 atom 갯수가 20개 정도 되버리니까 너무 복잡해보여서 이게맞나... 싶어서 질문드리게되었습니다.

nextJS 에서 안전하게 token 처리하기

nextjs에서 nextAuth 쓰지않고 안전하게 token 처리하는 완벽한 예시가 있는지 알고싶습니다. 사이드 프로젝트중에 여러 시도를 해봤는데 정답을 못찾겠습니다. 일단 axios 인터셉트로 ssr이나 csr이나 모두 토큰을 헤더에 담아서 보내는 것을 목표로 하고 있습니다. 1. 상태관리 라이브러리를 사용한다. 당연히 ssr 환경에서는 불가하니 탈락 2. 그냥 쿠키를 사용한다 보안 문제가 있으니 탈락. 3. http only 쿠키를 사용한다. csr 환경에서 접근할 수 없으니 탈락. 대안으로 생각해본 방법들은 1. 모든 api를 server action을 랩핑해서 미들웨어처럼 사용하고 http only 쿠키 이용하기 2. 쿠키와 상태관리 모두 값을 넣어두고 두가지 다 관리하면서 서버와 클라이언트 컴포넌트에서 각각 제어하기 하지만 두가지 방법은 너무 번거롭고 버그 양산일 것 같습니다. 많은 분들께 여쭤봤을 때는 그냥 쿠키를 사용하고 보안은 어느정도 포기한다는데 다른 방법이 있을까요?

[Flutter] 실무에서 flutter 상태관리는 어떤걸 사용하나요?

찾아보니까 패키지가 엄청나게 많더라구요 provider, riverpod, getx, get_it..... 졸업작품 개발 중 인터넷 상태 앱 전역 검사를 구현하다가, getx를 접하게 되어서 상태관리가 중요하고, 코드를 효율적으로 짤 수 있구나를 깨닫고 공부해보려고 합니다 이 주제 아니어도 flutter와 그 외 실무에 관해서도 조언 받고싶습니다!

Next.js로 프로젝트 중인데, 팀원과 의견조율이 잘 안돼서 도움 부탁드립니다.

안녕하세요, 저는 백엔드 개발자로 일한지 이제 2년차가 된 개발자입니다. 사이드프로젝트에서는 프론트 개발을 하고 있고 현재 Next.js를 사용하고 있습니다. 백엔드팀도 따로 있어서 Next.js의 API routes는 BFF같은 느낌으로 사용하고 있습니다. [Next pages] <-> [Next API] <-> [백엔드 서버] 현재 상황은 유저의 로그인정보를 어떻게 관리하냐로 이야기를 하고 있습니다. 1. 마이페이지 -> 프로필 수정 페이지 2. 로그인 -> 메인페이지 이렇게 유저의 프로필 정보가 많이 쓰이다보니까 이걸 매번 GET해서 가져올까, 전역상태로 관리할까 이야기를 하는데 좀처럼 의견이 좁혀지지가 않는 상황이라 다른 분들의 의견을 여쭙고 싶습니다. (참고로 저희 둘 다 프론트 개발경험이 그리 많지 않습니다) A: 그냥 매번 GET하자.(넥스트 API 캐싱을 사용하자) - 전역상태관리보다 코드 복잡도가 줄어들 것 같다. - 넥스트의 API 최적화를 사용하는 게 더 Next스러운 방식같다. B: 전역 상태로 관리하자. - useEffect로 현재 모든 GET 요청을 하고 있기 때문에 윌업데이트에 변경이 일어나면 재렌더링이 일어남 - (하지만 컨텍스트 정보가 바뀌지 않으면 최초 렌더 이후 리렌더 되지 않음) - 캐싱한 데이터를 받아오더라도 결국 불필요한 api요청을 보내는 것이며 api요청을 보내는 것보다 전역 상태에서 가져다 쓰는 것이 더 바람직하지 않나 서로 비슷한 실력에 사람도 둘 밖에 없어서 결정을 내리기 힘들어서, 다른 분들의 의견을 좀 들어보고 싶습니다. 읽어주셔서 감사합니다.

Flutter 상태관리 라이브러리 뭐 사용하시나요?

GetX와 Provider, Riverpod , BLoC중 어느 라이브러리를 선호하시나요?? 최근 Flutter 공부를 시작했는데 모두를 한 번에 파악하긴 어려울거 같고 간단한 프로젝트 진행하면서 익혀보려 하는데 어느게 더 선호되는지 궁금합니다..

Jotai가 Provider 없이 컴포넌트간의 atom 공유가 가능한 이유

상태관리 라이브러리인 jotai를 사용할때, Provider로 감싸지 않아도 atom 선언과 useAtom을 이용해 컴포넌트간의 공유가 가능한걸로 알고 있는데, 그 이유가 무엇인가요? 내부적으로 context api를 사용하는걸로 알고 있는데 provider가 없이 어떻게 가능한걸까요?

첫 취업에대한 고민

4년제 내년2월 졸업예정인 컴퓨터공학과 학생입니다. 제가 프론트앤드개발자를 준비하다가 서류 이것저것 넣다가 어느 한곳이 최종합격이 되었습니다. 근데 그 회사가 250명, 매출액 500억 정도 규모의 중소로 연봉도 생각보다 높아서 회사 자체는 마음에 드는데 직무가 프론트개발보다는 웹 퍼블리셔의 직무여서 고민입니다. 완전한 퍼블리싱 직무였다면 저도 가지 않겠지만, 밑에 내용들 때문에 고민이 생겼습니다. 우선 사용언어: html,css,js,ts,react,vue 라고 공고에 써져있었고 저의 자소서는 프론트개발자로써의 자소서를 제출하였습니다. 또한 면접 질문도 react상태관리나 props drilling 등의 퍼블리셔와는 거리가 먼 질문을 하였습니다. 그리고 팀장분께 정확한 업무를 물어봤더니 지금은 퍼블리싱을 하고있고 백엔드팀에서 개발 부분은 다 하고있지만, 추후에 백앤드 팀에서 맡고있는 프론트개발 부분을 가져와 확실히 분리 하고 싶다고 들었습니다. 취업해서 퍼블리셔로 일하다가 프론트개발부분도 다루거나 나중에 공부를 더해서 이직을 생각하고있지만, 주변에서는 웹퍼블리셔로 시작하면 그것밖에 못하고 나중에 프론트개발자로 이직을 할때 인정도 안해준다는 말을 많이 들었습니다. 그래서 퍼블리셔의 업무만하면 고민도 없이 가지 않겠지만 위의 내용들 때문에 회사를 가야될지 그냥 국비를 듣거나 혼자 더 공부를해서 취준을 더 하는게 맞는건지 고민입니다. 취업이 그렇게 급한 상황은 아니고 그냥 제가 빨리 취업해서 돈 벌고 싶고 회사 자체는 마음에 들어서 고민입니다. 많은 조언 부탁드립니다!

프론트엔드 공부법에 대해 질문드립니다

솔직히 초반 기초부터 탄탄히 쌓아야하는 것이 중요하다고 생각하며 그렇게 준비하고 있습니다. 현재 저는 프론트엔드 공부를 8개월 정도 하고 있으며, js react 정도를 할줄 안다고 할 수 있습니다 제가 처음 공부할 때 공식문서와 cs지식을 기반으로 js를 공부하게 배워서 그렇게 공부하다보니 기초가 탄탄해지고 react를 시작할 때도 어떠한 기반으로 공부해야할지가 보여서 react도 비슷하게 공부하고있습니다. 그런데 최근에 react를 공부하면서 프로젝트를 하다보니 react query나 redux같은 상태관리 라이브러리의 필요성을 느끼고 공부하는데 이 두 라이브러리 또한 공식문서 보면서 낑낑대면서 하나씩 공부하다보니 속도가 너무 느리고 답답한 느낌이 들었습니다 사실 욕심은 맞지만 저는 현재 보충역 병특을 노리고 있으며 3개월 정도 안에 취업을 희망하고 있습니다 그런데 회사 조건들을 보면 대부분 ts와 next를 할줄 아는 사람들을 최소 조건으로 뽑더라구요. 그래서 기초가 탄탄하진 않지만 바로 ts, next를 같이 공부하면서 조건을 맞추는게 맞을지 아니면 그래도 천천히 공부하면서 ts 와 next를 공부해야할지 모르겠습니다.. 후자가 정석적이고 맞는거는 머리로는 알지만 빠르게 취업을 해야한다는 생각때문에 자꾸 야매로라도 후딱 배우고 이력서에 써버리고싶다는 생각이 드네요.. 물론 이력서에 기술을 쓴다는 것은 그 기술에 대해 어떤 질문이 들어와도 답을 할수 있어야한다고 생각하기에 두렵긴 합니다..

Usecontext와 redux 차이 궁금합니다!

예전에는 usecontext 만으로는 상태관리 하기엔 부족하다고 해서 redux를 꼭 공부하라고 배웠는데, 요즘에 들어보면 많이 업데이트 되면서 context 하나만으로도 전역 상태관리가 충분하다 해서요 그런데도 굳이 redux를 사용하는 이유가 따로 있을까요?

부트캠프 최종발표 내용에 관해서

선생님들 안녕하세요. 부트캠프에서 셀프세차장 예약 앱을 주제로 약 두달여간의 개발을 진행했고, 3일 뒤에 최종발표만을 남겨두고 있습니다. 부트캠프 운영진 측에서 최종발표 내용으로 개발 주안점을 둔 부분을 주로 다뤘으면 좋겠다고 하셨습니다. 발표 내용을 미리 구성해봤는데, 선생님들께서 보시고 조언 좀 주시면 감사하겠습니다. 저희 팀 개발 스택은 다음과 같습니다. FE: React, Redux-thunk, React-query BE: Spring Boot, MySQL, Amazon S3 아래와 같이 발표 내용을 구성해 봤습니다. 1. 프론트엔드 a. 아토믹 패턴의 활용 - 기획단계에서부터 모든 컴포넌트들을 미리 설계해놓고 atom, molecule등의 레벨로 미리 나눠놨다. 덕분에 개발을 빠르게 진행할 수 있었고, 유저들에게 일관된 인터페이스를 제공한다. b. 예외처리 - 유저들에게 보다 친절한 에러를 제공하기 위해 백엔드와 협의하여 세부 에러코드들을 정의했다. 각 컴포넌트들을 에러 바운더리로 감싸 GET 요청이 실패한 경우에는 Fallback UI로 화면을 덮어줬다. 그리고 각 API들의 onError 콜백을 부여하여 Mutation 요청이 실패한 경우에는 alert로 알려준다. c. 상태관리 - props drilling 현상을 방지하기 위해 redux-thunk를 사용해 세차장 정보를 불러올 때마다 세차장 정보를 전역 상태로 관리하여 자식 컴포넌트로 넘겨주게 구성했다. 2. 백엔드 a. 예약 신뢰성 - 사용자가 요청한 예약이 운영 시간을 준수하고 중복 예약이 방지되도록 예약 검증을 철저히 하였다. b. 예외 처리 - 명확한 예외 처리 및 상태코드 할당 c. 권한 - 역할 기반 권한 관리, 사용자 인증 및 JWT 토큰 처리 여기까지입니다. 내용을 잘 구성했는지 모르겠습니다. 제가 경험해본 프로젝트 중 가장 규모가 큰지라 발표 내용이 부족하진 않은지 걱정이 많이 됩니다. 발표 평가위원이 주로 개발자라고 하셔서, 개발자의 시선으로 봤을 때 위 주제들이 어떠한지 고견을 듣고 싶습니다. 감사합니다.

프론트엔드 개발자가 되고싶어요..

안녕하세요 저는 대학교4학년 재학중인 학생입니다. 공대생이지만 컴퓨터쪽은 아니구요 저는 노마드코더를 통해서 공부를 시작했습니다 제가 할수있는건 html,css,javascript,typescript,react정도가 있습니다 상태관리는 recoil을 사용해봤고, 스타일링은 styled-components랑 tailwindcss를 사용해봤고 지금은 거의 tailwindcss만 사용중입니다. 핑계라면 핑계일수도 있겠지만 저는 아직 한번도 cs, 알고리즘 공부를 해본적이 없습니다 그냥 코딩을 하는게 좋아서 이 쪽 꿈을 꾸게되었습니다 그래서 막 알고리즘 cs공부 같은건 하지않고 매일 뭔가를 만드는데만 몰두했습니다(학교 일주일에 두번 가는거빼고 평일 주말엔 코딩만 합니다) 그런데 이제 졸업을 하고 취직을 할려고 하니 이때까지 만들었던 것들은 포트폴리오로 제출하기에는 사실 너무 그때그때 만들어보고싶거나 구현해보고 싶은거 위주로 하다보니 지금부터 새로 만들어야할거 같구요.. 이제 cs, 알고리즘도 공부를 시작해야할거같은데 어디서부터 어디까지 공부를 해야할지도 잘 모르겠고 입사를 하기위해서 무엇을 준비해야할지도 잘 모르겠네요 사실 cs,알고리즘을 공부할수록 이게 필요한건지도 잘 모르겠고 제가 좋아하던게 멀어저만 가는거 같아요.. 프로젝트 하나 더 제대로 만드는게 좋을거 같기도 하고 잘 모르겠어요 어떻게 해야할지.. 물론 대기업을 가면 좋겠지만 아니여도 괜찮아요 그냥 코딩을 계속해서 할 수있고 배울게 많은 곳이면 좋을거 같은데 어떻게 준비를 해야할까요..? 긴글 읽어주셔서 감사합니다!!

NextJS13 app라우터 컴포넌트 설계 질문드립니다.

안녕하세요. NextJS13을 사용하여 팀 프로젝트를 진행하고 있습니다. 프로젝트 내 게시판 페이지에서 페이지네이션을 개발하던 도중 궁금한 내용이 있어 질문드립니다. 현재 게시판 메인페이지에서 데이터를 가져와서 페이지네이션 컴포넌트로 프롭스로 전달하는 형태로 로직을 구현하였습니다. 과정에서 상태관리가 필요하여 훅을 사용하기위해 페이지 전체를 'use client' 키워드를 사용하여 클라이언트 컴포넌트로 변경하였는데 데이터 렌더링 부분은 서버에서 렌더링하려면 Container 컴포넌트를 별개로 생성하여 최상위 컴포넌트에서 데이터를 불러오고 프롭스로 전달하는 형태로 구현을 하면좋을지 솔루션을 듣고싶습니다. 기존에는 SEO등을 고려하여 사용자와 상호작용하는 부분(input, form 등등..)에 한해 클라이언트 컴포넌트로 구성하였는데 위와 같이 데이터를 불러오고 가공하는도중 리액트 훅이 필요할때 어떻게 설계하시는지 궁금합니다.

(SSR 새로고침 문제)NextJS page에서 redux persist gate 설정하면 Client컴포넌트로 인식되는 문제

NextJS Pages Router에서 유저 데이터를 상태관리하기위해 redux를 사용했으나, 새로고침 시 데이터가 날라가는 문제를 해결하기 위해 persist gate를 사용했습니다. 하지만 redux persist gate를 사용하면 클라이언트 컴포넌트로 인지되는 문제가 있습니다. 궁금한 것 1) persist gate를 잘못써서 생긴 문제일까요? 아님 persist gate를 쓰면 안될까요? 2) 해결 방법으로 생각 해본 것은, "persist gate를 사용하지 않고 매 새로고침 시 저장되어있는 local storage에서 데이터를 새로 가져온다." 입니다. 3) ssr시 상태관리 새로고침 다른 방법으로 해결해본 경험 있으시면 아무렇게나 대답해주시면 감사하겠습니다!!! ----------------------------------------------- 문제의 코드 위치: https://github.com/bbookng/zippyziggy-v2/blob/main/frontend/zippy-ziggy/src/pages/_app.tsx 문제의 코드: import GlobalStyle from '@/styles/Global.style'; import useDarkMode from '@/hooks/useDarkMode'; import { media } from '@/styles/media'; import { darkTheme, lightTheme } from '@/styles/theme'; import type { AppProps } from 'next/app'; import { ThemeProvider, createGlobalStyle } from 'styled-components'; import normalize from 'styled-normalize'; import '@/styles/index.css'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import AppLayout from '@/layout/AppLayout'; import store, { persistor } from '@/core/store'; import { PersistGate } from 'redux-persist/integration/react'; import { Provider } from 'react-redux'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import 'toastify-js/src/toastify.css'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import DefaultHead from '@/components/Head/DefaultHead'; import Construction from './construction'; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, // default: true }, }, }); function App({ Component, pageProps }: AppProps) { const { colorTheme, toggleTheme } = useDarkMode(); return ( <Provider store={store}> <PersistGate persistor={persistor}> <QueryClientProvider client={queryClient}> <ThemeProvider theme={colorTheme === 'dark' ? darkTheme : lightTheme}> <AppLayout toggleTheme={toggleTheme}> <Component {...pageProps} /> ... </AppLayout> </ThemeProvider> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </PersistGate> </Provider> ); } export default App;

이런 상황에서의 zustand 활용에 대한 질문있습니다 !

안녕하새요 ! zustand를 이용해서 프로젝트를 진행중인데 새로운 기능을 추가해야되는 상황입니다… 한 페이지에서 5개의 입력폼이 담긴 카드에 정보를 입력받아 (각 카드마다 드랍다운,데이트피커,텍스트필드 등 종류 및 갯수도 상이합니다) submit을 해주어야하는데 현재 상태관리로 zustand를 사용하고있습니다 ! 이러할때 각 카드마다 하나의 스토어를 구성해서 submit시에 합쳐서 넘기는것이 나을지… 아니면, 하나의 스토어에서 전부 관리하는게 나을지… ( 이경우엔 각각 상태값과, action들이 너무 많을것같아서…) 혹시 이런 상황에서는 보통 어떻게 관리하는게 맞을까요..?!

React 상태관리 라이브러리에 대해서 질문있습니다 !

안녕하세요 새로운 프로젝트를 들어가기전 라이브러리를 고민중입니다. 한번도 사용해보지않은 zustand 혹은 jotai 를 사용해보고싶은데… 보통 zustand나 jotai를 사용할때 비동기처리 같은 부분도 해당 라이브러리만 이용하는지… 아니면 redux나 react-query 를 같이 사용하는지 궁금합니다…! 그리고 다른분들도 선호하시는 라이브러리가 있으시면 알려주십셔 !!! 감사합니다 !!!

react,vue 에서의 빈번한 store 사용

1. 어떤 프로젝트는 전역상태관리를 많이 사용하돼, 특정 페이지에서만 사용하지만, 상태관리가 잘 되어있는 프로젝트가 있고, ( 전역상태에 대한 사용 기준보단, 상태관리 자체에 더 집중함 ) 2. 또 어떤 프로젝트는 전역상태관리 store 를 정말 필요성이 있거나, 각 다른 컴퍼넌트나 페이지에서 공통으로 사용할 state 를 사용할때만, 전역관리 store 를 사용하는 프로젝트가 있습니다. ( 전역상태 사용 기준이 엄격함) 이번에 리드개발을 맡게되어 store 사용에 대한 정의가 필요한데, 어떤 것이 더 좋을까요? 각 어 떤 장단점이 있고, 또 어떤 기준으로 전역상태로 관리할지, 지역상태로 관리할지 정하시는지 경험을 듣고 싶습니다. 추가적으로 , 제 기준에선 zustand 가 정말 사용하기에 편하더라구요, 누구든 쉽게 터득할수 있고.. 프로덕션에서 RTK 와 zustand 각각 어떤 장단점이 있을까요?

백엔드 프론트엔드 협업?

전 프론트엔드를 맡고있고, 현재 페이지의 학생 정보 등록 및 수정 기능을 상태관리(recoil)로 구현해놓았습니다. 백엔드쪽에선 수정,정보 등록 api를 설계한 상태인데, 이런 경우면 프론트쪽에서 이를 구현해 놓을 필요가 없었던 것인지.. 백엔드와 어떻게 협업을 해야하는지 잘 감이 안와서.. 여기에 질문을 올려봅니다…

취준을 위한 리액트 포폴 준비하며 궁금한게 있습니다!

일단 CRUD프로젝트는 하나 했습니다! 리액트와 테일윈드, 백엔드는 익스프레스, 몽구스를 사용하였습니다 이후 타입스크립트를 배워서, 적용해서 하나 더 하려하는데, 프론트엔드를 잘한다는 기준을 잘 모르겠습니다! 이전 포폴은 정말 CRUD와 JWT로그인 기능뿐이라, 사실 프론트엔드단에서 어려운건 별로 없었던 것 같습니다 그래서 기능구현, 필터검색이라던가 캐러셀이나 인피니티 스크롤 이런걸 해봐야하나? 라는 고민이 있습니다 + 추가적으로 상태관리 라이브러리를 하나 선택해야하는데, 제가 비전공 고졸이라 객관적으로 좋은 회사는 못갈 것 같은데, 그럼 레거시 리덕스를 배워야하나? 라는 고민도 있습니다!

Recoil의 상태관리를 활용한 초기값 지켜내기

안녕하세요! 오랜만이네요. 요점부터 말씀드리자면, Recoil에서 default 값을 api로 받아온 데이터를 연산하여 나온 값을 default로 깔고 싶습니다. 현재 프로젝트에서는 client state를 Recoil에서 Server State를 React Query로 관리하는데, Recoil에서 selector로 데이터를 활용하지않고, React Query에서 산출된 값을 활용하여 그 값을 recoil의 default value로 활용하고 싶습니다. 그렇게 해야지 처음 페이지가 로드되거나, 다시 리프레쉬되더라도 제가 정한 default 값이 UI에 잘 적용이 될 것 같습니다. 코드는 회사 비밀 로직이 좀 들어가서 공개가 힘들 것 같네요. 죄송합니다 :(

중고신입 프론트엔드 이직 고민

안녕하세요. 프론트엔드 개발자로 일한지 1년정도 된 신입 개발자입니다. 처음 개발입문을 웹개발로 시작해서 React를 공부했고 그렇게 React개발하는 회사에 취업해 6개월정도 JS기반 React 프로젝트를 진핸했습니다. 이후 회사가 모바일앱을 개발하게되어 독학으로 Flutter를 공부하게되었고 현재 5개월째 Flutter개발로 앱개발을 업무를 하고 있습니다. 이런 상황에서 여러가지 이유로 이직을 고민하고 있는데요...! 웹개발과 앱개발 모두 개발하는 과정에서 다 재밌었고 좋았습니다. JS로 개발하다가 오히려 Dart를 사용하면서 타입이 적용되서 더 꼼꼼히 개발하게되는 경험이 있었고 상태관리를 쓰는것도 웹개발때 보다는 flutter개발에서 더 그 구조를 잘 이해하게 된거같습니다. 그런데, 이직을 고려하는 시점에서 React개발자로 이직을 하고 싶습니다. 현재 회사에서는 flutter개발을 하고있지만, flutter를 개발한 경험이 제 스스로에겐 개발 전체적 경험에서 많은 도움이 된거같은데 이런 부분을 React웹개발자로 지원하는데 이력서를 어떤식으로 작성해야 할지 모르겠습니다. 처음 6개월 리엑트 개발을 하면서는 첫 프로젝트고 정신이없어서 개발했던 내용들을 잘 정리를 못했더라구요.. 그래서 flutter개발을 하면서는 개발이슈라던가 그런것들을 정리를 했는데, 앞선 리엑트 경험이 6개월전 경험이어서... 이걸 어떻게 어필하는게 좋을지 어필이 되는지... 다른 리엑트 프로젝트를 지금이라도 개인적으로 더 해야할지 고민이됩니다. 두서없이 길게 작성을 했네요 ㅠㅠ 짧게 정리하면, 6개월 리엑트 5개월 플러터 한 경험으로 리엑트 중고신입으로 지원하려면 어떤식으로 전략을 짜는게 좋을까요??? 긴글 읽어주셔서 감사합니다!

nextjs 전역 상태관리 질문

안녕하세요 nextjs(App router 사용)로 프로젝트를 진행하고 있는데, 전역상태를 정의하기 위해서 zustand를 사용하려고 하고 생각중입니다. 전역 상태를 정의하기 위해서는 1. 가장 root가 되는 layout.tsx에 provider를 불러와 감싸주어, 전역적으로 참조할 수 있도록 하는 것 2. persist middleware을 사용해서 LocalStorage에 저장하는 방식으로 상태를 관리하는 것 이 정도 두 가지가 있는 것 같은데, 질문은 1. 만약 1번 방법을 사용한다면 client component로 선언한 custom provider로 자식 컴포넌트를 감싸게 될텐데, 그러면 상태가 변경됨에 따라 하위 컴포넌트들(server, client 상관없이)이 모두 리렌더링 되는 것인가요? 만약 그렇게 된다면 SSR의 의미가 사라지는 것 아닌가요? 2. 일반적으로 nextjs에서는 전역 상태를 어떤 식으로 관리하나요? 입니다. 감사합니다!