예시 코드가 안될때,
예시 코드를 그대로 했어도 안되는가? 아주 사소한 요소를 빼서 그럴 수도 있다. 예시 코드와 내 코드를 세세히 비교해보고 하나씩 바꿔서 차이점을 살펴보라. 대부분은 결국 휴먼 에러에서 발생한다.
너의과학
기타 기술 글
예시 코드를 그대로 했어도 안되는가? 아주 사소한 요소를 빼서 그럴 수도 있다. 예시 코드와 내 코드를 세세히 비교해보고 하나씩 바꿔서 차이점을 살펴보라. 대부분은 결국 휴먼 에러에서 발생한다.
[https://developer.mozilla.org/ko/docs/Web/HTTP/Status](https://developer.mozilla.org/ko/docs/Web/HTTP/Status)
동일한 계정으로 트랜잭션을 여러번 날렸을때, 여러 개의 트랜잭션마다 넌스를 다르게 해서 날렸는지 확인해야 한다. 여러개의 트랜잭션 중 우선하는 트랜잭션이 완료되지 않은 상태에서 다른 트랜잭션을 날릴때, 넌스를 조회하면 해당 넌스는 업데이트 되지 않고 진행 중인 트랜잭션과 동일한 넌스가 설정될 수 있다. 완료가 되지 않았다는 것은 블록이
 ▲ Cloudflare DNS Records — blog/api/dev 서브도메인 A 레코드 추가 완료 (? Proxied) ] - Naver Business Platform으로 현재 Naver Cloud [SSH] - 서버 보안에 있어서 가장 대표적이고 유용한 수단 - Secure Shell의 줄임말로, 원격 호스트에 접속하기 위해 사용되는 보안 프로토콜.
- 기획 내용이 Figma로 나오면, - 화면 또는 프론트 시나리오를 체크하고 - 시나리오도 기획팀과 확정을 하고 - 각 화면 별로 필요한 데이터를 나열한다. - 그리고 데이터의 구조를 어떻게 할지, 데이터베이스 등을 설계한다. - 그리고 작업하기
[https://ko.react.dev/reference/react/useCallback](https://ko.react.dev/reference/react/useCallback)
[tmux 설치는 googling or chatgpt를 통해 진행하세요.] <새로운 세션 생성> : tmux new -s mysession (하나의 PC에서 여러 github 계정 사용할때 괜춘할듯한데) <수직 분할> : [Crtl + b] , % <수평 분할> : [Crtl + b] , " <분할
$ telnet ip port [https://solbel.tistory.com/969](https://solbel.tistory.com/969)
## ? 문제 상황 sv-practice.johnnyji.dev 서브도메인으로 접속이 되지 않는 문제가 발생했다. Vercel 대시보드에서는 **Valid Configuration**으로 표시되고 있었지만 실제 브라우저에서 접속하면 오류 페이지가 나타났다. ## ? 구성 환경 서비스 역할 설정 항목 Cloudflare DNS 관리 CNAME 레코
학습목표) - Create token mints - Create token accounts - Mint tokens - Transfer tokens - Burn tokens - SPL (Solana 공부 하다보면 자주 볼 수 있습니다.) >> SPL은 Solana Program Library의 약자로 Solana 개발에 필요한
[https://en.wikipedia.org/wiki/Single-responsibility_principle](https://en.wikipedia.org/wiki/Single-responsibility_principle)
The open source, in-memory data store used by millions of developers as a database, cache, streaming engine, and message broker. - 수백만 명의 개발자가 **데이터베이스, 캐시, 스트리밍 엔진 및 메시지 브로커로 사용**하는 **오픈 소스 인메모리 데이
const navigate = useNavigate(); navigate(0); // refresh navigate('/pathname') A-page => B-page로 이동하면서 location에 데이터 전달 <Link to={`/manage_wallet_detail/${item.id}`} state=
root@############:/workspaces/{repository}# git push fatal: could not read Username for '[https://github.com':](https://github.com':) terminal prompts disabled fatal: could not read Usernam
[https://velog.io/@wheezy_han/Node.js-nodemon-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%8B%A4%ED%96%89%EB%B0%A9%EB%B2%95](https://velog.io/@wheezy_han/Node.js-nodemon-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%8B%A4%ED
[https://www.youtube.com/watch?v=ZM4H-99HfuY](https://www.youtube.com/watch?v=ZM4H-99HfuY)
## 1. NGINX 소개 - **NGINX란?** NGINX는 고성능 웹 서버, 리버스 프록시, 로드 밸런서 및 HTTP 캐시 서버로 사용됩니다. - 이벤트 기반 비동기 아키텍처를 채택하여 다수의 동시 접속을 효율적으로 처리할 수 있습니다. - 정적 콘텐츠 서빙, SSL/TLS 종료, 압축 등 다양한 기능을 제공합니다. - **NGINX의 주요 사
[https://velog.io/@nemo/nextjs-parsing-error](https://velog.io/@nemo/nextjs-parsing-error)
1. main.ts const server = express(); const app = await NestFactory.create<NestExpressApplication>(###Module, new ExpressAdapter(server)); - create의 type : NestExpressApplication이다. - ###Mod
node ➜ /workspaces/all-chain-nft-market (nestjs-api-server) $ nest new ⚡ We will scaffold your app in a few seconds.. ? What name would you like to use for the new project? blockchain-api-server ?
[https://8millimeters.tistory.com/14](https://8millimeters.tistory.com/14)
[https://www.redhat.com/en/topics/cloud-computing/what-is-multitenancy](https://www.redhat.com/en/topics/cloud-computing/what-is-multitenancy)
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#identifiers](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#identifiers)
'abcde'.startsWith('a') => 'abcde'를 검사해서 'a'로 시작하니 true를 반환 'abcde'.startsWith('a', 2) => 'cde'를 검사해서 'a'로 시작하지 않으니 false를 반환 'abcde'.startsWith('A') => 'abcde'를 검사해서 'A'로 시작하지 않으니(대소구분
[https://www.tcpschool.com/java/java_inheritance_super](https://www.tcpschool.com/java/java_inheritance_super)
[https://kongda.tistory.com/4](https://kongda.tistory.com/4)
Session1) Course Introduction - AWS Certified Developer Associate 1. Course Introduction - AWS Certified Developer Associated -- 2. PLEASE READ: Lectures you can skip if you took a course from me
[https://nextjs.org/learn/foundations/from-javascript-to-react/updating-ui-with-javascript](https://nextjs.org/learn/foundations/from-javascript-to-react/updating-ui-with-javascript) ### Imperati
[https://graphql.org/](https://graphql.org/)
 아래 링크에서 처럼 계정 id 비번을 링크 하드코딩해서 다음받았다, 다른 설정으로 이슈 해결은 못한상태 [https://kibua20.tistory.com/88](https://kibua20.tistor
[https://kimce.tistory.com/36](https://kimce.tistory.com/36)
**[2023-11-10, 작성]** **상황 설명)** docker container Volume에 repository(gitlab)를 clone해서 작업하려고 한다. VsCode > Clone Repository in Container Volume… > 아래 repository 링크 기입 [https://gitlab.com/{com
여러 계정 사용 중, 원격 repository에 push ~~~ git push -u origin main Reinitialized existing Git repository in /Users/johnnyji/projects/courtNotifi/.git/ [main (root-commit) 3ab33fc] first commit 1 fi
fatal: unable to access '[https://gitlab.com/*****.git/':](https://gitlab.com/nif-partners/crypto-grid.git/':) server certificate verification failed. CAfile: none CRLfile: none git config
**1. Introduction** The Edwards-curve Digital Signature Algorithm (EdDSA) is a varient of Schnorr's signature system with (possibly twisted) Edwards curves. - EdDSA는 (possibly twisted) Edwards curv
Solidity is an object-oriented, high-level language for implementing smart contracts.
   Cloning into 'courtalami'... Username for '[https://githu
1. EC2 서버를 생성하고, pem 파일 다운로드 받는다. 2. pem파일의 권한을 변경한다. ( chmod 400 my-key-pair.pem) 3. ssh -i my-key-pair.pem ubuntu@{ec2-public-ip}
**일반적으로 구글링을 통해 검색된 Java Exception 관련 내용은** **JavaSpring 프레임워크 상의 Exception에 관련된 설명이 대부분이다.** **이 설명들은** **Checked Exception은 process가 동작 중 해당 Excpetion으로 인해 process가 kill되는 Exception을 말하는 것이고**
맥북 brew services start mysql : 서비스 시작 brew services stop mysql : 서비스 종료 brew services restart mysql : 서비스 재시작 $brew services start mysql Service `mysql` already started, use `brew services res
[https://timestamp.online/article/how-to-convert-timestamp-to-datetime-in-javascript](https://timestamp.online/article/how-to-convert-timestamp-to-datetime-in-javascript)
[https://codingeverybody.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-map-%ED%95%A8%EC%88%98/](https://codingeverybody.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-map-%ED%9
배경설명) - devnet에서 SPL-token minting을 진행했고, 2022 Program이 아닌 과거 버전을 사용 개발을 진행했다. - devnet에서 개발은 정상적으로 완료되었지만, mainnet-beta에서 token minting을 진행하던 중 - >> clusterApiUrl을 활용해 endpoint를 사용하니, 아래와 같
axios async await로 크롤링 호출을 8번한 데이터들을 배열에 넣으려고 했지만 한번에 쌓이지 않았다. 방안1) 데이터를 모두 받아온 후에 가공해서 넣어야 할 거같다 map으로 할때 실패함... for문으로 해봐? .. 11초 걸린다
#### [2022년 09월 24일 Window10-64bit 기준] ### [목표] Linux ps 명령어로 프로세스 정보를 살펴본다. ----- ### [준비물] vmware(Ubuntu 22.04 LTS) 실행 putty 접속 ([접속 방법](https://yigongyikong.tistory.com/866?category=935067))
상황 : nestjs에 web3js를 import하고, web3.eth.getBlockNumber(); 호출시 아래 에러 발생 [Nest] 58552 - 02/26/2023, 6:24:50 PM ERROR [ExceptionsHandler] web3_1.default is not a constructor TypeError: web3_1.defaul
**[환경]** Hardware : - MacBook M2 Software : - MySQL {pc-name}@{pc-name}ui-MacBookPro ~ % mysql --version mysql Ver 9.0.1 for macos13.6 on arm64 (Homebrew) - nodejs const my
[Terminal을 통해 brew 명령으로 설치] {pc-name}@{pc-name}ui-MacBookPro ~ % brew install mysql ==> Downloading https://formulae.brew.sh/api/formula.jws.json ################################
### [목표] Linux /etc/passwd 파일에서 계정 정보를 확인합니다. ----- ### [목표] cat /etc/passwd : 리스트 조회 root@e65e47b9973f:/workspaces/{repository-name}# cat /etc/passwd root:x:0:0:root:/root:/bin/bash d
#### [2022년 10월 10일 Window10-64bit 기준] ### [목표] Linux awk 입력을 분리명령어로 프로세스 정보를 살펴본다. ----- ### [준비물] vmware(Ubuntu 22.04 LTS) 실행 putty 접속 ([접속 방법](https://yigongyikong.tistory.com/866?category=9
#### [2022년 09월 06일 Window10-64bit 기준] ### [목표] Linux ps 명령어로 프로세스 정보를 살펴본다. ----- ### [준비물] vmware(Ubuntu 22.04 LTS) 실행 putty 접속 ([접속 방법](https://yigongyikong.tistory.com/866?category=935067))
#### [2022년 09월 04일 Window10-64bit 기준] ### [목표] Linux crontab 사용법에 대해 살펴본다. ----- ### [준비물] vmware(Ubuntu 22.04 LTS) 실행 putty 접속 ([접속 방법](https://yigongyikong.tistory.com/866?category=935067))
#### [2022년 09월 04일 Window10-64bit 기준] ### [목표] Linux 에디터 vi(vim) 사용법에 대해 살펴보고, 일부 기본 설정 변경을 확인한다. ----- ### [준비물] vmware(Ubuntu 22.04 LTS) 실행 putty 접속 ([접속 방법](https://yigongyikong.tistory.com
#### [2022년 09월 01일 Window10-64bit 기준] ### [목표] Linux 주요 디렉토리를 알아본다. ----- ### [리눅스 주요 디렉토리] - /bin : 기본 명령어 바이너리를 저장한다. - /dev : 장치(device) 파일을 저장한다. - /etc : 설정 파일을 저장한다. - /home : 사용자 홈
#### [2022년 09월 01일 Window10-64bit 기준] ### [목표] Linux-ubuntu의 패키지 program을 관리한다. ----- ### [1-apt에 설정된 기본 레파지토리의 정보를 이용하여 파일을 설치합니다.] vmware(Ubuntu 22.04 LTS) 실행 apt install [program 명] : progr
#### [2022년 08월 31일 Window10-64bit 기준] ### [목표] shell 프로그램을 실행하는 다양한 방법을 알아본다. ----- ### [준비물] vmware(Ubuntu 22.04 LTS) 실행 putty 접속 ([접속 방법](https://yigongyikong.tistory.com/866?category=935067
#### [2022년 08월 30일 Window10-64bit 기준] ### [목표] Linux-ubuntu의 커널 버전을 확인한다. ----- ### [준비물] vmware(Ubuntu 22.04 LTS) 실행 putty 접속 ([접속 방법](https://yigongyikong.tistory.com/866?category=935067))
#### [2022년 08월 08일 Window10-64bit 기준] ### [목표] putty 터미널의 ssh 통신으로 vmware 가상 머신에 돌고 있는 ubuntu에 접속한다. ----- ### [준비물] putty ([설치파일-페이지](https://www.chiark.greenend.org.uk/~sgtatham/putty/lat
#### [2022년 08월 07일 Window10-64bit 기준] ### [목표] vmware 가상 머신을 통해, linux 환경을 구축한다. (linux는 ubuntu 이미지를 사용) ----- ### [준비물] vmware 설치([설치파일-페이지](https://www.vmware.com/kr/products/workstation-p
환경 : IOS, I-MAC (intel i9) 새로운 세션 만들기 (mysession 은 원하는 이름으로 지정) tmux new -s mysession
int : primitive type Integer : The {@Code Integer} class wraps a value of the primitive type {@code int} package com.local.test; /** * Hello world! * */ public class A
**[[An Introduction to JavaScript]]** - Let’s see what’s so special about JavaScript, what we can achieve with it, and what other technologies play well with it. -- JavaScript의 특별한 점, JavaScript로 무
SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder". SLF4J: Defaulting to no-operation (NOP) logger implementation SLF4J: See [http://www.slf4j.org/codes.html#StaticLoggerBinder](http:/
**배경&환경)** {A-account} 와 {B-account} 두 개의 github 계정을 사용하고 있다. 평소 {B-account} 계정으로 작업을 하고 있었고, {A-account} 계정을 사용하려던 중이였다. **의도)** {B-account}
**- <View style={{alignItems:'center'}} >** **horizontal 가운데 정렬** **</View>** **- <View style={{justifyContent: 'center'**}} > **vertical
**01-01_FCND]** **01-02_JOC]** **01-03_Why is Docker?] : 일반적인 software 사용을 위한 설치과정에서 격는 어려움이 존재한다** - 일반적으로 software를 설치하기 위해서는 아래와 같은 절차가 필요하다 - 그리고 설치과정에는 에러를 마주할 가능성이 있고, 이를 해결하기 위해서는 상당히 시간과 비
#### [2023년 06월 03일 기준] ### [목표] nestjs(nodejs) application을 최초 실행했다가 'ctrl' + 'z'로 강제 빠져나온 후, 재실행시 이미 사용중인 PORT 라는 에러 메시지(Error: listen EADDRINUSE: address already in use PORT#)가 나온다. 이미 실행 중인 p
[[What I ]] [What is SQLite] - SQLite has the following noticeable features: self-contained, serverless, zero-configuration, transactional. -- SQLite에는 독립형, 서버리스, 구성 없음, 트랜잭션이라는 눈에 띄는 기능이 있습
word-break: break-all; See the Pen [ CodePen Home [CSS] word-break(01)](https://codepen.io/yikong-yigong/pen/jOooxZp) by yikong yigong ([@yikong-yigong](https://codepen.io/yikong-yigong)) on
[개발PC : MacBook] Chapter18) 사용자 분석하기:구글 애널리틱스 학습 목표 : 웹사이트에 사용자들이 어떤 경로를 통해 유입되었는지, 사이트 내에서 어떤 행동을 하는지 궁금한가요? 이번 장에서 구글 애널리틱스를 사용해 사용자 분석을 하는 방법을 알아보겠습니다. 이벤트 생성을 도와주는 구글 태그 매니저와 구글 애널리틱스를 연동해서 사
[개발PC : MacBook] Chapter11) 슬라이드 만들기2 : 국내 차트, 유튜브 학습 목표 : 국내 통계 데이터를 가공하여 다양한 차트 형태로, 유튜브 API를 통해 관련 영상을 검색하여 웹사이트에 원하는 형태로 보여주는 기능을 구현합니다.  슬라이드 만들기1 : 국가별, 글로벌 차트 학습 목표 : 국가별 통계 데이터를 세계 지도와 표 형식으로 볼 수 있는 국가별 현황 슬라이드를 구현하고, 일반/누적 차트 형식으로 날짜별 추이를 볼 수 있는 글로벌 차트 슬라이드를 구현합니다.  대시보드와 공지사항 만들기 학습 목표 : 전 세계 및 대한민국의 코로나19 관련 현황을 한눈에 요약하여 볼 수 있는 대시보드와 공지사항을 기능을 구현합니다.  [사전 준비 : 라이브
[개발PC : MacBook] Chapter08) 실전 크롤러 만들기 학습 목표 : 질병관리청의 코로나19 클론 사이트와 월드오미터 클론 사이트에서 각각 국내 코로나 통계와 세계 각국의 통계를 크롤링하는 크롤러를 만들어봅시다.  [
[개발PC : MacBook] Chapter07) 시각화로 핵심 정보 전달하기 학습 목표 : 목적에 맞게 데이터를 시각화하는 방법과 구글 테이블, 지오차트(GeoChart), 이차트(EChart) 사용법을 알아봅니다.  데이터를 테
[개발PC : MacBook] Chapter06) 반응형 웹 디자인하기, 부트스트랩 학습 목표 : 부트스크랩이 무엇인지 알아보고 자주 사용하는 부트스트랩 컴포넌트들을 살펴봅시다. 부트스트랩의 그리드 시스템을 이용하여 반응형 디자인의 웹페이지를 만드는 방법을 이해합니다.  웹사이트 UI 구성하기 : 개츠비 학습 목표 : 개츠비는 정적 웹사이트 개발 프레임워크입니다. 이번 장에서는 개츠비를 이용한 개발 환경을 구축하고, 백엔드에서 데이터를 불러와서 정적 웹사이트를 빌드해봅니다.  데이터 자동 수집하기 : 크롤링 학습 목표 : 인터넷에 존재하는 코로나19 관련 데이터를 제공하는 다양한 데이터 소스를 크롤링(crawling)하여 원하는 데이터를 추출, 가공하여 저장할 수 있습니다. 원하는 시간에 원하는 주기로 크롤링하는 크롤러를 만들어 최신 데이터를 확보합시다. !
[개발PC : MacBook] Chapter03) 저장소 구축하기 구글시트 학습 목표 : 구글 시트 서비스를 이용하여 스프레드시트에 콘텐츠를 입력, 가공, 활용해봅니다.  구글 시트(Google Sheets)는 구글에서 제공하는 무
[개발PC : MacBook] Chapter02) API 서버 만들기 학습 목표 : 코로나19 통계 데이터를 저장하고 조회하는 API를 제공하는 웹 애플리케이션 서버(API 서버)를 만들어봅시다. 노드JS와 익스프레스 프레임워크를 기반으로 구현하겠습니다.  코로나보드 아키텍처와 웹 서비스 학습 목표 : 코로나보드의 프론트엔드와 백엔드의 전체적인 아키텍처를 파악하고, 이러한 아키텍처로 설계된 이유를 알아봅시다.  [개발 언어 선택하기]
[개발PC : MacBook] Chapter00) 개발 환경 구축 학습 목표 : Nodejs와 MySQL을 설치하고 실행한다. [설치된 Nodejs 버전 확인 명령어] $ node --version [설치된 MySQL 버전 확인 명령어] $ mysql --version [MySQL 서버 일회성 실행 명령어] $ mysql.server sta
~
[https://ipfs.tech/](https://ipfs.tech/)
a standard defined to make BIP-32 easy to adapt to any future compatible blockchain [https://docs.ethers.org/v5/api/utils/hdnode/#hdnodes](https://docs.ethers.org/v5/api/utils/hdnode/#hdnodes)
the method used to derive the BIP-32 seed from human-readable sequences of words (i.e. a mnemonic) [https://docs.ethers.org/v5/api/utils/hdnode/#hdnodes](https://docs.ethers.org/v5/api/utils/hdnode/
the hierarchal deterministic description [https://docs.ethers.org/v5/api/utils/hdnode/#hdnodes](https://docs.ethers.org/v5/api/utils/hdnode/#hdnodes)
**[2024-03-03 작성한 내용입니다.]** 1. 2024년01월에 개인 프로젝트를 위해 AWS를 사용했고, 예상하지 못한 금액이 청구됨을 확인했습니다. (1년간 free-tier로 알고 있었는데 아닌게 있었나 합니다.)  [Solidity Tutorial] - Solidity is a contract-oriented, high-level programming language for
[개발PC : MacBook] Chapter19) 광고로 웹사이트 수익화하기 학습 목표 : 서비스로 개발하고 운영하는 데 상당한 노력과 비용이 듭니다. 어떤 서비스든 지속적으로 운영하고 발전시켜 나가려면 어떤 방식으로든 수익화가 필요합니다. 구글 애드센스와 쿠팡 파트너스를 활용해 광고 수익을 창출하는 방법을 알아보겠습니다. ![im
[개발PC : MacBook] Chapter17) 검색 엔진에 알리기 학습 목표 : 네이버와 구글 검색 엔진에 웹사이트를 등록하는 방법과 검색 결과에 웹사이트가 더 잘 노출되게 하는 SEO(search engine optimzation, 검색 엔진 최적화)를 알아보겠습니다.  도메인 연결하기 학습 목표 : 사이트를 운영할 환경 준비를 마쳤으니 사용자들에게 알릴 차례입니다. 쉬운 도메인 주소를 제공하는 것이 중요합니다. S3의 정적 웹사이트 호스팅 기능에서 기본 제공하는 사이트 주소는 매우 길어 기억하기 어렵습니다.  파일 서버 운영하기:AWS S3 학습 목표 : 개츠비 CLI 명령어를 통해 빌드된 정적 웹사이트 파일들을 AWS S3에 업로드한 후 S3의 정적 웹사이트를 호스팅 기능을 사용해 운영합니다. 주기적으로 사이드를 빌드 및 배포해 업데이트된 데이터를 반영하는 설정을 추가합니다. ![imag
[개발PC : MacBook] Chapter14) 서비스 올리기:AWS EC2 학습 목표 : 코로나보드 운영에 사용할 애플리케이션 서버 인스턴스를 EC2(Elastic Computing Cloud) 콘솔에서 생성한 후 각 기능을 설정하고 배포하는 방법을 하나씩 알아봅시다. 서버 인스턴스 안에 API 서버를 실행하고 주기적으로 크롤링하여, 개츠비 CL
[개발PC : MacBook] Chapter13) 배포하고 운영하기 학습 목표 : API 서버와 크롤러를 배포하기 전에 앞서 코로나보드의 데이터를 저장할 운영 환경 데이터베이스를 AWS를 이용해 설정하겠습니다. AWS에 가입하여 계정을 생성한 후 AWS 사용 방법을 알아보겠습니다. 개발 환경에서 직접 설치하여 사용한 MySQL 서버 대신 AWS RD
[개발PC : MacBook] Chapter12) 메뉴바 만들고 테스트하기 학습 목표 : 이제 코로나보드 클론 사이트에 들어갈 모든 콘텐츠를 만들고 채워넣었습니다. 콘텐츠양이 많으면 원하는 콘텐츠로 바로 이동하는 메뉴(또는 내비게이션)가 필요합니다. 여러 페이지로 구성된 웹사이트라면 페이지를 링크 걸면 되지만 코로나보드는 단일 페이지이므로 메뉴에