173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 시작은 프리캠프
css: * { box-sizing : border-box ; } .box2 { display : flex ; align-items : center ; margin : 10px auto ; flex-direction : column ; justify-content : space-evenly ; } .box { width : 300px ; height : 1px ; border : 1px solid rgb ( 199 , 199 , 199 ); display : flex ; flex-direction : column ; justify-content : space-evenly ; align-items : center ; padding : 30px ; margin : 5px auto ; border-top-left-radius : 10px ; border-top-right-radius : 10px ; border-bottom-right-radius : 10px ; border-bottom-left-radius : 10px ; } .box3 { display : flex ; flex-direction : row ; justify-content : row ; } select { border : 1px solid black ; } .pb { width : 500px ; height : 800px ; border : 1px solid gray ; display : flex ; flex-direction : column ; justify-content : space-around ; align-items : center ; padding : 30px ; border-top-left-radius : 10px ; border-top-right-radius : 10px ; border-bottom-right-radius : 10px ; border-bottom-left-radius : 10px ; } html: <!DOCTYPE html > <html lang = "en" > <head> <title> 회원가입 </title> <link href = "./02-signup.css" rel = "stylesheet" /> </head> <body> <div class = "pb" > <h2 class = "box2" > 회원가입 </h2> <input type = "text" placeholder = "이메일을 입력해주세요" class = "box" ><br><br> <input type = "text" placeholder = "이름을 입력해주세요" class = "box" ><br><br> <input type = "password" placeholder = "비밀번호를 입력해주세요" class = "box" ><br><br> <input type = "password" placeholder = "비밀번호를 다시 입력해주세요" class = "box" ><br><br> <select> <option disabled = "true" selected = "true" > 지역을 선택하세요 </option> <option> 서울 </option> <option> 경기 </option> <option> 인천 </option> </select> <br><br> <input type = "radio" name = "gender" class = "box3" ><span class = "box3" > 여성 </span> <input type = "radio" name = "gender" class = "box3" ><span class = "box3" > 남성 </span> <br><br> <input type = "checkbox" > 이용약관 동의합니다 <hr> <button class = "box" > 가입하기 </button> </div> <!-- <input type="button" value="가입하기2"> 예전에 사용했으나 커스텀하기 어려웠음 --> </body> </html> 어디가 문제 인지 알려주시면 감사하겠습니다.
웅담
2024-11-13T11:53:13.268Z
댓글 1
좋아요 0
조회수 153
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 해당 강좌로 도움을 많이 받고 있습니다만, 강좌에서는 redux을 이용한 상태관리 없는거 같더구요 . 실무에서 redux를 많이 사용하느것 같은데요, 혹시 추가 적으로 redux 강좌나 추가 업데이트 계획이 있으신지 문의 드립니다. 아님 다른 이정환님의 한입 강좌 중에서 들을 수 있는지요?
babi9005
2024-11-13T08:29:40.463Z
댓글 2
좋아요 0
조회수 181
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
따라서 하고 있었는데 다음 그림과 같이 invalid Date 라는 값이 떠서 관련 질문 드립니다. 강의 몇번 돌려보면서 오타가 있나 봤는데 도저히 모르겠어서 질문 드립니다... // App.jsx import "./App.css"; import { Routes, Route, Link, useNavigate } from "react-router-dom"; import Home from "./pages/Home"; import Diary from "./pages/Diary"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Notfound from "./pages/Notfound"; import { useReducer, useRef, createContext } from "react"; const mockData = [ { id: 1, createdDate: new Date("2024-11-13").getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createdDate: new Date("2024-11-10").getTime(), emotionId: 2, content: "2번 일기 내용", }, { id: 3, createdDate: new Date("2024-10-11").getTime(), emotionId: 3, content: "3번 일기 내용", }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => String(item.id) === String(action.data.id) ? action.date : item ); case "DELETE": return state.filter((item) => String(item.id) !== String(action.id)); default: return state; } } export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = (createdDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createdDate, emotionId, content, }, }); }; const onUpdate = (id, createdDate, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createdDate, emotionId, content, }, }); }; const onDelete = (id) => { dispatch({ type: "DELETE", id, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ onCreate, onDelete, onUpdate }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App; //Home.jsx import { useState, useContext } from "react"; import { DiaryStateContext } from "../App"; import DiaryList from "../components/DiaryList"; import Header from "../components/Header"; import Button from "../components/button"; const getMonthlyData = (pivotDate, data) => { const beginTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth(), 1, 0, 0, 0 ).getTime(); const endTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth() + 1, 0, 23, 59, 59 ).getTime(); return data.filter( (item) => beginTime <= item.createdDate && item.createdDate <= endTime ); }; const Home = () => { const data = useContext(DiaryStateContext); const [pivotDate, setPivotDate] = useState(new Date()); const monthlyData = getMonthlyData(pivotDate, data); console.log(monthlyData); const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1)); }; const onDecreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() - 1)); }; return ( <div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth() + 1}월`} leftChild={<Button onClick={onDecreaseMonth} text={"<"} />} rightChild={<Button onClick={onIncreaseMonth} text={">"} />} /> <DiaryList data={monthlyData} /> </div> ); }; export default Home; //diaryList.jsx import Button from "./button"; import "./DiaryList.css"; import DiaryItem from "./DiaryItem"; const DiaryList = ({ data }) => { return ( <div className="DiaryList"> <div className="menu_bar"> <select> <option value={"latest"}>최신순</option> <option value={"oldest"}>오래된 순</option> </select> <Button text={"새 일기 쓰기"} type={"POSITIVE"} /> </div> <div className="list_wrapper"> {data.map((item) => ( <DiaryItem key={item.id} {...item} /> ))} </div> </div> ); }; export default DiaryList; //DiaryItem.jsx import { getEmotionImage } from "../util/get-emotion-image"; import Button from "./button"; import "./DiaryItem.css"; const DiaryItem = (id, emotionId, createdDate, content) => { return ( <div className="DiaryItem"> <div className={`img_section img_section_${emotionId}`}> <img src={getEmotionImage(1)} /> </div> <div className="info_seciton"> <div className="created_date"> {new Date(createdDate).toLocaleDateString()} </div> <div className="content">{content}</div> </div> <div className="button_section"> <Button text={"수정하기"} /> </div> </div> ); }; export default DiaryItem;
capstone24star
2024-11-13T05:45:55.308Z
댓글 2
좋아요 0
조회수 167
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
첫번째 context Provider 에 {data} 두번째 context Provider 에 {onCreate,onUpdate,onDelete} 이렇게 2개를 사용해야 하는건가요? 1개로 value 에 {data, onCreate,onUpdate, onDelete} 이렇게는 안되는건가요? 안되는 거라면 이유가 있을 런지요? 복잡한 상태 관리가 필요한 경우에 종류별로 많이 사용된다면 코드가 복잡해질거 같은데요 ㅠ 그리고 실무에서 상태관리를 위해서 Redux를 많이 사용하는 거 같더라구요? 현재 react 강좌에는 Redux 내용은 없는거 같아요 ㅠㅠ 추가 보충설명 공유주시면 감사할거 같아요 ~~
babi9005
2024-11-13T02:20:51.800Z
댓글 2
좋아요 1
조회수 165
미해결
모두를 위한 대규모 언어 모델 LLM Part 5 - LangGraph로 나만의 AI 에이전트 만들기
강의 중간에 있는 link typing해서 확인하려니 힘들어요. 발표한 자료하고 code download할 수 있게 해주세요.
llm langchain rag openai-api ai-agent langgraph
YCorn
2024-11-12T02:33:32.309Z
댓글 4
좋아요 0
조회수 283
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
강사님 강의를 들으면서 의문이 들었는데 강사님 버튼 부분으로 되어있는 것들을 div태그로 전부다 만드시던데 혹시 이유가 따로 있을까요??? 북마크를 추가하는 부분이나 취소, 추가 부분은 button태그를 사용하거나 북마크를 입력하는 div태그 전체를 form태그로 묶어서 사용하는게 좀 더 좋지 않을까요?? 강사님이 div 태그만 사용하시던데 혹시 이유가 따로 있으신건가요??
김용인
2024-11-11T10:36:43.961Z
댓글 2
좋아요 1
조회수 268
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
6, 북마크 아이템 추가하기에서 추가 버튼을 누르면 bookmarkList.push is not a function at HTMLDivElement.addBookMarkItem 이라고 콘솔에 나옵니다 ..ㅠㅠ (css와 마크업은 미리 적어두었습니다.)
gmlrnjssla
2024-11-11T10:34:38.320Z
댓글 2
좋아요 0
조회수 148
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
프로젝트 작성할 때 ,APP.js와 components폴더 안의 js모듈로 보통 구성을 하시는데, 왜 APP.js에서 $app을 매개변수로 받을 때는 소괄호에서 바로 받는데, 다른 컨포넌트 내부 js모듈에서는 중괄호로 받는건가요? export default function App($app) {} export default function CityList({ $app, initialState,handleLoadMore }) {} APP의 경우 전달받는게 하나인데, CityList의 경우 APP에서 여러개의 매개변수를 받아오기 떄문에 구조분해로 받아오는 건가요? 만약 그렇다면 한개만 매개변수로 받아오는 경우, CityList도 (소괄호)안에 {중괄호}없이 바로 매개변수를 써도 되는 건가요?
ggang89
2024-11-11T09:10:43.743Z
댓글 2
좋아요 0
조회수 179
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
coolsms statuscode 2000 인데 폰에 메시지가 안오면 번호도용문자차단 서비스 사용중인지 확인해보세요. 이게 인터넷 문자메시지를 막는 모양입니다. 해지신청하고 3~7일 정도 시간이 걸려 적용된답니다. 저도 신청하고 대기중...
javascript node.js docker rest-api nestjs
Junee
2024-11-11T06:58:46.471Z
댓글 1
좋아요 0
조회수 167
미해결
모두를 위한 대규모 언어 모델 LLM Part 5 - LangGraph로 나만의 AI 에이전트 만들기
llm이 어떤 기준으로 tool을 호출하나요? 강의에서는 필요하면 한다고 나와있는데 예를 들어 llm이 tavily search가 필요할 때가 언제인지, 어떤 기준으로 tool call 하는지 궁금합니다.
llm langchain rag openai-api ai-agent langgraph
aibot
2024-11-11T05:57:40.377Z
댓글 2
좋아요 0
조회수 443
미해결
[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 오류가 계속나는 이유를 모르겟습니다
날려별
2024-11-11T05:52:19.991Z
댓글 3
좋아요 0
조회수 859
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요! 동물앨범 수업 따라가던 중 질문이 생겨 문의드립니다. require함수 작성시 밑줄이 생기며 require is not defined 라는 에러가 뜨는데, 저대로 실행을 하면 정상 작동하긴 합니다. 구글링을 해보니 package.json파일에 "type":commonJs를 추가하라고 하여 했는데도 똑같이 밑줄이 생깁니다. 어떤게 문제일까요?
이원현
2024-11-11T03:37:30.759Z
댓글 1
좋아요 0
조회수 146
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
배포는 잘 된 것 같은데요...? 계속 데이터 로딩중 페이지만 떠서 여쭤봅니다. 제 생각에는 받아올 데이터가 없어서 빈배열이라서 문제가 되는걸까 싶었지만, 선생님 강의에서도 동일하게 빈배열이지만 Header가 잘 나오는거보면 랜더링이 정상적으로 되는 것 같아서 받아올 데이터가 없는건 문제가 아닌듯하여 질문하게되었습니다. 혹시나 권한 오류일까 싶어 질문답변 글 참고하여 적용해봤으나 아닌 것 같습니다.
ju004100
2024-11-10T12:35:03.011Z
댓글 2
좋아요 0
조회수 503
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
express 파일까지 설치하고 server.js에 코드를 작성해 주었습니다. 그런데 웹을 새로고침한 경우 Cannot GET /penguin 이런 에러가 계속 발생합니다. 이 에러를 해결하기 위해서 express를 설치한 것 같은데..무엇이 문제인 걸까요? 혹시 몰라 깃의 코드를 확인해 봤는데, 코드상 문제는 없었습니다. import Content from "./components/Content.js"; import TabBar from "./components/TabBar.js"; import { request } from "./components/api.js"; export default function App($app) { this.state = { currentTab: window.location.pathname.replace("/", "") || "all", photos: [], }; //tab const tab = new TabBar({ $app, initialState: this.state.currentTab, onClick: async (name) => { history.pushState(null, null, `/${name}`); this.updateContent(name); }, }); const content = new Content({ $app, initialState: [], }); // 상태 업데이트 함수 this.setState = (newState) => { this.state = newState; tab.setState(this.state.currentTab); content.setState(this.state.photos); }; this.updateContent = async (tabName) => { try { const currentTab = tabName === "all" ? '' : tabName; const photos = await request(currentTab); this.setState({ ...this.state, currentTab: tabName, photos:photos, }) } catch (error) { console.log(error) } }; window.addEventListener("popstate", () => { this.updateContent(window.location.pathname.replace("/", "") || "all"); }); const init = async () => { this.updateContent(this.state.currentTab); }; init(); } const express = require('express'); const path = require("path"); const app = express(); const PORT = 3000; app.use(express.static(path.join(__dirname, ".."))); app.get("/*", (req, res) => { res.sendFile(path.join(__dirname, "..", 'index.html')); }); app.listen(PORT, () => { console.log('START SERVER') }) ++추가질문 port주소를 3000으로 변경하면 해당 오류가 발생하지 않는 것을 확인했습니다. 라이브서버를 자동으로 실행하면 port가 5500이어서 오류가 발생한 것 같습니다. 1) port는 자동으로 3000으로 변경이 안되나요? 2)server.js에서 port를 새로 지정해준 이유가 궁금합니다. 그대로 5500을 하면 안되나요?
ggang89
2024-11-10T10:20:31.464Z
댓글 2
좋아요 1
조회수 191
해결됨
Azure Native로 나만의 GPT 만들기
안녕하세요, 강의 너무 잘 듣고 있습니다. 잘 따라가고 있던 와중 프론트 코드에 URL 상수를 지정하는 과정들을 거치고 UI가 있는 창에서 개발자 도구를 열어도 연결 완료 문구가 뜨지 않아 글 남깁니다. 저와 같은 문제로 질문 주신 커뮤니티의 다른 분께 프론트 파일과 주소를 남겨달라고 하셔서 메일로 프론트 파일과 주소를 보내드린 상태입니다. 한 번만 확인해 주신다면 감사드립니다.
javascript python mongodb azure FastAPI
고고링
2024-11-10T05:02:28.202Z
댓글 2
좋아요 1
조회수 315
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
안녕하세요! 강의 너무 잘 수강하고 있습니다. App.js 컴포넌트에서 onClick함수를 저렇게 정의하면 올바르게 동작하는 건 알겠는데 이런식으로 코드를 작성해 tabbar 컴포넌트에서 onClick함수를 실행하면 오류가 뜨는 이유가 궁금합니다!
이원현
2024-11-09T18:33:22.425Z
댓글 2
좋아요 1
조회수 192
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
export default function TabBar({$app, initialState, onClick }) { this.state = initialState; this.onClick = onClick; this.$target = document.createElement('div'); this.$target.className = 'tab-bar'; $app.appendChild(this.$target); // 필요한 버튼 this.template = () => { let temp = `<div id="all">전체</div> <div id ="penguin">펭귄</div> <div id ="koala">코알라</div> <div id="panda">판다</div>`; return temp; }; this.render = () => { this.$target.innerHTML = this.template(); //$currentTab변수에 현재 state값과 동일한 아이디를 갖는 버튼 요소 할당 let $currentTab = document.getElementById(this.state); //$currentTab ? ($currentTab.className = "clicked") : ""; $currentTab && ($currentTab.className = "clicked"); 동물 앨범 만들기 2-2 강의부분에서 $currentTab 변수에 현재 state값과 동일한 아이디를 갖는 버튼 요소를 할당한다고 하셔쓴데, 왜 this.state가 들어가는지 이해가 가지 않습니다. this.state값은 initialState이고 initialState은 APP컴포넌트에서 빈문자열이었는데...그 뒤로 추론이 되지 않아서.... 흐름? 좀 알려주세요ㅡㅠ
ggang89
2024-11-08T12:30:50.356Z
댓글 2
좋아요 1
조회수 214
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
10.3) 해당 강의에서 TodoItem 컴퍼넌트 리렌더링 실행 조건을 memo 메서드를 이용하여 커스터마이징할 때, if (prevProps.isDone !== nextProps.isDone) return false; 이 문구에서 prevProps.isDone 값은 기존값이니 이해가 되었는데 nextProps.isDone 값은 해당 TodoItem 함수 내에 onCangeCheckbox 함수가 선행으로 실행이 되어야 알 수 있는 값 아닌가요? 그 전에 실행이 안 되도록 memo 메서드로 TodoItem의 리렌더링을 막고 있는데 어떻게 isDone 값이 바꼈다고 판단해서 리렌더링이 되는건지 모르겠습니다.
2024-11-07T15:50:51.088Z
댓글 2
좋아요 0
조회수 299
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 section04 폴더로 react 앱 만들기 실습에서 라이브러리들을 다운받기 위해 npm i 를 하려고 했는데, 아래 이미지와 같은 오류들이 발생합니다. 인터넷을 찾아보니 권한 문제때문이라고 하던데 단순하게 sudo npm i를 하면 되는 걸까요?
배현아
2024-11-07T09:07:00.042Z
댓글 2
좋아요 0
조회수 322
미해결
만들면서 배우는 리액트 : 기초
학습하는 환경이 내부망이라 <script src=" https://unpkg.com/react@18/umd/react.production.min.js " crossorigin></script> <script src=" https://unpkg.com/react-dom@18/umd/react-dom.production.min.js " crossorigin></script> <script src=" ">https://unpkg.com/babel-standalone@6/babel.min.js"></script> 위 js들을 직접 다운로드 받아 반입해야 하는데요.. 리액트 사이트에서 리액트 라이브러리는 다운로드가 되는데 babel은 다운로드가 안되네요;; js파일을 직접 다운로드할 수 있도록 학습용 코드 올려진 곳에 업로드 해주시면 감사하겠습니다.
스리에스
2024-11-07T08:50:08.003Z
댓글 1
좋아요 0
조회수 157
