목록전체 글 (195)
아이티스토리
Next.js에서 컴포넌트 디렉토리를 생성하는 방법은 간단합니다. 프로젝트의 최상위 디렉토리(root)에 components라는 새 폴더를 직접 만들고, 재사용할 컴포넌트들을 이 폴더 안에 위치시키면 됩니다. create-next-app으로 프로젝트를 생성하면 기본적으로 pages 또는 app 디렉토리가 있고, 이와 같은 방식으로 components 디렉토리를 추가하여 컴포넌트를 체계적으로 관리할 수 있습니다. 컴포넌트 디렉토리 생성 및 활용 방법루트 디렉토리 확인: Next.js 프로젝트의 최상위 디렉토리에 있는지 확인합니다. components 폴더 생성: 터미널 또는 파일 탐색기를 사용하여 components 폴더를 생성합니다. 코드 mkdir components컴포넌트 파일 추가: 생..
NextJS 페이지 생성(App Router)
참조 - https://nextjs.org/docs/app/getting-started/layouts-and-pages Getting Started: Layouts and Pages | Next.jsLearn how to create your first pages and layouts, and link between them with the Link component.nextjs.org √ Would you like to use App Router? (recommended) ... No / Yes > Yes로 설정한 경우 app 디렉토리하위에 경로명 디렉토리 생성 후 page.tsx 생성 예) http://localhost:3000/board > app/board/page.tsx 생성폴더는 URL 세그먼..
NEXTJS 사이트 - https://nextjs.org/ Next.js by Vercel - The React FrameworkNext.js by Vercel is the full-stack React framework for the web.nextjs.org1.NODEJS 설치 - Window NVM, NODEJS, YARN설치2.NEXTJS 설치 - 윈도우 환경에서 CMD 창에서 프로젝트 설치 위치로 이동하여 명령어 실행 npx create-next-app@latest3.설치시 질문사항 - 참조(https://velog.io/@ming97/NEXT-JS-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1-%EB%B0%8F-%EC%98%B5%EC%85%..
안드로이드 기기에서 크롬을 디버깅하려면, 먼저 안드로이드 설정에서 개발자 옵션을 활성화하고 USB 디버깅을 켜야 합니다. 그런 다음, USB 케이블로 안드로이드 기기를 PC에 연결하고, PC의 크롬 브라우저 주소창에 chrome://inspect/#devices를 입력하여 접속합니다. 기기가 연결되면 PC 크롬의 디버깅 창에 해당 안드로이드 기기가 나타나고, 원하는 탭을 선택해 PC에서 웹 개발자 도구를 사용해 디버깅할 수 있습니다. 단계별 디버깅 방법1. 안드로이드 기기에서 개발자 옵션 활성화하기:안드로이드 기기의 설정 앱을 엽니다. 휴대전화 정보 또는 기기 정보로 이동합니다. 소프트웨어 정보 또는 빌드 번호를 여러 번(보통 7번) 빠르게 탭합니다. `개발자 모드가 활성화되었습니다.`와 같은 팝..
1.MariaDB의 DataType Blob에 저장된 이미지를 Mybaits를 이용하여 조회 하고 MAP로 리턴 받아 화면단으로 전송, 데이터는 Byte 형태로 조회 되기때문에 별도의 가공없이 바로 노출 처리하면 됨2.IMG 태그에 직접 삽입3. IMG 태그 접근 삽입$("#tagId").attr("src",db_blob_data)
환경 - 우분투(24.04)NUXTJS 생성 - https://soft33.tistory.com/entry/NUXT-v40-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-11.GITLAB에서 소스 내려 받기#git 설치sudo apt-get install git#git 소스내려받기git clone https://oauth2:@gitlab.com/id/project.git2.nvm을 이용한 nodejs 설치#curl 설치sudo apt install curl#nvm 설치curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash#nvm 설치적용source ..
티스토리 블로그 MAC 스타일 코드 블럭 적용
1.codeblock.js 파일 업로드2.codeblock.js 코드적용 위에 파일업로드 화면에서 HTML 탭 클릭 하여 다음과 같이 코드 삽입 3.css 적용CSS 탭을 클릭하고 다음과 같이 hljs css 부분을 주석처리, 첨부한 css 파일의 코드를 삽입4.Syntax Highlight 플러그인 적용끝!
환경 - 우분투(24.04)NUXTJS 생성 - https://soft33.tistory.com/entry/NUXT-v40-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-1#nginx 설치 > Ubuntu 22.04에 Nginx 설치하기 sudo apt install nginx#nginx 기타1.Nginx 시작하기sudo systemctl start nginx2.Nginx 상태 확인sudo systemctl status nginx3.부팅 시 Nginx 자동 실행sudo systemctl enable nginx4.변경사항 적용sudo systemctl restart nginx5 Nginx 설정 변경 후 바로 적용시키지 않고 테스트하기su..