#book

자기주도적인 개발이 너무 어렵습니다.

안녕하세요.🙇‍♂️ 올해 3월에 부트캠프를 수료하고 취업준비를 하고있는 프론트엔드 지망생입니다. 부트캠프를 통해 js, react, vue, tailwind, zustand등의 스택을 주로 사용하며 프로젝트를 만들었습니다. 부트캠프를 진행하면서 react에서 useEffect훅은 컴포넌트의 생명주기 사이 ~때에 사용한다, 페이지 라우팅 기능을 사용하려면 리액트 라우터 같은 라이브러리를 활용해서 써야한다, 테일윈드가 현재 개발시장에서 가장 많이 쓰이는 CSS 라이브러리다 이런 정도로 기술스택들이 학습되었습니다. 이제 부트캠프도 수료하고 혼자 공부하는 시간이 찾아왔는데 어떤것 부터 어느정도 까지 손을 대야할지 감이 잡히질 않습니다. 1. 어떤것 부터 해야하는지 예를 들어 현재 저에게 가장 부족하다고 생각하는 스택은 next 프레임워크, zustand 외의 전역 상태관리(recoil, redux), 필수 개발 외의 인프라적인 스택?(Storybook, monorepo, sentry, jest )이라고 생각하는데 이 지식들의 우선순위를 정하는 방법과 이 외에도 개발자 시장에서 반드시 장착하고 있어야 하는 필수 스택에 무엇이 있는지를 알고싶습니다. 2. 어느정도 까지 손을 대야할지 예를 들어 React 같은 경우엔 하나의 프로젝트를 만드는 역량까진 가능해졌지만 프로젝트 안에서 퀄리티 있는 디자인 패턴이라던지, 사용해보지 못한 수많은 리액트 메서드들을 딥다이브 해봐야 할 거 같은데, 어느정도 까지 공부해야 너무 깊게 들어가지 않고, 현재 개발시장에서 경쟁력 있는 지식을 쌓았다고 할 수 있는지의 경계를 모르겠습니다. 강사님의 강의에서 벗어나 혼자서 주도적인 학습을 진행하려고 하니 시간낭비를 하게 될 거 같고, 겉햝기 식으로 공부하는 나날을 보내게 될까 심적으로 큰 부담이 됩니다.. 현업 개발자님들의 조언을 듣고싶습니다!!🙇‍♂️🙇‍♂️🙇‍♂️

Tiradadecartasgratis

Discover the best love stories across genres – curated and reviewed for you. Address: 27 Mai Thi Luu, Ward Da Kao, District 1, HCMC Phone: 0903978979 Email: contact@tiradadecartasgratis.biz Website: https://tiradadecartasgratis.biz/ Social https://www.facebook.com/tdcgratis/ https://www.youtube.com/@tdcgratis https://x.com/tdcgratis https://www.pinterest.com/tdcgratis/ https://www.linkedin.com/in/tdcgratis/ https://tdcgratis.tumblr.com/ https://vimeo.com/tdcgratis https://www.reddit.com/user/tdcgratis/ https://soundcloud.com/tdcgratis https://band.us/@tdcgratis https://500px.com/p/tdcgratis?view=photos https://cfgfactory.com/user/311721 https://www.motiondesignawards.com/profile/5110 https://contest.embarcados.com.br/membro/truy%e1%bb%87n-tiradadecartasgratis/ https://smf.rcweb.net/index.php?action=profile;u=78728 https://careerly.co.kr/qnas/10213

MacBook에서 Windows Docker 서버 접속 시 sudo가 필요한데 원인이 뭘까요?

문제 현재 Windows 데스크톱과 MacBook을 사용 중이며, 두 기기는 동일한 로컬 네트워크에 연결되어 있습니다. - 데스크톱(Windows): 유선 랜(Ethernet)으로 연결 - MacBook: Wi-Fi로 연결 Windows 데스크톱에서 Docker를 이용해 로컬 웹 서버(포트 9000)를 실행 중입니다. 컨테이너는 -p 9000:9000 옵션으로 실행되었으며, 0.0.0.0:9000에서 요청을 받을 수 있도록 설정되어 있습니다. 데스크톱에서는 Chrome를 통해 정상적으로 웹 인터페이스에 접속할 수 있습니다. 그러나 MacBook의 Chrome에서 접속하면 페이지를 찾을 수 없다고 합니다. 이상하게도,,, Chrome을 sudo로 실행하면 페이지가 정상적으로 로드됩니다. 추가 정보 - 데스크톱(Windows)과 MacBook은 같은 서브넷에 속해 있습니다. - 웹 서버는 0.0.0.0:9000에서 요청을 받을 수 있도록 설정되어 있어, 다른 기기에서도 접근 가능해야 합니다. - MacBook에서 nc -zv <데스크톱-IP> 9000을 실행하면 포트가 열려 있음을 확인했습니다. - Python 코드에서 requests.get("http://<데스크톱-IP>:9000")을 실행하면, 일반 실행 시 실패하지만 sudo로 실행하면 정상적으로 작동합니다. - MacBook에는 단 하나의 사용자 계정만 존재하며, 해당 계정은 관리자(Admin) 권한을 가지고 있습니다. - macOS 방화벽은 비활성화되어 있으며 (/usr/libexec/ApplicationFirewall/socketfilterfw --getglobalstate로 확인), sudo pfctl -d로 pf 방화벽을 꺼도 문제가 해결되지 않았습니다. 현재까지 파악한 내용 sudo로 실행하면 정상적으로 동작하기 때문에, 현재 문제는 네트워크 연결 자체의 문제가 아니라 macOS의 보안 정책 또는 네트워크 제한과 관련된 것이 아닐까,, 생각하고 있습니다. 해결하고 싶은 질문 - 왜 Chrome을 sudo로 실행해야만 웹 서버에 접속할 수 있을까요? - 왜 일반 사용자 권한으로 실행한 Python의 requests.get() 요청이 차단되고, sudo를 사용해야만 정상적으로 동작할까요? - macOS에서 일반 사용자 프로세스의 네트워크 접근을 제한하는 정책이 있는 걸까요? 있다면 어떻게 해결할 수 있을까요? 스크립트에 모두 sudo를 붙이면 문제가 해결되긴 합니다만,, 명확한 원인이 궁금합니다. 혹시 비슷한 경험을 하신 적이 있는 분이 계시다면 조언 부탁드립니다! 혹은 힌트 키워드라도 던져주시면 감사하겠습니다!

ReactNative Xcode 16. RCTAppDelegate.h not find

안녕하세요? 에러로 고통받다가 커리어리에 남겨봅니다. ReactNative 프로젝트로 테스트플라이트 배포상태에서 3주가 지나 지난주 Xcode 16으로 업데이트 되었는데요. 그 뒤 ios 버전, 라이브러리 버전 문제는 해결했는데. Xcode 에서 build /ios/프로젝트명/AppDelegate.h 파일에서 #import <RCTAppDelegate.h> 파일을 찾을 수 없다고 나옵니다. 사양 1. M2, Sequoia 2. react-native : 0.74.3 3. Xcode 16.1 문제 해결을 위해 시도한 방법 입니다. 1. #import <React/RCTAppDelegate.h> 바꿔봄 2. #import "AppDelegate.h" 바꿔봄 3. node_module/react-native/React/Base/에서 헤더파일 찾아봄 -> 없음 4. node_module/react-native/ReactCommon/에서 헤더파일 찾아봄 -> 없음 5. 대체할 수 있는 방법 찾아봄 GPT에서 제안한 방법으로 수정 -> 결과 : 파일 찾을 수 없음 #import <UIKit/UIKit.h> #import <React/RCTBridgeDelegate.h> @interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate> @property (nonatomic, strong) UIWindow *window; @end 6. Xcode에서 경로를 추가해봄 -> 결과 : 파일 찾을 수 없음 6-1. Xcode > BuildSetting > search header 에 경로를 추가했습니다. "$(SRCROOT)/../node_modules/react-native/React", "$(SRCROOT)/../node_modules/react-native/ReactCommon", "$(SRCROOT)/../node_modules/react-native/ReactCommon/cxxreact", "$(SRCROOT)/../node_modules/react-native/Libraries", 6-2. Xcode > BuildSetting > Frame search header에 경로를 추가했습니다. "$(inherited)", "$(SRCROOT)/../node_modules/react-native/React", "$(SRCROOT)/../node_modules/react-native/ReactCommon", 7. pod 재설치, react-native 재설치, 캐시 삭제 및 라이브러리 업데이트 등.. pod.lock, Podfile, node_module, build 파일, DerivedData 폴더 삭제 후 전부 재설치. pod install --repo-update 헤르메스 사용 설정 및 use_frameworks! :linkage => :static 설정 확인. 8. react-native 최신버전(0.76.3)으로 재설치 참고 사이트 및 GPT, Monica 질의응답 공유 링크 https://github.com/facebook/react-native/issues/36611 https://stackoverflow.com/questions/75822104/rctappdelegate-h-file-not-found https://chatgpt.com/share/674e6dcf-89f8-800f-b0e6-4fa2fe58419b https://monica.im/share/chat?shareId=CQ18cvvPvsMc0r3U ** 유의미한 정보를 주신분께 감사의 마음으로 많지는 않지만 스타벅스 커피쿠폰을 드립니다 살려주세요..

ReactNative ios build 에러 3일째 해결을 못했습니다.

시뮬레이션을 실행하려고 해도 스크립트 문제, iPhone 버전 범위 문제, 시뮬레이터 문제가 계속 발생합니다. 어떤 도움이라도 감사합니다. ReactNative를 처음 접했습니다. 저희 팀에서 저를 도울 수 있는 사람이 없습니다. #프로젝트 환경 mac M2 ruby -v ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin23] node -v v20.10.0 pod --version 1.15.2 package.json { "name": "labts", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-community/async-storage": "^1.12.1", "@react-native-community/cli": "13.6.9", "@react-navigation/bottom-tabs": "^6.6.0", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.10.0", "@tanstack/react-query": "^5.51.5", "@types/react-native-vector-icons": "^6.4.18", "axios": "^1.7.2", "date-fns": "^3.6.0", "immer": "^10.1.1", "react": "18.2.0", "react-native": "0.74.3", "react-native-calendars": "^1.1305.0", "react-native-date-picker": "^5.0.4", "react-native-dotenv": "^3.4.11", "react-native-get-random-values": "^1.11.0", "react-native-image-crop-picker": "^0.41.2", "react-native-image-zoom-viewer": "^3.0.1", "react-native-paper": "^5.12.3", "react-native-permissions": "^4.1.5", "react-native-safe-area-context": "^4.10.8", "react-native-screens": "^3.32.0", "react-native-splash-screen": "^3.3.0", "react-native-tab-view": "^3.5.2", "react-native-vector-icons": "^10.1.0", "react-native-vision-camera": "^4.5.1", "uuid": "^10.0.0", "yarn": "^1.22.22" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.74.85", "@react-native/eslint-config": "0.74.85", "@react-native/metro-config": "0.74.85", "@react-native/typescript-config": "0.74.85", "@types/react": "^18.2.6", "@types/react-native-dotenv": "^0.2.2", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "babel-plugin-module-resolver": "^5.0.2", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" } } PodFile require Pod::Executable.execute_command('node', ['-p', 'require.resolve( "react-native/scripts/react_native_pods.rb", {paths: [process.argv[1]]}, )', __dir__]).strip platform :ios, '12.0' use_frameworks! #use_modular_headers! prepare_react_native_project! linkage = ENV['USE_FRAMEWORKS'] if linkage != nil Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green use_frameworks! :linkage => linkage.to_sym end target 'nexlabts' do config = use_native_modules! use_react_native!( :path => config[:reactNativePath], # An absolute path to your application root. :app_path => "#{Pod::Config.instance.installation_root}/.." ) target 'nexlabtsTests' do inherit! :complete # Pods for testing end post_install do |installer| # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 react_native_post_install( installer, config[:reactNativePath], :mac_catalyst_enabled => false, # :ccache_enabled => true ) end end 제가 아래 에러 3가지에 대해 제가 해본 방법들입니다. 1. node 재설치 node_module 폴더 삭제, package-rock.json 삭제 후 재설치 npm install --legacy-peer-deps yarn install 2. Xcode가 node 읽을 수 있도록 설정 sudo ln -s "$(which node)" /usr/local/bin/node 3. Podfile 내 platform 설정 수정 platform :ios, '12.0' or platform :ios, '14.0' 4. Pods 재설치 rm -rf ~/Library/Developer/Xcode/DerivedData or rm -rf ~/Library/Developer/Xcode/DerivedData/* rm -rf Pods rm Podfile.lock pod install --repo-update Xcode \> Product \> Clean Build Folder. cd ./ios pod cache clean -all pod install --repo-update cd ../ npx react-native run-ios --no-packager --simulator="iPhone 15" or npx react-native run-ios --simulator="iPhone 15" or yarn start > i(run ios) Err 1. cocoaPods 설치할 때 [!] CocoaPods could not find compatible versions for pod "React-RuntimeHermes": In Podfile: React-RuntimeHermes (from ../node_modules/react-native/ReactCommon/react/runtime) Specs satisfying the React-RuntimeHermes (from ../node_modules/react-native/ReactCommon/react/runtime) dependency were found, but they required a higher minimum deployment target. Err2. iOS 실행할때 run-ios --no-packager --simulator="iPhone 15" Build description signature: fc1341421f84b87c5245d346c2c17b66 Build description path: /Users/nowonjae/Library/Developer/Xcode/DerivedData/nexlabts-argvodqcybjfcybstpulfpghnzvm/Build/Intermediates.noindex/XCBuildData/fc1341421f84b87c5245d346c2c17b66.xcbuilddata /Users/nowonjae/Desktop/project/NeXLabRN/ios/nexlabts.xcodeproj:1:1: error: Unable to open base configuration reference file '/Users/nowonjae/Desktop/project/NeXLabRN/ios/Pods/Target Support Files/Pods-nexlabts/Pods-nexlabts.release.xcconfig'. (in target 'nexlabts' from project 'nexlabts') warning: Unable to read contents of XCFileList '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Unable to read contents of XCFileList '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-input-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase 'Bundle React Native code and images' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase '[CP] Embed Pods Frameworks' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-input-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase '[CP] Copy Pods Resources' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') --- xcodebuild: WARNING: Using the first of multiple matching destinations: { platform:iOS Simulator, id:B5AA2E84-4F83-4749-A986-A1FCE5E398A3, OS:17.5, name:iPhone 15 } { platform:iOS Simulator, id:B5AA2E84-4F83-4749-A986-A1FCE5E398A3, OS:17.5, name:iPhone 15 } ** BUILD FAILED ** ] Err3. Xcode 로 Build 할때 (Any iOS Simulator Device (arm64, x86_64)) Command PhaseScriptExecution failed with a nonzero exit code

개발서적 e-book으로 많이 보시나요?

개발서적들이 두껍다보니 ebook으로 볼까 하는데 많이들 e-book 사용하시나요? 하신다면 yes24, 리디 등등 어떤 곳 이용하실까요?

어플리케이션 인스타그램 광고 올리는 방법

요즘은 인스타그램에 앱 광고가 많이 올라오는 것처럼 회사에서 인스타그램 광고를 하시고 싶다고 하십니다. React Native로 개발된 애플리케이션입니다만. 추가적으로 facebook sdk를 설정한다던가 하는 작업이 필요한가요?

맥북 사양 괜찮은가요?

현재는 플러터 하고있습니다 개인노트북으로는 맥북이 없어서 하나 장만하려고하는데 프로까지 필요할까요? 지금 생각으로는 MacBook Air 13 M3 CPU 8코어 GPU 10코어 16GB 512GB 실버 영문키보드 제품 애플케어포함 2,133,750원 이 제품 생각하고 있는데 사양 괜찮을까요? 앱 개발 계속 할려면 프로까지 가야할까요? 가격은 250까지는 생각해볼만한것같습니다 이정도도 너무 오버스펙인가요? 적당한가요? 😭 회사에서는 맥북프로 사용하고 있고 컴퓨터 사양에 대해서는 잘 모르겠어서 질문 남겨봅니다! + 현재는 플러터 하고있고, 사실 플러터를 계속 할지는 잘 모르겠습니다 이제 곧 1년차되는 개발자입니다!!

프론트엔드 이직은 어떻게 준비하나요?

안녕하세요! 6개월차 프론트엔드 신입입니다. 사실 이직을 바로 생각하는건 아니고 지금있는 회사에서 1년은 넘기고 이직이나 중고신입으로 대기업에 가고싶습니다 하지만 여러가지 준비는 해야하는걸로 생각이 들고, 어떻게 하면 좋을지 여기서 앞서나간 선배님들의 조언을 듣고자합니다. 현제 제 상태는 이렇습니다. 컴퓨터공학 22년 차석졸업 계약직 인공지능강사 6개월 현직 프론트엔드 개발자 해커톤 수상 4회 (1등 2회, 2등 1회, 3등 1회) 교육부 장관상 1회 소프트웨어 특허 1개 소프트웨어 저작권 9개 경험) 소프트웨어 동아리 회장, 교내 연구생 알고리즘) 프로그래머스 레벨3 외국어) 영어 프리토킹 스택) sveltekit(현직),nextjs,tanstack-query,redux-rtk,playwright,tailwind,css,styled-compnent,sotrybook,mocking service worker 취업을 할때는 대회에서 상을 받았던 이력으로 회사에서 좋개 봐줘서 빠르게 입사했지만, 대기업에 중고신입이나 이직은 많이 다를거 같아 고민입니다. 따로 토이프로젝트나, 오픈소스 기여를 하면 좋다는걸 알지만 개인적으로 회사에서 프로젝트가 재미있어 기존 회사 코드 성능 향상에 몰두하고있습니다. 회사코드를 보고 다듬고 동료들과 커뮤니케이션하는게 좋아, 자진해서 거의 15시간정도 회사 일만하고 있지만 정작 나중에 되서 다른회사 지원하면 안좋게 보이까 걱정도 조금됩니다 그래서 이곳에서 도움을 구하고자합니다 긴글 읽어주셔서 감사합니다

SpringBoot @ComponentScan 질문

안녕하세요. 1년차 백엔드 개발자 입니다. JPA 실습 중 궁금한 것이 생겨서 질문 드립니다. 코드 @SpringBootApplication @ComponentScan(basePackages = "com.jpabook.jpashop") public class JpaShopApplication { public static void main(String[] args) { SpringApplication.run(JpaShopApplication.class, args); } } 상황설명 -@Repository 어노테이션을 명시한 Bean 객체를 테스트에서 찾지 못하는 오류 발생 -Repository 계층에 대한 단위 테스트 수행을 하고 싶은데 @SpringBootTest를 사용해야하는 상황이 발생함. -방법을 찾다보니 위 코드 처럼 @ComponentScan을 직접 명시하니 해결 궁금한 것은 위 코드에서 @ComponentScan이 명시되어 있는데 해당 어노테이션은 @SpringBootApplication에 기능이 포함되어 있어서 이제껏 명시하지 않더라도 @Autowired 등의 의존성 주입이 정상적으로 됐었는데요. 이번 실습 프로젝트에서는 되지 않아서 저렇게 명시를 했더니 정상적으로 작동합니다. 혹시 어떤 이유 때문인지 설명해주실 수 있으실까요? 참고로 테스트 했던 코드는 아래와 같습니다. 패키지 구조는 사진과 같습니다.

국비학원 취준생으로 해당 커리큘럼을 들어도 될까요?

안녕하세요. 현재 국비학원 백엔드 과정을 수료하고 취준을 하고 있습니다. 비록 이력서를 넣기 시작한지는 일주일밖에 되지않았지만, 연락이 안오기도 하고 학원동기들의 얘기를 들으면서 불안해지니 스펙이 부족한 것같고 실력이 부족하다는 생각이 들었습니다. 그래서 이런것을 질문해도 될지 모르겠지만, 아래 링크와 같이 이러한 커리큘럼이 정말 실무에 도움이 되는지 여쭙고 싶습니다.. 실무가 어떻게 돌아가는지 정확히 모르기 때문에 해당 커리큘럼을 진행하는 것보다 개인 프젝이나 팀 프젝을 진행하는게 나을지 고민이 되어서요..! 정말 하루하루를 헛되이 보내기가 아까운 취준생으로서 여쭙고 싶어서 가져오게 되었습니다. 조언 부탁드리겠습니다.. 만약 해당 커리큘럼이 아닌 다른 조언이나 쓴 소리도 달게 받겠습니다. https://www.wanted.co.kr/events/pre_challenge_be_13?utm_source=facebook&utm_medium=da&utm_campaign=kr_career_web_da_application_edu_be&utm_content=pre_challenge_be_13-02&fbclid=PAAaaToYonDy_q-MfKmBheDExOIfqOEv0_jMSV7iaM_ludOG1EhzucsVaURq8_aem_AQhmPAvO5oqwf2nCO3d9k-Mcj-9s5gOItaS0LsJQZNUzDgocdFb5vseT_6_O6eP4NScLGdTcFzaoT7B4bH8cbRKE

(SSR 새로고침 문제)NextJS page에서 redux persist gate 설정하면 Client컴포넌트로 인식되는 문제

NextJS Pages Router에서 유저 데이터를 상태관리하기위해 redux를 사용했으나, 새로고침 시 데이터가 날라가는 문제를 해결하기 위해 persist gate를 사용했습니다. 하지만 redux persist gate를 사용하면 클라이언트 컴포넌트로 인지되는 문제가 있습니다. 궁금한 것 1) persist gate를 잘못써서 생긴 문제일까요? 아님 persist gate를 쓰면 안될까요? 2) 해결 방법으로 생각 해본 것은, "persist gate를 사용하지 않고 매 새로고침 시 저장되어있는 local storage에서 데이터를 새로 가져온다." 입니다. 3) ssr시 상태관리 새로고침 다른 방법으로 해결해본 경험 있으시면 아무렇게나 대답해주시면 감사하겠습니다!!! ----------------------------------------------- 문제의 코드 위치: https://github.com/bbookng/zippyziggy-v2/blob/main/frontend/zippy-ziggy/src/pages/_app.tsx 문제의 코드: import GlobalStyle from '@/styles/Global.style'; import useDarkMode from '@/hooks/useDarkMode'; import { media } from '@/styles/media'; import { darkTheme, lightTheme } from '@/styles/theme'; import type { AppProps } from 'next/app'; import { ThemeProvider, createGlobalStyle } from 'styled-components'; import normalize from 'styled-normalize'; import '@/styles/index.css'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import AppLayout from '@/layout/AppLayout'; import store, { persistor } from '@/core/store'; import { PersistGate } from 'redux-persist/integration/react'; import { Provider } from 'react-redux'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import 'toastify-js/src/toastify.css'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import DefaultHead from '@/components/Head/DefaultHead'; import Construction from './construction'; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, // default: true }, }, }); function App({ Component, pageProps }: AppProps) { const { colorTheme, toggleTheme } = useDarkMode(); return ( <Provider store={store}> <PersistGate persistor={persistor}> <QueryClientProvider client={queryClient}> <ThemeProvider theme={colorTheme === 'dark' ? darkTheme : lightTheme}> <AppLayout toggleTheme={toggleTheme}> <Component {...pageProps} /> ... </AppLayout> </ThemeProvider> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </PersistGate> </Provider> ); } export default App;

DRF를 자세히 공부해보고싶은데 독학으로 하려니 자꾸 턱턱걸립니다... django 백엔드에서 프론트엔드로 보낸 data가 안불러와져요

django rest framework로 웹을 개발하는 것을 공부하는 중인데 막히는부분이 많아서 점점 괴로워지네요. 이거를 보면서 독학하고 있는데요. https://wikidocs.net/book/9596 django views.py에서 response(data)를 발신하는 것까지는 되는데 next.js를 이용한 프론트에서 data를 받아오지 못하고 있어요... 왜 그럴까요? 디버그 메시지가 안뜨니 더 알기가 어렵네요. # backend/views.py """ from django.shortcuts import render from django.http import HttpResponse from rest_framework.decorators import api_view, permission_classes from rest_framework.permissions import AllowAny from rest_framework.response import Response # Create your views here. @api_view(['GET']) @permission_classes([AllowAny]) def hello_world(request): return Response('Hello, World!') # frontend/index.js """ import React, { useState, useEffect } from "react"; // config.js export const BACKEND_URL = "http://127.0.0.1:8000/"; const Home = () => { // State to store the data fetched from the backend const [data, setData] = useState(""); // useEffect hook to fetch data from the backend when the component mounts useEffect(() => { // Fetch data from the backend API using the '/api/hello' endpoint fetch("${BACKEND_URL}api/hello") .then((response) => response.json()) .then((data) => setData(data)); }, []); // Render the component JSX return ( <div> <h1>Welcome to Fine-Tuning Chatbot!</h1> <p>{data}</p> </div> ); }; export default Home; """ pure django-template를 이용해서 홈페이지 만들고 그 원리를 이해하는 것까지는 되는데 DRF는 정말 다른 세상이라고 느껴지네요...ㅎㅎ 좋은 강의나 책이 있으면 추천부탁드립니다. ㅠㅠ 위에 언급한 강의로 RESTful 배워보려는데, 기술스택이 많아서 그런건지 정보량도 많고 어렵네요 ㅠ

ESLINT 어떤 것을 수정해야 내용처럼 fix 되는 현상을 막을 수 있을까요?

안녕하세요~ eslint, prettier에서 제가 무엇을 잘못했는지 계속 아래처럼 코드가 수정되고 있습니다. const res = (await request) < User > (context, `/users/${id}`); 어떻게 하면 고칠 수 있을까요? 1. (await request) 소괄호 제거 2. < User > 제너릭 사이 공백 제거 결론: const res = await request<User>(context, `/users/${id}`) 로 만들고 싶습니다.. 아래는 eslint 적용한 내용 입니다. ``` //eslint.config.js module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:react/recommended', 'airbnb', 'plugin:storybook/recommended', ], parser: '@typescript-eslint/parser', parserOptions: { project: ['./tsconfig.json'], ecmaVersion: 2018, sourceType: 'module', createDefaultProgram: true, }, plugins: ['react', '@typescript-eslint', 'prettier', 'import'], rules: { 'react/react-in-jsx-scope': 'off', 'react/jsx-props-no-spreading': 'off', 'import/prefer-default-export': 'off', 'implicit-arrow-linebreak': 'off', 'react/jsx-filename-extension': [ 2, { extensions: ['.js', '.jsx', '.ts', '.tsx'], }, ], 'object-curly-newline': [ 'error', { ObjectPattern: { multiline: true, minProperties: 2, }, ImportDeclaration: 'never', ExportDeclaration: { multiline: true, minProperties: 3, }, }, ], 'import/extensions': [ 'error', 'ignorePackages', { js: 'never', mjs: 'never', jsx: 'never', ts: 'never', tsx: 'never', }, ], 'import/order': [ 'error', { alphabetize: { order: 'asc', }, groups: [ 'builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type', ], }, ], 'import/no-unresolved': 'off', }, settings: { 'import/resolver': { typescript: { alwaysTryTypes: true, }, node: { paths: ['src'], }, }, }, }; ```

선배님들께 입사 한 달 차 프론트 커리어 고민상담 받고싶습니다.

안녕하세요. 저는 입사 이제 한 달 차가 되어가는 신입 프론트엔드 개발자 입니다. 저는 개발을 좋아하고 관심이 많아서 작년 12월부터 프론트 공부를 시작하게 됐습니다. 그리고 운이 좋게 6월에 취업을 하게 되었습니다. 프론트엔드 개발을 하면서 js, ts, next.js, react-query, redux, zustand등 배워야할 게 정말 많았습니다. 그래서 프로젝트를 하면서 얕게나봐 최신 기술을 많이 공부해봤습니다. 하지만 제가 취업한 회사에서는 하드웨어 기술적 제약때문에 최신 기술을 사용하지 못하고 사용적인 제한이 굉장히 많아서 커리어적으로 성장을 할 수 있을지 고민이 많이 됩니다. 물론 아직 부족하기 때문에 배울 것이 많다는 것을 알지만 요즘 it회사들을 보면 회사 기술 사용 스택을 보면 ts, react-query, next.js, storybook 등 트랜디한 기술을 많이 사용하는 것 같습니다. 경력 없는 신입 취업도 요즘 힘들고 해서 경력을 쌓고 이직을 해야하나 생각을 하고 있는데 최소 1년을 경력을 쌓으려고 생각을 하고 있습니다. 제가 목표로 하는 회사의 기술 스택을 봤는데 ts, react-query, next.js, zustand, emotion 등을 쓰고 있더라고요. 하지만 개발을 하다보면 js공부가 핵심이고 많이 부족하구나를 많이 느낍니다.. 신입 이직을 할 때 중요한 점이 무엇인지 궁금합니다. 3년차 미만이면 코딩테스트를 준비해야할 수도 있다고 하는데 알고리즘 공부를 꾸준히 하는 것이 중요할까요?? 그리고 저런 기술들을 사용한 사이드 프로젝트를 얼마나 해야할까요?? 혹자는 하나만 프로젝트 제대로 해도 면접에서 말하기 부족하다고 하는데, 요즘 취업 준비생들의 스펙을 보면 프로젝트도 많이하고 하는 것 같아서 궁금합니다.. 그리고 선배님들 성장 비결은 무엇인지 무엇으로 공부를 많이 하는지도 궁금합니다. 요즘 저는 깃허브에서 완성된 프로젝트 코드를 보면서 공부를 좀 해보고 있는데 괜찮을까요?? 적다보니 두서없이 적었는데 읽어주셔서 감사합니다. 커리어적 조언과 신입 이직을 위해서 무엇을 준비해야하는지 어떻게 하면 이런 상황에서 성장을 할 수 있는지 궁금합니다..!! 욕심은 많은데 부족함을 많이 느껴서 이렇게 글 적어봅니다..

Docker 와 jupyter 에 대해서 궁금한게 있습니다

최근에 필요에 의해서 Docker 와 jupyter 를 공부중입니다. 웹 기반 서비스를 제공하면서 웹에 jupyter를 iframe 등으로 올려서 서비스 제공과 개발을 동시에 진행할 수 있는 프로그램을 목표로 개발하고자 하는데 기반이 거의 없는 지식을 배우려니 조금 어려운 부분이 있어서 도움을 요청하고자 합니다. 도커 컨테이너에 jupyter 와 프론트 / 백을 올리려고 하는데 jupyter notebook 같은 경우에는 단일 사용자만 지원을 한다고 하더라구요. 그래서 jupyterhub을 고려중이었는데 도커를 공부하다보니 사용자별로 컨테이너를 따로 제공할 수 있을텐데 그러면 노트북의 단일 사용자 이슈도 해결이 되는게 아닌가.. 하는 의문이 드는데 실제로는 어떤가요? 제가 관련 지식이 부족해 표현이 이상하거나 틀린 부분이 있다면 알려주시면 감사하겠습니다!

앱 개발하실 때 보통 뭐부터 하시나요?

안녕하세요, 앱 개발 프로젝트를 진행하고 있는데 궁금한 점이 있습니다. 우선 앱에는 Google Books API 가 들어가고 그 외 로그인/회원가입, 댓글 쓰기 등등 기능이 들어갑니다. AWS 사용하기로 했고요! 보통 이렇게 앱 작업 하실 때 어떤 작업 먼저 진행하시나요? 앱 껍데기부터 작업하는게 쉬운가 싶긴 한데 어떤 분은 퍼블리싱하면서 백엔드 먼저 하라고 하시고.. 처음부터 다 작업하려니까 어렵네요 😅

어떻게 하는게 나을까요

저는 인턴 포함 경력 2년 다 되어 가는 퍼블리셔고요 원래 디자인 비슷한 거 하다가 과가 출판 관련이어서 E-BOOK 교양으로 HTML, CSS 배우고 방학에 관련 실습 갔다가 그대로 취업한 케이스예요 문제는 진짜 완전 기초만 배우고 학교에서 무료로 하던 웹디자인기능사 자격증 수업에서 제이쿼리 깔짝인 상태로 취업해서 그냥 회사에서 배운거나 다름 없어요 가상 선택자나 SASS도 회사에서 실전으로 배웠고요... 전문적으로 제대로 배운 것도 아니고 그때그때 주먹구구식으로 구글링하면서 쌓은 경력인데 이게 맞는건가 싶기도 하고 2년이 다 되어 가는데 아직 rem, em 차이도 잘 모르고 잘 쓰지도 않고 전문성이 떨어져가고...ㅋㅋㅋ 회사 들어와서 바닐라 자바스크립트 공부해서 실전에서 탭이나 슬라이드 같은 것도 만들어봤어요 프론트 개발 한 번 해보자고 제안하셔서 API 이용해서 JS로만 페이지를 만들어보기도 했는데 자바스크립트도 그냥 기초 인강 좀 듣고 구글링해서 하던거니까 피드백 해주실 때 자꾸 수정해야 할 코드가 나오고... 그냥 다 애매해요...ㅋㅋㅋ 심지어 JS로 만든 페이지는 만드는 중간에 출장을 가서 마무리도 제대로 못하고 완성도 어떻게 됐는지도 몰라요 하다보니까 JS가 재밌어서 더 공부해서 프론트 엔드 쪽으로 넘어가고 싶은데 퍼블리싱도 탄탄하지 않은데 독학으로 JS를 잘할 수 있을까 싶고 리액트나 이런 것도 잘 배울 자신감이 없어서 걱정돼요 올해 안에 이직 준비해서 내년에 다른 회사 가고 싶은데 직종을 퍼블로 갈지 1년 빡세게 공부해서 프론트 쪽으로 갈지 여러분이라면 어떻게 하실건가요 ㅠㅠ

react 오픈소스 UI 라이브러리 쓰시나요?

이번에 사이드 프로젝트에 새로 합류하게 되었는데, 전임 프론트 개발자 분이 Ant Design을 적용해놓고 가셨더라고요. 프로젝트 코드도 다 Ant Design 컴포넌트들로 적용이 된 상태입니다. 저는 사실 회사에서 이런 UI 라이브러리를 써본적은 없고 bootstrap 이나 tailwindcss로 구현된 내부 컴포넌트들 밖에 안 써봤는데요. 혹시 실제 사용하는 서비스에서도 Ant Design 같은 UI 라이브러리를 사용하는지 궁금합니다! 추가로 최근 Storybook을 잠깐 봤는데, 이거는 UI 라이브러리인가요?

next.js router 이동할때 보여지는 url 변경

router.push를 사용하여 라우팅을 변경해주고 있는데 url을 통해 페이지에 쿼리를 전달해야합니다. 지금은 /books/create?bookId=106?username="john"?keywordId=200 이런식으로 보내주고 있습니다. url이 너무 길어지고 있어서 데이터는 그대로 전달받고 url을 간결하게 변경하고 싶은데 방법이 있을까요?