#reactjs

NextJs에 따로 백엔드를 두는경우

안녕하세요. 토이프로젝트로 글, 댓글, 로그인 기능을 포함한 블로그를 만들어보고있습니다. 원래 프론트엔드는 ReactJs, 백엔드는 Golang으로 만들려고 했는데, 글 기능을 구현하던 중 글기능은 SEO가 필요한데, React는 그게 잘 안되서 원래 React프로젝트 구조를 유지하고 SSR로 렌더링 하기 위해서 NEXTJs로 바꾸려고 합니다. 또 이미지 최적화 기능이나 폴더기반때문에 편하기도 하고요. 근데 Next로 프론트엔드만 바꾸고 GO 백엔드는 유지하려고 하는데, NEXTJS를 프론트로 사용하고 따로 백엔드를 두는게 많이 쓰이는 방식인가요..? NEXT가 백엔드기능까지 제공하는 풀스택 프레임워크로 알고있는데 백엔드서버를 따로 두는게 바보같은 방식인가 궁금합니다.

프론트엔드분들은 개인 프로젝트할 때 백엔드를 어떻게 하시나요?

프론트엔드 분들은 취업이나 이직, 사이드프로젝트 등 개인 프로젝트를 진행할 때 백엔드는 어떻게 하시나요? 예시는 react 진영 기준으로 하였습니다 다른 선호하는 방식이 있다면 댓글로 알려주세요! 1. 클라이언트, 서버 각각 전부 개발 ex. reactjs(nextjs) + nestjs 2. 백엔드 서비스를 활용하여 개발 ex. nextjs + firebase, supbase 3. 풀스택 프레임워크 사용해 한 번에 개발 ex. nextjs + prisma(orm) + s3(storage)

프로젝트 메인스택 선정 기준(react vs next.js)

안녕하세요. 입사 7개월차인 주니어 프론트엔드 개발자입니다. 사수가 없는 작은 스타트업에서 일하고 있는데, 이번에 새로운 프로젝트가 들어가면서 메인스택을 어떻게 해야하는지 고민이 됩니다. 1. 채팅 기능이 메인 2. 장기적으로 추가 기능 계속 들어갈 계획 nextjs가 csr ssr 모두 확장성이 있다는 생각이 들어서 reactjs 혹은 nextjs로 스택을 분리해서 기술스택을 선정한다는게 의미가 없어보이는데, 그러면 매번 프로젝트 할 때마다 nextjs면 만사해결! 이라는 느낌이 들어서요. 다른 분들은 메인스택을 어떻게 선정하시나요?

Nodejs 백엔드 구조짜는법

안녕하세요 취직은 못했구 풀스택으로 Reactjs Nodejs사용해서사이드 프로젝트를 하고있는 뉴비개발자입니당 Nodejs를 백엔드로 사용하고 있는데 폴더구조를 어떻게 잡아야할지 항상 고민이 해결되지 않아 개발자분들의 의견을 구합니다 ㅠㅠ 제 나름대로 Web.js를 루트로 두고 Routes폴더에 api 경로에 따라 나뉠수 있게 폴더를 두고 Db를 사용하거나 함수들은 각각 Service라는 폴더를, 자주사용되는 데이터는 model이라는 폴더에 dto를 사용해서 두고있는뎅 이 구조가 좋은 방식일지 항상 생각하는데 조언을 구할 수가 없어서 어떤 방식으로 구조를 잡으면 좋을지 개발자님들의 조언을 부탁합니다...

ReactJS, TS를 하기 전 JS

취업 준비를 하고있는 대학교 4학년입니다. 자바 스크립트를 어느 정도는 대충 이해하고 있어서 (사용할 수 있어서) ReactJS와 TS를 공부하고있는데요, 사실상 메모리에 대한 부분이나 여러 기능들이 어떻게 돌아가는지는 잘 모릅니다. 자바스크립트에 대한 책을 사서 모든 지식을 공부한 뒤에 하는 것이 나을까요? 아니면 이대로 접근해도 괜찮을까요?

react에서 popup을 시스템 popup으로 띄울수있나요?

A 웹페이지에서 B 웹페이지를 iframe으로 띄우고있고 B웹페이지에서 Popup창을 띄우면 A웹페이지를 포함한 전체 창에서 popup이 나오게하고싶습니다. 지금은 reactjs-popup 이런 라이브러리를 사용하면 당연하게도 B웹페이지 창 안에서만 떠요. alert message같은거 띄우면 브라우저에서 띄우는거기때문에 전체 창에서 뜨더라구요. 이렇게 전체창에서 띄우게끔 custom하게 alert message를 구현할 수 있을까요??

React의 Reconciliation 동작에서 children에 key를 추가했을 때, 트리의 변환 작업이 효율적이게 되는 이유를 모르겠습니다.

안녕하세요. React의 Reconciliation에 대해서 공부중인 FE 개발자입니다. https://ko.reactjs.org/docs/reconciliation.html 위 공식 문서를 보다보면, "자식에 대한 재귀적 처리"에 대한 내용이 나오는데요, 여기서 children에 key를 추가하면 트리의 변환 작업을 효율적으로 할 수 있다고 설명을 하고 있습니다만, 과연 이게 실제로도 효율적으로 처리되는지가 궁금합니다. (key가 없을 때 새 항목이 상단부터 추가되는 경우 의도한대로 동작하지 않는다는 것은 이미 알고 있습니다.) 아래는 제가 테스트한 코드인데요, 제가 생각했을 때, key가 없을 때는 counts 배열에 요소를 추가할 때마다 기존 ChildComponent 컴포넌트들이 모두 언마운트되고 다시 생성되는 등의 비효율적인 작업이 있거나, 그게 아니더라도 뭔가 key가 있을 때보다 매 클릭 시 렌더링이 느려야할 것으로 생각을 했었는데, key가 있든 없든 상관없이 기존 ChildComponent는 재생성되지 않고 그대로 사용되고(useEffect 훅이 최초 렌더링 이후에는 전혀 실행되지 않음), 렌더링 속도도 별 차이가 없는 것 같습니다. 혹시 제가 놓치고 있는 부분이 있을까요? key의 존재 유무에 따른 트리 변환 작업 효율성 테스트를 어떻게 해보아야 제대로 이해할 수 있을까요?

react Custom Hook을 만들려고 하는데 도움이 필요합니다ㅠㅠ

안녕하세요, react, typescript로 개발중인 주니어 취준생입니다 커스텀 훅을 처음으로 작성해보려고하는데... 제가 커스텀 훅에 대한 이해가 부족한 건지 이런 저런 방법을 사용해봐도 같은 에러가 계속 나네요ㅠㅠ vscode상에서 나타나는 에러는 없는데 로그아웃 버튼을 누르면 콘솔에 계속 같은 에러가 생깁니다...! 상황) 로그아웃 로직을 재사용할 수 있게 커스텀 훅으로 관리하려고 함 [로그아웃 로직] - 로그아웃 하면 localStorage의 access_token과 refresh_token을 삭제하고, - alert창을 띄우고, 메인화면으로 이동하게 함. 에러메세지에 있는 링크 https://reactjs.org/warnings/invalid-hook-call-warning.html 에 있는 세가지 일반적인 이유는 아래와 같습니다. 1. React와 React DOM의 버전이 일치하지 않을 수 있습니다 . -> 확인해보니 Hooks를 지원하는 버전 맞습니다. 2. Hooks 규칙을 위반하고 있을 수 있습니다 . -> Hooks규칙을 맞춰서 작성했다고 생각했는데 이부분은 정확하게 모르겠습니다. 3. 동일한 앱에 둘 이상의 React 사본이 있을 수 있습니다 . -> 링크에 나온대로 'npm ls react'를 해보면 사진과 같은 결과가 나옵니다. 혹시 3번이 문제가 있는건가요? 봐도 잘 모르겠습니다...흐ㅠㅠ 커스텀 훅이 아니라 그냥 함수로 만든 후에 재사용해야하나? 싶은데 그 함수는 컴포넌트도 아니고 커스텀훅도 아니라서 useNavigate를 사용할 수 없다는 에러가 떠서 그럼 로그아웃 로직을 사용할 때마다 컴포넌트에서 별도로 navigate처리를 해줘야 할 것 같아서 로그아웃 로직 안에서 useNavigate를 사용해서 커스텀훅으로 만들고 싶습니다...! 이런 형태의 로직은 커스텀훅으로 만들 수 없는건가요? 아니면 제가 뭔가 잘못하고있는게 있을까요ㅜㅠㅠ

React context에 대한 Recoil의 설명에 이해가 안되는 부분이 있습니다!

Recoil의 문서에서 React의 한계에 대해 적은 부분입니다. Context는 단일 값만 저장할 수 있으며, 자체 소비자(consumer)를 가지는 여러 값들의 집합을 담을 수는 없다. 이 중에서, '자체 소비자(consumer)를 가지는 여러 값들의 집합을 담을 수는 없다.' 라는 부분이 이해가 안됩니다. 여기서 의미하는 자체 소비자가 무엇인가요? 여러 값들의 집합은 객체를 의미하는 것인가요? 또는 상태에 대한 얘기인가요? Recoil 공식 문서 https://recoiljs.org/ko/docs/introduction/motivation React context 공식 문서 https://ko.reactjs.org/docs/context.html

useId, useTransition을 공식문서에서 봤는데, 사용을 못하나요??

useId, useTransition 를 React공식문서에서 봤는데 저희 프로젝트에서 사용할 수 없네요. 사용할 수 있는 방법이 있을까요? 특히 useTransition은 한번 시도해보고싶어서요. https://reactjs.org/docs/hooks-reference.html#usetransition