173만명의 커뮤니티!! 함께 토론해봐요.
미해결
TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기
디자인 패턴을 공부하면서 실제 구현중인 서비스에 적용해보려고 노력중인데(위 이미지는 예시 코드) 예시 처럼 작성했을 때의 실효성이 invoker에서 audit log 같은 공통 코드 추출하는것 이외에 잘 느껴지지 않는데, 적절하지 않은 부분에 적용하려해서 그런것일까요? -> 단축키 예시처럼 해당 커맨드를 다른곳에서'도' 사용한다면 유용할것도 같네요!! 추가로 ValidateLeadFieldCommand, CreateLeadCommand 이런식으로 여러 커맨드가 순차로 실행해야하는 경우에 invoker도 커맨드마다 만들어야할까?하는 고민도 듭니다!
해결됨
대세는 바이브 코딩과 MCP_Cursor AI로 시작하기
Cursor AI를 제대로 활용하기 위한 핵심정리에서 설명하신 OpenAI의 모델별 비용을 해당 docs에서 확인이 가능하고 설명하신 내용도 이해가 됩니다. 하지만 Cursor를 유료로 사용하는 입장에서는 이와 같은 사항에 대해서는 따로 신경을 쓰지 않아도 되는게 아닌가요? Pricing | Cursor - The AI Code Editor cursor.com 의 pricing 정책 비교를 봐도 모델별로 약간의 제한이 있다고 하지만 pro plan만 들어가도 비용에 대해서는 걱정을 안해도 될거라고 생각을 하는데 제가 잘못알고 있는건가요?
해결됨
[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드
안녕하세요, 추가강의 듣고 여러번 시도를 해보았는데도 에러가 생겨서 문의 드립니다. 위 처럼 에러가 나고, 에러가 안보이실까봐 아래와 같이 로그만 별도로 복사하였습니다. The connection to the server was closed unexpectedly, perhaps it is offline. You can retry the request immediately or wait and retry later. Error details From HTTP Request Error code ECONNRESET Full message socket hang up Request { "body": { "url": " https://youtu.be/LCraVFYWFWU?si=rnsFK5-mVKxccDrT " }, "headers": { "accept": "application/json,text/html,application/xhtml+xml,application/xml,text/*;q=0.9, image/*;q=0.8, / ;q=0.7" }, "method": "POST", "uri": " http://host.docker.internal:9012/extract_subtitles ", "gzip": true, "rejectUnauthorized": true, "followRedirect": true, "resolveWithFullResponse": true, "followAllRedirects": true, "timeout": 300000, "encoding": null, "json": false, "useStream": true } Other info Item Index 0 Node type n8n-nodes-base.httpRequest Node version 4.2 (Latest) n8n version 1.98.1 (Self Hosted) Time 2025. 6. 18. 오후 3:40:16 Stack trace NodeApiError: The connection to the server was closed unexpectedly, perhaps it is offline. You can retry the request immediately or wait and retry later. at ExecuteContext.execute (/usr/local/lib/node_modules/n8n/node_modules/.pnpm/n8n-nodes-base@file+packages+nodes-base_@aws-sdk+credential-providers@3.808.0_asn1.js@5_12b981d6b49d407a163f4d5244314033/node_modules/n8n-nodes-base/nodes/HttpRequest/V3/HttpRequestV3.node.ts:769:15) at processTicksAndRejections (node:internal/process/task_queues:105:5) at WorkflowExecute.runNode (/usr/local/lib/node_modules/n8n/node_modules/.pnpm/n8n-core@file+packages+core_openai@4.78.1_encoding@0.1.13_zod@3.24.1_/node_modules/n8n-core/src/execution-engine/workflow-execute.ts:1185:9) at /usr/local/lib/node_modules/n8n/node_modules/.pnpm/n8n-core@file+packages+core_openai@4.78.1_encoding@0.1.13_zod@3.24.1_/node_modules/n8n-core/src/execution-engine/workflow-execute.ts:1534:27 at /usr/local/lib/node_modules/n8n/node_modules/.pnpm/n8n-core@file+packages+core_openai@4.78.1_encoding@0.1.13_zod@3.24.1_/node_modules/n8n-core/src/execution-engine/workflow-execute.ts:2098:11
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
export default function solution(arr) { let answer = 0; const m = arr.length; const n = arr[0].length; for (let i = 0; i < n; i++) { for (let j = i + 1; j < n; j++) { let cnt = 0; for (let k = 0; k < m; k++) { if (arr[k].indexOf(arr[0][i]) < arr[k].indexOf(arr[0][j])) cnt++; if (cnt === m) answer++; } } } return answer; }
해결됨
이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의
안녕하세요 우선 좋은 강의 정말 감사합니다. 풀스텍 강의라서 더 좋은거 같은데, 메일로 알람을 받았는데 선생님 강의 25%할인은 언제까지인가요? 지금 유료 강의 25%해서 24000원대 할인 기간이 안나와 있어서 기간이 궁금합니다. 아직 들어보지 못해서 무료 강의 한번 들어보고 유료강의도 진행하고 싶어서요 그리고 프로그램은 이클립스만 사용하시는거 같은데, 저는 인텔리제이 사용중인데 프로그램이 달라서 인텔리제이 사용자도 괜찮을까요?
해결됨
[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드
열정적인 강의 감사드립니다. [N8N으로 구현하는 나만의 RAG 시스템: 벡터 검색부터 AI 응답까지] 강좌에서 pdf 같은 텍스트 자료를 구글드라이브에서 가져오지 않고 n8n으로 바로 업로드 해서 활용하는 방법은 없을까요? railway에서 n8n을 호스트하다보니 Extract from File 노드에서 DOMMatrix is not defined 에러가 나와서요. 에러에 대해 찾아보니... 다음과 같은 DOMMatrix는 웹 브라우저 환경에 기본적으로 내장된 그래픽 관련 API 입니다. 웹페이지에서 2D 및 3D 그래픽 변환을 처리하는 데 사용됩니다. pdf-parse 라이브러리의 특정 버전은 PDF 내부의 그래픽 요소를 처리하기 위해 브라우저에만 존재하는 이 DOMMatrix를 사용 하려고 합니다. 하지만 n8n 워크플로우는 서버(Node.js) 환경 에서 실행됩니다. 서버 환경에는 그래픽을 렌더링할 화면이 없으므로, 당연히 DOMMatrix와 같은 브라우저 전용 API가 존재하지 않습니다 (is not defined) .) 라고 나와서 Extract from File 노드가 서버환경에서는 제대로 작동을 하지 않는 것 같습니다. 개인컴에 설치한 것과 환경이 달라서 종종 애를 먹고 있습니다. 제 컴이 old 해서 n8n을 돌리기에는 GPU가 역부족이라서요...ㅜㅜ
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
git : https://github.com/ture403/next_appRoute 입니다. 현재버전 : 에러: 이건 search/page.tsx 입니다. import BookItem from "@/components/book-item"; import BookListSeletion from "@/components/skeleton/book-list-seletion"; import { BookData } from "@/types"; import { delay } from "@/util/delay"; import { Suspense } from "react"; async function SearchResult({ q }: { q: string }) { await delay(1500); const res = await fetch(`${process.env.NEXT_PUBLIC_API_SEVER_URL}/book/search?q=${q}`); if (!res.ok) { return <div>오류가 발생했습니다.</div>; } const searchDatas: BookData[] = await res.json(); console.log(searchDatas); return ( <div> {searchDatas.map((book) => ( <BookItem key={book.id} {...book} /> ))} </div> ); } export default async function Page({ searchParams }: { searchParams: Promise<{ q?: string }> }) { const params = await searchParams; // searchParams Promise를 await 합니다. const query = params.q || ""; // q 값을 추출하고, 없으면 빈 문자열을 사용합니다. return ( <Suspense key={query} fallback={<BookListSeletion count={3} />}> <SearchResult q={query} /> </Suspense> ); } 봐주시면 감사겠습니다.
해결됨
[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드
메시지를 발송하면 그 시점 기준으로 최신 뉴스를 요약하여 보여주는 걸 구현해보고 싶었는데, 트리거에 텔레그램이 있지만 localhost 이다보니 웹훅이 제대로 안되는 것 같습니다. AI와 씨름하며 ngrok을 통해 설정을 해보았는데, TEST url의 주소는 바뀌었지만 역시나 product URL은 안바뀌었고, ACTIVE도 안되네요.. 이런 작업을 위해선 클라우드 서비스나 N8N SAAS를 이용해야할 것 같은데 (추후 자동화 자체를 24시간 돌리기 위해서도) 어떤 방식을 추천하시는지 궁금합니다!
미해결
프론트엔드 개발의 Kick, Web API (feat. React)
5,7,8,10,11,12,14,15,17,18,19번 강의가 음성만 있고 화면에 보여지는게 없는데, 의도된걸까요..? 저만 그런건지,,,ㅠㅠ
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
세션 9. 최종 프로젝트 cityDetail 개발-2 에서 https://trip-wiki-api.vercel.app/ 강사님이 알려주셨던 링크에는 상세페이지 이미지와 받는 정보가 없습니다! 어떻게 상세페이지를 출력할 수 있나요? Japan을 검색창에서 검색하고 상세페이지를 눌렀지만 아무런 정보가 출력되지 않고 있습니다! import Header from "./components/Header.js"; import RegionList from "./components/RegionList.js"; import CityList from "./components/CityList.js"; import CityDetail from "./components/CityDetail.js"; import { request, requestCityDetail } from "./components/api.js"; export default function App($app) { const getSortBy = () => { if (window.location.search) { return window.location.search.split("sort=")[1].split("&")[0]; } return "total"; }; const getSearchWord = () => { if (window.location.search && window.location.search.includes("search=")) { return window.location.search.split("search=")[1]; } return ""; }; this.state = { startIdx: 0, sortBy: getSortBy(), region: window.location.pathname.replace("/", ""), searchWord: getSearchWord(), cities: "", currentPage: window.location.pathname, }; const renderHeader = () => { new Header({ $app, initialState: { currentPage: this.state.currentPage, sortBy: this.state.sortBy, searchWord: this.state.searchWord, }, handleSortChange: async (sortBy) => { const pageUrl = `/${this.state.region}?sort=${sortBy}`; history.pushState( null, null, this.state.searchWord ? pageUrl + `&search=${this.state.searchWord}` : pageUrl ); const cities = await request( 0, this.state.region, sortBy, this.state.searchWord ); this.setState({ ...this.state, startIdx: 0, sortBy: sortBy, cities: cities, }); }, handleSearch: async (searchWord) => { history.pushState( null, null, `/${this.state.region}?sort=${this.state.sortBy}&search=${searchWord}` ); const cities = await request( 0, this.state.region, this.state.sortBy, searchWord ); this.setState({ ...this.state, startIdx: 0, cities: cities, searchWord: searchWord, }); }, }); }; const renderRegionList = () => { new RegionList({ $app, initialState: this.state.region, handleRegion: async (region) => { history.pushState(null, null, `/${region}?sort=total`); const cities = await request(0, region, "total"); this.setState({ ...this.state, startIdx: 0, sortBy: "total", region: region, cities: cities, searchWord: "", currentPage: `/${region}`, }); }, }); }; const renderCityList = () => { new CityList({ $app, initialState: this.state.cities, handleItemClick: async (id) => { history.pushState(null, null, `/city/${id}`); this.setState({ ...this.state, currentPage: `/city/${id}`, }); }, handleLoadMore: async () => { const newStartIdx = this.state.startIdx + 40; const newCities = await request( newStartIdx, this.state.region, this.state.sortBy ); this.setState({ ...this.state, startIdx: newStartIdx, cities: { ...this.state.cities, cities: [...this.state.cities.cities, ...newCities.cities], isEnd: newCities.isEnd, }, }); }, }); }; const renderCityDetail = async (cityId) => { try { const cityDetailData = await requestCityDetail(cityId); new CityDetail({ $app, initialState: cityDetailData }); } catch (err) { console.log(err); } }; const render = async () => { const path = this.state.currentPage; $app.innerHTML = ""; // 상세 페이지로 이동 if (path.startsWith("/city/")) { const cityId = path.split("/city/")[1]; renderHeader(); renderCityDetail(cityId); } else { renderHeader(); renderRegionList(); renderCityList(); } }; this.setState = (newState) => { this.state = newState; render(); }; const init = async () => { const path = this.state.currentPage; // 메인 페이지 if (!path.startsWith("/city")) { const cities = await request( this.state.startIdx, this.state.region, this.state.sortBy, this.state.searchWord ); this.setState({ ...this.state, cities: cities, }); } // 상세페이지 else { render(); } }; window.addEventListener("popstate", async () => { const urlPath = window.location.pathname; const prevRegion = urlPath.replace("/", ""); const prevPage = urlPath; const prevSortBy = getSortBy(); const prevSearchWord = getSearchWord(); const prevStartIdx = 0; const prevCities = await request( prevStartIdx, prevRegion, prevSortBy, prevSearchWord ); this.setState({ ...this.state, startIdx: prevStartIdx, sortBy: prevSortBy, region: prevRegion, currentPage: prevPage, searchWord: prevSearchWord, cities: prevCities, }); }); init(); } //API.js 코드입니다! export default function CityDetail({ $app, initialState }) { this.state = initialState; this.$target = document.createElement("div"); this.$target.className = "city-detail"; $app.appendChild(this.$target); const getScoreColor = (score) => { // let scoreNumber = parseInt(score); if (score >= 4) return "green"; if (score >= 3) return "yellow"; return "red"; }; this.template = () => { let cityData = this.state.CityDetail; let temp = ``; if (cityData) { temp = `<div class="image-banner"> <img src="${cityData.image}"/> <div class="city-name"> <div class="city">${cityData.city}</div> <div class="country">${cityData.region} / ${cityData.country}</div> </div> </div> <div class="progress-container"> <div class="info-item"> <div class="label">⭐ Total Score</div> <div class="progress-bar" score-color="${getScoreColor( cityData.total )}" style="--score:${cityData.total * 20}%"></div> </div> <div class="info-item"> <div class="label">💵 Cost</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.cost )}" style="--score:${cityData.info.cost * 20}%"></div> </div> <div class="info-item"> <div class="label">😆 Fun</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.fun )}" style="--score:${cityData.info.fun * 20}%"></div> </div> <div class="info-item"> <div class="label">🚓 Safety</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.safety )}" style="--score:${cityData.info.safety * 20}%"></div> </div> <div class="info-item"> <div class="label">🌐 Internet</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.internet )}" style="--score:${cityData.info.internet * 20}%"></div> </div> <div class="info-item"> <div class="label">💨 Air Condition</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.air )}" style="--score: ${cityData.info.air * 20}%"></div> </div> <div class="info-item"> <div class="label">🍜 Food</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.food )}" style="--score: ${cityData.info.food * 20}%"></div> </div> </div> `; } return temp; }; this.render = () => { this.$target.innerHTML = this.template(); }; /* this.setState = (newState) => { this.state = newState; this.render(); }; */ this.render(); } //cityDetail.js 상세페이지 코드입니다!
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
안녕하세요 테일윈드 강의에서 반응형 부분의 강의를 보다가 궁금한 점이 생겨 여쭤보고 싶어 글을 남깁니다. 예를 들어 모바일 청첩장처럼 모바일사이즈만 사용할 경우 리액트에서는 처음에 라이브러리를 사용하지 않고 모바일 사이즈로만 설정하는 방법이 궁금합니다. 그리고 테일윈드에서 모바일 사이즈만 할 경우에는 sm 이 부분만 사용을 설정하면 되는지 궁금합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
터미널에 vercel을 설치하려는데 자꾸 이렇게 뜨고 제가 맥os를 사용중이라 sudo npm i -g vercel 이것도 넣어봤더니 패스워드 입력하라고 뜨는데 입력이 아예 안 되네요.. 그냥 엔터 누르면 다시 시도하라고 뜨는데 어떻게 해야 설치 가능한가요?ㅜㅜ
미해결
LangGraph를 활용한 AI Agent 개발 (feat. MCP)
커널 재실행 직후 run all 하면 토큰 수 제한 에러가 뜹니다. 다시 run all하면 잘 실행되구요. websearch 후 generate의 query 찍어보면 토큰 수 제한 걸릴일이 없는 문장인데 왜이럴까요? websearch 후 generate의 query 값이 "쿼리입니다 === " 이 부분입니다.
해결됨
[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드
GetMail의 크레덴셜이 적용된 메일만 UID값이 나오더라구요! 그래서 계속 크레덴셜이 네이버인데, 지메일 워크플로우 중 겟메일에서 아웃풋 값이 안나와 많이 해메었네요.. 이 부분이 강의에선 따로 말씀이 없으셨는지, 제가 못들은건지 잘 모르겠어유 ㅠㅠ 최종적으로 아래와 같이 구현하여 자동으로까지 잘 작동되는 걸 확인했습니다! 고생해도 실제로 생각대로 구현이 되니 매우 기분이 좋네요 ㅎㅎ.. 추가적으로 궁금한 부분은 현재 제 워크플로우는 스위치에서 양쪽으로 값을 보내고 지메일이면 아래에서만 아웃풋이 나와 정크로 가고, 네이버면 위에서만 아웃풋이 나와 정크로갑니다. 뭔가 직감적으로 조금 위험한 구조다(?) 라는 생각이 드는데, 혹시 더 효율적으로 노드를 구성하는 방법이 있나 궁금하고, 제목처럼 워크플로우를 어디까지 하나의 워크플로우로 하는 게 효율적일까 라는 궁금증도 생겼습니다. 사실 이정도면 그냥 edit field 없이 네이버 구현한것처럼 짧게 구글을 하나로 구현하는 게 맞지 않나 싶기도 해서요! 아 추가적으로 만약 이 워크플로우를 계속 active가 되도록 하려면 결국 컴퓨터를 계속하여 켜놔야 하는거겠죠.,,?
미해결
JavaScript 베이스캠프
async function getData() { const jsonData = [ { id: 1, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img1.jpeg', }, { id: 2, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img2.jpeg', }, { id: 3, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img3.jpeg', }, { id: 4, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img4.jpeg', }, { id: 4, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img4.jpeg', }, { id: 5, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img5.jpeg', }, { id: 6, productName: '버그를 Java라 버그잡는 개리씨 키링 개발자키링 금속키링', price: 12500, stokeCount: 100, thumbnailImg: 'assets/img6.jpeg', }, ]; const response = new Response(JSON.stringify(jsonData), { status: 200, statusText: 'OK', headers: { 'Content-Type': 'application/json', }, }); fetch('https://test.api.weniv.co.kr/mall') .then((res) => { if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`); } return re.json(); //응답을 json으로 파싱 }) .then((data) => console.log(data)) .catch((error) => console.log('Error:', error)); const productData = await response.json(); return productData; } function createProductCard(product) { const card = document.createElement('section'); card.classList.add('card'); card.innerText = 'hello world'; return card; } function render(product) { const container = document.querySelector('.container'); container.innerHTML = ''; products.forEach((product) => { const card = createProductCard(product); container.appendChild(card); }); } async function main() { const productData = await getData(); render(productData); }
해결됨
[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드
ollama가 제 컴퓨터에선 구현이 되어서 llm model 을 gpt대신 연결해보았씁니다. llama 3.2는 한글만 내뱉지 않아서, exaone3.5를 다운받아 적용해보았습니다. 혹시 ollama외에서 다른 더 나은 모델들을 무료로 사용해볼 수 있을까요?? 이렇게 ollama를 사용할 경우엔 serpAPI와 연동이 안되더라구요. GPT로하니까 연결이 되던데 이건 혹시 무슨이유인지 알 수 있을까요??
해결됨
[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드
현재 데스크톱과 노트북 두 곳에서 모두 작업을 번갈아가며 하기에 n8n을 함께 이어서 활용하고 싶은데 각 도커로 호스트를 하면 독립적인 공간이 되는건가요?? 노트북을 키지 않고는 데스크톱으로 노트북과 같은 환경에서 N8N 작업을 이어서 할 수 없는건지 궁금합니다.
해결됨
[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드
안녕하세요. 강의 ' AI Agent에 직접 Google API 를 사용해서 구글 검색 툴 작성하기 '에서 'http request' 세팅을 남박사님이 알려준 방식으로 한 것 같은데, 채팅에 " 오늘 날짜가 뭐야?"라고 입력 하면 '저는 현재 날짜를 알 수 없습니다."라고 답을 합니다. 결국 'http reques'이 작동을 안하고 있습니다. 무엇이 문제 일까요? 아래 이미지는 제가 n8n으로 수행한 것들을 캡쳐 한겁니다. 확인 부탁합니다.
해결됨
[인프런어워드 베스트셀러] 코딩 없이 AI 자동화 전문가가 되는 법, n8n 완벽 가이드
안녕하세요. 12강에 도커 서버구축 파일들은 어디서 다운이 가능한가요? heroku를 쓰고 있는데 거기에 설치를 한번 해볼려고 합니다.
해결됨
웹 프론트엔드를 위한 자바스크립트 첫걸음
강의 : 5. 북마크바 만들기 북마크바 디폴트 화면이 '북마크 열기'(bookmark-close)로 뜨면서 북마크가 열려있는 상태(?)로 나옵니다. 그리고 북마크 열기를 클릭하면, 의도한 바처럼 '북마크 열기'(bookmark-close)가 뜨면서 북마크가 닫힌 상태로 바뀌고, 다시 클릭 시 '북마크 닫기'(bookmark-open)가 뜨고 북마크가 열린 상태로 나옵니다. 즉, 두번째 액션부터 정상적으로 작동이 되는데요 ㅠㅠ [디폴트 화면] 효빈 강사님께서 작성한 예시 그대로 작업했는데 뭐가 문제인걸까요?? <!-- 북마크 열린 상태 --> <div class="bookmark-open" id="bookmark-open"> <div id="bookmark-open-btn">북마크 닫기</div> </div> <!-- 북마크 닫힌 상태 --> <div class="bookmark-close" id="bookmark-close"> <div id="bookmark-close-btn">북마크 열기</div> </div> <div class="bookmark-bar" id="bookmark-bar"> <!-- 북마크 바 --> </div> .bookmark-open { display: flex; justify-content: flex-end; position: absolute; top: 0; right: 0; width: 240px; height: 20px; padding: 15px 30px; font-size: var(--xsmall); background-color: rgba(0, 0, 0, 0.5); color: #fff; } .bookmark-close { display: flex; justify-content: flex-end; position: absolute; top: 0; right: 0; width: 240px; height: 20px; padding: 15px 30px; font-size: var(--xsmall); background-color: rgba(0, 0, 0, 0.5); color: #fff; } .bookmark-open div { cursor: pointer; } .bookmark-close div { cursor: pointer; } .bookmark-bar { position: absolute; top: 50px; right: 0; min-height: calc(100vh - 70px); width: 240px; padding: 10px 30px; background-color: rgba(0, 0, 0, 0.5); color: #fff; } const bookMarkBar = document.getElementById("bookmark-bar"); const Open = document.getElementById("bookmark-open"); const Close = document.getElementById("bookmark-close"); // 북마크 바 열기 및 닫기 const bookmarkBarToggle = () => { const isBookMarkBarOpen = localStorage.getItem("isBookMarkBarOpen"); if (isBookMarkBarOpen) { if (isBookMarkBarOpen === "open") { localStorage.setItem("isBookMarkBarOpen", "close"); bookMarkBar.style.display = "none"; Open.style.display = "none"; Close.style.display = "flex"; } else { localStorage.setItem("isBookMarkBarOpen", "open"); bookMarkBar.style.display = "block"; Open.style.display = "flex"; Close.style.display = "none"; } } else { localStorage.setItem("isBookMarkBarOpen", "close"); bookMarkBar.style.display = "none"; Open.style.display = "none"; Close.style.display = "flex"; } }; document .getElementById("bookmark-open-btn") .addEventListener("click", bookmarkBarToggle); document .getElementById("bookmark-close-btn") .addEventListener("click", bookmarkBarToggle);
