172만명의 커뮤니티!! 함께 토론해봐요.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요, 현재 Vue 2.0을 사용하고 있으며, React로 이직을 하고자 해당 강사님의 강의를 수강하고있습니다. 혹시 현업에서도 해당 도구를 많이 사용하는지 빈도가 궁금합니다. Vue를 사용하면서는 그러지아니하다보니 이것을 알고있는게 좋은지 파악이 안된다보니 쌩뚱한 질문을 드려 죄송합니다.
미해결
React Native with Expo: 제로초에게 제대로 배우기
안녕하세요, 제로초님! 강의 잘 듣고 있습니다. 다름이 아니라 ImagePicker 로 카메라 사진 촬영 후 MediaLibrary 를 사용해서 갤러리에 저장할 때, 다음과 같은 에러가 발생합니다. 확인해보니 AUDIO 권한이 선언되지 않았다고 하는데, 아래와 같이 app.json 의 plugin 에 권한을 추가해도 동일한 에러가 발생합니다. { "expo": { // ... "plugins": [ // ... [ "expo-media-library", { "photosPermission": "Allow $(PRODUCT_NAME) to access your photos.", "savePhotosPermission": "Allow $(PRODUCT_NAME) to save photos.", "isAccessMediaLocationEnabled": true, "granularPermissions": ["audio", "photo"] } ] ], // ... } } 제로초님이 올려주신 코드를 그대로 복사 & 붙여넣기 해봐도 같은 문제가 발생하는데, 혹시 제가 놓친 부분이 있을까요...? 강의에서 다룬 부분의 코드와 package.json 첨부하겠습니다. import { FontAwesome, Ionicons } from '@expo/vector-icons'; import * as ImagePicker from 'expo-image-picker'; import * as Location from 'expo-location'; import * as MediaLibrary from 'expo-media-library'; import { useRouter } from 'expo-router'; import React, { useState } from 'react'; import { Alert, FlatList, Image, Linking, Pressable, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; // ... export default function Modal() { // ... const canAddThread = (threads.at(-1)?.text.trim().length ?? 0) > 0 || (threads.at(-1)?.imageUris.length ?? 0) > 0; const canPost = threads.every( thread => thread.text.trim().length > 0 || thread.imageUris.length > 0, ); const removeThread = (id: string) => { setThreads(prevThreads => prevThreads.filter(thread => thread.id !== id), ); }; const pickImage = async (id: string) => { let { status } = await ImagePicker.requestMediaLibraryPermissionsAsync(); if (status !== 'granted') { Alert.alert( 'Permission not granted', 'Please grant camera roll permission to use this feature', [ { text: 'Open settings', onPress: () => { Linking.openSettings(); }, }, { text: 'Cancel', }, ], ); return; } let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ['images', 'livePhotos', 'videos'], allowsMultipleSelection: true, selectionLimit: 5, }); console.log('image result:', result); if (result.canceled) return; setThreads(prevThreads => prevThreads.map(thread => thread.id === id ? { ...thread, imageUris: thread.imageUris.concat( result.assets?.map(asset => asset.uri) ?? [], ), } : thread, ), ); }; const takePhoto = async (id: string) => { let { status } = await ImagePicker.requestCameraPermissionsAsync(); if (status !== 'granted') { Alert.alert( 'Permission not granted', 'Please grant camera permission to use this feature', [ { text: 'Open settings', onPress: () => { Linking.openSettings(); }, }, { text: 'Cancel', }, ], ); return; } let result = await ImagePicker.launchCameraAsync({ mediaTypes: ['images', 'livePhotos', 'videos'], allowsMultipleSelection: true, selectionLimit: 5, }); console.log('camera result:', result); // MediaLibrary 권한 요청 및 사진 저장 status = (await MediaLibrary.requestPermissionsAsync()).status; if (status === 'granted' && result.assets?.[0].uri) { await MediaLibrary.saveToLibraryAsync(result.assets[0].uri); } if (result.canceled) return; setThreads(prevThreads => prevThreads.map(thread => thread.id === id ? { ...thread, imageUris: thread.imageUris.concat( result.assets?.map(asset => asset.uri) ?? [], ), } : thread, ), ); }; const removeImageFromThread = (id: string, uriToRemove: string) => { setThreads(prevThreads => prevThreads.map(thread => thread.id === id ? { ...thread, imageUris: thread.imageUris.filter( uri => uri !== uriToRemove, ), } : thread, ), ); }; // ... } { "name": "expo-threads-clone", "main": "expo-router/entry", "version": "1.0.0", "scripts": { "start": "expo start", "reset-project": "node ./scripts/reset-project.js", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "lint": "expo lint" }, "dependencies": { "@expo/vector-icons": "^15.0.2", "@react-navigation/bottom-tabs": "^7.4.0", "@react-navigation/elements": "^2.6.3", "@react-navigation/native": "^7.1.8", "expo": "~54.0.12", "expo-blur": "~15.0.7", "expo-constants": "~18.0.9", "expo-dev-client": "~6.0.13", "expo-font": "~14.0.8", "expo-haptics": "~15.0.7", "expo-image": "~3.0.8", "expo-image-picker": "~17.0.8", "expo-linking": "~8.0.8", "expo-location": "~19.0.7", "expo-media-library": "~18.2.0", "expo-router": "~6.0.10", "expo-splash-screen": "~31.0.10", "expo-status-bar": "~3.0.8", "expo-symbols": "~1.0.7", "expo-system-ui": "~6.0.7", "expo-web-browser": "~15.0.8", "react": "19.1.0", "react-dom": "19.1.0", "react-native": "0.81.4", "react-native-gesture-handler": "~2.28.0", "react-native-reanimated": "~4.1.1", "react-native-safe-area-context": "~5.6.0", "react-native-screens": "~4.16.0", "react-native-web": "~0.21.0", "react-native-worklets": "0.5.1" }, "devDependencies": { "@types/react": "~19.1.0", "typescript": "~5.9.2", "eslint": "^9.25.0", "eslint-config-expo": "~10.0.0" }, "private": true }
미해결
웹 개발의 핵심, HTTP 완벽 마스터하기!
실무 환경에서는 웹 개발자들이 이런 브라우저 보안 정책들(CSP, CORS, SRI, 쿠키 속성, Referrer-Policy 등)을 어느 정도 수준까지 직접 명시적으로 선언하고 관리하는지가 궁금합니다. 예를 들어, 어떤 정책들은 코드나 미들웨어에서 직접 작성하고, 어떤 정책들은 서버나 CDN 레벨에서 일괄 설정되는지 그 구분의 현실적 기준이 있다면 듣고 싶습니다. 또한 이런 보안 헤더들을 설정할 때 자주 사용하는 라이브러리나 프레임워크 추천 도 부탁드립니다. (예: Express helmet , Next.js next-safe , Nginx 보안 헤더 설정 등)
미해결
웹 개발의 핵심, HTTP 완벽 마스터하기!
CSP, CORS, SRI, 쿠키 속성, Referrer-Policy 같은 HTTP 기반 보안정책들은 서버가 응답 헤더로 내려주면 브라우저의 내부 policy layer에서 관리된다고 알고 있습니다. 그런데 이때 브라우저가 이런 보안 정책들을 저장하고 적용하는 단위가 Origin 단위(정확히 scheme + host + port )로 관리되는지 , 아니면 Site 단위(예: eTLD+1 기반, 쿠키 격리처럼 더 넓은 범위) 로 관리되는지도 궁금합니다. 즉, 브라우저의 보안 정책(policy layer)은 어떤 기준 단위로 정책을 식별·적용하며, 개발자가 설정한 CSP나 CORS 같은 정책들이 브라우저 내부에서 어떤 스코프로 캐싱·격리되어 동작하는지 알고 싶습니다.
미해결
Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로
안녕하세요! 좋은 강의 만들어주셔서 감사합니다 🙂 수업을 순서대로 보고 있는데, 지난 시간에 살펴봤다는 에러 정의가 담겨 있는 영상이 무엇인지 궁금합니다..! 커리큘럼 상으로는 이전 영상이 라우팅 관련된 것이라서 에러 관련 내용이 없었거든요.
미해결
한 입 크기로 잘라먹는 Next.js
안녕하세요 정환님! 강의 정말 잘 듣고 있습니다. 설명이 이해하기 쉽게 정리되어 있어 큰 도움이 되었습니다. 혹시 앞으로 Next.js를 활용한 실무 프로젝트나 자바스크립트 심화 개념을 다루는 강의도 제작하실 계획이 있으실까요?
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
강의를 듣고 실무에 어떻게 적용해볼수 있을까 생각하다보니 궁금한 점들이 있어서 질문 남깁니다! 규모가 큰 기업들에서는 Storybook을 어떤 구조로 관리하고 있나요? 소규모 팀에서는 "프로젝트 내부 세팅 후 나중에 분리" vs "처음부터 모노레포" 중 뭐가 더 현실적일까요? (초기 비용 vs 장기 유지보수 고려)
미해결
손에 익는 Next.js - 블로그 만들기
5:53 부분에서 sitemap 에서 Promise가 필요하다 하셨는데 왜 필요한지 궁금합니다.
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
프로젝트 개발 중에, src/components 폴더에 재사용할 것들을 만들어서 사용하는 것과, src/app/_components 를 사용하는 것을 배웠는데, 둘의 사용성 차이가 있나요? 굳이 이 두 기능을 둘 다 사용을 할 필요가 있을까요? 오히려 하나만 사용하는게 좋지 않나 싶었습니다. 반드시 분리를 해야만 하는 특별한 이유가 있어서 굳이 분리를 하게 되는 것일까요?
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
안녕하세요 리액트나 NextJS는 익숙하지 않아 질문드립니다. 파이썬을 쓸때는 가상환경을 만들어서 프로젝트 마다 관리를 하는데 NextJS는 각 프로젝트 폴더마다 관리가 되나요? 이것저것 하다가 실수하면 다 지우고 처음부터 다시 하는편이라서 파이썬 가상환경이 너무 마음에 들었는데 혹시 NextJS도 가능한가 궁금합니다. 잘 모르기 때문에 실수해서 패키지가 엉망이 된 경우가 많아서 걱정부터 되네요. 다들 기본적으로 잘하셔서 그런가 보통 강의를 들을때 이런 부분은 잘 안물어보시나봐요.
해결됨
React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!
안녕하세요! JWT 구현 중 verify_token 함수의 네이밍이 궁금합니다. app/core/jwt_handler.py def verify_token(token: str) -> int: payload = decode_token(token) return payload.get("uid") verify라는 이름은 보통 boolean을 반환할 것 같은데, 실제로는 uid(int)를 반환하고 있어서 조금 헷갈립니다. get_uid_from_token이나 extract_user_id 같은 이름이 더 명확하지 않을까요? 감사합니다!
해결됨
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
안녕하세요. CSS 라이브러리에 대한 비교 설명까지 너무 감사합니다. 앞으로 AI Agent 를 활용한 코딩을 고려하고 있습니다. 이런 경우 더욱 적합한 CSS 라이브러리를 추천해 주실 수 있을까요? 예를 들어 저는 현재 Cursor AI를 이용하고 있습니다. 좋은 강의 감사합니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
안녕하세요, 개인적으로 궁금한 게 있어서 질문드립니다. 요즘 React Router를 보면 SSR 프로젝트를 위한 프레임워크가 나오는 등, 서버 사이드 렌더링 환경을 지원하는 방향으로 발전하고 있는 것 같더라고요. 그래서 문득 궁금해졌는데, 요즘 시장에서는 CSR 방식의 수요가 많이 줄어드는 추세인가요? 아니면 여전히 CSR 중심의 프로젝트도 많은 편인가요? 현재는 CSR 기반으로 개발하고 있는데, 앞으로의 흐름을 생각하면 SSR 관련 기술도 공부해야 할지 고민 중입니다. 현업에서 체감하시는 부분이나 조언을 듣고 싶습니다
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
비제어 컴포넌트 - 라디오 수업 2:40 경 const formData = new FormData(formElRef.current!); 에서 !이 null 아님을 보장해 주신다 했는데 의미를 자세히 알고 싶은데 뭐라고 검색해서 찾아볼수 있을까요?
미해결
코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)
진짜 강의 대충만드네
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
안녕하세요 쌤 짧고 실무에 바로 써먹을 수 있는 좋은 강의 만들어주셔서 감사해요. 지금까지 코딩이 제 뇌와 맞지않는다고 느꼈는데 쌤의 짧고 핵심 위주 실습이 반영된 강의 덕분에 많은 도움을 받고있습니다. 다름이 아니라 Next 강의도 예정중이시라는 글을 봤는데 혹시 언제쯤 나오는지 대략적으로라도 알 수 있을까요? 다른 강사님의 강의는 안맞고 수코딩님 강의만 맞아서 next 도 수코딩님 강의로 시작하고싶어서요 React query 관련된 강의나 tanstack query, tanstack router 부분은 없는데 이유가 있을까요? 쿼리 부분은 혼자 공부해야하는 파트일까요? 종종 단톡방을 운영하시는 강사님을 보았는데 수코딩님 단톡방도 있는지 궁금합니다! 좋은 강의 만들어주셔서 정말 감사해요!
해결됨
[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
피그마 한국 버전으로 가입 해야 되나요 학습 피그마가 영문이라도 한글 버전으로도 호환 되나요? https://www.figma.com/ko-kr/
미해결
웹 개발의 핵심, HTTP 완벽 마스터하기!
서버에서는 캐싱의 유무와 상관없이 매번 리소스에 대해 digest 를 하게 되는것 같은데요. 그러면, 브라우저가 리소스를 캐싱한다고 해서 '서버성능에 도움이 되기보다는 네트워크 대역폭을 아낄수 있다' 정도의 이점이 있다고 보면 될까요?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
export default memo(TodoItem, (preProps, nextProps) => { if (preProps.id !== nextProps.id) return false; if (preProps.isDone !== nextProps.isDone) return false; if (preProps.content !== nextProps.content) return false; if (preProps.date !== nextProps.date) return false; return true; } 사실상 isDone 빼고 바뀌는 게 없으니 if 부분 지울 수도 있나요? 아니면 위험한가요?
미해결
React Native with Expo: 제로초에게 제대로 배우기
필요한 라이브러리를 미리 설치해둬도 되나요? expo에서 'eas build --platform android --profile development' 해당 명령어를 사용해서 빌드할 때마다 시간이 너무 오래걸려요ㅜㅜ 하나 설치하면 계속 그런 라이브러리 없다고 해서 계속 다시 빌드해야해서ㅜㅜ 혹시 강의에 사용한 라이브러리 리스트가 있다면 제공해주실 수 있나요?? 무료를 사용하면 1시간도 기다리라고 해서요...ㅜㅜ
