#undefined

부트캠프에 관해 질문 드리고 싶습니다..!

최근에 코딩에 관심이 생겨 알아보던 중 프론트엔드와 백엔드개발자 직무를 보게되었고, 3개월 동안 JS와 파이썬 기초를 독학하였습니다. 하지만 제가 비전공자라서 혼자서 하려니 막막할 때가 많아서 국비지원 부트캠프를 찾아보고 있는데요.. 아직은 프론트와 백엔드 중 어느 분야로 나아갈 지 확신이 안 서서 풀스텍을 듣고, 그 이후 직무를 정해서 해당 직무의 부트캠프를 들으려고 하는데요.. 이렇게 부트 캠프를 2개 들어도 괜찮을까요? 주변에서는 프론트나 백엔드 하나를 정해서 듣는게 낫다고 하시더라고요.. 그래서 좀 더 공부해서 확신이 설 때까지 부캠 수강을 미뤄볼까 싶기도 합니다 ㅠㅠ 하지만 일단 뭐라도 하는게 좋지 않나 라는 생각도 듭니다.. 제가 알아본 부캠은 3개 중 하나를 선택하려는데 커리큘럼 괜찮을까요? 1. https://codingon.co.kr/pr/kdt/14th 2. https://www.hrd.go.kr/hrdp/co/pcobo/PCOBO0100P.do?tracseId=AIG20210000328805&tracseTme=14&crseTracseSe=C0061&trainstCstmrId=500020039773#undefined 3. https://www.hrd.go.kr/hrdp/co/pcobo/PCOBO0100P.do?tracseId=AIG20230000451047&tracseTme=1&crseTracseSe=C0061&trainstCstmrId=500020027783#undefined

콜백함수부분에 대해 질문있습니다.

안녕하세요 현재 자바스크립트를 공부하고 있는 초보자입니다. 현재 위치를 보여주는 코드를 작성하면서 궁금한 점이 생겼습니다. const askForLocation = function () { navigator.geolocation.getCurrentPosition((position) => { console.log(position); }); }; askForLocation(); 이러한 코드가 있는데 제가 알기론 ()=>{} 콜백함수에 매개변수로 position이 있고 제일 마지막에 askForLocation() 함수 호출하는게 있는데 이 함수 호출부분에서 인자로 아무것도 전달되는것이 없어서 console.log(position)를 했을 때 undefined가 나올 것을 예상했는데 geolocation의 객체정보가 콘솔창에 나오더라구요. 그래서 매개변수로 전달 될 만한것이 없는데 어떻게 콘솔창에 객체정보가 나오는지 궁금합니다. 초보자 입장에서 정말 쉽게 설명해주시면 너무 감사드리겠습니다.

Recoil Atom Effect 적용 기: 팀 내 설득 및 구현 조언

안녕하세요!! 현재 진행 중인 프로젝트에서 회원가입 시 필요한 정보를 입력하는 중 새로고침 시 session 및 localstorage를 이용하여 상태유지를 하려고하는데 recoil과 관련하여 atom effect를 사용하면 우아하게 처리할 수 있음을 알았습니다. 따라서, 각 atom에 effect를 하나하나 추가하는 방법을 생각했는데 동일한 logic을 행하는 코드의 양이 방대해지고 localstorage에 각 atom에 해당하는 key-value로 저장되므로 가독성 측면에서 좋지 않다고 판단하여 아래와 같은 과정을 생각했습니다. 각 atom을 하나로 묶어 객체로 관리하자. 객체로 관리하게 되면 불필요한 re-rendering이 촉발되므로 객체로 선언한 atom의 각 property에 접근 및 수정을 위한 selector를 정의하자. 객체에 내의 property에 1대1로 selector를 정의하면 객체로 묶기 전 atom의 갯수만큼 selector를 선언해주어야 하므로 selectorFamily를 사용하자. 이것저것 찾아보면서 1 → 2 → 3 단계로 생각을 정리했습니다. 아래는 현재 사용되는 atom입니다. <ATOM> // signup.store.ts 👇 회원가입에 대한 user state들 - SignUpProfileTypeAtom - SignUpProfileRentalTypeAtom - SignUpProfileRegionsAtom - SignUpProfileDepositPriceAtom - SignUpProfileTermAtom - SignUpProfileMonthlyPriceAtom - SignUpProfileSmokingAtom - SignUpProfilePetAtom - SignUpProfileAppealsAtom - SignUpProfileGenderAtom - SignUpProfileMatesNumberAtom - SignUpProfileMateAppealsAtom // 👇 위의 atom들을 한 번에 access 및 update - SignUpProfileSelector 하지만, 다른 팀원이 저렇게 atom을 구성한 상황 제 생각을 그대로 적용하고자하면 팀원의 코드를 마음대로 바꾸는 거 같아서 조심스럽습니다. 협업함에 있어 설득도 하나의 중요한 스킬임을 갈수록 깨닫게 됩니다.(다들 어떻게 설득하시나요?) 팀원이 기존의 코드는 안 바꿨으면 좋겠다 하면 각 atom에 effect를 추가하는 것이 맞겠죠???? 현재 현업에 계신 분들은 이러한 상황에서 어떻게 설득하며 어떻게 하는 것이 좋을까 자문을 구하고 싶어서 글 올려봅니다!!🥲🥲 짧지 않은 글이지만 읽어주셔서 감사하고 많은 의견 주시면 감사하겠습니다!!😄😄😄 ```typescript import { SignUpType } from '@/types/signUp.type'; // ? type 집 유형 0: 원룸/오피스텔, 1: 빌라/연립, 2: 아파트, 3: 단독주택 @number export const SignUpProfileTypeAtom = atom<SignUpType['type']>({ key: 'signUpProfileTypeAtom', default: undefined, }); // ? rental_type 집 대여 유형 0: 월세, 1: 전세, 2: 반 전세 @number export const SignUpProfileRentalTypeAtom = atom<SignUpType['rental_type']>({ key: 'signUpProfileRentalTypeAtom', default: undefined, }); // ? regions 유저가 찾는 지역 >도시 (region) + 구(district) 형태의 배열 @string[] export const SignUpProfileRegionsAtom = atom<SignUpType['regions']>({ key: 'signUpProfileRegionsAtom', default: [], }); // ? deposit_price 보증금 (전세 혹은 월세) 범위 [최소 금액, 최대 금액] (0만원~10000만원) @[number, number] export const SignUpProfileDepositPriceAtom = atom<SignUpType['deposit_price']>({ key: 'signUpProfileDepositPriceAtom', default: [0, 10000], }); // ? term 유저가 살 기간 [최소기간, 최대 기간] (0 ~ 24)범위 @[number, number] export const SignUpProfileTermAtom = atom<SignUpType['term']>({ key: 'signUpProfileTermAtom', default: [0, 24], }); // ? monthly_rental_price 월세 [최소 금액, 최대 금액] (0만원, 500만원) @[number, number] export const SignUpProfileMonthlyPriceAtom = atom<SignUpType['monthly_price']>({ key: 'signUpProfileMonthlyPriceAtom', default: [0, 500], }); // ? smoking 흡연 여부 @boolean export const SignUpProfileSmokingAtom = atom<SignUpType['smoking']>({ key: 'signUpProfileSmokingAtom', default: undefined, }); // ? pet 펫 여부 0: 상관없음, 1: 좋음, 2: 싫음 @number export const SignUpProfilePetAtom = atom<SignUpType['pet']>({ key: 'signUpProfilePetAtom', default: undefined, }); // ? appeals 유저의 어필할 매력(배열형태) @string[] export const SignUpProfileAppealsAtom = atom<SignUpType['appeals']>({ key: 'signUpProfileAppealsAtom', default: [], }); // ? gender 상대방의 성별 0: 상관없음, 1: 남성, 2: 여성 @number export const SignUpProfileGenderAtom = atom<SignUpType['gender']>({ key: 'signUpProfileGenderAtom', default: undefined, }); // ? mates_number 인원수 0: 상관없음, 1: 1명, 2: 2명, 3: 3명이상 @number export const SignUpProfileMatesNumberAtom = atom<SignUpType['mates_number']>({ key: 'signUpProfileMateNumberAtom', default: undefined, }); // ? mate_appeals 유저가 원하는 상대방의 매력 (배열형태) @string[] export const SignUpProfileMateAppealsAtom = atom<SignUpType['mate_appeals']>({ key: 'signUpProfileMateAppealsAtom', default: [], }); ```

react-navigation navigate 파라미터 type

안녕하세요, @react-navigation의 useNavigation을 통해 페이지 이동을 하는 함수를 만들던 중 타입 설정이 되지 않아서 질문 드립니다. navbar와 같은 곳에서 사용할 목적으로 navigateTo와 params 를 받아 스크린을 이동시켜주는 함수를 만들고 싶지만 params의 타입에서 에러가 나고 있어서 이 부분에서 어떻게 해줘야 하는지 질문드려요.. 에러 내용을 보면 아래와 같이 나오는게 각 페이지 별 type이 일치하지 않아서 그런걸로 보이는데 각 메뉴마다 navigation.navigate('Login', {~~}); navigation.navigate('Foo'); 이런식으로 하게되면 동작은 하지만 너무 중복된 코드가 되는 것 같아 pgae를 받는 함수로 만드려고 하는 중인데 잘 안되네요..! Argument of type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to parameter of type '[screen: "Login"] | [screen: "Login", params: { page: string; data?: object | undefined; } | undefined] | [screen: "Foo"] | [screen: "Foo", params: undefined] | [screen: "Bar"] | [screen: "Bar", params: undefined]'. Type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to type '[screen: "Login", params: { page: string; data?: object | undefined; } | undefined]'. Type at position 0 in source is not compatible with type at position 0 in target. Type 'keyof RootStackParamList' is not assignable to type '"Login"'. Type '"Foo"' is not assignable to type '"Login"'.ts(2345)

토큰값을 받아오지 못하는 문제 (undefined)

안녕하세요 JWT 토큰을 이용해 로그인 검증하는 로직을 구현하고 있습니다. 로컬스토리지에 토큰을 저장하는 것까지 성공했으나 프론트 측에서 로그인 검증을 요청할때 실제 토큰 값을 받아오지 못하는 문제가 있어 질문 드립니다. login-required에서 토큰 값 유무 로직을 전부 지우고 콘솔로만 찍는 경우 undefined와 실제 토큰값이 나타납니다. 만약 토큰 값 유무 로직을 이용한다면 undefined값만 서버로 들어와 페이지가 무한로딩 되는 현상이 나타납니다. next()처리가 안되기 때문인 것 같습니다. (+ index.html은 test.js를 연결하고 있습니다.) 사진으로 보면 네트워크 요청헤더에서 확인한 결과 1. 처음엔 document 유형의 localhost를, (인증 헤더 x) 이후 js를 불러온다 2. 마지막에 xhr형식인 localhost를 불러옵니다 (인증 헤더 o) (여기서 undefined, 실제 토큰값이 콘솔에 동시에 나타나는 이유라고 생각이 듦) (순서를 보면 document 유형 localhost -> css, js -> xhr 유형 localhost 즉 처음에 document 유형에서 인증헤더를 못가져와서 (js가 로드되기 전이여서) 토큰 유무를 체크하지 못하는 것 같습니다) 결론적으로 제가 생각한 문제 분석 (1) ('/') 에 get 요청을 보낸다. (2) 서버는 loginRequired를 실행한다. (3) 서버로 부터 html을 받지 못한 상태에 loginRequired가 실행되어 토큰 값은 undefined가 된다. (4) next()를 거쳐 서버에서 html을 클라이언트로 부터 응답을 해준다. (5) html을 브라우저에 보여주면서 그 html에 연결된 js를 불러온다. (6) 이때 불러온 test.js에서 get요청 ('/') 로직을 불러와 다시 server.js에서 loginRequired 응답으로 토큰 값을 불러온다. 즉 js가 로드가 되어야 userToken을 로컬스토리지로 부터 받아오고 요청을 하여 토큰 값을 불러올 수 있다. 그런데 get 요청전에 토큰 검증을 하고 허가가 되어야 html을 로드해야 하지 않을까? 그렇다면 서버에서 처리를 해야하는가? 배워가는 학부생으로 많이 부족하다고 생각합니다,, 선배님들의 견해를 받고 싶어 게시물 올립니다..! 핵심 코드는 다음과 같습니다.

[React]서버에서 받아온 데이터 객체 속성 undefined

프론트를 배우고 있는 학생입니다. 서버에서 response.data를 setData함수로 data를 업데이트해서 콘솔에 출력했을 때는 분명 각 속성들이 잘 정의되어서 왔습니다. data의 속성에 있는 배열을 맵핑하려고 했더니 안되서 콘솔에 출력을 해보니 해당 속성은 undefined라고 뜹니다. 다른 속성들도 undefined라고 뜨고 다른 state를 만들어서 data의 각 속성을 개별적으로 받을려고 했는데 저렇게 해도 undefined로 떠요. 혹시 해당 데이터 객체는 잘 왔는데 각 속성에 접근하면 undefined인 이유를 아시나요?? 🥲

Next JS 14 쿠키 관련 질문입니다.

현재 NextJS 14 버전을 사용 중에 있으며 App Router로 폴더 구성을 하고 로그인 작업을 진행 중에 있으며, 로그인 프로세스는 다음과 같습니다. 1. 프론트엔드 : 사용자가 로그인 버튼 클릭 2. 디스코드 서비스에서 인증 (디스코드 페이지로 이동) 3. 백엔드 서버로 인증코드 전송 4. 백엔드 서버에서 프론트엔드로 리다이렉트 (이 때 쿠키로 엑세스 토큰과 같은 정보를 보내줌) 쿠키 설정도 https에 백엔드랑 같은 도메인으로 맞춰 줬습니다. 여기서 1~4번까지 에러 없이 잘 동작하고, 쿠키도 브라우저에 잘 저장되고 있습니다. 근데 여기서 한 가지 문제가 발생했는데, Nexjs가 서버 사이드 컴포넌트(layout) 에서는 쿠키를 잘 불러오고 있지만 클라이언트 사이드 컴포넌트(page) 에서는 쿠키를 불러올 수 없었습니다. (undefined) 현재 클라이언트 사이드 컴포넌트에는 최 상위에 'use client' 를 붙혀 잘 사용하고 있고, cookies-next 라는 라이브러리로 불러오고 있습니다. 어떤 것이 문제일까요? 문제의 원인과 해결 방법을 알고 싶습니다.

Next.js 14 서버액션을 사용한 폼 데이터 처리 중 질문입니다.

next.js 14의 서버액션을 사용해서 사용자로부터 form으로 데이터를 입력받아 DB에 저장하고 첨부파일을 서버에 업로드하는 모듈을 개발중입니다. 문제점은, 첨부파일을 input으로 입력받아 서버액션 함수로 formData로 넘겨주는데, 서버액션 함수에서 첨부파일의 파일명에 한글이 포함됐을 경우 파일명의 한글이 유니코드로 보이는 문자열로 찍히고 있습니다. // Form.jsx "use client"; // [other code] export default function Form() { const [formState, formAction] = useFormState(inquiryAction, { success: undefined, message: "", }); const { register, handleSubmit, reset, formState: { errors }, } = useForm(); const onSubmit = (data) => { const formData = new FormData(); const jsonData = JSON.stringify(data); formData.append("jsonData", jsonData); data.attachment[0] && formData.append("attachment", data.attachment[0]); formAction(formData); }; return ( <form action={handleSubmit(onSubmit)}> // [other code] <FileInput label="첨부파일" {...register("attachment")} error={errors} resetTrigger={resetTrigger} /> // [other code] </form> ); } // inquiryAction.js "use server"; import { connectDB } from "./connectDB"; export async function inquiryAction(prevState, formData) { const fields = JSON.parse(formData.get("jsonData")); const attachment = formData.get("attachment"); console.log(attachment); } Form 컴포넌트는 클라이언트 컴포넌트이고, react-hook-form과 next14의 서버액션을 사용하기 위해, form의 action에는 react-hook-form의 handleSubmit함수에 onSubmit 함수를 인자로 전달합니다. onSumbit 함수에서 서버액션 함수를 가져와 처리를 하고 있습니다. 그런데 여기서 서버함수쪽에서 첨부파일을 받을 때 한글 파일명이 다 깨지고 있네요... 기존에 api route와 fetch api를 사용했을 땐 문제가 없었는데.. 제가 놓치고 있는 부분이 있을까요?

리액트 타입스크립트 obj[key] 에러

타입스크립트 이제 막 적용해보는 초보입니다.. 코드 내 monitorMenu[type].container 에서 [type]에 에러가 뜨는데 타입 지정이 잘못 된 건지 찾아봐도 원인을 모르겠습니다ㅜㅜ 물어볼 곳이 없어 질문합니다,,! 도움 부탁드립니다...ㅠㅠ // code import React, { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import DashboardContainer from '../containers/DashboardContainer'; import IntegratedContainer from '../containers/IntegratedContainer'; interface IMonitorMenu { [key: string]: { container: string | JSX.Element; }; } const Monitor = () => { const user: any = []; const { type } = useParams<{ type?: string }>(); const navigate = useNavigate(); const [menu, setMenu] = useState('integrated'); const onClickMenu = (name: string) => { navigate(`/monitor/${name}`); }; const monitorMenu: IMonitorMenu = { integrated: { container: <IntegratedContainer /> }, dashboard: { container: <DashboardContainer /> }, }; return ( <div> ... <div>{monitorMenu[type].container}</div> </div> ); }; export default Monitor; // error ERROR in src/pages/Monitor.tsx:37:25 TS2538: Type 'undefined' cannot be used as an index type.

react query 내에서 과연 react hook을 사용해도 괜찮을까요? 에러 내용을 어떻게 뽑아내면 좋을까요?

안녕하세요. 이번에 로그인 시 에러가 날 때, 서버에서 보내주는 각각의 데이터값이 있는데 그것을 추출해서 활용하려고 합니다. 우선 아래 코드와 같이 useMutation (v5) 를 사용했구요. onError 에서 그 값을 추출해서 리턴하고 싶어했습니다. (error 의 타입은 Error 나 AxiosError 하면 해결되는 줄 알았는데, message 값까지 들어가면 타입 정의가 되지 않더라구요.. any를 바꿀 팁도 알려주시면 감사하겠습니다 ㅎ..) (* mutation 의 error의 return 값은 null 로 찍혔습니다..! *) 여튼, 콘솔로 값은 읽을 수 있으나 isError 값이나, error 객체도 원하는 결과값이 나오지 않고, 외부 리턴값으로 활용하는 방법이 떠오르지 않아, 일단 2가지 방법으로 추출을 시도했었습니다. - let 변수를 활용해서 상단에 선언 후에, error 시 재선언하여 값을 입력 - state를 정의하여 setState값으로 입히기 첫번째 방법은 항상 undefined로 읽혀지고, 두번째 방법은 서버 응답 속도에 따라서 값이 받아질 때가 있고, 아닌 경우는 기본 defaultState 값으로 읽혀집니다. 또한, 하나의 hook 내에서 다른 hook 을 선언해버리면 리액트의 훅 규칙을 어기는 것으로 알고 있습니다. 그러기에 위 방법은 옳지 않은 방법인 것 같아서, 옳은 에러 데이터 추출방법을 알고 싶습니다. 감사합니다 :)

React 환경 변수 설정 파일 사용 (.env 파일) 관하여

환경에 따라서 경로를 다르게 설정하기 위해서 다음과 같이 .env 파일을 정의하였습니다. 하지만 사용하는 곳에서 console.log 확인해 보니 정의한 주소로 나오지 않습니다. 무엇이 잘못 되었을까요? // .env.development API = https://m.j-sone.com:6420 URL_BASE = https://m.j-sone.com:6420/game_down/fgt-game // .env.production API = https://w.j-sone.com:6421 URL_BASE = https://jsonecdn.j-sone.com/fgt-game // common.ts export const API = process.env.API; export const URL_BASE = process.env.URL_BASE; console.log(API) => http://localhost:3000/undefined

react-native xcode build시 발생 에러

``` ld: warning: ignoring file '/Users/heejinroh/Library/Developer/Xcode/DerivedData/OkCeo-abydistjrfwgsufmyimbpydzjpqj/Build/Products/Debug-iphonesimulator/Flipper-Folly/libFlipper-Folly.a[3](Assume.o)': found architecture 'arm64', required architecture 'x86_64' ld: warning: ignoring file '/Users/heejinroh/Library/Developer/Xcode/DerivedData/OkCeo-abydistjrfwgsufmyimbpydzjpqj/Build/Products/Debug-iphonesimulator/Flipper-Folly/libFlipper-Folly.a[2](Addr2Line.o)': found architecture 'arm64', required architecture 'x86_64' ld: Undefined symbols: _OBJC_CLASS_$_RCTBridge, referenced from: in AppDelegate.o _OBJC_CLASS_$_RCTBundleURLProvider, referenced from: in AppDelegate.o _OBJC_CLASS_$_RNKakaoLogins, referenced from: in AppDelegate.o _RCTAppSetupDefaultRootView, referenced from: -[AppDelegate application:didFinishLaunchingWithOptions:] in AppDelegate.o _RCTAppSetupPrepareApp, referenced from: -[AppDelegate application:didFinishLaunchingWithOptions:] in AppDelegate.o clang: error: linker command failed with exit code 1 (use -v to see invocation) ``` xcode 14 버전으로 생성된 프로젝트를 xcode 15버전으로 진행하여 실행했는데 빌드단계에서 에러가 계속 발생해서 혹시 도움좀 주실수있을까요? System: OS: macOS 14.0 CPU: (12) arm64 Apple M2 Pro Memory: 647.83 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.1/bin/yarn npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm Watchman: 2023.09.25.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /Users/heejinroh/.rvm/gems/ruby-3.2.1/bin/pod SDKs: iOS SDK: Platforms: DriverKit 23.0, iOS 17.0, macOS 14.0, tvOS 17.0, watchOS 10.0 Android SDK: Not Found IDEs: Android Studio: 2022.3 AI-223.8836.35.2231.10671973 Xcode: 15.0.1/15A507 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home/bin/javac npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.8 => 0.70.8 react-native-macos: Not Found npmGlobalPackages: *react-native*: Not Found

자바스크립트 객체 생성 방식 질문 드립니다.

안녕하세요, 저는 현재 자바스크립트 Deep Dive라는 책을 독학하고 있습니다. 클로저 예제(24-13)와 관련해 이해가 다소 어려운 부분이 있어 질문글을 작성하게 되었습니다. const Counter = (function() { let num = 0; function Counter() { } Counter.prototype.increase = function () { return ++num; } Counter.prototype.decrease = function () { return num > 0 ? --num : 0; } return Counter; })(); 여기서 객체의 생성 방식에 따른 동작 방식에 대한 의문이 있습니다. 1. 생성자 호출 const counter = new Counter(); // Counter {} new 연산자와 함께 호출하면 return 문의 유무와 관계 없이 Counter 객체가 생성되는 점은 이해했습니다. 2. 일반 호출 const counter =Counter(); // undefined 위 경우 명시적으로 return Counter를 반환하고 있음에도, undefined가 콘솔에 출력되는 이유가 궁금합니다. chatGPT에 문의했더니 답변이 오락가락해 혼란이 가중되네요.. 지식 나눔에 미리 감사드립니다.

queryString에 관하여

http://test.com?auth=true&data={"endPoint":"/auth","data":"{"email":"test@test.com","name":"홍길동"}"} const query = queryString.parse(window.location.search); query 사용해서 data안에 객체로 되어있는 정보들 중 data안에 email 정보(test@test.com)을 뽑아오려면 어떻게해야하나요? const query = queryString.parse(window.location.search); console.log('query.data',query.data) //query.data까지는 뽑히는데 console.log('query.data.data', query.data.data) //undefined 그래서 const parsedData = JSON.parse(query?.data); //JSON형식 const email = parsedData.data.email; //test@test.com 정보가 뽑혔어요! 하지만 query?.data에서 에러가 납니다. **error 메세지 No overload matches this call. Overload 1 of 2, '(text: string, reviver?: ((this: any, key: string, value: any) => any) | undefined): unknown', gave the following error. Argument of type 'string | (string | null)[] | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. Overload 2 of 2, '(text: string, reviver?: ((this: any, key: string, value: any) => any) | undefined): any', gave the following error. Argument of type 'string | (string | null)[] | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. query?.data에서 위와 같은 에러가 납니다.. query?.data의 type은 JSON형식 아니고 string입니다. console.log(query?.data) // {"endpoint":"/auth","data":{"email":"test@test.com","name":"홍길동"}} string에서 email을 뽑아야할까요?.. JSON형식으로 가져올순 없을까요? 에러 원인 및 피드백 부탁드립니다.

모던 자바스크립트 Deep Dive 변수 관련해서 질문드립니다.

안녕하세요. 혼자서 독학 하던 중에 내용이 이해가 되지 않는 부분이 있어서 질문 드립니다. 모던 자바스크립트 Deep Dive 책에서 변수 선언 및 값의 할당 부분을 공부하고 있는데 책의 내용과 제가 검색해본 내용에 혼동이 생기는 부분이 있습니다. 책에서는 “ 변수에 값을 할당할 때는 이전 값 undefined가 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 할당 값 80을 새롭게 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그곳에 할당 값 80을 저장한다는 점에 주의하자 ” 라는 구문과 함께 아래 그림 내용과 다음과 같은 코드가 설명으로 나와 있습니다. 그런데 제가 더 찾아본 내용으로는 primitive type위 경우에는 값이 변경되어도 동일한 메모리 주소를 같는 것으로 알고 있는데 아래 그림은 메모리 주소가 변경되는 것 처럼 표현이 되어있습니다. 제가 혹시 놓치고 있는 부분이 있는 것일까요??

React Query로 가져온데이터 typescript로 사용할때 질문있습니다 !

React-Query로 데이터를 가져왔을때 response형식을 정해줘도 DataType | undefined 로 나오는 부분을 사용할때 const { name } = data?.user ?? {} 1. 이런식으로 사용하는데 옳게 사용하는것일까요? 2. 아니면 혹시 더 옳바른 사용 방법이 있을까요?! 3. 저 구문에서 ?? 연산자가 앞에께 null, undefined일때 뒤에것을 반환하는 것으로 알고있는데 그럼 const { name } = {} 라는 구문이 되는데 뭔가 좀 이상한거같구…. 혼란스러운데 맞는걸까요? 저 구문이 이해가 잘 안가서 혹시 설명해주시면 감사하겠습니다 😭😭

let a =[1,2,3], let b=[1,2,3]일때 a===b가 false인지 궁금합니다(장문주의)

let a = 1, let b = 2 일 때 a===b가 true인 이유가 다음과 같은 과정이라고 이해했습니다. 1. let a =1;를 선언함 2. 빈 공간의 메모리에 변수 명(식별자)a와 변수 값이 undefined로 할당됨 3. 원시 값 1를 저장하기 위해 메모리의 새로운 공간에 메모리주소 #001(예로 듦)과 원시 값인 1이 저장됨. 4. 처음에 만든 a라는 변수 명을 가진 메모리의 변수 값이 undefined에서 원시 값 1의 메모리 주소인 #001로 다시 저장됨. 5. 즉 a = #001가 됨. 6. 이때 let b = 1;을 선언함 7. 위의 과정을 반복해야하지만 JS 엔진의 메모리 최적화를 위해 같은 원시 값을 공유할 때는 새로 메모리를 생성하지 않고 #001를 참조함 8. 따라서 a = #001이고, b = #001이기 때문에 a===b가 true 근데 왜 참조 타입인 배열은 false인가요? 위의 과정과 어느 부분이 달라서 그런지 궁금합니다.

이 두 코드가 같은 코드 아닌가요..?

위의 코드는 error가 뜨고 아래 코드는 undefined가 뜨네요.. 둘 다 undefined 가 떠야 하는 거 아닌가요..? 호이스팅을 제가 잘못 이해하는 건지... 첫 번째 코그에서 let foo= 2;가 foo 사용시점보다 아래에 있지만 호이스팅 되어 let foo;가 첫 번째 위치에서 선언되는 거 아닌가요?

변수선언문, 값으로 표현될 수 없는 문인 이유가 뭔가요?

deep dive 책을 읽고 있는데 이해가 안 가는 부분이 있어서 질문 올려요! 5장(52페이지) 표현식에서는 undefined는 리터럴이며, 리터럴은 값으로 평가되고 표현식이라고 하는데 그럼 undefined=리터럴=값으로 평가될 수 있는 문(표현식)이라는건데 5.6(57페이지) 예제 05-13에서 변수 선언문은 표현식이 아닌 문이라고 하는건 왜 그런 건가요? 변수 선언문은 초기에 undefined가 할당되는 걸로 알고 있어서 이해하기 어렵네요ㅜㅜ

서버에서 받은 데이터가 undefined로 타입 유추되는 값을 props로 내려줄 때 어떤 식으로 타입 단언 하시나요?

혹시 타입스크립트에서 props로 서버에서 받은 데이터나 혹은 비동기로 인해서 undefined로 타입이 유추될지도 모르는 값을 props로 내려줄때는 여러분들은 어떤식으로 props에서 타입 단언하나요? 예를 들자면, Type '{ data: customeType[] | undefined; }' is not assignable to type to type 'IntrinsicAttributes & customeType[]'. Undefined 없도록 단언 시켜줘야 하는데 어떻게 하시나요? 서버 통신이 오는거라 어쩔수 없이 Undefined 될 경우도 있어서.. 정녕 간단하게 props에서 해줄방법은 없을까요? ㅠ 저 문제 때문에 매번 interface를 만들어줘야되서 고통스럽네요 ㅠㅠ

사용자 정의 타입가드를 사용하지 않으면 undefined가 사라지지 않는 이유가 정확히 뭔가요?

메소드 사용할 때, 사용자 정의 타입가드를 사용하지 않으면 보통… undefined가 사라지지 않던데 정확한 이유가 뭘까요?? 얼핏 봤을 때는 당연히 string만 남거나 빈배열이 나오기 때문에 undefined 같은 경우에는 걸러진다고 생각이 드는데 추론이 명확이 안되는 이유는 뭘지 궁금합니다.. 아시는 지식을 나누어줄 고수 분 계시면 감사드립니다.

javascript 배열에서 가장 마지막 값 가져오기

javascript 배열에서 가장 마지막 값을 가져오는 방법 없나요? python 같은 경우에는 -1 인덱스가 가장 마지막 값을 가져오던데 javascript는 undefined나오더라고요. 항상 length를 계산하고 length -1의 인덱스를 조회해야하는걸까요? 다른분들은 어떤 방법을 사용하시나요?

타입스크립트에서 비동기 함수 리턴값을 정의하려고 하는데 undefined 라서 타입 오류가 발생합니다.

타입스크립트를 사용하고 있는데, 비동기 함수 호출 후 반환되는 데이터의 타입을 어떻게 정의하고, 이를 setState 함수를 사용할 때 어떻게 처리해야 할지 궁금합니다. 현재 코드에서는 데이터를 받아오는 부분에서 undefined가 반환될 가능성이 있어서, setState(data) 부분에서 타입 관련 에러가 발생하는데, 이 문제를 해결하려면 어떻게 해야 할까요? (1) 번에서 undefined일 가능성이 존재해서 최종적으로 setState(data)이 타입걸리는거 같은데 이럴땐 Undefined를 일일히 전부 명시해줘야 하는 걸까요?

[typescript] 제가 Type을 정의 했는데 둘의 차이점이 무엇인가요? undefined 값을 허용하는 Type으로 동일한거 아닌가요? (코드 첨부)

아래 코드처럼 Type을 2개 정의 했는데요 둘의 차이가 정확하게 어떤건가요? 결국 undefined를 가능하게 하는 type 아닌가요? 타입스크립트 어렵네요ㅜ

_app.tsx에서 session을 접근하고 싶어요.

next-auth.js를 사용 중이고 next.js 버전은 v13이에요. 새로이 가입한 유저일 경우 특정 페이지로 넘어가게 할려고 하는데 이에 대한 코드가 있을 적절한 위치가 _app.tsx인데 pageProps로 받은 session은 undefined이기도 해서 다른 방식으로 접근해야 하는지 할 수 있다면 어떤 방법인지 궁금합니다.

Next.js toast editor 값을 가져오고 싶습니다.

등록 버튼을 눌렀을 때, 입력 한 값을 가져오고 싶은데, undefined가 뜹니다. 어떻게 가져올 수 있는걸까요? ㅜㅜ

null과 undefined를 나누어 사용하는 이유가 무엇인가요?

javascript 공부중인 학생입니다. '없음'은 null과 undefined로 나누어 사용한다고 하는데, 이 둘의 차이는 알겠으나 왜 이 두개를 나눠서 다르게 사용하게 된 것인가요? 값을 지정하지 않았다는 것과 없다는 것이 코드를 짤 때 큰 차이를 가져오게 되나요? 소중한 답변 감사합니다.

[react-native] MutableRefObject<undefined> is not assignable to type LegacyRef 타입 에러가 발생합니다.

react-native, typescript로 개발하고 있습니다. ref를 선언해서 ScrollView에 전달 하려는데 타입 에러가 발생합니다. 에러 내용 MutableRefObject<undefined>' is not assignable to type 'LegacyRef<ScrollView> | undefined'. 동작은 잘하지만 빨간줄이 생겨서 혹시 이 에러 해결해보신 분 있으실까요?

javascript에서 함수 또는 undefined인 경우 함수를 실행하는 방법

javascript를 사용하면서 타입을 크게 신경 쓰지 않고 사용하고 있습니다. a라는 값이 조건에 따라 함수가 될 수도 있고 undefined가 될 수도 있습니다. a() 이렇게 실행하면 undefined인 경우에는 Uncaught TypeError: a is not a function 이 발생합니다. 이 문제는 어떻게 해결하면 좋을까요? 제가 생각한 방법은 if (a) { a() } 이렇게 실행하는 방법입니다. 혹시 더 좋은 방법이 있다면 알려주세요!

Node 에서 MySQL 값이 Undefined 일경우 에러는 어떻게 처리 하나요?

Node Back End 개발 중 MySQL 값을 넣는 중 undefined일 경우 nodemon waiting Error 가 발생을 합니다 ( waiting for file changes before starting...) 초기에 이 에러로 인해 서버다운이 많이 발생했었습니다. 그래서 Undefined가 들어가지 않도록 개발을 하고 있습니다. 혹시나 Undefined가 들어갔는지 미리 확인도 하고요. 하지만! 혹시나! 하는 마음에 Error 처리에 대해 공부하는데 이 부분은 잘 나오지 않더라고요. (... 찾아보아도 Undefined가 들어가지 않도록 하세요가 끝입니다. ) MySQL 쿼리 작성중 Undefined 발생 ( waiting for file changes before starting...) 를 어떻게 처리 할 수 있을까요? 고수님들 도와 알려주세요~~