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

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

SI 업체 개발 스타일 풀스택

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

리액트 컴포넌트 props를 제너릭으로 선언해서 사용해도 될까요?

혹시 컴포넌트에 제네릭 넘기신적 있으신분 계신가요? 예를 들면 A라는 컴포넌트가 OrderA OrderB라는 Order에서 파생된 두가지 타입을 받는 경우요!

NodeJS MongoDB driver 설치 후 Typescript build 에러 발생하는 문제

안녕하세요. Node.js 사이드 프로젝트에서 MongoDB 를 사용해보려고 합니다. 설치해서 npm run dev 를 해서 사용하는데는 문제가 없었는데 npm run build 를 하니까 갑자기 167 개의 Typescript 에러가 발생하고 있어요. 로그를 보니 tsc 명령에서 문제가 발생하고 있고 모든 에러의 위치가 node_modules/ 내부로 나오네요. 혹시 mongodb 를 typescript 와 사용하지 못하는 문제가 있는걸까요 ? 아니면 특정 버젼 혹은 @types 모듈을 설치해야 하는걸까요 ? 도와주세요 ㅠㅠ

퍼블 고수분들 도와주세요

현재, 웹브라우저 기반 앱을 만들고 있습니다 각 페이지 마다 em(1em = 16px을 기준)으로 폰트 사이즈를 잡았는데 휴대폰 자체에서 글자 크기를 설정할 경우, 안드로이드 같은 경우에는 글자가 커지더라구요..! 이걸 막거나 대체할 방법이 있을까요? 반응형 땜에 em 을 썼는데 px을 쓰는 게 나을까요..?

타입스크립트 인터페이스에서 string 타입 유형을 제대로 인식하지 못하는 문제?

foods라는 객체배열을 선언하고 Food 타입을 정의했는데요. foods의 type을 string으로 인식해서 Food type의 type인 'Dairy' | 'Protein' 로 인식을 못하는 문제입니다 ㅜ as Food[] 로 타입 단언 해주면 해결되긴 하는데 타입 단언이 안좋다고 들어서요. 이런 에러코드가 나와요. Types of property 'type' are incompatible. Type 'string' is not assignable to type 'foodType' 아래는 코드입니다.

아래 사진과 같은 GNB를 만들어야 합니다.

위쪽에 있는 메뉴에 마우스를 올리면 전체 메뉴가 드랍 되는 형태의 헤더 인데 위쪽 메뉴에 마우스를 올리면 텍스트 컬러와 밑줄이 생기고 그 상태가 유지 되면서 하위 메뉴를 컨트롤 해야 하는데 마우스 커서를 하위 메뉴 쪽으로 가져갔을때 위쪽 메뉴의 컬러와 밑줄을 어떻게 컨트롤 해야 할지 잘 몰라서 질문 드립니다.. 사진이 왜케 깨지는지 잘 모르겠네요 ..

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

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

리액트 컴포넌트 타입을 그대로 사용하는 방법

안녕하세요! 리액트와 타입스크립트에 대한 질문입니다. img 태그를 사용해서 컴포넌트를 하나 만드려고 하고 있습니다. 이미지 태그가 받을 수 있는 타입을 컴포넌트가 그대로 사용하게 하고 싶은데 interface를 선언한뒤 이미지 태그가 받을 수 있는 모든 타입을 명시해주어야 할까요? src, alt... 시간이 너무 많이 드는 것 같아서 혹시 이런 경우 어떤식으로 처리하시는지 궁금합니다! 감사합니다.

프론트엔드 개발자의 퍼블리싱 능력 수준

안녕하세요. 현재 SI회사에 재직 중인 개발자입니다. 취직 후 프론트엔드에 흥미가 생겨 공부를 하다 프론트엔드 개발자로 이직을 준비하고 있습니다. 일반적인 회사에서 프론트엔드 개발자에게 요구하는 퍼블리싱 능력 수준은 어느정도일까요? 저는 기본적인 css만 다룰 수 있어서 이 부분에 대해서 걱정이 앞서네요..

next.js에서 _app.tsx Component랑 pageProps 타입 선언해주고 싶은데 어떻게 하면 되나요?

next.js 샘플을 사용했는데, 이걸 타입 스크립트로 변경하면 타입에러가 나더라구요. Component랑 pageProps는 어떤 타입으로 선언해야 타입에러가 안날까요?

이미 정의된 타입에 'Property xxx does not exist on type' 오류가 발생해요

아래 코드와 같이 타입이 정의가 되어있는데 key={cancelActionPayload.action} 의 action에 빨간줄 쳐지고 'Property 'action' does not exist on type' 이라 에러가 뜨는데 제 생각에는 action 필드가 분명 있는 것 같은데 뭘 잘못 생각했을까요?ㅜㅜ

type alias vs utility type

큰 프로젝트에서 type alias와 utilty type 이 두개 중에 성능이나 가독성면에서 차이가 있나요? 아직 타입스크립트에 익숙하진 않아서 제 생각에는 취향 차이인 것 같은데 다른 분들 의견은 어떠신지 궁금합니다

typescript 에서 d.ts 파일은 어떤 상황에서 사용해야 하나요 ?

JS 만 사용하다가 typescript 를 배우기 시작했는데 d.ts 라는 파일 용도 이해가 잘 안됩니다. 잘못 사용하면 타입 오류가 발생하는것 같아서 그냥 사용하지 않는게 더 좋을것 같은데 꼭 사용해야 하는 상황이 있는걸까요 ?

신입 풀스택 개발자 다음 이직은?

현재 비전공자로 국비지원 후 부트캠프 나와서 풀스택으로 한지 1년차 입니다 연봉이 너무 작아서 이직을 하려니 고민 1. 다시 프론트로 지원을 할 지 아니면 이대로 풀스택 구하는곳으로 쭉 갈지 고민이 됩니다 (프론트와 백엔드 너무 재미있지만 둘다 깊이있게 아는게 아닌상태라서) 고민 2. 프론트로 지원을 해보긴 했는데 연락와서 아직 1년이 안된 스타트업이고 프론트는 저 혼자지만 연봉이 현재보다 600 높습니다 (현재 프론트 대신 제가 들어가는거라고 합니다) 선배님들 조언 부탁드립니다

typescript enum은 지양해야하나요?

프로젝트 진행 중에 typescript enum 관련해서 팀원들과 의견이 갈려서 질문드립니다. 우선 기존 코드부터 설명드리면, enum Categories { Value, Value2, Value3 } 와 같은 형태가 있고 또 const categoryDataMap = { [Categories.Value]: { name: "카테고리1", }, [Categories.Value2]: { name: "카테고리2", }, [Categories.Value3]: { name: "카테고리3", } } const getCategoryDataByCategory = (category: Categories) => { return categoryDataMap[category] } 와 같은 mapper 오브젝트와 유틸 함수도 존재합니다. 저는 typescript 관련 공부를 했을때 enum 보다는 object as const를 사용하라고 배웠었는데요. 예를 들면 위의 코드를 const Categories = { 1: { name: "카테고리1" }, 2: { name: "카테고리2" }, 3: { name: "카테고리3" } } as const type CategoryKeys = keyof typeof Categories; const getCategoryDataByCategory = (category: CategoryKeys) => { return Categories[category] } 이렇게 바꿔줄수 있는데요. 저는 이 방법이 getCategoryDataByCategory를 사용했을때 category 인자의 타입이나 해당 함수가 리턴하는 타입이 더 명시적으로 나와서 편하다고 느꼈었습니다. 하지만, 팀원들은 다른 견해를 가지고 있었어요. 굳이 enum을 저렇게 바꿔야하는가? 라는 의문을 제기해주셨는데요. ---- 저도 typescript enum을 지양해야한다라고 어렴풋이 알고 있어서 "왜 굳이 enum인 친구들을 더 가독성이 떨어지는 후자의 방법으로 바꿔야하지"라는 궁금증이 생겨서 여쭤봅니다. 흔히 얘기하시는 enum 사용시 발생하는 treeshaking 문제는 enum을 cont enum으로 선언해주면 어느정도 해결되는 것 같은데, 굳이 const 형태로 바꿔줘야하는 이유가 있을까요? typescript에서 enum을 지양하라는 맥락에 대해 좀 더 구체적인 이유를 알고 싶습니다. 긴글 봐주셔서 감사합니다

react, typescript에서 테스트코드를 작성하고 싶은데 뭘 쓰면 좋을까요? 선배님들 도와주세요...

안녕하세요 저는 프론트엔드 개발자 취업준비생입니다. 취업준비와 병행하며 포트폴리오용 웹사이트 제작하고 싶어서 팀에 합류했는데요! 프론트는 react와 typescript를 사용하는 게 확정이 됐고, 저 포함 프론트 팀원 3명 다 테스트코드 작성 경험이 없어서 이번에 도입해보려고 합니다. Q. 구글링을 해보니 가장 많이 나오는게 jest인 것 같은데 어떤 걸로 하는걸 추천하시나요?

<ul> 과 <li> 태그를 사용하여 커스텀으로 select 태그 기능을 구현하려고 합니다.

<ul> 안에 <li> 태그를 넣어서 옵션 바를 만들었습니다. 그리고 클릭을 하면 해당 li 태그의 value 값을 가져오도록 clickHandler 함수를 만들었습니다. as HTMLLIElement 를 event.target 뒤에 붙여주지 않으면 value 값에대한 접근 자체가 안되더군요 그리고 li 태그안에 value attribute를 작성했습니다. 원래 value attribute는 li 태그가 (<ol>안에서) 쓰일때 숫자를 넣어서 list 에 넘버링이 붙도록 하는 역할인건 알고 있었는데 제가 위에 작성한 것 처럼 ul 태그 안에서 이렇게 value에 접근해서 값을 서버로 보내는 용도로 사용해도 문제가 없을까요?

리액트에서 타입스크립트 사용할 때 이런 경우 타입을 어떻게 줘야할지 모르겠습니다

리액트와 타입스크립트를 연습해보려고 혼자 토이프로젝트를 만드는 중인데 어떤 타입을 지정해줘야 할지 모르겠어서 질문올립니다. 혹시 더 자세한 설명이 필요할 것 같으면 댓글부탁드려요! 상황) 리액트, 타입스크립트를 사용하는 프로젝트에서 부트스트랩 모달을 사용하려고 합니다. 사진1번이 모달을 포함하고있는 부모컴포넌트, 사진2번이 모달컴포넌트 인데 부모컴포넌트에서 모달컴포넌트로 show, onHide라는 2개의 props를 넘깁니다(부트스트랩에서 지정해놓은 프롭스입니다.) 부모컴포넌트에는 모달의 표시 여부를 관리하는 const [showEmptyInputModal, setShowEmptyInputModal] = useState(false); 이라는 상태값이 있고 그게 각각 props로 넘겨지게 되는 것 같습니다. 여기서 문제) 그런데 사진2번에 넘겨주는 props의 타입을 어떻게 설정해야할 지 모르겠습니다... 일단 any로 하면 작동은 되긴하는데ㅠㅠ any는 최대한 쓰지 않는게 좋다고 해서요 사진4번의 빠른 수정을 보면 이런 옵션들이 있던데 unknown이나 never를 사용하면 그 props를 사용하는 곳들에서 에러가 납니다. any를 사용하거나 빠른 수정의 옵션 중 eslint 규칙을 무시하는 선택지밖에 없는 걸까요? state와 setState를 실행하는 함수 props로 넘기려면 타입을 어떻게 줘야하나요...!