#css

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

개발자 선생님들 도와주세요..

안녕하세요 초보개발자입니다 지금 구글로 코드 복붙하며 게시판 수정중인데 아예 똑같이 복붙 하였는데 저는 왜 이런 식으로 나올까요 도와주세요 .. ㅠㅠ 프로젝트 발표가 코앞인데.. 1번째사진은 작성자의 사진이고 2번째 사진이 제 출력 화면입니다... 코드는 댓글에 적어두겠습니다..도와주세요.. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--부트스트랩은 어떤device로 접속하더라도 해상도에 맞게 알아서 설정되는 탬플릿이다. --> <meta name="viewport" content="width=device-width" , inital-scale="1"> <!--스타일시트를 참조, 주소는 css안에 부트스트랩.css--> <link rel="stylesheet" href="css/bootstrap.css"> <title>JSP 게시판 웹 사이트</title> </head> <body> <!-- 네비게이션 구현 네비게이션이라는 것은 하나의 웹사이트의 전반적인 구성을 보여주는 역할 --> <nav class="navbar navbar-default"> <!-- header부분을 먼저 구현해 주는데 홈페이지의 로고같은것을 담는 영역이라고 할 수 있다. --> <div class="navbar-header"> <!-- <1>웹사이트 외형 상의 제일 좌측 버튼을 생성해준다. data-target= 타겟명을 지정해주고--> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-exmaple="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- 여긴 웹페이지의 로고 글자를 지정해준다. 클릭 시 main.jsp로 이동하게 해주는게 국룰 --> <a class="navbar-brand" href="main.jsp">JSP 게시판 웹 사이트</a> </div> <!-- 여기서 <1>에만든 버튼 내부의 데이터 타겟과 div id가 일치해야한다. --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- div 내부에 ul은 하나의 어떠한 리스트를 보여줄때 사용 --> <ul class="nav navbar-nav"> <!-- 리스트 내부에 li로 원소를 구현 메인으로 이동하게만들고--> <li><a href="main.jsp">메인</a></li> <!-- 게시판으로 이동하게 만든다. --> <li><a href="bbs.jsp">게시판</a></li> </ul> <!-- 리스트 하나 더 생성 웹페이지 화면에서 우측 부분--> <ul class="nav navbar-nav navbar-right"> <!-- 원소를 하나 구현해 준다. 네비게이션 우측 슬라이드메뉴 구현 --> <li class="dropdown"> <!-- 안에 a태그를 하나 삽입한다. href="#"은 링크없음을 표시한다. --> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">접속하기<span class="caret"></span></a> <!--접속하기 아래에 드랍다운메뉴 생성 --> <ul class="dropdown-menu"> <!-- li class="active" 현재 선택된 홈페이지를 의미 --> <li><a href="login.jsp">로그인</a></li> <li class="active"><a href="join.jsp">회원가입</a></li> </ul> </li> </ul> </div> <!-- 네비게이션 바 구성 끝 --> </nav> <!-- 하나의 컨테이너처럼 감싸주는 역할 --> <div class="container"> <div class="col-lg-4"></div> <!-- 회원가입 폼은 위의 양식은 일치하며, 이제 내부 폼만 바꿔준다. --> <div class="col-lg-4"> <div class="jumbotron" style="padding-top: 20px;"> <!-- 양식 삽입 post는 회원가입이나 로그인같이 어떠한 정보값을 숨기면서 보내는 메소드/ 로그인 Action페이지로 정보를보내겠다--> <form method="post" action="joinAction.jsp"> <!-- 회원 가입에 맞게 위에 액션은 joinAction페이지로 밑에 제목은 회원가입 화면으로 변경 --> <h3 style="text-align: center;">회원가입 화면</h3> <div class="form-group"> <!-- 회원 가입에서도 userID or userPassword는 동일하게 가져가고, 회원가입에 필요한 나머지 속성추가 --> <input type="text" class="form-control" placeholder="아이디" name="userID" maxlength="20"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="비밀번호" name="userPassword" maxlength="20"> </div> <!-- userName 추가 --> <div class="form-group"> <input type="text" class="form-control" placeholder="이름" name="userName" maxlength="20"> </div> <!-- 성별 선택 추가 --> <div class="form-group" style="text-align: center;"> <!-- 버튼 공간을 따로 마련해준다.(남,녀) --> <div class="btn-group" data-toggle="buttons"> <!-- 선택이 된곳에 표시를 하는 active를 설정해준다. --> <label class="btn btn-primary active"> <input type="radio" name="userGender" autocomplete="off" value="남자" checked>남자 </label> <label class="btn btn-primary"> <input type="radio" name="userGender" autocomplete="off" value="여자" checked>여자 </label> </div> <!-- 성별 선택부분 완료 --> </div> <!-- email 작성부분 구현 --> <div class="form-group"> <!-- placeholder는 아무런 입력이 없을때 띄워주는 값 --> <input type="email" class="form-control" placeholder="이메일" name="userEmail" maxlength="20"> </div> <!-- 버튼 또한 회원가입으로 value변경 --> <input type="submit" class="btn btn-primary form-control" value="회원가입"> </form> </div> </div> <div class="col-lg-4"></div> </div> <!-- 애니메이션을 담당하게 될 자바스크립트 참조 --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!-- 특정홈페이지에서 제이쿼리 호출 --> <script src="js/bootstrap.js"></script> </body> </html>

파이썬 오류 좀 고쳐주세요 ㅠㅠ

import time import requests import streamlit as st API_BASE_URL = "http://localhost:8000/qna" # Fastapi로 api 생성 def request_chat_api(user_message: str) -> str: url = API_BASE_URL resp = requests.post( url, json={ "user_message": user_message, }, ) resp = resp.json() print(resp) return resp["answer"] def init_streamlit(): st.set_page_config(page_title='Dr. KHU', page_icon='🩺') if "messages" not in st.session_state: st.session_state.messages = [{"role": "assistant", "content": "안녕하세요! Dr.seo입니다🩺"}] # Initialize chat history if "messages" not in st.session_state: st.session_state.messages = [] # Display chat messages from history on app rerun for message in st.session_state.messages: with st.chat_message(message["role"]): st.markdown(message["content"]) def chat_main(): if message := st.chat_input(""): # Add user message to chat history st.session_state.messages.append({"role": "user", "content": message}) # Display user message in chat message container with st.chat_message("user"): st.markdown(message) # Display assistant response in chat message container assistant_response = request_chat_api(message) with st.chat_message("assistant"): message_placeholder = st.empty() full_response = "" for lines in assistant_response.split("\n"): for chunk in lines.split(): full_response += chunk + " " time.sleep(0.05) # Add a blinking cursor to simulate typing message_placeholder.markdown(full_response) full_response += "\n" message_placeholder.markdown(full_response) # Add assistant response to chat history st.session_state.messages.append( {"role": "assistant", "content": full_response} ) if __name__ == "__main__": init_streamlit() chat_main() 이 코드를 실행시키면 자꾸 AttributeError: st.session_state has no attribute "messages". Did you forget to initialize it? More info: https://docs.streamlit.io/library/advanced-features/session-state#initialization 라고 뜨네요..

(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;

리액트 라우팅을 이렇게 하는게 맞는지 모르겠습니다..

안녕하세요 독학 하고 있는 학생입니다.. 작은 프로젝트로 혼자서 홈페이지를 만들고 있습니다. 우선 로그인 페이지부터 만들고 있는데, 로그인페이지에는 아이디찾기 비밀번호찾기 등등 많은 페이지가 들어가더라구요.. 그래서 리액트 라우터를 공부하고 적용시켰습니다. 코드는 아래와 같습니다. 이렇게 해도 제가 원하는대로 로그인페이지에서 아이디 찾기 페이지로 이동하고 하는 것은 맞는데 App.js에 이렇게 주저리주저리 원하는 것을 다 넣어두면 나중에 전체적으로 페이지를 완성시켰을 때 App.js에 너무 방대한 내용이 들어가지않나..? 싶더라구요.. 그래서 중첩된 라우트도 찾아서 공부했는데 크흡..암만해도 적용이 안됩니다.. 그래서 그냥 이대로 홈페이지를 계속 만들어도 되는지,,아니면 저의 고민을 해결할 방법이 중첩된 라우트가 맞는지 알고싶습니다.. 맞다면 다시 공부해야겠죠 ㅜ.. 답변부탁드립니다 (_ _) import "./App.css"; import { Route, Routes } from "react-router-dom"; import WigTemplate from "./components/wigtemplate"; import FindId from "./components/findId"; import FindPwd from "./components/findPwd"; import SignIn from "./components/signIn"; import NotFound from "./components/notFound"; function App() { return ( <Routes> <Route path="/" element={<WigTemplate />} /> <Route path="/findId" element={<FindId />} /> <Route path="/findPwd" element={<FindPwd />} /> <Route path="/signIn" element={<SignIn />} /> <Route path="*" element={<NotFound />} /> </Routes> ); } export default App; ---------------------------------------------------------- import React from "react"; import styled from "styled-components"; import WigLoginButton from "./wigLoginButton"; import WigHeader from "./wigHeader"; import WigInput from "./wigInput"; import WigFind from "./wigFind"; const WigTemplateContainer = styled.div` height: 100vh; display: flex; align-items: center; justify-content: center; `; const WigTemplateBlock = styled.div` width: 500px; height: 600px; background: #d0ebff; border-radius: 80px; `; function WigTemplate() { return ( <WigTemplateContainer> <WigTemplateBlock> <WigHeader></WigHeader> <WigInput></WigInput> <WigFind></WigFind> <WigLoginButton></WigLoginButton> </WigTemplateBlock> </WigTemplateContainer> ); } export default WigTemplate; ------------------------------------------------------- import React from "react"; import styled from "styled-components"; import { RxDividerVertical } from "react-icons/rx"; import { Link } from "react-router-dom"; const FindBlock = styled.div` display: flex; justify-content: center; `; const ABlock = styled(Link)` color: black; font-size: 0.9rem; text-decoration: none; `; function WigFind() { return ( <FindBlock> <ABlock to="/findId">아이디 찾기</ABlock> <RxDividerVertical style={{ marginTop: "3px" }} /> <ABlock to="/findPwd">비밀번호 찾기</ABlock> <RxDividerVertical style={{ marginTop: "3px" }} /> <ABlock to="/signIn">회원가입</ABlock> </FindBlock> ); } export default WigFind;

안녕하세요 html,css질문입니다 제발 도와주세요

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>중경삼림</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/jquery.mb.YTPlayer.min.js"></script> <script> jQuery( function() { jQuery( '#background' ).YTPlayer(); } ); </script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="jb-box"> <div id="background" class="player" data-property="{ videoURL:'https://www.youtube.com/watch?v=ncT1R2hMpaQ', mute: true, showControls: false, useOnMobile: true, quality: 'highres', containment: 'self', loop: true, autoPlay: true, stopMovieOnBlur: false, startAt: 9.5, opacity: 1 }"></div> </div> <br><br><br> <div id="director"> <br><br><br><br> <h1>왕가위</h1> </div> </body> </html> 이건 html이고, body{ margin: 0; } .jb-box { position: relative; } #background { z-index: -1; } 이건 외부 css파일입니다. 문제는 저 스크립트가 다른 컴퓨터에서 실행했을 때 영상이 재생되지 않는다는 것입니다. '이 동영상은 볼 수 없습니다'로 뜹니다...혹시 저 스크립트에 문제가 있는 것 일까요..?? 도와주시면 정말 감사하겠습니다...

styled-component을 사용할 때 많은 props는 어떻게 해결하시나요?

안녕하세요, 개인 프로젝트를 진행 중에 궁금한 점이 있어 현직의 선배님들께 여쭤보고 싶어 질문을 남깁니다! 현재 React 프로젝트에서 styled-components를 CSS-in-JS로 사용하고 있습니다. 하지만 styled-components를 사용하면서 많아지는 props로 인해 JSX의 복잡도가 높아지는 것 같아 고민이 생겼습니다. 개인 프로젝트에서 사용하고 있는 FlexContainer라는 Flex 스타일(정렬방향, 간격)을 적용하는 컴포넌트입니다. const FlexContainer = styled.div<FlexContainerProps>` display: flex; flex-direction: ${({ col }) => (col ? 'column' : 'row')}; gap: ${({ gap }) => gap && `${gap}rem`}; `; <FlexContainer> 컴포넌트를 '내부 컨텐츠 정렬'을 위해 확장한 <FlexContainerAlign>입니다. const FlexContainerAlign = styled( FlexContainer )<FlexContainerAlignProps>` justify-content: ${({ justifyContent }) => justifyContent}; align-items: ${({ alignItems }) => alignItems}; `; <FlexContainerAlign>을 확장하여 추가적인 style을 적용할 수 있는 <FlexContainerStyle>입니다. const FlexContainerStyle = styled( FlexContainerAlign )<FlexContainerStyleProps>` background-color: ${({ background }) => background && theme.colors.grey}; ${({ styles }) => styles && { ...styles }}; `; FlexContainerStyle 컴포넌트를 사용했을 때 아래처럼 많은 props로 인해 복잡해집니다. <FlexContainerStyle justifyContent="space-between" alignItems="center" background gap={1} styles={{ padding: '1rem 1.5rem', borderRadius: '0.5rem', }}></FlexContainerStyle> 혹시 styled-components를 실무에서 사용하실 때 많은 props를 깔끔하게 정리할 수 있는 팁이 있을까요?

프론트엔드 개발자 부트캠프 고민 중 입니다..

안녕하세요 프론트엔드 개발자를 준비하고 있는 1인 입니다. 요번에 운좋게 부트캠프 2개를 붙어서 결정을 해야 하는데 어떤게 더 좋은지 모르겠어서... 질문 남깁니다.. 1. 유데미 웅진씽크빅 풀스택 부트캠프 https://udemy.wjtb.co.kr/event/id/244?utm_medium=paid&utm_source=googleads&utm_campaign=nnt_traffic_bootcamp-KDT_SA&utm_content=id_244&utm_term=240409&gad_source=1&gclid=Cj0KCQjwxeyxBhC7ARIsAC7dS3-3gWAFIN_KxCxPxMz3BPiXaYOnJAtTtj8mtwbt_lJ_lhrhksM5DKwaArdtEALw_wcB 2. 이스트소프트 오르미 프론트엔드 부트캠프 https://estfamily.career.greetinghr.com/o/108906 이렇게 2개를 붙었는데 뭐가 더 좋을까요..? 유데미 웅진씽크빅 풀스택 기술스택 - Html, CSS, Javascript, React.js, Java, Spring, MySQL, AWS 이스트소프트 부트캠프 기술스택 - Html, CSS, Javascript, React.js, Redux, TypeScript, GitHub, Figma 입니다. 둘 다 온라인강의가 기본베이스고 유데미는 오프라인 모임도 진행을 한다고 합니다. 유데미는 신청할 때 프론트엔드 백엔드 풀스택을 고르라고 해서 프론트엔드를 골랐는데 교육과정만 보면 이스트소프트가 맞는거 같은데 어떤걸 선택해야할지 잘 모르곘습니다 ㅠㅠ 도와주세요..

Oracle 21c 에서 default tablespace 지정해주는데 오류가 납니다.

안녕하세요. Oracle 21c에서 tablespace를 새로 생성하여 새로 만든 계정에 default tablespace로 지정해주려 하는데, 오류가 납니다. window cmd 창에서 sys as sysdba 로 접속했습니다. --------------------------- 오류 내용--------------------------------- SQL> ALTER USER C##SSO_USER DEFAULT TABLESPACE SSO_DB; ALTER USER C##SSO_USER DEFAULT TABLESPACE SSO_DB * 1행에 오류: ORA-65048: 플러그인할 수 있는 데이터베이스 XEPDB1에서 현재 DDL 문을 처리하는 중 오류가 발생했습니다. ORA-00959: 테이블스페이스 'SSO_DB'이(가) 존재하지 않습니다. --------------------------------------------------------------------- SELECT tablespace_name FROM DBA_TABLESPACES; 를 하면 TABLESPACE_NAME ------------------------------------------------------------ SYSTEM SYSAUX UNDOTBS1 TEMP USERS TEST_UP SSO_DB 라고 잘 뜨는데.. 왜 PDB 인 XEPDB1 에서 처리하는지 의문입니다. sys as sysdba로 접속 후 따로 PDB로 접속하진 않았거든요 이전에도 동일한 작업(tablespace 생성, 다른 계정이 default tablespace로 지정) 을 했었는데, 그땐 잘 됐거든요..

프론트엔드 이직 준비로 어떤 것들을 하는게 좋을까요?

안녕하세요. 경력 2년차 프론트엔드 개발자입니다. 이전에 두 개의 회사에서 프론트엔드 개발자로 일했는데 불행하게도 두 회사 모두 임금체불로 인해 퇴사를 하게 되었습니다. 그래서 이번에는 50인 이상의 규모를 가진 회사로 이직하는 것을 목표로 이직을 준비하고 있습니다. Next.js, React, Typescript @tanstack/react-query, Context API, Recoil Vanilla-extract, emotion, styled-components, tailwind-css, Sass 위와 같은 스킬들을 공부 및 경험해보았고, Vanilla-extract, tailwind-css를 제외한 스킬들은 실제 업무에서도 활용하였습니다. 현재 저는 [1. 코딩테스트, 2. 기술블로그, 3. 개인프로젝트] 를 매일 반복하며 이직을 준비하고 있습니다. 이대로 계속 이직을 준비하면 될지, 아니면 다른 무언가를 더 준비해야할 지, 앞으로의 이직 준비 방향에 대해 알려주시면 감사하겠습니다. 추가로 혹시 이력서 피드백 해주실 수 있는 분 계시면 말씀 부탁드립니다... 서류에서 계속 떨어지다보니 개발자 입장에서 피드백을 꼭 받아보고 싶습니다...!

마이크로 프론트 구현(Nextjs, React)

요구사항 마이크로 프론트엔드로 A라는 프로젝트에서 B라는 프로젝트의 컴포넌트를 사용하고 싶다 프로젝트 설명 ModuleFederationPlugin 사용해서 expose remote 설정 A 프로젝트 (remote) : react, styled-component 사용 B 프로젝트 (expose) : nextjs, scss 사용 첫번째 오류 styled 이 달라서 nextjs 에서 노드가 불러와지지 않는 것 해결 : <noscript id="**next_css__DO_NOT_USE**"></noscript> → 두번째 오류 발생 오류 내용 Cannot read properties of null (reading 'parentNode') TypeError: Cannot read properties of null (reading 'parentNode') at options.insert (webpack- 두번째 오류 Nextjs 에서 expose 할 때 Page 컴포넌트에 있는 useState를 사용 못한다고함 해결 : peerDependencies 로 nextjs 추가 → 오류동일 오류 내용 TypeError: Cannot read properties of null (reading 'useState') at useState (react.development.js:1623:21) at Page (index.js:8:40) react-dom.development.js:18704 The above error occurred in the <Page> component: 참고 : https://dev.to/omher/building-react-app-with-module-federation-and-nextjsreact-1pkh 두번째 오류를 해결해야 되는데 가능한 방법인지 모르겠습니다. 아시는 분은 댁글 남겨주세요~(코드상에 보안상 문제되는 부분은 a b 로 바꿨습니다.

micro repo 세팅하면서 격은 문제(같은 문제 격는 분들 댁글)

이번 프로젝트에서 하나의 레포지토리에서 client, server, admin, common 4가지 패키지를 만들었습니다. client, server, admin은 common을 의존하도록 모노레포로 만들었고, client는 admin을 의존할 수 있게 micro로 만들었습니다. 간단한 패키지 설명: - client: 메뉴 헤더 등 구현, 페이지는 admin을 remote 해서 사용, React로 구현 - admin: 페이지에 나오는 콘텐츠의 전반적인 부분이 컴포넌트로 되어있음, React로 구현 - server: Node.js로 되어있고 실제 Spring 서버에서 준 데이터를 포맷하는 형태 - common: 공통 컴포넌트, 라벨 등 문제1: 다른 프로젝트에서 expose 되어있는 Next.js 프로젝트(scss로 스타일 구현)를 client에서 사용할 때 의존성 관련 오류가 생깁니다. client의 package.json에서 peerDependencies로 next를 설정해줘야 하는지, 양쪽 패키지(다른 프로젝트와 client)에서 Next.js와 React를 share 설정을 해야 되는지 잘 모르겠습니다. 여러 방법으로 시도는 해봤지만 의존성 오류나 Next.js에서 훅을 사용 못하는 오류 때문에 해결하지 못하고 있습니다. 문제2: 빌드 최적화를 위해 트리쉐이킹이나 코드 스플리팅을 해야 합니다. 웹팩에서 아래와 같이 코드 스플리팅을 하면 청크 파일 이름이 겹치기 때문에 filename을 해시값으로 설정해야 합니다. 여기서 문제가 생기는데, micro의 client처럼 remote 하는 부분에서 remote.js, app.js 청크가 필요하기 때문에 이름이 해시값으로 바뀌면 해당 청크를 찾을 수 없습니다. 또한 ModuleFederationPlugin이 빌드 시 자동으로 코드 스플리팅을 해준다는 이야기도 있는데, 이 부분은 정확하지 않습니다. 저와 같은 문제를 격고 있거나 해결하신 분들 같이 나눴으면 합니다.

NextJS13 모바일 구분 및 기술 문의

안녕하세요 nextjs13 으로 프로젝트를 진행할려고 하면서 문의 사항이 있습니다. 전제 조건으로 하이브리드앱으로 구현 예정이며, 웹뷰 방식으로 웹, 앱을 같이 사용할려고 합니다. (레이아웃을 웹, 앱 별도 구성 예정) 궁금한게 많아서 질문이 많이 있네요. 전문가분들 도움 부탁드립니다. 1. react-device-detect 모바일 여부를 구분하여 레이아웃을 구성할려고하는데, MobileView의 경우 use client 에서만 작동되는 것같습니다. MobileView을 사용하여 ssr 사용은 불가능한건가요? 2. style-component nextjs12 에서는 style-component를 사용되었는데 13으로 올라가면서 css-in-js방식을 사용 못하는것으로 보이며, tailwindcss, postcss를 권장하는걸로 보이는데 맞나요? 추가로 style-component 를 use client로 사용할 경우 하위에 들어가는 컴포넌트들이 다 csr 형식으로 되는게 맞는건가요? 3. RCS(React Server Components) children 으로 화면을 넘겨서 사용하는데 중간에 use client 를 사용하면 하위도 csr 형태로 인식이 되는건지 문의 드립니다. 감사합니다.

[사이드 프로젝트] 패션 이커머스 플랫폼 '푸츠(PUTS)' 앱 개발팀 모집

프로젝트 소개: ‘푸츠(PUTS)_Pick Up The Style!’서비스는 패션 디자이너 브랜드를 중심으로 BM특허까지 보유한 혁신적인 패션 커머스 플랫폼서비스 입니다. 데모버전까지 외주개발을 통해 개발이 완료되었지만 현시점에서 리뉴얼하여 새롭게 런칭버전을 개발하고자 역량있는 팀원을 모집합니다. <참고> 본 서비스의 시장성은 2024년 약 19조 5천억원(캐주얼) 정도의 시장성을 예상하고 있으며 연간 약 3.5%씩 지속적으로 성장 중에 있습니다. 3-5년이내 시장의 10%이상 점유를 목표하고 있으며 시장을 장악 가능한 비즈니스 모델과 마케팅 능력을 보유하고 있습니다. (참조: https://global.fashionseoul.com/2023-11-10/Korean-Fashion-Market-Size-Anticipated-Highest-Growth-Ever) 우리는 패션과 기술을 접목해 사용자와 소비자에게 최상의 쇼핑 경험과 정보 공유, 소득을 제공하는 서비스로 패션산업의 큰 파도를 함께 일으킬 분들을 모집합니다. 사이드 프로젝트 형태로 진행되며, 유연한 근무 환경에서 협업을 지향합니다. 3-5년이내 엑싯을 목표로 진행됨으로 임금지급 방식이 아닌 지분분배 방식으로 진행됩니다. 프로젝트 완료시 파트별 기여도에 따라 지분설정이 되며 관련 내용은 프로젝트 진행 전 협의를 통해 산정하여 계약진행 예정.(급여를 제공 받고자 하시는 분은 정중히 사양합니다.) 모집 직군: 1. 프론트엔드 개발자 (1~2명) o 주요 업무: 모바일 앱 UI/UX 구현, 웹 랜딩페이지, 사용자 인터페이스, 어드민 프론트엔드 개발 o 기술 스택: React Native 또는 Flutter, JavaScript/TypeScript, HTML/CSS o 우대 사항: 모바일 퍼포먼스 최적화 경험, 패션 커머스 개발 경험 2. 백엔드 개발자 (1~2명) o 주요 업무: 서버 및 데이터베이스 설계, API 개발, 어드민 백엔드 개발 o 기술 스택: Node.js, Django, AWS, PostgreSQL, RESTful API o 우대 사항: 대용량 트래픽 처리 경험, 보안 및 결제 시스템 개발, 이커머스 어드민개발 경험, 포인트관리 및 쿠폰설정 관리 등 3. UI/UX 디자이너 (1명) / 대표자와 함께 진행 또는 대표자가 진행 o 주요 업무: 모바일 앱 디자인, 사용자 경험 설계 o 필수 스킬: Figma 또는 Photoshop, Illustrator o 우대 사항: 패션 브랜드 디자인 경험, 사용성 테스트 및 피드백 반영 경험 근무 형태: • 프로젝트 기반 협업 (파트타임 가능) • 원격 근무 가능 (주 1회 온라인 미팅) • 유연한 일정과 주도적인 업무 환경 우대 사항: • 사이드 프로젝트 경험 • 패션, 커머스에 대한 관심과 열정 • 스타트업 문화에 익숙한 분 • 책임감 강하신 분 지원 방법: • 이력서와 포트폴리오를 [dcode00@naver.com]로 제출 • 지원 시 사이드 프로젝트 경험 및 참여 가능 시간을 명시해 주세요. 문의: • 이메일: [dcode00@naver.com] • 카카오톡/오픈채팅방: [https://open.kakao.com/o/gi5ixgVe] • 회사주소: 경기도 안산시 상록구 한양대학로55 제2과학기술관 지하2층 B210호 (한양대학교 에리카캠퍼스 소재) 지원 마감일: [채용 완료시까지] 로켓펀치 참여링크 https://www.rocketpunch.com/jobs/139647 문의: • 이메일: [dcode00@naver.com] • 카카오톡/오픈채팅방: [https://open.kakao.com/o/gi5ixgVe]

display:-webkit-box 왜 적용이 안될까요?

1. p태그에 말줄임css(display:-webkit-box 포함)를 적용했습니다만 적용이 되지 않고 overflow:hidden처리만 되더라구요... display:box 나 display:block를 적용하거나 display속성을 아예 지워버리면 나오는데 webkitbox가 먹히지 않는 이유가 있을까요? (개발자도구에는 찍힙니다) display:flex로 코드를 짜고 있는데 이것도 영향이 있을까요? 2. 그리고 css에서 display: box와 display: block 두 가지의 차이점이 무엇인가요?? html, css구조 같이 올릴게요! -webkit-box 적용이 안되는 이유 알려주세요 html구조 <section> <div> <div> <div> <div> <p></p> <span></span> </div> </div> </div> </div> </section> css구조(scss) @mixin shortening($line, $lineHeight){ overflow: hidden; text-overflow: ellipsis; @if($line == 1){ white-space: nowrap; }@else{ line-height: $lineHeight; max-height :$lineHeight * $line; -webkit-line-clamp: $line; -webkit-box-orient: vertical; display: -webkit-box; } } section { margin-bottom: 160px; div { div { display: flex; justify-content: space-between; div { width: 200px; div { p { margin: 20px 0 10px; font-size: 18px; color: $titleColor; @include shortening(2, 18px); } div { display: flex; justify-content: space-between; align-items: center; p { font-size: $subTextFont; color: #ff4e43; } span { //아이콘 font-size: 20px; color: #efd942; cursor: pointer; } } } } } } }

프론트엔드 CS 지식 수준은 얼마나 필요할까요

현재 프론트엔드 개발자로 취업을 희망하는 취준생입니다. 23년도 SSAFY 수료하고 1년간의 취준기간동안 여러 회사에 이력서를 넣고 온라인코딩테스트, cs지식 테스트 등 여러 문제들을 풀어 보았는데 회사마다 요구하는 수준이 너무 달라서 궁금한점이 생겼습니다. 현재 저의 수준부터 말씀드리자면 프론트엔드 프로젝트 3회 경험 대학시절 Java 코딩 프로젝트 2회 로 프로젝트 경험 있구요 알고리즘(백준) 골드 1 로 웬만한 알고리즘은 기초는 거의다 풀어보며 공부했다고 생각합니다. 자료구조 역시 수박에 겉핧기 일수도 있지만 대부분은 알고있다고 생각합니다. 문제는 CS 지식이 많이 부족하고 그걸 인지하고 있습니다. 최근 모 기업에서 온라인 테스트를 진행했는데 CS 지식과 html, css 등을 물어보는 수준이었습니다. html 과 css는 크게 문제가 되지 않았는데 cs지식이 부족한게 가장 큰 문제였습니다. cs 공부는 계속 진행중인데 cs 지식과는 별개로 처음보는 개념들이 많이 나와 어려움이 많았습니다. PaaS, Cipher Container, SaaS, laaS, MIME, DNS 등등 물론 제가 공부양이 부족하고 CS 지식이 거의 없는 수준이라 알지못한 CS 지식일 수도 있다고 생각합니다. 그렇지만 제가 공부중이던 내용에선 해당 내용을 다루지 않아서 문제를 풀 수 없었습니다.. 이러한 내용들은 어디서 보면 좋을지 또 CS 지식과 관련해서 커리큘럼을 따라간다는 말은 어떠한 커리큘럼을 따라야 하는지가 궁금합니다... 취준 기간이 길어지며 자신감도 많이 떨어지고 온라인 테스트에서 매번 떨어져 힘드네요..

next.js 특정 페이지에 컴포넌트 미출력 기능 구현 이슈(use client 사용)

로그인페이지(/user-page)에서 footer컴포넌트를 안띄우는 기능을 구현하고 싶어 footer 컴포넌트를 csr 방식으로 사용하도록 'use client' 줬습니다. 근데 error ReferenceError: window is not defined 라는 에러가 뜨면서 적용이 안되네요ㅠㅠ nextjs는 ssr이니까 window에 접근하기 위해선 'use client'를 주면 된다고 들었는데 왜 안되는걸까요?? 찾아보니까 useEffect 쓰라해서 useEffect도 써봤는데 에러가 뜨진않지만 여전히 적용안되더라구요. 문제점 알려주시면 감사하겠습니다ㅠㅠㅠ <footer.tsx 파일> 'use client' import React, { useEffect } from 'react' import style from '../styles/footer.module.scss' const Footer = () => {     if (window.location.pathname === '/user-page') return null return ( -생략- ) } <루트 layout.tsx 파일> 'use client' export default function RootLayout({     children, }: {     children: React.ReactNode }) {   return (         <html lang="ko">             <body className={inter.className}>                 <div className="wrap bg-white">                     <Header />                     {children}                     <Footer />               </div>             </body>         </html>     ) }

안녕하세요 입사한지 한달도안된 신입개발자입니다.

안녕하세요 고졸 6개월학원출신 신입개발자입니다. 원래 처음엔 독학을 해서 프론트로는 html css javascript 백엔드로는 nodejs로 express 프레임워크를 활용해서 배포는 안하고 로컬에서만 웹을 만들어봤습니다. 그 뒤로 한국에서 개발자로 살아남으려면 java로 해야된다고해서 6개월 학원으로 공부하러가서 html,css,js, java springboot로 개인프로젝트로 웹을 만들어보고react, kotlin, springboot로 e-commerce 팀프로젝트로 웹을 만들어봤습니다. Aws로 배포를 진행하고 cicd를 적용해보았지만 배포 cicd 는 솔직히 경험정도지 혼자하라고하면 좀 막막할정도의 수준입니다. 고졸인데 CS, 자료구조, 알고리즘 관련은 아직 공부를많이 해보지 않은상태며 학원끝나고 CS 초반부 공부하는중에 취직을 한 상태입니다. 첫 과업으로 주어진것이 클라우드 아키텍처를 보고 어떠한 규칙을 만들어오라는 건데 저는 웹관련해서 만들어보기만했지 아키텍처를 보고 파악할줄도 모릅니다. 저는 궁금합니다. 저는 개발자라는건 프론트쪽에서 react, jquery, vue 같은거나 백엔드관련해서는 java spring, django같은 것들로 코드를 치고 개발하는건줄 알았는데 갑자기 엔지니어의 일같은 일을 맡고 알해서 만들어서 문서화해오라는게 이런 일들을 하는게 원래 그런건지 모르겠습니다. 솔직히 아키텍처관련은 해본적이 없어서 어떻게 만들어야하는지 여쭤보아도 기술언어를 섞어가면서 말씀하셔도 70퍼는 못알아먹겠고 나중에 하시는 말씀은 괜찮아 개발자니깐 문제해결능력으로 어떻게는 해오면 된다라는 말만 돌아오고해서 이게 맞나 싶습니다. 이것때문에 개발자가 이런건가 퇴사해야하나 고민이 많습니다. 면접때를 생각하면은 아마 제가 react로 웹을 만든걸 인상깊게 보신것같은데..., 아마 이 과제를 주신분이 면접을 보셨으면 전 떨어졌을것 같습니다. 이런 일들 때문에 이게 개발자인가 생각들고 너무 막막하고 찾아봐도 관련내용이 너무 안나와서 퇴사생각만 자꾸듭니다. 혹시 해주실 말씀들 있으실까요...

비전공자 프론트엔드 신입 취업 조언 부탁드립니다..

28살 비전공자 프론트엔드 개발자로 도약 준비중인 취준생입니다. 23년에 대학교 졸업 후 공간디자인 전공을 살려 인테리어 회사에 입사하여 인테리어 디자인&설계를 진행하였습니다. 누군가가 사용하고 거주할 공간에 대해 설계를 진행하고 인간중심적인 디자인을 고안하는 과정 자체가 재밌고 흥미로웠습니다. 그렇게 나온 결과물을 사용자가 보고 기뻐하고 실제로 이용하는 모습을 보며 뿌듯함을 느끼기도 했습니다. 그렇게 실무를 진행하면서 동시에 인테리어라는 직업의 한계를 느끼기도 했습니다. 현실의 물리적인 제약으로 생각했던 설계가 불가능하기도 하고 사용자 중심으로 디자인을 진행했지만 실현이 불가능하기도 했습니다. 무엇보다 공간적, 시간적 제약이 크다는 느낌을 많이 받았습니다. 그렇게 생각하던 때에 같은 과 친구를 통해 '부트캠프' 라는 것을 알게되었고, 공간디자인을 전공하면서 관심을 기울이고 있던 '개발'이라는 분야에 대해 꿈을 꾸게 되었습니다. 나이가 더 들기 전에, 더 시간이 늦기 전에 접어뒀던 꿈을 도전해보고 싶다는 생각이 들었고 다니던 회사를 퇴사함과 동시에 국비지원 프로그램에 지원해 교육원을 다니며 5개월 가량의 수업을 들으며 개발자로서의 역량을 키워갔습니다. 교육원의 커리큘럼은 풀스택 과정이였지만 저는 프론트엔드 개발이 사용자 경험과 직결되어 있다는 부분이 제 이전 전공 경험과 실무 경험을 살릴 수 있다는 생각과 동시에 제 성격과 잘 맞을 것 같아 프론트엔드 개발에 집중하게 되었습니다. HTML, CSS, Javascript, jquery, 리액트 배우고 팀 프로젝트에서 MySQL 과 MariaDB 를 활용하여 프로젝트를 제작하였습니다. 지금은 개인 포트폴리오인 랜딩페이지와 이력서를 작성해 1월 한달동안 공고를 찾아보며 지원하고 있는데 열람은 되지만 연락이 거의 오지 않는 상태여서 나에게서 어떤 부분을 개선하고 어떤 부분에 더 노력을 쏟으면 좋을지 고민이 정말 많이 되고 선택지도 정말 많고,,조금 답답한 심정입니다. 얼른 실무에 뛰어들어 실무역량을 키우고 싶습니다.. 지금도 늦었다는 생각이 자꾸만 듭니다.. 선배님들께 피드백을 받고싶어 질문 드립니다. 아래에는 랜딩페이지 링크입니다. 현실적인 팩트 피드백 부탁드립니다 ! https://jonggu-portfolio.vercel.app/

next.js CSS라이브러리 선택

안녕하세요. 취업준비를 하며 사이드 프로젝트로 next.js를 공부중입니다. css-in-js 가 편해서 styled-component를 프로젝트에 활용해왔는데 최근 app router 방식 (13, 14) 에서는 아직 css-in-js 를 ssr 환경에서 지원하지 않지만 stylex는 가능하다는 말에 swc > babel 로 변경하고 stylex를 쓰던 중 문제가 발생하였습니다. 'use server' 코드에서는 async 만 export 가능한데 swc를 채택한 next.js 에서 babel을 고려하지 않아 async 를 못 알아보고 에러가 난다는 것입니다. ( 추측입니다... ) 결국 많은 경험이 도움이 될 것이라는 긍정적인 마인드와 함께 css-in-css 라이브러리를 배워보고자 합니다. 혹시 next.js 프로젝트를 진행중인 선배님들은 어떤 css라이브러리를 사용중이신가요?

컴공 3학년 진로 고민

저는 이제 SW관련학과 3학년이 되는 대학생입니다. 여태까지 했던 일을 적어보자면 1학년 - 동아리에서 프론트엔드쪽으로 3개의 프로젝트 경험 => 깍두기상태라 현실적으로 한게 없음(html,css,js로 껍데기 만들기, 백엔드와 연결도 불가능) 2학년 - 학업에만 집중(학점은 4.22) + 겨울방학에는 토익에 올인(780점) 부끄럽지만 이 정도인 것 같습니다.. 개발자라는 꿈이 늦게 생겨 3학년이 되는 올해에는 뭐라도 분야를 잡고 준비를 해보자 해서 열심히 고민해본 결과 저는 앱개발자가 되고 싶습니다. 더 정확하게는 앱을 개발하고 싶습니다. 부끄럽지만 제가 꼭 만들어보고 싶은 앱들이 있습니다. 다만 현실적인 취업이나 동아리, 프로젝트, 부트캠프 활동에서도 앱개발분야보다는 웹 프론트 백엔드 분야의 수요가 더 높아보여 앱개발을 선택하면 어떻게 준비해야 할지 감도 안옵니다. 프론트엔드나 백엔드로 진로를 정한다면 CS랑 알고리즘 코테 공부를 학기중에 진행하면서 동아리에 들어가서 정말 제대로 된 프로젝트를 만들고 프로젝트가 부족하다면 4학년 때 부트캠프에가서 프로젝트를 만들고 취업준비를 하면 된다고 생각했습니다. 안드로이드 개발자가 된다면 SW관련 동아리는 앱개발이라는 분야가 거의 없더라구요.. 프론트/백엔드/기획&디자인 보통 이렇게 구성되는 편이라 프로젝트도 어떻게 해야할지 부트캠프도 앱개발쪽은 별로 없어서 감을 못잡겠습니다.. <질문> 1. 그래도 좋아하는 분야보단 취업이 우선이라 프론트엔드나 백엔드로 취업준비를 하고 취업 후 혼자 취미로 앱 개발을 하는 것이 나을까요..? 2. 프론트엔드는 찍먹을 해봐서 어떤 방식으로 돌아가는지 감은 오지만 백엔드는 아에 경험이 없어서 전반적인 큰그림을 그려보고 싶어 백엔드로 진로를 잡고 싶은데요. 정말 맨땅에 해딩하는격이라 조금이라도 경험이 있는 프론트엔드로 진로를 잡아야할까요..? 우선은 올해 저의 정해진 계획은 1학년 때 했던 동아리에 프론트나 백엔드로 들어가서 프로젝트 정말 하나라도 제대로 해볼 예정이고, 알고리즘 공부도 학기 중에 병행할 예정입니다. 너무 늦게 개발자에 대한 진로에 확신이 생겨서 많이 불안한 상황입니다ㅜㅜ 간단한, 따끔한 조언도 저에게 정말 도움이 되니 지나가시면서 한마디씩 부탁드립니다...🙇🏻‍♀️

npm과 package.json에 대해 질문있습니다.

안녕하세요 코딩 공부를 하고 있는 초보자 입니다 공부를 하다가 npm에 대해 궁금한점이 있어 질문을 드립니다. 1. npm init -y 이러한 명렁어를 작성하던데 이건 무슨 명령어인지 쉽게 설명부탁드리겠습니다. 다양한 라이브러리? 뭐 이러한 것들을 사용하기 위해 사용하는 건가요? 2. 설치를 하면 package.json 이라는 파일이 생성되는데 이건 어떤 파일인지 궁금합니다. 3. package.json 안에 보면 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "node-sass": "node-sass", "sass": "node-sass styles/main.scss dest/style.css" }, 이러한 코드가 나오고 npm run node-sass 이러한 명령어도 사용하는데 이건 뭔지 궁금합니다. 지금까지는 html, css, js 를 공부할때 어떠한 것을 설치하지않고 그냥 각 파일만 만들어 코드작성을 한것뿐인데 이러한 것들을 설치하거나 하는 이유도 궁금합니다. 아무래도 초보자여서 구글링을 해서 찾아보고 하지만 설명들이 너무 어렵거나 헷갈려서 쉽게 알려주시면 감사하겠습니다.

학교를 졸업했지만 어디 분야로 가야할지 모르겠습니다

저는 원래 기계공학과였다가, 저랑은 영 맞지 않는것 같아서 1년 반 다니다가 컴퓨터공학과로 전과했습니다. 그런데 기계공학과와 컴퓨터공학과 모두 공학이긴 하지만 듣는 강의는 차이가 꽤 있어서 기계공학과에서 들었던 학점 대부분은 인정받지 못하고 증발해버렸습니다. 그래서 2학년이긴 하지만 전공학점은 신입생들과 별반 다를바가 없었어요 잘못하면 제때 졸업못하고 최소 1년이상 초과학기를 하게될테고 형편상 그건 어렵기 때문에, 전과해서 아는것도 하나도 없음에도 2학년과 1학년 수업을 같이 들으면서, 어떻게든 학기마다 풀학점으로 꽉꽉 채워서 결국 초과학기는 한 학기만 한 채로 졸업할 수 있었습니다. 그래도 나쁘진 않았습니다. 적어도 기계공학과에 있을 때보단 이쪽이 훨씬 제 적성에 맞았거든요. 그래서 그런지 학점도 4.0/4.5점 으로 괜찮게 졸업할 수 있었습니다. 그런데 너무 수업만 따라가기 바빠서 그런건지 졸업한 뒤 제가 어느 분야로 갈지는 깊게 생각해보질 않았어요. 미리 생각해 놨다면 학교 수업 외에도 그쪽으로 따로 공부를 하면서 준비할 수 있었을텐데, 그러질 않았으니 그저 학교에서 하는 강의만 열심히 들으면서 다녔습니다. 그리고 졸업하니까 어디로 가야할지 모르겠더라고요. 일단 제가 학교에서 배우고 해봤던걸 대충 적어보자면 javascript, java, python, c, html, css, mysql, oracle, unity, android studio, jsp, unix 이정도와 운영체제, 자료구조 같은 cs 입니다. 일단 저는 원티드, 로켓펀치, 프로그래머스 같은 사이트들을 돌면서 공고를 살펴 봤습니다. 프론트엔드쪽 기술스택을 살펴보니 html, css, javascript는 배웠지만 react, redux, node.js, next.js, typescript 이런 것들이 나오는데, 전부 한번도 안해봤던 것들이더라고요. 그래서 백엔드쪽 기술스택을 살펴보니 spring, jpa, django, docker, fastapi, flask 등등 이런것들이 나오는데 역시 안해봤던 것들이었습니다. 그래서 다음은 안드로이드쪽을 살펴봤습니다. 팀프로젝트를 하면서 앱을 만든 경험이 있었거든요 kotlin, flutter, react...역시 안해본 것들입니다 저흰 java만 배워서 코틀린을 안해봤습니다. 그리고 flutter, react 같은 크로스플랫폼 또한 다뤄본 적 없고요 이런식으로 막상 실무에서 요구하는 기술들과 제가 학교에서 배웠던걸 매치해보니 제가 부족한게 너무 많더라고요. 사실 처음 채용공고 봤을땐 제가 모르는 용어들도 많아서 멘붕이 왔었습니다. 물론 이제 막 학교 졸업하고 실무경험도 없는 신입이니 부족한게 많은건 당연한것이고, 신입이 그 기술스택을 다 숙지할 수도 없다는것도 알고 있습니다만, 그럼에도 제가 너무 부족한게 많다는 생각을 지울수가 없더군요 서론이 길었네요 그래서 결론은 현재 저의 상태에서 가장 빠르게 준비해서 취업할 수 있을만한 분야가 어디일까요? 저는 개발쪽이기만 하면 상관없는데, 저희집 사정상 가능한한 빠르게 준비해서 빠르게 취업하고 싶습니다.

IT 계열 회사 인턴십과 취업준비에 대한 조언을 구하고 싶습니다

안녕하십니까, 미국의 UCLA 대학에서 1학년으로 재학중인 학생입니다. 유학생으로서 IT 계열 인턴십 및 취업 준비에 대한 조언을 부탁드리고자 질문 드립니다. 한국에 위치한 국제학교를 졸업하여 이제 막 미국 대학 1학년 과정을 시작하였습니다. 제 꿈은 IT 계열 회사에서 일을 하는 것인데, 구체적인 직무와 취업준비에 있어 아직 방향을 잡지 못하였습니다(온라인 강의, 포트폴리오, 부트캠프, 프로젝트 등). 인터넷에서 실제 인턴십에 합격한 사람들의 후기 찾아보아도 명확한 출발점이 보이지 않는 경우가 많으며, 부트캠프나 인턴십의 경우에도 학기 중에는 수강이 불가능한(부트캠프에 투자해야할 시간 + 시차 문제) 경우를 자주 봤습니다. 내년 6월 경에 1학년 과정을 마치고 7월에 군 복무를 하여 2027년도 1월 쯤에 전역할 예정입니다. 전역 후 8월 정도까지 시간이 남을 것 같은데 이 기간 동안 어떻게 시간을 보내야 준비가 잘 될지 의문입니다. 저의 프로그래밍 경험이라고는 중/고등학교 당시 정보 올림피아드 준비를 위한 C언어, 고등학교의 Computer Science 수업 때 들은 Java, web 개발을 위한 HTML/CSS, javascript, 그리고 약간의 Python이 전부입니다. 추가로, 고등학교 당시 친구들과 교육회사를 창업하여 현재 웹사이트 개발 툴(Wix)을 활용한 웹사이트 디자인, 과외 강사등으로 활동하고 있는데 이런 경험도 지원시 도움이 되는지 여쭤보고 싶습니다. (아래는 제 Git Hub 링크입니다) Git Hub(고등학생 당시): https://github.com/qwertyuiop12as/David-Study-Record/tree/main Git Hub(대학생 및 이후 자료): https://github.com/dcho-jaewook 온라인 강의나 프로젝트, 포트폴리오/GitHub 운영법 등에 대한 조언을 해주신다면 큰 도움이 되겠습니다. 시간들여 고민 읽어주셔서 감사합니다. (추가로 현재 컴퓨터 수학과를(Mathematics of Computation) 전공하고 있는데 학사 학위 이후에 석사 학위가 있으면 취업 때 어느정도 이점이 있는지도 궁금합니다)

프론트엔드 1차 직무 면접

안녕하세요, 혹시 프론트 1차(직무) 면접 봐보신 분들 중에 회바회겠지만 경험상으로 일반적인 기술 개념(js, css, 브라우저 등) 위주로 물어보셨나요 아니면 이력서 기반으로 많이 물어보셨나요?? 준비해야 할게 참 많은 데 우선순위를 좀 두면 좋을 것 같아서요 !

소셜로그인 기능을 넣을지 고민입니다

개발자 취업을 목표로 개인프로젝트를 준비중입니다. 풀스택을 지망하고 있는데 프로젝트 작업을 하면 할수록 욕심이 생겨서 기능을 이것저것 계속 넣게되네요 질문의 제목은 비록 소셜로그인 기능을 넣을지 고민이라고 적었지만 어떠한 기능을 넣는게 좋은 포트폴리오가 될지 감이 안잡히고 있습니다. 기존 운영중인 플랫폼의 기능과 유사한 기능을 넣는것(소셜 로그인, 이메일 인증 회원가입 등) 기존 플랫폼과 크게 겹치지 않는 새로운 기능을 넣는것 에러관리 기능 등 백앤드 관리기능을 넣는것 감각적인 css 디자인 물론 모두 들어가면 좋겠지만 준비기간 여건상 어려울것 같습니다. 당연히 모두 어느정도 고려하며 준비중입니다. 우선순위를 둔다면 어떤걸 1순위로 두고 작업하는게 좋을까요?

package.json 파일에 대해 질문있습니다.

프론트엔드 공부하고 있는 초보자입니다. 공부를 하다 몇가지 궁금한점이 있어 질문을 드립니다. 1. 처음에 html, css, js 파일로만 만들어 코드 작성을 하고 필요한 패키지들은 cnd 코드를 복붙해서 이렇게 사용을 했었는데 npm init -y 이 명령어를 작성하는 이유는 무엇인가요? 2. npm install 로 패키지를 설치하면 node_modules폴더가 생성되는데 이 폴더는 설치된 패키지 관련 폴더들이 들어있는건가요? 3. package.json에서 설치한 패키지를 사용할때 아래 이미지 처럼 코드를 수정해서 npm run 명령어를 이용해서 실행을 하던데 경로를 작성을 한건가요? 첫번째 이미지는 parcel ./index.html 을 작성했고 두번째는 sass인데 sass는 styles/main.scss 로 했는데 inex.html로 할지 main.scss로 할지 이건 어떻게 알 수있나요? 그리고 두번째 이미지에서 "node-sass": "node-sass" 이건 뭔지도 알고싶습니다. 초보자라 어려운 설명보다 정말정말 쉽게 설명해주시면 너무 감사드리겠습니다.

프론트엔드(FE) 개발 관련 커리큘럼 과목 선택 및 언어 질문

안녕하세요! 현재 소프트웨어와 디자인 계열 과목을 같이 배우는 과에 재학 중인 대학생입니다. 이제 3학년이 되지만 전과를 했기 때문에 C언어, 파이썬, Unity(아주 조금)와 디자인 기초밖에 배우지 않아 사실상 1학년 과정 정도만 끝냈다고 생각 중인데 당장 다음 학기 시간표 구성을 어떻게 할지 고민이 되어서 글 올려봅니다! 우선 희망 진로는 프론트엔드 및 UI/UX 디자인 계열 (웹보다는 앱 선호)로 생각 중이고 html, css, javascript, react, figma 등의 학습이 필수이지만 학교 커리큘럼에는 잘 구성이 되어있지 않아 독학을 위주로 공부해야 되는 상황입니다. 그래서 학교에서는 다른 언어를 배워야 하는데 지금까지 구성한 시간표에는 자바프로그래밍, 데이터베이스기초(SQL), 객체지향프로그래밍(C++)에 소프트웨어 개론과 디자인 수업 하나가 있는 상태입니다 제가 여쭤보고 싶은 질문은 1. 현재 시간표가 괜찮은 편인지... 더 들어야 하거나 빼야 되는 것 혹은 동시에 수강하면 어려운 과목 조합(ex: C++과 자바 동시 수강)이 있다면 어떤 것인지 2. 제 희망 진로에서 웹프로그래밍과 react 등을 제외하고 Java, C++, Python, 데이터 관련(SQL 등) 중에서 어떤 언어가 가장 필요하고 뭘 중심적으로 준비하면 좋을지 3. 소프트웨어학과 부전공을 하면 저희 과에서는 배울 수 없는 웹프로그래밍(html css javascript), 멀티미디어, 컴퓨터그래픽스, 디자인패턴, 모바일플랫폼 등과 관련된 강의를 수강할 수 있는데 부전공을 하는 게 좋을지 입니다. 아직 잘 모르는 게 많아서 질문의 폭이 넓다고 생각되는데 자세히 설명해주신다면 정말 정말 감사하겠습니다 ㅜㅜ...

선배님들 진지하게 프엔개발자 취준 상담부탁드립니다

안녕하세요 올해 31살입니다.. 노션으로 이력서 작성했다가 이미지 로딩이 너무 느린거에 고민을 하다가 react-notion 라이브러리를 알게됬고 그걸로 작업하다가 CORS때문에 그냥 이력서를 리액트로 제가 직접 만들었습니다. 그 이력서로 취업 문을 계속 두드리고있는데 계속 문전박대 당하고있는 상황입니다 그저 개발이 재밌고 내가 구성한거를 이쁘게 ui만들고 하는게 재밌어서 강의나 책 보면서 배운 지식들을 활용한 결과물들을 포트폴리오로 내세운거라 남들이 보기엔 어떨지모르겠지만요.. 깃사용이랑 커뮤니케이션 코드컨벤션등등을 경험하고싶어서 팀프로젝트를 구해서 해본경험도 있습니다만.. 자신감이 많이 떨어져있는 상태입니다ㅜㅜ 비전공 독학 고졸 이 세가지 타이틀을 다 가지고있는 저라서 더 미래가 불안합니다. 여태 배운지식들은 html,css,js,react,nextjs,mongodb,express,awss3활용,파이어베이스 등등입니다. 면접을위한 cs전공지식 책을 사서 겉핥기식이겠지만 cs공부와 모던자바스크립트 웹사이트에서 js공부도 계속 하고있습니다. 최근까지는 서버리스가 개인플젝만들때는 편리해서 파이어베이스랑 리액트 혹은 넥스트13으로 개발을 주로해왔습니다만 솔직히 내세울만한것도 없는거같고 해서 다른 지식들을 어필해보자! 라는 생각이들어서 최근 구상중인 아이디어를 개발할때 적용해보고자합니다 1. Nextjs+nestjs 2. Nextjs + aws서버리스플랫폼 사용 이 두가지중 어떤게 더 나아보이실까요? 마지막으로 제 이력서입니다.. https://resume-react-phi.vercel.app/

토큰값을 받아오지 못하는 문제 (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을 로드해야 하지 않을까? 그렇다면 서버에서 처리를 해야하는가? 배워가는 학부생으로 많이 부족하다고 생각합니다,, 선배님들의 견해를 받고 싶어 게시물 올립니다..! 핵심 코드는 다음과 같습니다.