IDE에서 타입 추론이 동작하지 않습니다

안녕하세요.. 첫번째 사진과 같이 타입 추론이 전혀 되지 않고 있어서 많은 고통을 겪고 있습니다. < > 안에 타입을 넘겨줘도 항상 props 타입을 any로 추론하고 있습니다. 이를 피하기 위해서는 두번째 사진 처럼 props에 직접 타입을 넣어줘야되네요ㅠㅠ 참고로.. CRA로 새로운 프로젝트를 만들면 정상적으로 타입을 추론해주고 있는데요… 현재 이 프로젝트에서만 타입 추론이 안되고 있습니다. 환경설정에 문제가 있는 것 같은데, 어떤 것들이 원인일지 키워드 조차 모르겠어서 질문드립니다. 어떤 것들을 봐야할까요..?

기존 프로젝트 리펙토링 관련

안녕하세요 현재 React와 Express로 웹 개발을 하고있는 학생입니다. 프로젝트를 하나 둘 진행 할 때마다 점점 배우는게 많은데요, 예를들어 첫번째 프로젝트에서는 JS를 사용하고 css를 파일 하나에 몰아 관리하며 커밋 메세지 컨밴션이나 브랜치 전략을 제 나름의 방식대로 정하고 했다고 한다면 두번째 프로젝트는 TS를 사용하게되고 Styled-Component를 통해서 스타일을 관리하게 되었고 커밋 메세지나 브랜치 전략 또한 조금더 일반적으로 바꾸어 진행하게 되었습니다. prettier과 eslint도 적극적으로 사용했구요 두 프로젝트 모두 현재 배포되어 있는 상태이고 지속해서 개발하고 있는 상황일 때 첫 번째 프로젝트 전체를 리펙토링(ts를 적용하거나 styled-component 도입 등)하거나, 커밋 컨밴션과 브랜치 전략을 새로 구성하는것이 맞을까요? 아니면 별다른 리펙토링 과정 없이 원래 해왔던 대로 계속 진행해도 상관없을까요?

next 13 공식 문서를 읽고 있는데 이해가 잘 안되는 부분이 있어서 질문드립니다.

https://beta.nextjs.org/docs/data-fetching/fundamentals#component-level-data-fetching 이 부분에서 "Behind the scenes, React and Next.js will cache and dedupe requests to avoid the same data being fetched more than once." 라는 문구가 있는데, 이게 무슨 말인지 이해가 잘 안되어서 궁금합니다. dedupe가 무슨 뜻인가요? 중복 제거라고 자동으로 중복 요청을 다 제거해준다는 뜻인가요?

페이지 이동시에 필요한 정보들을 어떻게 전달할지 고민중입니다.

페이지 이동시에 필요한 정보들이 있는 경우 현재 recoil을 사용하여 1. Link 태그 onClick시 recoil을 이용해 상태 저장 2. 새로운 페이지 이동에서 useRecoilValue로 사용중인데 이게 맞는 방법인지 모르겠어서 여쭤보려고 합니다. 보통 하위 페이지가 아닌 다른 페이지 이동할 때 전달해야 하는 값이 있다면 어떤 방법을 사용하는게 가장 좋나요?

React 프로젝트 AWS로 배포하는 방법

안녕하세요 리액트로 프로젝트를 진행하고 있습니다! CI CD 환경을 구축해보고 싶어서 리액트로 만든 프로젝트를 AWS에 올려보려고 합니다 현재까지 진행 상황은 아래와 같습니다 1. 로컬 리액트 앱 - Gitea repository 연동 2. Gitea repository - AWS EC2의 Jenkins (docker) 연동 3. Jenkins 에서 빌드 후 AWS S3로 배포 4. AWS S3 버킷 - AWS Cloudfront 연동 현재 AWS S3로 저장하고 Cloudfront와 연동한 상태입니다. 이 부분에서 질문 드립니다. 1. AWS를 이용한 웹 배포는, S3에 빌드 된 디렉토리를 업로드 하는 행위 자체가 배포인건가요? 그래서 Cloudfront와 연동하여 퍼블릭 IP주소로 다른 사람들이 접속할 수 있게하는 것이 배포인건가요? 2. 위 진행사항처럼 진행하고 Cloudfront의 Url 입력 후 들어가면 빈 화면만 나오고 아무것도 나오지 않습니다. 어떻게 해야할까요? 긴 글 읽어주셔서 감사합니다.

개발환경 추천해주세요

알바를 하면서 근무일지 작성을 수기로 하고있습니다. 알바생한명마다 근무일지록을 한 장씩 사용하는데 가끔씩 부족하면 영수증에 적곤합니다. 그리고 일지록을 사장님이 뽑아주시는데 종종 깜빡하시기도 합니다. 그래서 프로그램을 하나 개발하면 좋을 듯 싶어 개발준비중입니다. 여기서 질문하고싶은건 개발환경을 정해야하는데 어떤 플랫폼이 적당한지 모르겠습니다. 사용가능한 도구로는 안드로이드 기반 탭혹은 포스용 피시가 있습니다. 그래서 고민중인 개발환경은 1. Flutter 기반 앱 2. React 기반 웹 을 고민중입니다. 프로그램은 근무일지작성 -> 직원의 서명, 전체일지 엑셀로 출력 기능은 필수로 구현할 예정입니다. 어떤 환경이 적절할까요?

react에서 api호출 함수 관리 어떻게하나요?

현재 api 호출 함수들을 도메인 별로 나눠서 관리하고 있습니다. 폴더 구조가 /api폴더 아래에 각 도메인 파일을 만들었습니다. 예) 검색 api - /api/search.js 고민은 각 도메인 파일안에서 함수들을 어떤식으로 코드를 짜야 좋은가입니다. 제 생각엔 방법은 2가지인 것 같은데요 1. 모든 함수에 export 붙여서 함수형으로 가져간다. 예) export function searchName(){} 2. class형으로 만들어서 static 메소드로 관리한다. 예) class Search { static searchName(){} } 보통 어떤식으로 관리할까요?

React 에서 자식 컴포넌트에게 넘겨준 boolean 값이 한박자 느리게 반응하는 문제 어떻게 해결하나요?

부모 컴포넌트에서 check를 받고 있는데 자식컴포넌트에서 check가 true면 실행하게되는 로직으로 짰는데 의존성배열에 check를 넣어도 한박자 느리게 반응을 하더라구요. 이것도 비동기 처리로 해결이 가능한가요?? 기본틀은 아래와 같습니다. 여기서 check는 버튼을 누르면 true로 바뀌는 구조입니다. 근데 2번을 눌러야 하는게 지금 문제구요.

다크모드에서 react lazy 사용할 때 흰 화면이 보이는 이슈

react lazy를 route 단에서 적용을 했는데 페이지를 이동할 때마다 흰색화면이 나옵니다. 라이트 모드에서는 괜찮은데 다크모드를 사용 중일 때는 route를 이동할 때마다 흰배경이 나와서 불편하더라구요. 혹시 이런 부분은 어떻게 처리하는 것이 좋을까요?

useNavigation 사용해서 navigate 하는경우 query 를 제외한 url 이 사라집니다 ㅠㅠ

onSubmit 이벤트가 발생하면 입력한 값을 input에 넘겨 받고, useNavigate() 훅을 사용해서 임의의 URL로 이동하는 코드를 작성했습니다. 목표 url은 /posts?tag ... 인데, posts가 자꾸 사라지네요.. /?tag로만 넘어갑니다. 상대 경로와 절대 경로의 문제인가 싶기도 해서 navigate() 함수의 두 번째 인자로 { replace: true } 를 넣어봤는데도 해결되지 않는군요 ㅠㅠ 혹시 어떤 부분을 놓치고 있는지, 어떻게 검색하면 좋을지 알려주실 수 있으실까요?

똑같은 코드를 다시 쓰니까 오류 해결??

한창 리액트를 공부 중인 학생입니다. 분명 제가 구현하려는 목적에 맞는 코드를 작성했는데 아무리 고쳐도 오류가 안사라지길래 혹시나 해서 코드 전체를 잘라내고 다시 붙여넣기 했는데 오류가 고쳐졌습니다. 이럴 수 있는건가요..? key 할당 관련해서 오류가 계속 발생했었습니다.

취업에 대해 질문입니다

안녕하세요 프론트엔드 9개월째 준비생인 24살 강영민이라고 합니다. 현재 프론트엔드 개발자를 준비중인데요.. 직장과 병행하니 하루에 공부를 많이해봤자 4~5시간 밖에 안됍니다. 제가 하고싶었던 쪽이 개발자이여서 준비중에 있어요. 현재 블로그도 기록 중이고 깃허브는 활성화가 제대로 되지는 않습니다. 근데 요새는 "개발자시장이 많이 얼었다 " 라는 말을 많이 들었습니다. 포트폴리오는 클론코딩으로 따라했었고. 이제 라이브러리를 공부하려는 참인데 간혹 공부를하다가 " 이게 맞는건지 배우고 까먹고 배우고 까먹고를 반복하는데 맞는걸까" 라는 생각도 듭니다. 서류를 넣어도 광탈을 해버리니 조금씩 뭔가 지친다는 느낌이 들어요. 여쭤볼 곳이 여기밖에 없어서 여쭤봅니다. 취업을 할때 도움될만한 것이 있을까요 ? 깃허브에서 Readme < 를 잘쓰면 합격될 수도 있다라는 말도 있었고 해서요.. 그리고 또 현재 공부를하다 프론트가 나한테 맞는건가 아님 백엔드가 맞는건가 라는 고민의 길에 서있기도 합니다.. 앞으로도 어떻게 해야할지 모르겠고 시간만 지나가기에 아깝다라는 생각이 들기도해요.. 주니어 / 시니어분들의 조언을 듣고싶네요.. 앞으로 어떻게해야할까요..ㅠㅠㅠ

현재 React 를 배우고 있습니다 !

현재 React 를 배우고있는 취준생입니다 ! 강의를 뭘 들어야할지 몰라서 여쭤봅니다.. 추천해주실만한 강의가 있으실까요 ? 웬만하면..어.. 프로젝트 / 아님 협업에 도움이 될만한 강의요 ! 추천 부탁드립니다 ㅠㅠㅠㅠ

사용자가 생성하는 컨텐츠에 대해서 Sitemap 을 동적으로 생성해주려고 하는데 Sitemap 을 위한 전용 테이블을 추가하는 방법이 효율적일까요 ?

이번에 Sitemap 을 추가해야 하는데 사용자가 생성하는 컨텐츠라서 dynamic url path 를 가집니다. ex) articles/[:id] 그래서 사이트맵을 직접 만들어 줘야 하는데 어떤 방법으로 해야할지 고민이에요. 현재 문제는 테이블의 updatedAt 값을 sitemap 의 lastmod 값에 어떻게 적용할지 인데요. 처음에 생각한 방법은 Article 테이블의 updatedAt 을 그대로 사용해서 sitemap 을 동적으로 만들어 주려고 했는데, 이렇게 하면 실시간으로 페이지를 생성하는데 한계가 있어서 캐싱이 무조건 필요 하겠더라고요. 그래서 차라리 테이블을 추가해서 (ArticleSitemap ?) 여기에 updatedAt 을 실시간으로 업데이트 시켜두고 Sitemap 생성에 활용하려고 하는데 문제 없을까요 ? 참고로 사용하는 스택은 next.js, nest.js, MySQL 입니다.

특정 프레임워크를 이용하는 코딩테스트 사이트도 혹시 있나요?

안녕하세요. 요즘 코딩테스트 사이트 하나 골라서 계속 문제풀면서 연습중인 초보개발자입니다. 코테 문제 풀다가 문득 든 생각인데, 특정 언어가 아닌 특정 프레임워크나 플랫폼,.. 예를들자면 리액트를 이용해서 뭘 한다던가 처럼 특정 프레임워크를 이용한 문제풀이 같은건 없나요? 만약 그런 문제사이트가 있다면 공유해주실수 있나요? 그냥 알고리즘이 아닌 프로젝트 단위로 뭔가 문제를 풀수있는 사이트가 있으면 그것도 되게 괜찮겠다라는 생각이 들어서 질문남깁니다.

React에서 setState를 props로 넘겨줄 때 타입을 어떻게 지정해서 사용해야 하나요 ?

setState를 props로 넘겨줄때 넘겨받은 자식컴포넌트에서 setState((prev) => { ... }) 처럼 쓰려면 props 타입을 어떻게 줘야할까요 ...?

redux 와 recoil 이 데이터를 저장하는 방법의 차이?

지난 주에 면접을 보고 왔는데 이런 질문을 받았습니다... Q) redux는 하나의 store를 가지고 recoil은 여러 개의 atom을 가지는데 여러 개의 저장소를 가지는 것과 하나의 저장소를 가지는 것에 대한 장단점이 어떤 것이 있을까요? 각 저장소 별로 역할을 구분할 수 있는 장점이 있다고 말씀드리긴 했는데 좋은 답변은 아니었던 것 같아요ㅠㅠ 위 질문에 대해 어떻게 답변드리면 좋은 답변이었을까요?

카카오톡은 og 정보를 어떤 방식으로 읽는건가요?

최근 NextJS로만든 블로그를 만들고 고쳐나가고 있는 와중에 알게 된 사실이 카카오톡은 next/head의 Head에 포함된 정보들을 크롤링 하지 못하는것같더라구요. 대신 next/document의 Head태그의 정보만 가져오는것 같구요. 그래서 궁금한점이 동적으로 페이지마다 next/head의 Head 정보들을 삽입하고 카카오톡으로 url을 공유할때 next/head의 head의 og정보를 카카오톡이 크롤링할수 있는 방법이 존재하나요?

SI 업체 개발 스타일 풀스택

안녕하세요 최근 회사 프로젝트인 iot장비기반 관리자 웹페이지를 si업체를 통해 맡겼는데 자신들은 풀스택이라면서 프론트 메뉴 페이지 마다 사람을 할당하네요 기본적으로 프론트 / 빽이 나눠지고 SB설계 후 db스키마 잡고 api를 우선 설계해서 어느정도 만들면 퍼블된 화면에 프론트개발자들이 스웨거 활용하여 개발하는 프로젝트만 하다가 이렇게 하는게 효율적인가요? 그리고 스프링 구조잡을때 어느정도 큰 기능별로 서비스/컨트롤러를 나눈다고 알고있는데 컨트롤러 폴더에 모든 컨트롤러코드가 있고 서비스는 서비스폴더에 다 있어서 이게 맞냐하니깐 테이블 100개 미만 소규모는 이렇게 해도 된다고 하더니 그날 오후 큰 기능별 폴더 구조 아래 서비스/컨트롤러 폴더로 쪼개놧네요 ㅠㅠ 왠지모를 불안감이 듭니다 고급개발자 두명에 오년정도 개발자두명인데 거의 오년차 개발자들이 페이지별 프론트와 빽을 같이 설계하도록 WBS를 잡아놨네요 제가 잘 몰라서 그러는데 고수님들 사기 각인가요?

리액트 네이티브 찜하기 구현에 대해 잘 아시는 분 계신가요?

리액트 네이티브로 찜하기를 구현하려 하는데 파이어베이스 쪽 지식이 얕아서 어려운데 도와주시면 정말 감사드립니다

react route css

react routes 경로중 특정 경로에만 적용하고 싶은 css가 있는 경우 어떻게 해야 하나요?? 현재는 index.css에 모든 routes경로의 스타일이 적용되어 있는 상태입니다. 특정 경로를 감싸난 css provider가 있을까요??

잘되던 스크롤이동 기능이 갑자기 먹통이 됬습니다.

다른 브라우저에서 문제 없이 동작하는 scrollTo로 스크롤 이동시킨 기능이 제 컴퓨터 크롬에서만 동작하지 않는데 이게 이유가 뭘까요... 제 컴터 파이어폭스, 네이버웨일, 엣지 브라우저에서는 문제 없이 동작하는데 제 크롬에서만 아예 먹통이네요...? 심지어 다른 분 컴터 크롬에서는 또 잘 동작합니다... 이유가 뭘까요.....? 혹시 제가 발견못한 코드 수정이 있나 해서 한참전 브랜치로 롤백도 해보고 강력새로고침으로 캐시도 초기화 해봤습니다... 그런데도 증상은 같네요..;;;

프론트엔드는 디자인도 중요하나요?

react로 취업준비하는데 react에서 서버에서 받은 데이터를 어떻게 효율적으로 처리하는지, 상태관리나 이런 개발요소 제외하고 css나 스타일도 보나요? 부트스트랩이나 material ui 이런거 쓰면 안될거 같긴한데.. 프론트는 뭘 보는지 잘 모르겠습니다.

제이쿼리에 대해 질문드립니다

안녕하세요. 프론트엔드 개발자를 목표로 열심히 공부하고 있는 비전공자 입니다. 최근 Javascript 를 공부하고 있습니다. 공부하는 중에 jquery가 도서관에 관련된 책도 많고 언급도 많이 되서 공부해야하나 싶지만 또 굳이 안해도 된다는 말도 있어서 공부하는데 고민이 많이 되는거 같습니다. 원래 이후 vanilla js와 react를 공부할 계획이었는데 어떻게 공부하면 좋을지도 감이 안잡히는것 같습니다. Jquery 현업에서 많이 쓰는지 궁금합니다. 그리고 최근 UI/UX 디자인도 흥미가 생겨서 이부분은 어떻게 추가적으로 공부하면 좋을지 궁금합니다.

React에서 document.getElementById 써도 괜찮은가요

리액트를 공부하던중에 문제가 생겼는데요, 요소의 절대위치를 가져와여하는데 useRef를 쓰자니 컴포넌트끼리의 거리가 좀 멉니다. 그래서 recoil을 사용해서 ref를 가져오려하는데 잘안되네요... 구글링을 하던중에 js문법으로 해결한 코드를 발견했는데 간단하게 끝나더라구요... 근데 또 막상 코드를 가져다 쓰려니 나중에 면접에서 useRef냅두고 왜 document.getElementById 썻냐고 물어보면 할말이 없을거같아서 고민됩니다... 어떻게해야할까요? 도와주세요...

리액트를 다시 배우려고 하는데요

어떤 강의를 봐야할지 모르겠습니다,, 알려주시면 감사하겠습니다ㅠㅠ

firebase 로그아웃 에러가 납니다.

index-30f3030e.js?7426:1267 Uncaught (in promise) TypeError: Cannot assign to read only property 'isRunning' of object '#<ProactiveRefresh>' at ProactiveRefresh._stop (index-30f3030e.js?7426:1267:1) at UserImpl._stopProactiveRefresh (index-30f3030e.js?7426:1681:1) at AuthImpl.directlySetCurrentUser (index-30f3030e.js?7426:2588:1) at eval (index-30f3030e.js?7426:2442:1) _stop @ index-30f3030e.js?7426:1267 _stopProactiveRefresh @ index-30f3030e.js?7426:1681 directlySetCurrentUser @ index-30f3030e.js?7426:2588 eval @ index-30f3030e.js?7426:2442 로그아웃 함수를 실행하면 위와 같은 에러가 나는데요. 로그아웃을 하고 싶은데, 로그아웃이 되질 않아서 useEffet로 로그인 상태를 감지하는 함수에서도 계속 로그인이 된 상태로 나옵니다 ㅜㅜ