inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

ios 시뮬레이터에서 비밀번호(or 비밀번호 확인) 재 포커스 후 입력시 이전값이 초기화 됩니다

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

안드로이드에서는 초기화 문제 없는데 ios에서만 그러네요..ㅠ 일단 오류 확인에 있어 필요하다는 코드 위주로 올렸는데 더 필요한 코드가 있다면 알려주세요! SignupScreen.tsx import {SafeAreaView, StyleSheet, Text, TextInput, View} from 'react-native'; import React, {useRef} from 'react'; import InputField from '../../components/InputField'; import useForm from '../../hooks/useForm'; import CustomButton from '../../components/CustomButton'; import {validateSignup} from '../../utils'; function SignupScreen() { const passwordRef = useRef<TextInput | null>(null); const passwordConfirmRef = useRef<TextInput | null>(null); const signup = useForm({ initialValue: {email: '', password: '', passwordConfirm: ''}, validate: validateSignup, }); const handleSubmit = () => { console.log(signup.values); }; return ( <SafeAreaView style={styles.container}> <View style={styles.inputContainer}> <InputField autoFocus placeholder="이메일" error={signup.errors.email} touched={signup.touched.email} inputMode="email" returnKeyType="next" // return키가 아닌 다른 키 옵션을 주고 싶을때 blurOnSubmit={false} // next와 같은 키를 눌러도 키가 닫히지 않음 (false) onSubmitEditing={() => passwordRef.current?.focus()} // next키를 눌렀을 때 다음 input으로 이동 {...signup.getTextInputProps('email')} /> <InputField key="password" ref={passwordRef} placeholder="비밀번호" textContentType="oneTimeCode" // ios에서 강력한 암호 뜨게 하는걸 방지 error={signup.errors.password} touched={signup.touched.password} secureTextEntry returnKeyType="next" blurOnSubmit={false} onSubmitEditing={() => passwordConfirmRef.current?.focus()} {...signup.getTextInputProps('password')} /> <InputField key="passwordConfirm" ref={passwordConfirmRef} placeholder="비밀번호 확인" textContentType="oneTimeCode" error={signup.errors.passwordConfirm} touched={signup.touched.passwordConfirm} secureTextEntry onSubmitEditing={handleSubmit} {...signup.getTextInputProps('passwordConfirm')} /> </View> <CustomButton label="회원가입" /> </SafeAreaView> ); } export default SignupScreen; const styles = StyleSheet.create({ container: { flex: 1, margin: 30, }, inputContainer: { gap: 20, marginBottom: 30, }, }); useForm.ts // 리액트 hook form 같은 리액트 라이브러리를 사용해도 괜찮지만 // 복잡하고 많은 input을 다루지 않기 때문에 직접 구현함 import {useEffect, useState} from 'react'; interface UseFormProps<T> { initialValue: T; validate: (values: T) => Record<keyof T, string>; } function useForm<T>({initialValue, validate}: UseFormProps<T>) { const [values, setValues] = useState(initialValue); const [touched, setTouched] = useState<Record<string, boolean>>({}); const [errors, setErrors] = useState<Record<string, string>>({}); const handleChangeText = (name: keyof T, text: string) => { setValues({ ...values, [name]: text, }); }; const handleBlur = (name: keyof T) => { setTouched({ ...touched, [name]: true, }); }; const getTextInputProps = (name: keyof T) => { const value = values[name]; const onChangeText = (text: string) => handleChangeText(name, text); const onBlur = () => handleBlur(name); return {value, onChangeText, onBlur}; }; useEffect(() => { const newErrors = validate(values); setErrors(newErrors); }, [validate, values]); useEffect(() => { console.log('values값 뭐뭐 들어왔는지 체크용: ', values); }, [values]); return {values, errors, touched, getTextInputProps}; } export default useForm; validate.ts type UserInformation = { email: string; password: string; }; function validateUser(values: UserInformation) { const errors = { email: '', password: '', }; // email이 올바른 이메일인지 검사하는 정규표현식 // 이 테스트를 통과하지 못할경우 if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) { errors.email = '올바른 이메일 형식이 아닙니다.'; } if (!(values.password.length >= 8 && values.password.length < 20)) { errors.password = '비밀번호는 8~20자 사이로 입력해주세요.'; } return errors; } function validateLogin(values: UserInformation) { return validateUser(values); } function validateSignup(values: UserInformation & {passwordConfirm: string}) { const errors = validateUser(values); const signupErrors = {...errors, passwordConfirm: ''}; if (values.password !== values.passwordConfirm) { signupErrors.passwordConfirm = '비밀번호가 일치하지 않습니다.'; } return signupErrors; } export {validateLogin, validateSignup}; InputField.tsx import { Dimensions, Pressable, StyleSheet, Text, TextInput, TextInputProps, View, } from 'react-native'; import React, {ForwardedRef, forwardRef, useRef} from 'react'; import {colors} from '../constants'; import {mergeRefs} from '../utils'; interface InputFieldProps extends TextInputProps { disabled?: boolean; error?: string; touched?: boolean; } // 디바이스의 높이 가져옴 const deviceHeight = Dimensions.get('screen').height; const InputField = forwardRef( ( {disabled = false, error, touched, ...props}: InputFieldProps, ref?: ForwardedRef<TextInput>, ) => { const inputRef = useRef<TextInput | null>(null); // input부분이 아닌 error msg(View컴포넌트) 부분을 클릭해도 input에 포커스를 해주기 위함 (Pressable 컴포넌트로 먼저 감싸주고나서!) const handlePressInput = () => { inputRef.current?.focus(); }; return ( <Pressable onPress={handlePressInput}> <View style={[ styles.container, disabled && styles.disabled, touched && Boolean(error) && styles.inputError, ]}> <TextInput ref={ref ? mergeRefs(inputRef, ref) : inputRef} // false일 때는 편집 가능 editable={!disabled} placeholderTextColor={colors.GRAY_500} style={[styles.input, disabled && styles.disabled]} {...props} autoCapitalize="none" // 자동 대문자 방지 spellCheck={false} autoCorrect={false} /> {/* error 메세지가 있을 때만 해당 컴포넌트 표시하기 위해 string 타입을 Boolean으로 변경 */} {touched && Boolean(error) && ( <Text style={styles.error}>{error}</Text> )} </View> </Pressable> ); }, ); export default InputField; const styles = StyleSheet.create({ container: { borderWidth: 1, borderColor: colors.GRAY_200, padding: deviceHeight > 700 ? 15 : 10, }, input: { fontSize: 16, color: colors.BLACK, padding: 0, }, disabled: { backgroundColor: colors.GRAY_200, color: colors.GRAY_700, }, inputError: { borderWidth: 1, borderColor: colors.RED_300, }, error: { color: colors.RED_500, fontSize: 12, paddingTop: 5, }, }); common.ts import {ForwardedRef} from 'react'; // input component를 만들어서 사용할 때 해당 컴포넌트에서 사용하는 ref와 외부에서 주입하는 ref를 둘 다 사용 가능하게 함 function mergeRefs<T>(...refs: ForwardedRef<T>[]) { return (node: T) => { refs.forEach(ref => { if (typeof ref === 'function') { ref(node); } else if (ref) { ref.current = node; } }); }; } export {mergeRefs}; 찾아보기도 하고 챗gpt에도 물어보고 해봤지만 도저히 모르겠어서 질문 남겨봅니다! 일단 회원가입 스크린 관련해서만 올리긴 했는데 로그인 화면에서도 마찬가지로 비밀번호 부분만 그런 현상이 발생하네요..ㅠ 혹시나 해서 비밀번호 input 속성으로 secureTextEntry 전달하는거 없애보니까 이런 문제가 없긴한데 그렇다고 이걸 전달 안할 수도 없고..어찌해야 할까요?? 아니면 이건 코드가 아닌 ios 자체 문제일까요??

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
HyeJung 댓글 1 좋아요 1 조회수 333

로그 관리에 대해 질문 있습니다.

미해결

Slack 클론 코딩[백엔드 with NestJS + TypeORM]

안녕하세요. 최근에 프로젝트를 완성해서 배포까지 성공리에 마쳤는데요. 이제 운영을 해야하는데 몇가지 궁금한 점이 생겨서 질문 남기게 되었습니다. 운영을 하다보면 배포하기 전 진행한 테스트 외에도 예기치 못한 오류가 생길 수 있기때문에 서버에서 로깅하는게 굉장히 중요하다고 생각이 드는데요. 실무에서는 로깅을 따로 어떻게 하는지에 대해 궁금함이 생겼습니다. 현재 서비스의 중요한 비즈니스 로직에는 Logger를 사용해서 호출 될 때 마다, 시간과 함께 넘어가는 데이터를 같이 로깅하게끔 개발 해놨습니다. 약간 문제라고 생각되는 것은 에러가 발생 할 때, 호스팅하고있는 온프레미스 서버에 직접 접속해서 도커 컨테이너 로그를 일일이 확인해야 하는 번거로움이 있는 점입니다. 실무에서 모든 개발자들이 이렇게 확인하지 않을 것이라고 생각하는데 보통 실무에서는 어떻게 로그를 관리하시나요? 조언 부탁드립니다!

  • node.js
  • express
  • nestjs
  • typeorm
뱅준 댓글 2 좋아요 0 조회수 264

ANDROID STUDIO 버전

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

현재 ANDROID STUDIO가 Jellyfish 버전으로 다운로드 되는데 상관없을까요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
댓글 1 좋아요 1 조회수 246

TypeORM-Column annotation 강의 중 UserModel typing 관련 질문

해결됨

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

안녕하세요. UserModel 엔티티 작성할 때, 아래와 같이 타입을 엉뚱하게 적어도 컬럼 값의 타입이 제대로 들어가는 문제로 질문드립니다. https://orkhan.gitbook.io/typeorm/docs/entities#primary-columns 해당 Docs를 보니 어노테이션에 타입이 정해져 있어 그런거 같은데, 아래 코드가 타입 오류가 안나는게 맞는건가요? @PrimaryGeneratedColumn() id: string; @Column() @Generated('uuid') additionalId: number;

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
mins 댓글 1 좋아요 0 조회수 235

Using the first of multiple matching destinations 에러 해결방법!

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

--- xcodebuild: WARNING: Using the first of multiple matching destinations: { platform:iOS Simulator, id:D6FC302F-1EC1-4258-8FD4-4AA0049970DB, OS:17.5, name:iPhone 15 } { platform:iOS Simulator, id:D6FC302F-1EC1-4258-8FD4-4AA0049970DB, OS:17.5, name:iPhone 15 } ** BUILD FAILED ** 이러한 에러가 발생하며, 빌드가 되지 않습니다. 해결 방법을 알고 싶습니다!!! 검색해도 정보가 많지 않습니다 ㅠ

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
김용민 댓글 1 좋아요 0 조회수 2697

쿼리문 질문입니다

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

안녕하세요 comments module을 진행하고 있습니다. pgadmin에서 SELECT * FROM users_model a INNER JOIN comments_model b ON a.id = b.authorId 위의 쿼리로 테이블을 조회해보려고 했는데 ERROR: column b.authorid does not exist LINE 4: ON a.id = b.authorId ^ HINT: Perhaps you meant to reference the column "b.authorId". SQL state: 42703 Character: 74 이런 오류가 나옵니다 혹시 어떻게 해야 코멘츠 테이블과 유저 테이블을 조인해서 조회해볼 수 있을까요?? 그리고 pgadmin이 시간이 좀 지나면 자꾸 연결이 끊기는지 쿼리를 날려도 아무 응답이 없는데 혹시 연결을 refresh해주는 방법이 있을까요? 매번 쿼리창을 새로 열기가 너무 불편하네요

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
LEE 댓글 1 좋아요 0 조회수 177

로그아웃할때 /server/uploads/index.html&#x27; 파일을 찾을수없다고 에러가 나오는데 어떻게해야할까요?

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

로그아웃 버튼을 클릭하면 Error: ENOENT: no such file or directory, stat '/Users/user/Documents/code/MatzipApp/server/uploads/index.html' 이런 에러가 나오고있어서 uploads폴더에 Index.html파일을 추가하니까 에러는 안나오는데 index.html에 아무것도 안작성해도되나요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
하이하이 댓글 1 좋아요 1 조회수 267

NestJS, 섹션39,Follow Count Incremet & Decrement 작업하기 - 2 강의 동영상 오류

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

안녕하세요. 강의: NestJS REST API 백엔드 완전정복 섹션: 39. 팔로워 카운트, 코멘트 카운트 작업하기 동영상: Follow Count Incremet & Decrement 작업하기 - 2 이 강의는 잘못된 동영상이 업로드된 것으로 생각됩니다. 원래는, 직전 강의(followerCount)에 이어서, followeeCount를 increment & decrement 하는 내용이 있어야하는데, 이 내용이 아니라, 다음 강의 내용인 commentCount를 언급하는 내용이 잠깐 나오고, 곧 종료됩니다. 확인 부탁드립니다.

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
yavathar 댓글 2 좋아요 0 조회수 210

TypeORM 데이터 조회

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

안녕하세요! 개인 프로젝트를 진행 하면서 도저히 이해가 안되는 부분이 있어서 이렇게 글을 올려봅니다. userId 에 다대일로 User entity를 연결하고 사진과 같이 userId 에서 데이터를 불러온후 result 에서 조건에 맞게 데이터를 조회하려는데 타입이 맞지 않다면서 불러올 수 없었던 적이 많았습니다. 결국 방법을 찾지 못해서 쿼리빌더를 이용하여 데이터를 조회하는 방법으로 해결을 하고 있습니다. 타입이 맞지 않을때는 어쩔 수 없이 조회를 할 수 없는 것인지, 아니면 방법이 있는 것인지 궁금합니다!

  • nestjs
  • typescript
  • typeorm
  • graphql
Risha 댓글 1 좋아요 0 조회수 261

"실행 오류" yarn start 실행후

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

r - reload the app d - open developer menu i - run on iOS a - run on Android info Opening the app on Android... info JS server already running. info Launching emulator... info Installing the app... > Task :gradle-plugin:compileKotlin UP-TO-DATE > Task :gradle-plugin:compileJava NO-SOURCE > Task :gradle-plugin:pluginDescriptors UP-TO-DATE > Task :gradle-plugin:processResources UP-TO-DATE > Task :gradle-plugin:classes UP-TO-DATE > Task :gradle-plugin:jar UP-TO-DATE > Task :gradle-plugin:inspectClassesForKotlinIC UP-TO-DATE > Task :app:buildCodegenCLI SKIPPED > Task :app:generateCodegenSchemaFromJavaScript SKIPPED > Task :app:generateCodegenArtifactsFromSchema SKIPPED > Task :app:generatePackageList > Task :app:preBuild > Task :app:preDebugBuild > Task :app:compileDebugAidl NO-SOURCE > Task :app:compileDebugRenderscript NO-SOURCE > Task :app:generateDebugBuildConfig UP-TO-DATE > Task :app:javaPreCompileDebug UP-TO-DATE > Task :app:checkDebugAarMetadata UP-TO-DATE > Task :app:generateDebugResValues UP-TO-DATE > Task :app:mapDebugSourceSetPaths UP-TO-DATE > Task :app:generateDebugResources UP-TO-DATE > Task :app:mergeDebugResources UP-TO-DATE > Task :app:createDebugCompatibleScreenManifests UP-TO-DATE > Task :app:extractDeepLinksDebug UP-TO-DATE > Task :app:processDebugMainManifest UP-TO-DATE > Task :app:processDebugManifest UP-TO-DATE > Task :app:processDebugManifestForPackage UP-TO-DATE > Task :app:processDebugResources UP-TO-DATE > Task :app:compileDebugJavaWithJavac UP-TO-DATE > Task :app:mergeDebugShaders UP-TO-DATE > Task :app:compileDebugShaders NO-SOURCE > Task :app:generateDebugAssets UP-TO-DATE > Task :app:mergeDebugAssets UP-TO-DATE > Task :app:compressDebugAssets UP-TO-DATE > Task :app:processDebugJavaRes NO-SOURCE > Task :app:mergeDebugJavaResource UP-TO-DATE > Task :app:checkDebugDuplicateClasses UP-TO-DATE > Task :app:desugarDebugFileDependencies UP-TO-DATE > Task :app:mergeExtDexDebug UP-TO-DATE > Task :app:mergeLibDexDebug UP-TO-DATE > Task :app:dexBuilderDebug UP-TO-DATE > Task :app:mergeProjectDexDebug UP-TO-DATE > Task :app:mergeDebugJniLibFolders UP-TO-DATE > Task :app:mergeDebugNativeLibs UP-TO-DATE > Task :app:stripDebugDebugSymbols UP-TO-DATE > Task :app:validateSigningDebug UP-TO-DATE > Task :app:writeDebugAppMetadata UP-TO-DATE > Task :app:writeDebugSigningConfigVersions UP-TO-DATE > Task :app:packageDebug UP-TO-DATE > Task :app:createDebugApkListingFileRedirect UP-TO-DATE > Task :app:installDebug FAILED 38 actionable tasks: 2 executed, 36 up-to-date info 💡 Tip: Make sure that you have set up your development environment correctly, by running react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: No connected devices! * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 5s info Run CLI with --verbose flag for more details.| 후 실행이 안됩니다.. 어떻게 해야되나요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
김성은 댓글 2 좋아요 1 조회수 425

CORS 에러 질문 있습니다.

해결됨

Slack 클론 코딩[백엔드 with NestJS + TypeORM]

안녕하세요. 프로젝트를 배포하는 과정에서 왜인지 모를 CORS 에러가 계속 생겨서 질문 드립니다. CORS 문제를 해결하기 위해서는 응답 헤더에 Acess-Control-Allow-Origin 이 필요한데, nestjs 와 같은 was에서 enableCors 를 설정해주거나, Nginx 의 server 블럭에 add_header 를 통해서 헤더를 추가 해 줄 수 있는 것으로 알고 있습니다. 웹 서버가 was보다 앞에 있으니까 웹 서버에서 설정해줘야겠다는 생각에 nginx.conf 에 allowed_origin 은 동적으로 Access-Control-Allow-Origin 헤더의 값을 받기 위해서 설정해뒀습니다. 이렇게 작성하고 reload 를 해줬는데, 왜인지 응답헤더에 추가한 헤더가 생기지 않습니다... 테스트 서버에 위와 같은 설정으로 올렸을 때는 잘 해결됐는데 라이브에 올리니까 이런 문제가 발생하는데 어디를 살펴봐야 할 지 모르겠습니다... access to XMLHttpRequest at '도메인 주소' from origin '서버 ip' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 이런식으로 404에러가 나옵니다.

  • node.js
  • express
  • nestjs
  • typeorm
뱅준 댓글 2 좋아요 0 조회수 342

inflearn_actual git 레파지토리는 없나요?

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

안녕하세요. 열심히 강의 따라가고 있었는데, 실수로 작업하던 소스파일을 삭제했습니다. 복구할 방법이 없어서 그러는데 혹시 git 리파지토리 소스나, 아니면 교육용 백업본이라도 있으면 주실 수 있을까요?

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
플레어 댓글 1 좋아요 0 조회수 196

[4-0] GoogleMap 연동하기 진행 중 구글맵에 오류가 발생 했습니다.

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

안녕하세요 강사님. 강의 잘 듣고 있습니다. :) 강의 진행 중 구글맵을 띄우는 과정에서  ERROR react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps on iOS. 라는 오류가 발생하는데요, 이 때문에 구글맵이 보이지 않아서 진행이 어려운 상태 입니다. 앞서 해당 강의에서 8분 가량 설명 해주신 부분은 모두 진행 하였는데요, 어떻게 하면 구글 맵을 띄울 수 있을까요?ㅜㅜ

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
wjdrlf5986 댓글 4 좋아요 1 조회수 1018

로그인 api 요청 이후 getAccessToken ( /auth/refresh ) api 401 error

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

안녕하세여 강사님 강의 잘 듣고 있습니다. 다름이 아니라 회원가입 및 로그인 api 요청 성공시 onSuccess 함수 로직에 있는 queryClient.refetchQueries({ queryKey: [queryKeys.AUTH, queryKeys.GET_ACCESS_TOKEN], }); 이 코드로 getAccessToken ( /auth/refresh ) api 를 요청하고 있습니다. 여기서 문제는 getAccessToken 요청시 401 error 가 발생하고 있습니다. DB 에 회원가입으로 생성된 유저 데이터는 잘 생성된 상태이고 오타는 없어보입니다. ㅠㅠ 도와주세여 아래 이미지는 log 이미지입니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
병아리222 댓글 1 좋아요 1 조회수 656

NestJS, 섹션35. 모듈 네스팅. Paginate Comments API 만들기 강의 잘림

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

안녕하세요. 강의: NestJS REST API 백엔드 완전 정복 섹션: 35 모듈 네스팅 동영상: Paginate Comments API 만들기 위에 적은 강의 동영상의 끝부분이, 의도치 않게 잘린 것 같습니다. 마지막인 5:56 시간에서, 말씀하는 도중에 강의가 끝나버립니다. 확인해 주시면 감사하겠습니다.

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
yavathar 댓글 4 좋아요 1 조회수 506

colors[theme]을 못읽는 이유

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

import React, {ReactNode} from 'react'; import { Pressable, StyleSheet, Text, PressableProps, Dimensions, View, StyleProp, ViewStyle, TextStyle, } from 'react-native'; import {colors} from '../../constants'; import useThemeStore from '@/store/useThemeStore'; import {ThemeMode} from '@/types/common'; interface CustomButtonProps extends PressableProps { label: string; variant?: 'filled' | 'outlined'; size?: 'large' | 'medium'; inValid?: boolean; style?: StyleProp<ViewStyle>; textStyle?: StyleProp<TextStyle>; icon?: ReactNode; } const deviceHeight = Dimensions.get('screen').height; function CustomButton({ label, variant = 'filled', size = 'large', inValid = false, style = null, textStyle = null, icon = null, ...props }: CustomButtonProps) { const {theme} = useThemeStore(); const styles = styling(theme); // 여기서는 제대로 출력이 됩니다. 값이 제대로 읽힙니다. console.log(colors[theme].PINK_700); return ( <Pressable disabled={inValid} style={({pressed}) => [ styles.container, pressed ? styles[`${variant}Pressed`] : styles[variant], inValid && styles.inValid, style, ]} {...props}> <View style={styles[size]}> {icon} <Text style={[styles.text, styles[`${variant}Text`], textStyle]}> {label} </Text> </View> </Pressable> ); } const styling = (theme: ThemeMode) => StyleSheet.create({ container: { borderRadius: 3, justifyContent: 'center', flexDirection: 'row', }, inValid: { opacity: 0.5, }, filled: { backgroundColor: colors[theme].PINK_700, }, outlined: { borderColor: colors[theme].PINK_700, borderWidth: 1, }, filledPressed: { backgroundColor: colors[theme].PINK_500, }, outlinedPressed: { borderColor: colors[theme].PINK_700, borderWidth: 1, opacity: 0.5, }, large: { width: '100%', paddingVertical: deviceHeight > 700 ? 15 : 10, alignItems: 'center', justifyContent: 'center', flexDirection: 'row', gap: 5, }, medium: { width: '50%', paddingVertical: deviceHeight > 700 ? 12 : 8, alignItems: 'center', justifyContent: 'center', flexDirection: 'row', gap: 5, }, text: { fontSize: 16, fontWeight: '700', }, filledText: { color: colors[theme].WHITE, }, outlinedText: { color: colors[theme].PINK_700, }, }); export default CustomButton; console.log(colors[theme].PINK_700); 이렇게 출력할 경우, 제대로 아래와 같이 출력이 됩니다만 스타일은 제대로 읽어오지 않습니다. 이 부분에 대해서 알고 싶습니다. BUNDLE ./index.js LOG Running "MatzipApp" with {"rootTag":171,"initialProps":{"concurrentRoot":false}} LOG light LOG #C63B64 LOG #C63B64 LOG #C63B64 ERROR TypeError: Cannot read property 'PINK_700' of undefined This error is located at: in CustomButton (created by ErrorBoundary) in RCTView (created by View) in View (created by ErrorBoundary) in ErrorBoundary (created by RetryErrorBoundary) in RetryErrorBoundary (created by RootNavigator) in RootNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in _QueryClientProvider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MatzipApp(RootComponent), js engine: hermes ERROR TypeError: Cannot read property 'WHITE' of undefined This error is located at: in RetryErrorBoundary (created by RootNavigator) in RootNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in _QueryClientProvider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MatzipApp(RootComponent), js engine: hermes ERROR TypeError: Cannot read property 'WHITE' of undefined This error is located at: in RetryErrorBoundary (created by RootNavigator) in RootNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in _QueryClientProvider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MatzipApp(RootComponent), js engine: hermes ERROR TypeError: Cannot read property 'WHITE' of undefined https://github.com/dydals3440/MatZip 좀더 정확히 판단을 위하여 제가 커밋한 레포 남겨드립니다!!!

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
김용민 댓글 2 좋아요 0 조회수 324

배포 환경 DB 연결 질문 있습니다.

해결됨

Slack 클론 코딩[백엔드 with NestJS + TypeORM]

안녕하세요. 배포를 하고 있는 중 에러를 만났는데 도저히 이해가 가지 않아서 여쭤봅니다. [Nest] 1 - 05/23/2024, 2:56:25 PM ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)... Error: Access denied for user '유저'@'호스트 서버 IP' (using password: YES) 제가 지금 만난 에러인데요. 현재 배포하고 있는 서버와 DB로 켜놓은 서버가 각각 다른 서버입니다. 데이터베이스 사용자에 당연히 프로젝트에서 연결 해둔 유저를 추가해두었고, 배포하고 있는 서버의 접근도 허용해뒀습니다. 또한, GRANT ALL PRIVILEGES ON . TO '유저'@'호스트 서버 IP' IDENTIFIED BY '비밀번호'; flush privileges; 이렇게 모든 권한도 주었습니다. 그런데 계속 위의 에러가 발생하는데 이유를 도통 모르겠습니다. 어떻게 접근해야 할까요?

  • node.js
  • express
  • nestjs
  • typeorm
뱅준 댓글 2 좋아요 0 조회수 430

강의 자료 관련해서 글 남깁니다.

미해결

따라하며 배우는 NestJS

아마 해당 강의에서 다루는 주 내용이 아니라 그런 것 같긴한데, 강의자님 영상에서는 #10 프론트 엔드단 만들기와 #12 배포하기 강의자료가 존재하는데, 강의자료를 다운 받는 아래 링크에 존재하지 안흔데, 강의가 생성된 이후 의도적으로 제거하신 건가요? https://drive.google.com/drive/folders/1SbVMMPXVhEomuCJl-2fWAcTW4Do1OqJ2

  • postgresql
  • jwt
  • nestjs
  • typeorm
장건희 댓글 1 좋아요 0 조회수 497

AWS S3 : 버킷에 사진이 업로드가 안됩니다(2)

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

[Nest] 27666 - 2024. 05. 23. 오후 12:23:25 ERROR [ExceptionsHandler] ENOENT: no such file or directory, stat '/Users/제이름/MatzipApp/server/uploads/index.html'Error: ENOENT: no such file or directory, stat '/Users/제이름/MatzipApp/server/uploads/index.html' 아까 올린 문제는 제가 지역을 잘못봐서 .env 파일에서 수정해서 해결했습니다. 다시 실행해보니 이번엔 저런 오류가 뜨는데욥실제로 저런 디렉토리랑 파일이 서버 하위에 없긴 합니다.. 구글링해도 도저히 답이 안나와서 다시 한번 질문 드립니다!

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
Lee rimi 댓글 1 좋아요 0 조회수 358

S3 실행시 버킷에 사진이 업로드가 안됩니다

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

기존에 있는 문제는 해결됐습니다! (개인정보가 있어서 삭제합니다ㅜㅜ)

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
Lee rimi 댓글 1 좋아요 0 조회수 221

인기 태그

인프런 TOP Writers

주간 인기글