묻고 답해요
150만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
순위 정보를
불러오고 있어요
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
투두 리스트 강의중 input 태그에 value 속성의 역할이 궁금합니다
<input ref = {contentRef} value={content} onChange={onChangeContent} placeholder="새로운 Todo..."/> <button onClick={onSubmit}>추가</button>위 코드에서 value={content}에서 value가 정확히 어떤 역할을 하는지 잘 모르겠습니다.
-
미해결[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
npx expo start하면 왜 실행이안될까요?
안녕하세요 도저히 해결이 안되서 질문남깁니다.일단 맥북이구요.안드로이드 기기를 키려고 a를 누르면 쭉 메시지가 나오다가CommandError: No Android connected device found, and no emulators could be started automatically.Please connect a device or create an emulator (https://docs.expo.dev/workflow/android-studio-emulator).Then follow the instructions here to enable USB debugging:https://developer.android.com/studio/run/device.html#developer-device-options. If you are using Genymotion go to Settings -> ADB, select "Use custom Android SDK tools", and point it at your Android SDK directory.이렇게 빨갛게 에러가 나면서 실행이 안됩니다. 지피티로도 해결이 안되서 질문 남겨봅니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
혹시 프론트엔드 로드맵이 어떻게되나요?
선생님 강의가 마음에 들어계속 듣고싶은데요현재 프로젝트를 한달 후에 프론트엔드 부분을 맡아 진행하고있는데정식로드맵이랑간편 로드맵?빠르게 웹사이트 한개 만들 수 있게 하는 로드맵 알고 싶습니다.리액트 강의 듣고 next.js강의 들어야하는지아니면 리액트 듣고 타입스크립트 듣고 자바스크립트 듣고 next.js강의 들어야하는지..아니면 리액트만으로도 되는지 등등..
-
해결됨UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오
figma에서 이미지 크기를 문의드립니다
안녕하세요.선생님께서 제공해주신 피그마 화일에서움직이는 아이콘을 확대해도이미지가 깨지지 않습니다.방법을 알려 주실 수 있을까요?질문이 많은데, 친절히 설명해주셔서 감사합니다.답변을 기다리겠습니다. 감사합니다.
-
해결됨아바타 커뮤니티앱 만들기 (React Native)
혹시 expo에서 adMob 적용시
강의 내용은 아니고 지금 실제 앱을 만들고 있는데 거의 다 만들었는데 adMob 적용해서 막혔습니다.아무리 해결하려고 해도 해결이 안되는데 혹시나 조언을 구할수 있을까 여쭤봅니다expo 앱에 google admob을 추가할 때 expo-ads-admob 라이브러리를 사용하려 했지만, Expo SDK 46을 기준으로 더 이상 지원하지 않는 것 같습니다. https://docs.page/invertase/react-native-google-mobile-ads 이걸 사용해 넣으려고 했지만 계속 어떤 방법을 해도 해결이 되지 않아서 구글링도 했고혹시 이게 해결가능한 문제인데 제가 못하는건지 아니면 이 플러그인을 사용하기가 어려운건지expo에서궁금합니다...!
-
해결됨아바타 커뮤니티앱 만들기 (React Native)
테블릿 기기에서의 반응형
개발을 진행하면서 ios, 안드로이드 휴대폰크기로는 확인을 하면서 진행했는데테블릿 크기에서 확인해보니 많이 작아지는 현상이 있습니다. 혹시 현업에서는 이런 처리를 어떻게 고려하시는지 궁금합니다 !
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
감정일기장 날짜 필터적용안됨
(사진)
-
해결됨아바타 커뮤니티앱 만들기 (React Native)
style 에러
안녕하세요 강사님 코드를 따라치면서 학습을 하고 있는데 <View style={styles.fixed}>이 style 부분에 No overload matches this call.Overload 1 of 2, '(props: ViewProps): View', gave the following error.Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'StyleProp<ViewStyle>'.Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'ViewStyle'.Types of property 'position' are incompatible.Type 'string' is not assignable to type '"absolute" | "static" | "relative" | "fixed" | "sticky" | undefined'.Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'StyleProp<ViewStyle>'.Type '{ position: string; bottom: number; width: string; borderTopWidth: number; borderTopColor: string; paddingTop: number; paddingHorizontal: number; }' is not assignable to type 'ViewStyle'.Types of property 'position' are incompatible.Type 'string' is not assignable to type '"absolute" | "static" | "relative" | "fixed" | "sticky" | undefined'.ts(2769)ViewPropTypes.d.ts(203, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'ViewPropTypes.d.ts(203, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<View> & Readonly<ViewProps>'(property) style?: StyleProp<ViewStyle>View Problem (Alt+F8)이런 에러가 뜨는데 제가 어느 부분에서 잘못했는지, 왜 이런 에러가 발생했는지 모르겠습니다....전체 코드는 아래와 같습니다.import CustomButton from '@/components/CustomButton'; import InputFiled from '@/components/InputFiled'; import { colors } from '@/constants'; import { StyleSheet, View } from 'react-native'; export default function LoginScreen() { return ( <> <View style={styles.container}> <InputFiled label="이메일" placeholder="이메일을 입력해주세요" ></InputFiled> <InputFiled label="비민번호" placeholder="비밀번호를 입력해주세요" ></InputFiled> </View> <View style={styles.fixed}> <CustomButton label="로그인하기"></CustomButton> </View> </> ); } const styles = { container: { flex: 1, margin: 16, gap: 16, }, fixed: { position: 'absolute', bottom: 0, width: '100%', borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: colors.GRAY_300, paddingTop: 12, paddingHorizontal: 16, }, };
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
pagination Frontend
안녕하세요!pagination 강의를 듣고 서버에서 front로 보내는 방법은 정확히 이해했습니다.감사합니다. 그런데 frontend에서 어떠한 방식으로 처리해야 하는지 감이 안 옵니다. 대략적으로 front에서 20개씩 요청하는 방식을 어떻게 해야 하는지 설명 부탁 드립니다. 그리고 혹시, 강사님이 해주시는 frontend pagination 강의가 있으면 추천 부탁 드립니다.
-
해결됨처음 만난 리액트(React)
chapter_07 콘솔로그 질문드려요~!
안녕하세요~!소플님 덕분에 리액트 강의 잘보고 있습니다~!chapter_07 입장버튼을 10번 눌렀을때 콘솔로그가 밑에 처럼 찍히는건 이해가 되었는데======================useEffect() is called.isFull: falseCurrent count value: 10 밑에로그는 왜 다시 찍히는건가요??======================useEffect() is called.isFull: true 9번까지는 위에로그가 안찍히는거 같은데 10번째에 로그가 찍히는 이유가 궁금합니다~!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
6.2 강의에 관해 질문 드립니다.
안녕하세요 현재 리액트 강의 6.2) UI 구현하기를 수강 중 문제가 발생해서 질문 드립니다. App.css에서 스타일을 정의하고 적용을 하니 요소들이 오히려 우측으로 치우치고 화면을 축소 및 확대를 시켜도 중앙 정렬이 이루어지지 않습니다. 원인을 모르겠어서 질문 드립니다.
-
해결됨[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
안드로이드 구글 로그인 에러
iOS로 구글 로그인하는거는 잘됩니다!근데 aos로 로그인하면 이런 에러가 떠요,,, 학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)
-
해결됨[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
'register' value관련 에러
이 에러는 무슨 에러인가요? 학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)
-
미해결인터랙티브 웹 개발 제대로 시작하기
왼쪽/오른쪽 동작시 딜레이 문제
소스를 그대로 사용하는것이 아니고 한단계, 한단계 만들어가면서 하고 있는데요.팔, 다리, 몸통, 머리 소스 부분부분씩 진도나갈때마다 복붙하면서 진행하고 있습니다. 다 잘 진행되는데, 키보드 왼쪽/오른쪽 이동시, 잘 이동됩니다.근데 누르자마자 이동하는게 아니라, 1~1.5초 가량 딜레이(아무동작안함)후에 뒤늦게 동작하더라고요.어느 부분을 살펴보면 좋을지요!!
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
@IsPublic( )
37강 (모든 Route 기본 Private로 만들고 IsPublic Annotation 작업하기) 강의 에서8분 50초에 아래의 코드에 @IsPublic을 해줘도 아래 가드를 통과해야 해서 괜찮다고 말씀해주셨는데요. //access 토큰 재발급 @Post('token/access') @IsPublic() // 여기가 퍼블릭이여도 밑에서 가드를 통과해야하기 때문에 괜찮다. @UseGuards(RefreshTokenGuard) postTokenAccess(@Headers('authorization') rawToken: string) { // 여기서 받는 rawToken은 Bearer 이다. const token = this.authService.extractTokenFromHeader(rawToken, true); // token은 refresh 토큰이다. false를 같이 던져줘서 acess 토큰이 나온다. const newToken = this.authService.rotateToken(token, false); /** * {accessToken: {token}} 이러한 형태로 리턴 */ return { accessToken: newToken }; } //refresh 토큰 재발급 @Post('token/refresh') @IsPublic() @UseGuards(RefreshTokenGuard) postTokenRefresh(@Headers('authorization') rawToken: string) { // 여기서 받는 rawToken은 Bearer 이다. const token = this.authService.extractTokenFromHeader(rawToken, true); // token은 refresh 토큰이다. true를 같이 던져줘서 acess 토큰이 나온다. const newToken = this.authService.rotateToken(token, true); /** * {refreshToken: {token}} 이러한 형태로 리턴 */ return { refreshToken: newToken }; } AccessTokenGuard, RefreshTokenGuard 모두 BearerTokenGuard를 먼저 수행하기 때문에 req에 IsRoutePublic가 true로 되어 있어서 AccessTokenGuard, RefreshTokenGuard 이 두 개 모두 바로 통과하는 것으로 알고 있습니다.이렇게 되면 IsPublic 어노테이션을 사용한 상황에서는 전역으로 설정된 AccessTokenGuard는 통과하게 됩니다. 그리고 "token/access" API에 설정된 RefreshTokenGuard도 물론 통과하게 됩니다. 이렇게 되면 RefreshTokenGuard는 어디에서도 사용할 수 없는 게 아닐까요??///////////////정리////////////////////////////////% 토큰 재 발급하는 상황이라고 가정 %IsPublic 어노테이션 설정됨 -> AccessToken 통과, RefreshTokenGuard 통과 BearerTokenGuard 통과RefreshTokenGuard도 통과즉, refreshToken 인지 검증 불가능 IsPublic 어노테이션 설정됨 -> AccessToken 검증 재검증 로직이므로 refresh 토큰을 보냈으므로 AccessToken 검증에서 accessToken이 아니라고 걸림 즉, RefreshTokenGuard는 사용할 수 없게 되는게 아닌가요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
회원가입
안녕하세요 @Post('register/email') @IsPublic() // 여기가 퍼블릭이여도 밑에서 가드를 통과해야하기 때문에 괜찮다. postRegisterEmail(@Body() body: RegisterUserDto) { return this.authService.registerWithEmail(body); }위 코드처럼 회원가입을 할 때, 클라이언트에서 email, password를 보내주게 됩니다.로그인할 때는 basic 토큰으로 email, password를 base64해서 암호화하여 보내는데 회원가입할 때는 클라이언트측에서 그냥 Body에 email, password를 노출시켜서 보내도 상관없는 건가요?
-
해결됨[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
MMKV 사용시 에뮬레이터에서 실행이 불가능한 이슈
이런식으로 실제 앱에서만 사용이 가능하다고 뜹니다ㅠ찾아보니까 디버깅을 끄라는데 개발자 도구를 켜봐도(ctrl+m /cmd+m켜서 들어가는,,) Debugging을 끄는 부분이 안보여요,,,+ Debug JS Remotely라는 부분을 끄라고 구글링을 하니까 나오는데 이 부분이 아예 개발자도구에서 안보입니다.. 학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
12.11 강의 ) export 후 경고 문구 & 콘솔창 데이터 출력 안됨
'12.11) Home 페이지 구현하기 2. 기능' 강의의 9분 17초에서 App 컴포넌트의 context를 Home 컴포넌트로 보내주기 위해 DiaryStateContext와 DiartDispatch를 익스포트 해주는데요.문제 1) 저는 익스포트하게 되면 아래 사진과 같이 오류가 뜨고 [문제 2]에서 설명드린 부분도 실행이 되지 않습니다. (Home 컴포넌트에서 임포트 후 다시 App 컴포넌트로 돌아와 익스포트를 작성해주긴 했습니다 => 작성 순서 바뀜)이미지의 오류 문구 (refresh only works when a file exports components. Move your react context to a separate file.) 문제 2) 그리고 강의 영상에선 익스포트 후 Home 컴포넌트에 App 컴포넌트에서 익스포트한 것 들을 import 해주고 필터를 통해 각 달에 해당하는 일기 데이터를 추출 후 콘솔창에 출력해줍니다. (강의 16:07)하지만 저는 아래 사진과 같이 콘솔창에 현재 월에 대한 데이터가 아무것도 뜨지 않습니다. 위에서 설명드린 익스포트가 제대로 되지 않은 문제로 인해 안 뜨는 것일까요? + 추가로 context들을 파일을 따로 만들고 App 컴포넌트에 임포트하고 새로고침해봤더니 아무것도 뜨지 않았습니다.. 이 내용은 깃허브에 업로드 되어있습니다.App과 Home 컴포넌트의 코드는 아래에 남겨두었습니다.(깃허브 : https://github.com/hsyo830/Section12.git )[App.jsx]import "./App.css"; import { useReducer, useRef, createContext } from "react"; import { Routes, Route } from "react-router-dom"; // /입력 시 Home, /new new, /diary diary 각각의 페이지를 가져오도록 하기 위함 import Diary from "./pages/Diary"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Notfound from "./pages/NotFound"; const mockData = [ { id: 1, createDate: new Date("2025-03-14").getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createDate: new Date("2025-03-13").getTime(), emotionId: 2, content: "2번 일기 내용", }, { id: 3, createDate: new Date("2025-02-25").getTime(), emotionId: 3, content: "3번 일기 내용", }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => String(item.id) === String(action.data.id) ? action.data : item ); case "DELETE": return state.filter((item) => String(item.id) !== String(action.id)); default: return state; } } // 일기 데이터를 공급할 Context export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, mockData); // 여러가지 일기 데이터를 가져야해서 []와 같이 빈 배열 const idRef = useRef(3); // 새로운 일기 추가 const onCreate = (createDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createDate, emotionId, content, }, }); }; // 기존 일기 수정 const onUpdate = (id, createDate, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createDate, emotionId, content }, }); }; // 기존 일기 삭제 const onDelete = (id) => { dispatch({ type: "DELETE", id, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App; [Home.jsx]import { useState, useContext } from "react"; import { DiaryStateContext } from "../App"; import Header from "../components/Header"; import Button from "../components/Button"; import DiaryList from "../components/DiaryList"; import { data } from "react-router-dom"; const getMonthlyData = (pivotDate, data) => { const beginTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth(), 1, 0, 0, 0 ).getTime(); const endTime = new Date( pivotDate.getFullYear, pivotDate.getMonth() + 1, 0, 23, 59, 59 ).getTime(); return data.filter( (item) => beginTime <= item.createdDate && item.createdDate <= endTime ); }; const Home = () => { const data = useContext(DiaryStateContext); const [pivotDate, setPivotDate] = useState(new Date()); const monthlyData = getMonthlyData(pivotDate, data); console.log(monthlyData); const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1)); }; const onDecreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() - 1)); }; return ( <div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth() + 1}월`} leftChild={<Button onClick={onDecreaseMonth} text={"<"} />} rightChild={<Button onClick={onIncreaseMonth} text={">"} />} /> <DiaryList /> </div> ); }; export default Home;
-
미해결처음 만난 리액트(React)
안녕하세요 미니블로그 실습 질문드립니다.
실습을 잘 따라하여 코드도 모두 동일합니다.그런데 왜 글 작성하기 버튼 클릭이 안되는지 오류도 없어서 문의드립니다.또한 버튼 간격도 코드가 동일한데 떨어지지 않고 제 것은 붙어있습니다.어떻게 해결해야할 지 모르겠네요 ㅎㅎ
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
도커볼륨 마운트 관련
프로젝트 구성DockerfileFROM node:14 RUN apt-get update && apt-get install -y bash COPY ./package.json /myfolder/ COPY ./yarn.lock /myfolder/ WORKDIR /myfolder/ RUN yarn install COPY . /myfolder/ CMD ["yarn", "start:dev"]docker-compose.yamlversion: "3.7" services: node-server: build: context: . dockerfile: Dockerfile volumes: - ./index.js:/myfolder/index.js - ./email.js:/myfolder/email.js ports: - 3000:3000 database-server: image: mongo:5 ports: - 27017:27017 Window 환경입니다.위와 같을 때index.js 파일을 수정하여도docker로 연동된 nodemon 재 실행이 안됩니다. docker-desktop 에서 container 에서보면 mount 라고 표기되어있고위의 새로고침 버튼을 누르면 제대로 적용 됩니다.원인이 뭘까요?
주간 인기글
순위 정보를
불러오고 있어요