#vc

리액트 내비게이션 초기 데이터값 설정

import React, { useEffect, useState } from "react"; import { Link, useLocation } from "react-router-dom"; import { TbArrowBigUpFilled } from "react-icons/tb"; import useScroll from "../utils/useScroll"; import useProductsQuery from "../useProductsQuery"; const Nav = () => { const { isNavFixed } = useScroll(); const [activeButton, setActiveButton] = useState(0); const handleButtonClick = (index) => { setActiveButton(index); }; const categoryNames = { materials: "소재별 품목", purposes: "용도별 품목", }; const [isScrollMenuVisible, setScrollMenuVisible] = useState(false); const handleMouseEnter = () => { setScrollMenuVisible(true); }; const handleMouseLeave = () => { // console.log("마우스 이탈"); setScrollMenuVisible(false); }; const location = useLocation(); const isloginorsignup = location.pathname === "/login" || location.pathname === "/signup"; const { isLoading, isError, errorMessage, materials, purposes } = useProductsQuery(); const [hoveredOnedepth, setHoveredOnedepth] = useState(null); const [onedepthChildren, setOnedepthChildren] = useState([]); const [hoveredDivision, setHoveredDivision] = useState(null); const [twodepthDivision, setTwodepthDivision] = useState([]); const handleOnedepthMouseEnter = (item) => { setHoveredOnedepth(item); // console.log(setHoveredOnedepth) setOnedepthChildren(item.children); }; const handletwodepthMouseEnter = (child) => { setHoveredDivision(child); // console.log(setTwodepthDivision); setTwodepthDivision(child.divisions); // console.log(child.divisions); }; if (isLoading) return <>로딩 중...</>; if (isError) return <>{errorMessage}</>; return ( <> {!isloginorsignup ? ( <> {/* 대메뉴 */} <nav id="nav" className={`nav ${isNavFixed ? "fixed" : ""}`}> <div className="nav_wrap"> <div className="twobutton_wrap"> {["materials", "purposes"].map((category, index) => ( <Link type="button" className={`twobutton ${ activeButton === index ? "active" : "" }`} key={index} onClick={() => handleButtonClick(index)} to={`/${category}`} > {categoryNames[category]} </Link> ))} </div> {/* 내비게이션 1depth */} <div className="scrollnav"> <ul className="materialnav" style={{ display: activeButton === 0 ? "flex" : "none", }} > {materials.map((material) => ( <li key={material.id} className="materialnav_li" onMouseEnter={() => { handleOnedepthMouseEnter(material); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{material.name}</Link> </li> ))} </ul> <ul className="usagenav" style={{ display: activeButton === 1 ? "flex" : "none", }} > {purposes.map((purpose) => ( <li key={purpose.id} className="usagenav_li" onMouseEnter={() => { handleOnedepthMouseEnter(purpose); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{purpose.name}</Link> </li> ))} </ul> </div> <div className="call_wrap"> <div className="call"> <div className="call_title">견적 상담 · 문의 대표전화</div> <div className="top_button"> <TbArrowBigUpFilled className="top_icon" /> <p>TOP</p> </div> </div> </div> </div> </nav> {/* 2&3depth 호버 메뉴 */} <div className={`scrollmenu ${isScrollMenuVisible ? "show" : ""} ${ isNavFixed ? "fixed" : "" }`} style={{ visibility: isScrollMenuVisible ? "visible" : "hidden" }} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > {activeButton === 0 && ( <div className="scrollmenu_top"> <ul className="depth2_wrap"> {onedepthChildren.map((child) => ( <li key={child.id} className="depth2_menu" onMouseEnter={() => { handletwodepthMouseEnter(child); }} > <div className="depth2_menu_img_wrap"> <div className="depth2_menu_img"> <img src={child.images[0]._links.href} alt={child.name} /> </div> </div> <p>{child.name}</p> </li> ))} </ul> </div> )} <div className="scrollmenu_middle"> <div className="depth3_wrap"> {twodepthDivision.map((division) => ( <Link key={division.id} to="/" className="depth3_menu"> <span className="depth3_menu_img"> {/* images 속성이 없거나 비어 있어도 오류를 방지 */} {division.images && division.images.length > 0 && ( <img src={division.images[0]._links.href} alt={division.division_name} /> )} </span> <p>{division.division_name}</p> </Link> ))} </div> </div> <div className="scrollmenu_bottom"></div> </div> </> ) : null} </> ); }; export default Nav; 현재는 depth2_menu 호버해야만 depth3_menu가 보이는데 초기에 scrollmenu가 보일때부터 depth2_menu가 (onedepthChildren.map의 첫번째 순서의 데이터가) 호버되어있어 그에 매칭되는 division의 내용들이 depth3_menu에 보이게 할수있는 방법 있을까요 ?

리액트 네이티브 릴리즈로 배포 시 build.gradle 설정대로 동작 안하는 이유가 뭔지 궁긍합니다.

안녕하세요. 현재 리액트 네이티브로 프로젝트를 진행하고 있습니다. 막바지 단계에 거의 도달해서 이제 배포 준비를 하려고 하는데요, 마지막으로 테스트를 하기 위해 stagingRelease 로 apk 를 만들어서 테스트를 하려고 하니, .env.staging 을 읽지를 못하고 있네요. 이상한건 stagingDebug 로 할 때에는 이런 문제가 없었습니다. 지금 환경변수는 루트 디렉토리에 env 폴더가 있고, 해당 폴더 내에는 3개의 환경변수 파일이 존재합니다. .env.development .env.staging .env.production 이렇게 3개 입니다. project.ext.envConfigFiles = [ productiondebug: "env/.env.production", productionrelease: "env/.env.production", developmentrelease: "env/.env.development", developmentdebug: "env/.env.development", stagingrelease: "env/.env.staging", stagingdebug: "env/.env.staging" ] 위의 코드는 제가 설정한 환경변수 매핑하는 부분입니다. 실제로 stagingrelease 로 빌드 시에 flavor 값이 stagingrelease 로 뜨는 걸 확인했습니다. node_modules 에서 react-native-config 폴더를 찾아서 dotenv.gradle 에서 찍으니까 확인이 가능하더라고요. 제가 궁금한 점은 왜 루트에서 .env 파일만을 읽어서 BuildConfig.java 에서 사용하려고 하는걸까요? .env.staging 을 참조하지 않는 이유가 궁금합니다. 아래는 dotenv.gradle 파일입니다. import java.util.regex.Matcher import java.util.regex.Pattern def getCurrentFlavor() { Gradle gradle = getGradle() def pattern = Pattern.compile("(?:.*:)*[a-z]+([A-Z][A-Za-z0-9]+)") def flavor = "" gradle.getStartParameter().getTaskNames().any { name -> Matcher matcher = pattern.matcher(name) if (matcher.find()) { flavor = matcher.group(1).toLowerCase() return true } } println "Current flavor: $flavor" return flavor } def loadDotEnv(flavor = getCurrentFlavor()) { def envFile = project.hasProperty("defaultEnvFile") ? project.defaultEnvFile : ".env" if (System.env['ENVFILE']) { envFile = System.env['ENVFILE'] } else if (System.getProperty('ENVFILE')) { envFile = System.getProperty('ENVFILE') } else if (project.hasProperty("envConfigFiles")) { project.ext.envConfigFiles.any { pair -> if (flavor.startsWith(pair.key.toLowerCase())) { envFile = pair.value return true } } } println "Reading env from: $envFile" def env = [:] File f = new File("$project.rootDir/../$envFile"); if (!f.exists()) { f = new File("$envFile"); } if (f.exists()) { println "Found env file: $f" f.eachLine { line -> def matcher = (line =~ /^\s*(?:export\s+|)([\w\d\.\-_]+)\s*=\s*['"]?(.*?)?['"]?\s*$/) if (matcher.getCount() == 1 && matcher[0].size() == 3) { env.put(matcher[0][1], matcher[0][2].replace('"', '\\"')) // 각 환경 변수 키-값 쌍 출력 println "Loaded env variable: ${matcher[0][1]} = ${matcher[0][2]}" } } } else { println("**************************") println("*** Missing .env file ****") println("**************************") } project.ext.set("env", env) } loadDotEnv() android { defaultConfig { project.env.each { k, v -> def escaped = v.replaceAll("%","\\\\u0025") buildConfigField "String", k, "\"$v\"" resValue "string", k, "\"$escaped\"" println "Set buildConfigField and resValue: $k = $v" } } } 안드로이드 스튜디오 터미널에서 ./gradlew assembleStagingRelease 명령어를 치게 될 경우, Current flavor: stagingrelease Reading env from: .env.staging ************************** *** Missing .env file **** ************************** 이런 로그가 뜨고 있습니다.

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

안녕하세요 초보개발자입니다 지금 구글로 코드 복붙하며 게시판 수정중인데 아예 똑같이 복붙 하였는데 저는 왜 이런 식으로 나올까요 도와주세요 .. ㅠㅠ 프로젝트 발표가 코앞인데.. 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>

api의 첫번째 호출 이후부터 antd Button 렌더링 안되는 이슈가 있습니다.

```jsx import { Popover, Modal, Button, Image, Result } from "antd"; const [prevImg, setPrevImg] = useState(["any"]); const [loading, setLoading] = useState(false); const [removeImgFiles, setRemoveImgFiles] = useState([]); const combinePrevImages = (prevImages, newImages) => { const combinedImages = [...prevImages, ...newImages]; return combinedImages; }; useEffect(() => { const postSeg = async () => { try { const res = await axios.post( "apiurl", { filepath: filePath, clips: sortableList.map(list => `${list.seg.start}-${list.seg.end}`), frame: frameValue }, { proxy: false } ); return res.data; } catch (error) { console.error("Error posting segments:", error); return []; } finally { setLoading(false); } }; const postSegments = async () => { if (segments[0]?.start === 0 && segments[0]?.end === 0) return; if (sortableList && filePath) { setLoading(true); const res = await postSeg(); const combinedPrevImg = combinePrevImages(prevImg, res.results); setPrevImg(combinedPrevImg); console.log("Post Request Success"); } }; postSegments(); }, [filePath, segments, frameValue]); const handleModalOpen = useCallback(() => setModalOpen(true), []); const handleModalClose = useCallback(() => { setRemoveImgFiles([]); setModalOpen(false); }, []); const handleDeleteButtonClick = async () => { if (removeImgFiles.length > 0) { setPrevImg([...removeImgFiles]); setRemoveImgFiles([]); } else { const result = await showSwal({ title: "Are you sure delete?", showCancelButton: true, confirmButtonText: "Confirm", cancelButtonText: "Cancel", confirmButtonColor: "#3085d6", cancelButtonColor: "#d33" }); if (result.isConfirmed) { setRemoveImgFiles([...prevImg]); setPrevImg([]); } const success = await Promise.all(removeImgFiles.map(deleteFiles)); return success; } } const handleRemoveFinish = async () => { if (removeImgFiles) { for (const filePath of removeImgFiles) { try { await removeFile(filePath); } catch (e) { console.log("File Remove Error", e); } } } setRemoveImgFiles([]); handleModalClose(); }; return ( <motion.div initial={{ x: width }} animate={{ x: 0 }} exit={{ x: width }} transition={mySpring} > <div style={{ fontSize: 12, padding: "0 5px", color: "var(--gray12)", display: "flex", justifyContent: "space-between", alignItems: "center" }} > <FaAngleRight title={t("Close sidebar")} size={20} className="angle-right" role="button" onClick={toggleSegmentsList} /> {header} <FaExpandArrowsAlt title={t("Image Inspection")} size={18} className="expand-arrow-alt" style={{ cursor: "pointer" }} role="button" onClick={!loading ? handleModalOpen : handleModalClose} /> <Modal title={t("Image Inspection")} centered onCancel={handleModalClose} open={modalOpen} footer={[]} width="100%" > <div className="imagecontainer"> <Button danger className="toggle-remove" onClick={handleDeleteButtonClick}> {removeImgFiles.length > 0 ? "Add" : "Remove"} </Button> {prevImg?.length > 10 && prevImg.map(img => ( <Popover key={img}> {removeImgFiles?.includes(img) ? ( <span> <Result className="result" icon={<FaSmile />} subTitle="delete" /> </span> ) : <Image key={uuidv4()} src={img} preview={{ src: img }} alt={uuidv4()} /> )} </Popover> ))} </div> <Button block onClick={handleRemoveFinish}> Finish </Button> </Modal> </div> ) ``` api 호출을 통해 frameValue 개수(여기서는 12개씩) 만큼 이미지를 렌더링 하고 있는데 두번째 호출부터는 Button이 렌더링되지 않아서 어디가 잘못됐는지 알고싶습니다.. 필요한 부분이 imagecontainer 클래스네임인 div를 렌더링 해야합니다.

<input type="file" multiple> 관련하여..

<template> <div> <input ref="fileInput" type="file" accept="image/*" multiple="true" @change="handleFileInputChange" /> <button @click="openFileInput" class="select-button"> Select Images </button> <div class="preview-container"> <div v-for="file in selectedFiles" :key="file.lastModified" class="preview-item" > <p>{{ file.name }}</p> <div class="preview"> <img :src="previewImage" style="width: 100px" /> </div> <!-- <img :src="URL.createObjectURL(file)" /> --> <button @click="removeFile(file.lastModified)" class="remove-button"> X </button> </div> </div> </div> </template> <script setup lang=“ts”> const fileInput = ref() const selectedFiles: Ref<Array<any>> = ref([]) const openFileInput = () => { fileInput.value.click() } const previewImage = ref<any>('') const handleFileInputChange = e => { // const files = Array.from(fileInput.value.files) const files = e.target.files console.log('files', files) selectedFiles.value.push(...files) console.log('add selectedFiles', selectedFiles.value) for (let i = 0; i < selectedFiles.value.length; i++) { const file = selectedFiles.value[i] console.log('handleFileInputChange_ file', selectedFiles.value[i]) const reader = new FileReader() reader.onload = e => { previewImage.value = e.target.result } reader.readAsDataURL(file) } } const removeFile = lastModified => { selectedFiles.value = selectedFiles.value.filter( file => file.lastModified !== lastModified ) console.log('remove selectedFiles', selectedFiles.value) } </script> 모바일에서 카메라로 찍은 여러장의 사진들이 각각의 썸네일로 노출되어야함 현재는 최신 사진으로 엎어치기 됨.. 예) 'A B C D' 의 사진이 나와야하는데 현재는 A 찍고 B찍으면 'B B' 가 됨 C찍으면 'C C C'가 됨 도와주세요!

COPY(PG) GC 오버헤드 에러

안녕하세요. 대용량의 텍스트 파일을 postgreSql에 적재하는 모듈을 개발하고 있습니다. copy 함수를 활용하여 텍스트 파일('|'으로 구분되어 있는)을 테이블에 insert 하는데 헤더 스킵을 위해 csv로 parsing하려고 합니다. 근데 파일이 커서 그런가(8GB정도) 'OutOfMemoryError : gc overhead limit exceeded' 에러가 계속 발생합니다.. (어떨 땐 에러 없이 잘 들어가기도 합니다) 코드 중에 불필요한 구문이 있는 건지 판단이 잘 안됩니다... 또 csv로 파싱하지 않고 텍스트 파일의 첫째 줄을 지우고 copy로 밀어 넣는 방법이 있을까요? --------구현 코드-------- try ( BaseConnection c = dataSource.getConnection().unwrap(BaseConnection.class)) { try ( PGCopyOutputStream os = new PGCopyOutputStream(c, "COPY " + tableName + " FROM STDIN WITH (FORMAT CSV)"); CSVPrinter writer = new CSVPrinter(new OutputStreamWriter(os, StandardCharsets.UTF_8), CSVFormat.POSTGRESQL_CSV); CSVParser reader = new CSVParser(new InputStreamReader(inputStream, charset), CSVFormat.INFORMIX_UNLOAD.withFirstRecordAsHeader())) { for (CSVRecord row : reader) { for (String col : row) { if (col != null && StringUtils.hasText(col.trim())) { writer.print(col.trim()); } else { writer.print(null); } } writer.println(); } } } *inputStream은 해당 파일 BufferedInputStream 객체입니다.

aws 비용이 RDS에서 너무 많이 나가는데 비용절감 방법이 있을까요?

aws Cost Explorer에서 RDS 비용이 다른 항목에 비해 비용이 많이 나가는데요.. 아래 Amazon Web Services Korea LLC 서비스별 요금 정보에서 보면 "USD 0.120 per hour per vCPU running RDS Extended Support for MySQL 5.7 in Year 1, Year 2 2,972 vCPU-hour USD 356.64" 위의 항목이 제일 많이 나가고 있는데요. * 할당량 * DB 인스턴스 (2/40) 할당된 스토리지 (0.08 TB/100 TB) * 인스턴스 정보 * dev-ds MySQL Community ap-northeast-2a db.t3.small DB 엔진 버전 8.0.36 prod-rds MySQL Community ap-northeast-2a db.t3.medium DB 엔진 버전 8.0.36 사용중인 스토리지 양도 적은데 어떤 이유로 과금이 많이 되는걸까요? aws 전문가님들!~ 답변 부탁드릴게요^^~ * 청구서 상세정보 * "Relational Database Service USD 480.57 Asia Pacific (Seoul) USD 480.57 Amazon Relational Database Service for MySQL Community Edition USD 472.71 USD 0.052 per db.t3.small Single-AZ instance hour (or partial hour) running MySQL 744 Hrs USD 38.69 USD 0.104 per db.t3.medium Single-AZ instance hour (or partial hour) running MySQL 744 Hrs USD 77.38 USD 0.120 per hour per vCPU running RDS Extended Support for MySQL 5.7 in Year 1, Year 2 2,972 vCPU-hour USD 356.64 Amazon Relational Database Service Provisioned Storage USD 7.86 $0.00 per GB-month of provisioned GP2 storage under monthly free tier running MySQL 20 GB-Mo USD 0.00 $0.131 per GB-month of provisioned gp2 storage running MySQL 30 GB-Mo USD 3.93 $0.131 per GB-month of provisioned GP3 storage running MySQL 30 GB-Mo USD 3.93 Elastic Compute Cloud USD 143.00 Asia Pacific (Seoul) USD 143.00 Amazon Elastic Compute Cloud NatGateway USD 43.93 $0.059 per GB Data Processed by NAT Gateways 0.448 GB USD 0.03 $0.059 per NAT Gateway Hour 744 Hrs USD 43.90 Amazon Elastic Compute Cloud running Linux/UNIX USD 79.46 $0.026 per On Demand Linux t3.small Instance Hour 744 Hrs USD 19.34 $0.0288 per On Demand Linux t2.small Instance Hour 744 Hrs USD 21.43 $0.052 per On Demand Linux t3.medium Instance Hour 744 Hrs USD 38.69" 답변 부탁드릴게요. 감사합니다^^!

안녕하세요 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파일입니다. 문제는 저 스크립트가 다른 컴퓨터에서 실행했을 때 영상이 재생되지 않는다는 것입니다. '이 동영상은 볼 수 없습니다'로 뜹니다...혹시 저 스크립트에 문제가 있는 것 일까요..?? 도와주시면 정말 감사하겠습니다...

스프링 mvc와 jpa 중 뭐를 먼저 배워야 할까요?

** 아는 게 많이 없다 보니 고민만 더 많아져서 질문글이 두서 없이 길어졌는데 한번만 읽어주시면 감사하겠습니다!!ㅜㅜ 선배님들의 의견 하나만 남겨주셔도 큰 도움이 될 것 같습니다🥺 안녕하세요. 이제 갓 스프링을 배우기 시작한 컴공과 학생입니다. 웹 개발은 이번이 처음 접하는 거고, 인프런 김영한님 강의를 보면서 배우고 있으며 현재는 스프링 기본편을 보며 전반적인 기능을 훑었습니다. 참고로 스프링을 이용해 제 스스로 뭔가를 만들어보진 않았고, 단순히 강의만 보며 코드를 따라쳐본 수준입니다 .. 우선 제 목표는 한달 뒤에 개인 토이 프로젝트를 할 만한 실력을 갖추는 겁니다! (대외활동/인턴 지원을 위한 포트폴리오 용도입니다) 한달 동안 김영한님의 스프링 MVC 강의와 JPA 활용편(+기본편) 강의를 모두 들을 예정이긴 한데, mvc와 jpa 중 뭐를 먼저 배워야 하나 고민입니다 .. 스프링에 대해 아는 것이 많이 없어서 그러는데, mvc와 jpa 둘 중에 필수인 것과 선택사항(?)인 것이 있을까요? 물론 둘 다 현업에서 중요한 것 같긴 하지만 당장 실무 투입이 목표는 아닌지라, 단순 토이 프로젝트를 진행하는 데 있어 굳이 따지자면 둘 중 뭐가 더 중요한지 궁금합니다. 그리고 둘을 배우는 데 있어 하나를 먼저 배우면 다른 하나를 배우기 쉽고 이런 선후관계가 있을까요?? 완전히 다른 기능이라고 이해하고 있긴 한데 혹시나 싶어 여쭤봅니다..! 뭔가 머릿속으로는 mvc를 먼저 하는 게 낫지 않나 싶으면서도, jpa 활용편 강의에서 jpa를 사용하여 (mvc강의의 예제보다 훨씬 복잡한)웹 애풀리케이션 예제를 전반적으로 개발해본다고 해서,, jpa 활용 강의를 먼저 들으면서 웹애플리케이션에 좀 익숙해진 다음에 mvc를 들어야 하나 싶기도 합니다.. 그런데 jpa 활용편 강의를 듣고 나서 jpa에 대한 자세한 설명을 다룬 jpa 기본편 강의도 들을 예정이라, 두 강의를 이어서 들으려고 하는데요. 처음 생각했던 순서는 mvc->(혼자 진짜 간단한 프로그램 만들어보기)->jpa활용->jpa기본 인데, 만약 jpa활용을 먼저 듣는 순서로 바꾼다면 jpa기본과 mvc 중에 뭘 먼저 들어야 하나 싶기도 합니다..ㅠㅠ 혹시 답변해주시는 데 도움이 될까 싶어 제가 고민 중인 두 강의의 설명 적어놓겠습니다! mvc 강의: “자바 웹 기술과 스프링 MVC의 핵심 개념을 다지고, 스프링 MVC의 기본 기능을 이해합니다. 자바 백엔드 웹 기술을 소개하고, 서블릿, JSP, MVC 패턴, MVC 프레임워크까지 웹 기술 전반을 학습합니다. 이렇게 웹 기술의 배경을 이해한 다음에 스프링 MVC의 핵심 개념을 단단히 다집니다. 이후 스프링 MVC의 기본 기능 기능을 학습하고, 스프링 MVC를 사용해서 기본 CRUD가 가능한 웹 페이지도 개발합니다.” jpa 활용 강의: “이 강의는 게시판 같은 단순한 예제를 넘어서, 실무의 복잡한 상황을 재현할 수 있는 난이도 있는 예제를 사용합니다. 그리고 요구사항 분석부터 설계, 개발, 테스트, 성능 최적화까지 이 모든 과정을 순서대로 진행합니다. 이렇게 실무에 가까운 예제로 웹 애플리케이션을 처음부터 끝까지 함께 설계하고 개발해보면, 이 과정 속에서 스프링 부트와 JPA를 활용하는 올바른 방법을 자연스럽게 익힐 수 있습니다. 그리고 실무에서 이 기술들을 어떻게 활용해야 하는지 이해하게 됩니다.” 물론 이런 글 올릴 시간에 뭐 하나라도 먼저 시작하는 게 낫다는 건 정말 잘 알고 있지만 .. 아직 아는 게 정말 많이 없다 보니 확신도 안 서고 계속 고민만 하느라 혼자 땅굴만 깊이 파고 들어가게 되더라구요ㅜㅜ 이럴 바에야 얼른 다른 분들 조언 받는 것이 더 낫다고 생각해서 이렇게 글 쓰게 되었습니다 ,, 읽어주셔서 감사합니다!!

MVC vs MVVM

어제부터 MVVM 아키텍처에 대해 공부를 시작했는데 이전에는 MVC 아키텍처를 사용해왔습니다. MVC의 단점은 프로젝트가 커질수록 Controller가 비대해지는 경향이 있다는 점입니다. 그래서 Controller의 부담을 줄이기 위해 ViewModel을 도입한 MVVM이 탄생한 것으로 알고 있습니다. 하지만 MVVM을 공부하면서 느낀 점은 View와 ViewModel 사이의 상호작용이 많아지면서 컴포넌트가 많아질수록 코드가 길어지고 복잡해진다는 것이었습니다. 그래서 MVC처럼 다시 View와 Controller를 분리하여 MVC와 MVVM을 혼용하여 작성하면 좋을 것 같다는 생각이 들었습니다. 이에 대해 구글링을 해봤지만 관련 글을 찾기 어려웠습니다. 이렇게 개발했을 때 발생할 수 있는 문제점은 무엇이 있을까요?

객체배열 정렬하는 방법

carData: [ { "evcarno": “1”, "ev_main": false, }, { "evcarno": “2”, "ev_main": false, }, { "evcarno": “3”, "ev_main": true, }, { "evcarno": “4”, "ev_main": false, }, { "evcarno": “5”, "ev_main": false, } ] 위 객체 배열을 ev_main 이 true 인 값을 첫번째 순서로 가게끔 가공을 하고싶은데 어떻게 해야할까요..? **결과 carData: [ { "evcarno": “3”, "ev_main": true, }, { "evcarno": “1”, "ev_main": false, }, { "evcarno": “2”, "ev_main": false, }, { "evcarno": “4”, "ev_main": false, }, { "evcarno": “5”, "ev_main": false, } ]

iOS 개발 시, 사용자 개인정보 조회 및 전송 범위에 대한 질문(DevceID/MACAdress/IP)

안녕하세요. iOS 개발하면서 어려움이 있어서 이렇게 질문 남깁니다. Q. iOS 디바이스에서 활동기록을 서버로 전송하고 싶은데, DeviceID 혹은 MAC 주소를 조회해서 서버에 전송하는 행위가 법적이나 애플 약관상 이슈가 없는지 궁금합니다. 제가 검색해보면, Apple 정책은 다음과 같습니다. 링크: https://developer.apple.com/app-store/user-privacy-and-data-use/ "Can I fingerprint or use signals from the device to try to identify the device or a user? No. Per the Apple Developer Program License Agreement, you may not derive data from a device for the purpose of uniquely identifying it. Examples of user or device data include, but are not limited to: properties of a user’s web browser and its configuration, the user’s device and its configuration, the user’s location, or the user’s network connection. Apps that are found to be engaging in this practice, or that reference SDKs (including but not limited to Ad Networks, Attribution services, and Analytics) that are, may be rejected from the App Store." 제가 인지하기론, 디바이스를 특정짓는 정보는 서버에 전송하는 것을 불법으로 알고 있는데, 제가 암묵지로만 알고 있다보니, 정확한 근거를 찾고 싶어서 질문드립니다! 긴글 읽어주셔서 감사합니다!

mvc, flux 패턴의 차이점

flux 아키텍쳐에 대해 공부를 하던 중 제가 이해한 바가 맞는지 궁금하게 되어 질문드립니다. 처음 서치를 시작했을 때는 각 장단점을 얘기하였을 때 mvc 패턴 : 양방향 데이터 플로우로 인해 큰 규모의 프로젝트에서는 다수의 model, view 가 뒤섞여 어디서 데이터가 수정되었는지 추적이 어렵고 의도하지 않은 사이드 이펙트가 발생할 수 있다. flux 패턴 : 단방향 데이터 플로우를 강제하여 상호작용으로 인해 어떤 데이터가 수정되고 그로 인해 영향을 받는 view 를 파악하기가 쉽다. 는 것이 제가 얻은 중론이였습니다. 하지만 mvc 패턴 또한 view 상호작용 > controller > model 수정 > view 데이터 반영 으로 단방향 플로우를 가지는 것이 아닌가? 라는 생각이 들었습니다. 추가적인 서치 후 최근 mvc 패턴은 초기 아키텍쳐를 그대로 반영하지 않으며, 그 이름으로 불리는 mvp, mvvm 패턴을 뜻하는 경향이 있다. 해당 파생 아키텍쳐에서는 model < - > view 사이 양방향 데이터 플로우가 만들어져 규모가 커질수록 복잡도가 증가하게 되었다는 정보를 알게되었습니다. flux 패턴은 오히려 초기 mvc 패턴의 단방향 플로우를 강제하여 데이터 추적 및 이해를 쉽게하였다고 보는 것이 맞는 것인지 앞서 말한 것들이 제가 제대로 이해한 것인지 선배님들이 답변을 주시면 정말 감사하겠습니다.

react-query로 이미지를 가져올 때, 이미지가 깜빡거리는 문제를 해결하고 싶어요.

React 프로젝트에서 차량 데이터 목록(차량 모델 사진, 차량명, ....등)을 보여주는 웹 프로젝트를 진행하고 있습니다. 차량 데이터 목록 화면에서 react-query를 통해 가져온 데이터는 (예시 데이터) const data = [{id: number, car_name: string, model_name, car_model_image: number...}, {.....} ] 이런식으로 가져와서 map을 통해 CarCard 컴포넌트에 데이터를 props로 보내어 현재 출력하고 있습니다. 여기서 이미지 같은 경우는 백엔드에서 차량 모델 이미지를 가져오는 api를 따로 만들어놓아서, props로 전달받은 car_model_image 즉, 차량 모델 이미지의 id를 통해서 차량 모델 이미지 api에 데이터를 요청해서 이미지를 출력하고 있습니다. 이때. 페이지를 전환하거나, 한 페이지에서 아무동작을 하지 않아도 게속 이미지가 깜빡거리면서 재렌더링이 되고, 계속 무한정으로 이미지를 호출하는 문제가 발생하였습니다. map을 통해 CarCard를 호출하고 CarCard 안에서 이미지를 호출함에 따라서 계속 이미지가 깜빡깜빡 거리는 것 같은데, 컴포넌트 안에서 이미지를 호출할 때 어떻게 하면 무한정으로 이미지를 불러오지 않도록 하고 깜빡거림을 없앨 수 있을까요 ?...어떻게 해결해야 할지 감이 안 잡혀요.... //차량 목록 페이지 한 부분 ... const { data } = useGetCarList(); //useQuery를 통해 서버에서 데이터 전달받음 // const data = [{id: number, car_name: string, model_name, car_model_image: number...}, {.....} ] 이런식 .... return ( <div> data.map((data: CarData) => { return ( <Carcard ascCarData={data} key={Math.random()} handleClick={() => handleClick(data)} isActive={true} /> ); }) </div> ) //Carcard 컴포넌트 const { data: carImage } = useGetCarModeImage(ascCarData.car_model_image); // 이미지 데이터 가져오기

HTML div contenteditable=true로 에디터 만드는데

div 태그에서 contenteditable=true를 적용하여 에디터를 만드는데 볼드체와 글꼴색상만 필요합니다~ 근데 볼드체 적용하면 글꼴색상(빨간색)은 적용안되고, 글꼴색상(빨간색)을 적용하면 볼드체는 또 적용안되고.. 즉, 빨간색+볼드체가 동시에 적용이 안되는데, 어떻게 코드를 작성해야 좋을까요 ㅠㅠ 고수님들 답변 부탁드립니다! const btnBold = document.getElementById('btn-bold'); btnBold.addEventListener('click', function () { setStyle('bold'); }); function setStyle(style) { document.execCommand(style); focusEditor(); } function focusEditor() { editor.focus({preventScroll: true}); } const selectFontColor = document.getElementById('select-font-color'); selectFontColor.addEventListener('change', function () { setFontColor(this.value); }); function setFontColor(color) { document.execCommand('foreColor', false, color); focusEditor(); }

백엔드 애플리케이션 프레임워크를 개발 중인 학생입니다. 조언을 구하고자 합니다.

[ 서론 ] Low-level 이해도 향상, 객체 지향적 사고 증진, 공부량 증가를 위해 Spring 느낌의 프레임워크를 개발하려 합니다. [ 본론 1 ] 프레임워크 사용자의 편의성 확대를 위해, MVC의 Controller에 해당하는 영역을 어떻게 설계해야할지 고민 중에 있습니다. 아래 코드 블럭에 나열한 코드 중 개발하며 재미를 느끼실 것 같은 항목을 투표 영역에서 투표해주시거나, 답변을 통해 더 나은 방안을 추천해주시면 감사하겠습니다. [ 본론 2 ] (개인적으로 느끼기에) 매우 거대한 프레임워크를 혼자 개발하고 있는 만큼, 많은 문제와 고민에 봉착하고 있습니다. 이와 관련해 현직자 분들의 소중한 조언을 구하고자 합니다. 부디 시간 들여주시어 답변해주시면 감사하겠습니다. [ 결론 ] 프레임워크 개발이라는 저에겐 다소 어려운 길에 있어 조언을 구하고자 합니다. 부디 소중한 시간내어 답변 남겨주시면 정말로 감사드리겠습니다. ... 현재 소프트웨어 계열 고등학교에 재학 중이며, 백엔드 개발자가 되기 위해 공부하고있는 2학년 학생입니다. 최근 들어, 면접을 경험하신 선배 분들과 조금 대화를 나누다보니 제 지식 수준이 매우 낮다는 것을 깨닫게되었습니다. HTTP, TCP 등 (TCP/IP 4계층 모델 기준) 3,4 계층 프로토콜의 통신 과정, 데이터베이스와 Java 애플리케이션의 Low-Level(JDBC, R2DBC 혹은 더 낮은 수준) 통신 과정, 프레임워크를 사용하는 이유, 그 외 기타 등등. 조금은 깊은 지식에서부터, 원초적인 것들까지, 백엔드 개발자로서 알아야할 것들에 대해 제 수준이 턱없이 부족함을 느끼고 있습니다. 그럼에도 불구, 슬럼프와 비슷한 상태에 빠져있어 작년보다 공부량도 적어졌고, 의지와 기운도 많이 상실한 상태입니다. 아마도 구체적인 목표가 없기에 그런 게 아닌가 하여 공부도 겸하고, 저 자신을 자극할만한 거대한 목표를 한 가지 잡았습니다. Java 백엔드 애플리케이션 프레임워크를 만든다는, 저에겐 어쩌면 지나칠 수도 있는 어려운 도전에 임해보려 합니다. 프레임워크 하나를 기획할 시간을 없기에 Spring의 추상적인 틀을 기반으로 개발-수정 프로세스로 진행하고자 합니다. 프레임워크 주도의 IoC 컨테이너, 어노테이션 기반의 모듈(Spring과 Java에서의 Bean 개념) 관리, 클래스 단위의 설정 정보 관리가 프레임워크의 주요 포인트입니다. Spring의 Core 모듈에 해당하는 기반 프레임워크가 IoC 컨테이너를 포함해 부분적으로 구현되어있습니다. 그리고 현재 Spring Web, Spring MVC 등에 해당하는 WAS 프레임워크 구현을 시작한 상태입니다. MVC에서 Controller에 해당하는 부분을 디자인하는 과정에 있는데, 현직자분들의 생각하시는 최선의 Controller 디자인에 대해 의견을 수집하고자 합니다. 포함된 코드 블럭은 대중적인 프레임워크의 Controller/Router 디자인들입니다. 각 디자인별로 선호하시는 항목에 대해 부여된 번호를 투표를 통해 선택해주시면 감사하겠습니다. 또한 이 프로젝트에 대해 조언 혹은 비판, 의견을 답변 혹은 메일, 링크드인 통해 남겨주시면 대단히 감사드리겠습니다. 그 외 개인적인 문의 사항과 제안 또한 환영합니다. leetyxodud312@gmail.com 아래는 프레임워크 깃허브 주소입니다. 문서화 작업은 진행 중에 있어 다소 부끄러운 수준입니다. 양해 부탁드립니다. https://github.com/Project-Smoodi 끝까지 읽어주심에 다시 한 번 감사의 말씀 드립니다.

[Js] 함수 매개변수 전달에 대하여...

안녕하세요! 이제 막 1년 좀 넘은 주니어 개발자 입니다. 공부 중에 한 가지 궁금한 점이 생겨서 선생님들께 여쭤보려합니다. js 함수를 작성하는 중에 매개변수로 event를 전달하려 했더니 event에 취소선이 생성됩니다... 예시) - html - <div class='.card'> ... <button id="deleteCard" onclick="deleteCard(event)">삭제</button> </div> - js - function deleteCard(event){ let card = $(event.target).closest('.card').remove(); }; 위와 같이 작성했는데 함수 실행은 되긴 하는데 매개변수 event에 취소선이 생기니 잘못된 것 같아서 여쭤봅니다... 취소선이 생기는 이유와 문제가 된다면 어떤 점에서 문제가 생기는지 개선점은 뭐가 있는지 궁금해서 문의 남깁니다.

react-native-config, Cannot locate tasks that match 'app:installDevlop' as task ~

react-native-config 를 활용해서 환경변수를 만들어서 api key를 숨길려고 했는데요, 제목같이 에러가 발생하더라구요. 근데 다 찾아봤는데 저렇게 계속떠가지고 방법이 있을까요? (※ project.ext.envConfigFiles = [ developdebug: ".env.development", productdebug: ".env.production" ] 위 코드처럼 developdebug 이렇게 자세히 써야한다고 하는데 썼는데도 안되더라구요;; )

nextjs에서 랜더링 시점 바꾸기

안녕하세요! nextjs 프로젝트 진행중에 궁금증이 생겼습니다. 현재 Sidebar 컴포넌트에서 카카오맵이 불러와져야 작업을 할 수 있는 상태입니다. 카카오 맵은 children 에서 랜더링되기 때문에 아래와 같이 코드작성시, Sidebar 랜더링 시점에 kakao is not defined 라는 오류가 뜹니다. 혹시 Sidebar를 좀 늦게 랜더링 할 수 있을까요? export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body className={inter.className}> <div id="login-modal" /> <section className="flex h-screen"> <nav className=" h-full bg-slate-100"> <Sidebar /> </nav> {children} </section> </body> <Script src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${APIKEY}&libraries=services,clusterer`} strategy="beforeInteractive" /> </html> ); }

Async await fetch 오류

const Content: React.FC = () => { const [htmlContent, setHtmlContent] = useState<string>(''); const data = { "filePath": ""https://cdn-image-dev.test.io/dev/contents/terms/2023/10/11/",", "fileName": "test.html" } const url = `${data.filePath}${data.fileName}`; // HTML 파일 가져오기 const fetchHtmlFile = async () => { try { const res = await fetch(url); console.log('res', res); if (res.ok) { const html = await res.text(); setHtmlContent(html); } else { console.error('Failed to fetch HTML file'); } } catch (error) { console.error('Error fetching HTML file:', error); } }; fetchHtmlFile(); return( <div dangerouslySetInnerHTML={{ __html: htmlContent }} /> ) } fetchHtmlFile 호출 시켜 res에서 얻은 html소스를 가져와 htmlContent에 넣어야하는데 에러나네요,, **에러메세지 Content.tsx:30 Error fetching HTML file: TypeError: Failed to fetch Cors 오류 참고 -- api url : https://api-dev.test.io/api/test/v1/~~ 도와주세요!

리액트 책을 보면서 공부중인데 아래의 코드가 제대로 작동을 않합니다

import { useState } from "react"; type CounterProps = { initialValue: number; }; const Counter = (props: CounterProps) => { const { initialValue } = props; // 계정을 유지하는 하나의 상태를 useState()로 선언한다. 인수에는 초깃값을 지정한다. // count는 현재 상태, setCount는 상태를 업데이트하는 함수다。 const [count, setCount] = useState(initialValue); return ( <div> <p>Count: {count}</p> {/* setCount를 호출해서 상태를 업데이트한다 */} <button onClick={() => setCount(count - 1)}>-</button> <button onClick={() => setCount((prevCount) => prevCount + 1)}>+</button> </div> ); }; export default Counter; 책에 있는거 그대로 코딩 했는데 Property 'initialValue' is missing in type '{}' but required in type 'CounterProps' 이런 에러가 발생해요 왜 그런걸까요

국비교육 조언부탁드립니다.

전자공학과를 나왔고 과에서 전공에 코딩이 많아서 접하는 일이 많다보니 흥미를 갖게 되었습니다. c언어, java, linux 등 하나를 깊게 배우지 않고 조금씩 접하다 보니 제가 배운게 뭔지 몰라 개발자가 되고싶다는 막연한 생각을 하던 와중에 국비지원을 알게 되었습니다. 저는 대부분 개발자를 접할 때 웹으로 많이 시작을 한다고 해서 저도 백엔드쪽을 집중적으로 공부를 하고 추후에 클라우드도 공부를 해서 데브옵스를 전문적으로 공부를 하고 싶다는 생각을 했습니다. 그래서 여러가지 학원들을 보고 있는데 배우는 내용과 난이도가 어떤지 몰라 조언을 구하려고 합니다. C언어는 다 배웠고 JAVA는 조금 배우고 졸업작품으로 안드로이드 스튜디오로 간단한 어플리케이션 만든정도 입니다. A학원 Database : Oracle DBMS, 설치 및 Admin, SQL 기본과 활용 Programming : Java 환경설정, 기본문법활용, 클래스, 네트워크, JDBC Front-end : HTML/CSS, Javascript, jQuery Back-end: 웹개발 환경구축, 서블릿&JSP, AJAX&MVC패턴, 리눅스&클라우드 Framework: Spring Framwork(DI, JDBC, MVC), Springboot, Mybatis B학원 클라우드 기반 웹 프로그래밍 - 클라우드 기술의 이해 (리눅스, NCP Laas 등) - 웹 프로그래밍 기초 (HTML, CSS, BootStrap) - 자바스크립트 - 리액트 기초프로그래밍 - 자바 프로그래밍 - 데이터베이스 (MySQL, JDBC) - 스프링 입문 - 스프링 데이터 - SaaS API 사용하기 DevOps 프로그래밍 - 네이버클라우드 플랫폼 - DevOps 를 위한 리눅스 - NCP DB&스토리지 - 도커를 활용한 컨테이너 구축 - 운영자를 위한 DevOps - 개발자를 위한 DevOps MSA 기반 프로그래밍 -MSA 개발을 위하 쿠버네티스 - 스프링 클라우드 - 스프링 배치 - 스프링 시큐리

공동창업자 찾는 방법(VC, 개발자분께 드리는 질문)

안녕하세요. 예비창업자입니다. ceo인 저와 함께 마음 맞는 cto를 찾아 창업을 하려고 합니다. 서비스 분야는 모빌리티 또는 학습 콘텐츠 커뮤니티 입니다. 둘 모두 사업계획서 작성과 시장조사는 완료된 상태고 고객 인터뷰 기반 타당성 검사 진행 중에 있습니다. Q) 제가 만드려는 MVP or MVBP 에서 필요한 개발자, 엔지니어 포지션이 무엇인지 모르겠습니다. 전반적으로 실무에서 구체적인 포지션 및 역할은 어떤 것들이 있는지 알 수 있는 학습 사이트가 있는지 궁금합니다. Q) 공동창업자로서 CTO를 찾고 있을 때, 일반적으로 CTO의 역량 범주는 어느정도 되어야 외부 IR 시 인정받을 수 있을까요? 감사합니다.

분야 전향(devops>fullstack) 및 풀스택 커리큘럼

안녕하세요 만23세 주니어입니다. 제가 하고싶은분야는 풀스택쪽인데 생계사유상 입사를 devops로 오게 되었습니다. 입사한지 2주, 파견근무로 atlassian 유지보수를 하는 업체입니다. 아직 판단하기엔 조금 이르지만 그래도 지냇던 2주만큼은 이회사가 회사 운영방식이나 분위기에있어서 좀 맘에 들었고 아무래도 그전에 다녓던 회사들이 물경력에 1년넘는기간이없엇어서 이번회사는 좀 오래 다니고 싶습니다. (vb 2개월, ubuntu(filecoin) idc 유지보수 10개월(주)+react 2개월(부), skt네트워크망 관제 사무직 6개월, 건설안전교육기관 5개월) 다만 우려돼는건 나중에 원래하고싶었던 풀스택으로 전향할때 연봉이나 경력을 초기화해서 다시 신입으로 들어가야 하는건지 아니면 소폭감소나 유지되는지 모르겟어서 이부분좀 알려주시면 좋겟습니다. 또 activex쪽 개발햇던 4년차 지인분이 웹개발 관련해서 해당 커리큘럼을 추천해주셧는데 여기서 보완, 가감할점은 없는지 피드백부탁드립니다. 2021년 기준 1. 모든 개발자를 위한 HTTP 웹 기본 지식 / 김영한 2. 스프링 핵심 원리 - 기본편 / 김영한 3. 스프링 MVC 1편 -백엔드 웹 개발 핵심 기술 / 김영한 4. 자바ORM 표즌 JPA 프로그래밍 - 기본편 / 김영한 5. 초보를 위한 도커 안내서 / subicura 6. 실전! 스프링 부트와 JPA 활용1 - 웹 애플리캐이션 개발 / 김영한 7. 실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화 / 김영한 8. 실전! 스프링 데이터 JPA / 김영한 9. 실전! Querydsl / 김영한 10. DDD-START / 최범균 - ISBN 9788993827446 11. AWS 강의실 / 유튜브 12. Route53 / 생활코딩 13. 스프링 핵심 원리 - 고급 / 김영한 14. ELK 스택으로 데이터 분석 / 허민석 15. 아파치 카프카 for beginners / 데브원영 16. Spring Boot JWT tutorial / 정은구 17. The Red : 비즈니스 성공을 위한 Java/Spring 기반 서비스 개발과 MSA 구축 / 이희창 18. 새차원의 코틀린 / 새차원 19. Kotiln으로 개발하는 Spring Boot Web MVC / 예상국 20. 새차원의 코루틴 / 새차원 21. 코틀린 마이크로서비스 개발 / 후안 안토니오 메디나 이글레시아스 - ISBN 9791161752556 그리고.. react를 하긴햇는데 정작 이번에 취업할때보니 신입기준으로 react보단 vue가 더 많이보이더라고요. 그냥 vue를 하는게 나을까요? 어차피 js기반이니 둘다 상관없을까요?

프로젝트 경험이 부족한 4학년 전공자 부트캠프를 해야 할까요?

안녕하세요 경기도권 대학 컴퓨터공학과에 재학중인 4학년 학생입니다. 우선 현재 제 상황을 설명해보겠습니다. 프로젝트는 총 두 번 진행했습니다. 첫 번째 프로젝트는 Django와 chatGPT를 이용한 프로젝트이고 전 이 프로젝트에서 기본적인 API 구현, chatGPT 연동 그리고 rabbitMQ와 celery를 이용하여 chatGPT의 답변을 비동기로 가져오는 기능을 구현했습니다. 두 번째 프로젝트는 Springboot와 Flask와 RVC(음성 변환 AI 오픈소스)를 이용한 프로젝트를 진행했습니다. SpringBoot는 REST API를 작성하는 서버이고 Flask는 RVC AI 모델 서빙만을 위한 서버입니다. 이 프로젝트에서 SpringBoot REST API 구현, CRUD 구현과 Flask 서버 구현을 맡아서 진행했고 AWS EC2 배포, S3, RDS, DOCKER(Compose), Nginx, Github Action(CI/CD)도 구현했습니다. 올해 여름 방학에 알고리즘 스터디를 통해서 주요 자료구조와 알고리즘에 대해 공부하고 공부한 내용을 블로그에 정리했습니다. 코테 문제는 대략 100문제 조금 안되게 풀었습니다. 대충 실력은 실버 4~2까지는 어찌저찌 풀 수 있는데 실버 1 골드 5는 쉬운 건 풀고 어려운 건 못 푸는 수준입니다. 현재는 CS 스터디 진행중이고 이제 시작하는 단계입니다. 자격증은 정처기 있고 올해 11월 SQLD 응시 예정입니다. 첫 번째 프로젝트는 포폴로 쓰기 애매하고.. 두 번째 프로젝트는 Devops 경험은 충분한 것 같은데 Spring으로 구현한 기능은 아주 기본적인 REST API밖에 없고 Flask(AI)가 메인이다 보니 제대로 된 Spring 프로젝트가 없습니다.그래서 제대로 된 Spring 프로젝트를 만드는 게 우선이라 생각합니다. 그럼 혼자서 사이드 프로젝트를 하거나 부트캠프에 들어가서 기초부터 차근차근 배운 후 팀 프로젝트를 진행하는 방법이 있는데 어떻게 해야 할지 고민입니다. 부트캠프는 거의 대부분이 기초부터 하는 커리큘럼이다 보니 최소 6개월은 해야 한다는 단점이 있고 혼자 하는 건 주변에 물어볼 곳도 없고 좀 막막합니다. 대신 결과물이 조그 부족하더라도 6개월보단 덜 걸릴 것 같습니다. 조언 부탁드립니다..

백엔드 개발자로 1년간 취준했던 신입입니다. IT 쪽 개발 전망에 대해 몇가지 궁금한 점이 있습니다.

현재 개발 외 직군으로 입사해서 개발자로 이직을 준비하려고 합니다. stack : java spring 인프라 경험 : aws ec2, mysql 학습내용 인프런 김영한 spring 완전정복코스(https://tinyurl.com/23s6uonc)에서 스프링 입문, 스프링 핵심 원리, HTTP, MVC1, MVC2 김영한의 스프링 부트와 JPA 실무 완전 정복 로드맵(https://tinyurl.com/2dzrelgr)에서 ORM, JPA 활용1, JPA활용2 포트폴리오 1(팀 / 앱개발 프로젝트) - https://github.com/heoeuntaek/capstone-spring 포트폴리오 2(개인/ 웹게시판 프로젝트) - https://github.com/heoeuntaek/project-post 이 정도까지 준비를 했습니다. 서울, 부천 등 인천과 가까운 100개 넘는 자바스택의 백엔드, SI 회사에 지원 - 5개만 서합, 1개 코테, 4개 면접 모두 탈락 2022~2023년 동안 개발자 붐이 일어나 현직 개발자, 개발자 취준생이 많고 AI가 발전함에 따라 어느 정도의 개발을 대체하기에 기업이 신입에게 요구하는 역량이 더 커져 신입 개발자의 문턱이 커진 것 같은데요, 1. IT 업계 전반적으로 전망이 궁금합니다. 2. 구체적으로 백엔드 개발 쪽의 전망이 궁금합니다. 3. 개발자 준비를 계속해서 한다면 신입으로서 Spring, 인프라, 알고리즘 등 분야마다 어느정도의 역량은 갖춰야 한다고 생각하시나요? 4. 케바케겠지만 개발자가 수명이 짧다고 들었는데 어떻게 생각하시나요?

4년 다니던 회사가 연봉 통보로 바뀜, 이직이 답인지 고민이됩니다 조언 부탁드립니다 ..

안녕하세요. 😊 저는 비전공자로 취업한 케이스입니다. 현재는 3년째 2개월째 재직중입니다. 하하 사실 개발을 시작할 때는 개발자로 취업했으면 좋겠다는 마음뿐이었던 것 같습니다. 처음 면접 본 회사에 합격했는데 우리 회사가 너무 좋아서 정말 열심히 회사 생활을 해온것같아요. 저는 요즘 타회사 개발자들 커뮤니티에서 이거 쓴데 ~ 하는 것들은 대부분 찾아보는 취미가 있습니다. 새로운거 찾아보는걸 쫌 좋아해요 암튼 저희회사 처음 입사했을때는 mvc 프로젝트에 svn 으로 코드 병합하고 jsp 사용하구 일단 프로젝트 엄청 무겁고 로딩하는데 3분걸리고 코드 해석하는데 오랜 시간이 걸리는 . . . . 암튼 그런 레거시 플젝뿐이었어요. ㅠㅠ 제 입사 첫 업무가 vue 랑 스프링부트로 게시판 만들어보랬는데 회사에 vue 쓸줄 아는 사람은 한명도 없고 ; 결국 제 입사동기랑 둘이서 vue랑 스프링부트로 해보다 두달째인가? 지났을때 뷰 템플릿 찾아봐라 > 네비게이션 만들어라 > 사내 관리 시스템 만들어라 이래서 아직까지 잘 쓰고있는? 프로젝트를 만들었거든여 (지금보면 고치고 싶은곳 투성이라 여유있을때 리팩토링 시도함 . . .) 그리구 git 으로 바꾸자구 적극 건의해서 svn에서 gitlab 으로 갈아타구 팀원들 보라구 gitlab 사용법도 문서화해서 공유하구 작년부터 시작한 새 프로젝트는 더 애정이 깊은데 jpa 를 너무 쓰고 싶어서 진짜 엄청 졸라서 도입하고 사내에서 일끝나고 쿠버네티스 스터디 해서 쿠버네티스도 도입해서 (제가도입은안했지만) 간단한 매니페스트 작성해서 웹, 크론잡 올리는건 할 수있구 레디스도 쿠베에 구축해서 웹 세션관리 레디스에서 해서 각 파드에서 세션 공유할 수 있게 하고 레트로핏이 빠르대서 그것도 도입하구 . . . 다른분들이 이거보면 별거 아니네 할수 있지만 !!! 저한테는 진짜 소중한 프로젝트들이란말이에요 !!(?) 회사에서 썩어가던 . . 고인물 프로젝트 전부 스프링부트로 대체해서 지겹게 발생하던 프로젝트간에 의존성 충돌도 해결하구 . . . 심심할때는 데몬들로 돌리던거 플랫폼으로 ui 랑 api 혼자해서 배포하구 돌아보니 회사 프로젝트에 제가 엄청난 애정을 쏟았네요 ...... 암튼 이제는 회사 분들도 진짜 정 많이들고 좋거든요 개발하다 고민생기면 같이 더 나은 방법 찾아주려고 고민해주는 문화가 점점 자리 잡고 있어서 . . . 만족함 !!!! ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 서론이 길어졌는데 . . . 제 고민은 이제 말씀드릴께요!! 저희 회사에서 2800 초봉으로 시작해서 3400 > 3900 이렇게 올랐는데 사실 연협과정에서 만족했거든요 (적은건알지만!!) 올해부터 저희회사가 연봉협상이 아닌 연봉통보라는거에요 🥹🥹🥹 진짜 제 고민은 이제 우리 회사에 애정을 느끼는데 . . . . 연봉 통보로 바뀌면 전 이직을 하고 싶은데 . . . . 하하 다른 개발자 분들의 생각은 어떤지 여쭤보고 싶습니다 . . . 찐조언 부탁드립니다 . . .

react에서 axios, map 함수를 통한 api 호출

api를 axios를 통해 불러와서 map 함수로 뿌려주려고 합니다. 다음과 같은 api 형태이구요(이미지 url은 익명글이기 때문에 가짜로 넣었습니다) { isSuccess: true, code: 1000, message: "요청에 성공하였습니다.", result: [ { bannerIdx: 1, bannerImgUrl: "https://abcde.png", bannerTitle: "프리온보딩", bannerContent: "실무에서 사용할 수 있나요?" }, ] } 이 api를 다음과 같은 함수형 컴포넌트로 호출하는데 불러와지지가 않습니다. 아래 url은 제가 제 정보보호를 위해 가짜로 넣어놓았구요. console에는 정상적으로 api 내용이 출력되고는 있습니다. 그런데 화면에 표시가 안됩니다. 왜 안될까요? function TopBanner() { const [bannerData, setBannerData] = useState([]); useEffect(() => { getBannerData(); }); const getBannerData = async () => { const result = await axios({ method: "GET", url: "https://abcde/abc/abc", }).then((response) => { console.log(response.data); setBannerData(response.data.result); }); setBannerData(result); }; return ( <Base> <Container> <StyledSlider {...settings}> {bannerData && bannerData.map((banner) => ( <div className="slick-slide"> <div key={banner.data.result.bannerIdx} imgUrls={banner.data.result.bannerImgUrl} alt={banner.data.result.bannerTitle} className="banner-image" /> </div> ))} </StyledSlider> </Container> </Base> ); } export default TopBanner;

intellij 태그 자동완성

안녕하세요. 이번에 맥으로 바꾸면서 intellij 설정이 뭐가 안된건지 원래 div 치고 tab키누름 <div></div> 또는 .container tab키누름 <div class="container"></div> 이런식으로 자동완성이 되었는데 갑자기 안돼서요 혹시 설정법 아시는분있으실까요..?

css에서 % 단위

만약 어떤 요소의 width를 % 단위를 사용하면 부모 요소의 width를 기준으로 한 퍼센트 값이 적용되잖아요. 그런데 부모 요소가 width가 지정되어 있지 않고 하위 컴포넌트들을 감싸기만 해서 유동적인 width를 가지는 상황이고 부모의 부모 요소가 고정된 width를 가지는 상황이라면, 부모의 부모 요소의 width를 기준으로 퍼센트 값이 되는건가요? react와 tailwind를 사용한 예시로 다음과 같은 html 구조가 있다고 할 때, 저는 {item}을 감싸는 div의 width에서 %를 쓰면 <div className="flex items-center w-full gap-[30px]"> 요소의 width를 기준으로 될 줄 알았는데 <div className="w-full overflow-hidden"> 요소를 기준으로 한 값이 적용되는 거 같더라구요. 원래 css의 %단위가 무조건 직계 부모의 값을 기준으로 하는게 아니라 직계 부모의 값이 고정된 값이 아니면 더 상위의 부모들 중 고정 값인 요소를 기준으로 하게 되는 건가요?