lshjju 님의 블로그

VS Code를 나만의 개발 맞춤 공간으로 만드는 가장 기초적이면서도 중요한 설정들입니다.코드의 가독성을 높이고 작업 효율을 극대화할 수 있는 세 가지 핵심 세팅 방법을 정리해 드릴게요. Live Server: 실시간 화면 확인 세팅Live Server는 코드를 수정하고 저장할 때마다 브라우저를 수동으로 새로고침하지 않아도 변경 사항을 즉시 반영해 주는 확장 프로그램입니다.설치 방법: 왼쪽 사이드바의 확장(Extensions) 아이콘(블록 모양)을 클릭한 후 Live Server를 검색하여 설치합니다.실행 방법: 편집기 오른쪽 하단의 'Go Live' 버튼을 누르거나, HTML 파일 위에서 마우스 오른쪽 버튼을 클릭해 **'Open with Live Server'**를 선택합니다.장점: 저장(Ctrl +..

새로운 웹 프로젝트를 시작하는 것은 마치 깨끗한 도화지를 준비하는 것과 같습니다.VS Code를 활용하여 표준적인 웹 프로젝트 구조를 만드는 과정을 단계별로 안내해 드릴게요.🏗️ 웹 프로젝트 생성 단계가장 기초적인 HTML, CSS, JavaScript 프로젝트를 기준으로 설명해 드립니다.프로젝트 폴더 생성컴퓨터의 원하는 위치에 새 폴더를 만듭니다 (예: my-web-project).가급적 폴더명은 영문 소문자와 하이픈(-)을 사용하는 것이 관례입니다.VS Code에서 폴더 열기VS Code를 실행한 후, 상단 메뉴에서 **[File] > [Open Folder]**를 선택하여 방금 만든 폴더를 불러옵니다.폴더를 VS Code 화면 위로 직접 드래그앤드롭(Drag & Drop) 해도 됩니다.기본 파일 ..

이클립스에서 미리 프로젝트를 생성한 경우파일탐색기에서 src 폴더 자바 소스 카피 합니다.이클립스 패키지 익스플로러 뷰 프로젝트 src 폴더에 페이스트 합니다.바로 사용 가능합니다.이클립스에서 프로젝트를 생성하지 않았을 경우 이클립스file - open projects from file systemimport projects from file system 윈도우에서 directory 버튼 탭 합니다.코딩하려는 폴더를 선택 후 finish 버튼 탭 합니다.패키지 익스플로러 뷰에서 프로젝트가 자동 생성되었는지 체크 합니다.잘 생성되었다면 바로 사용 가능 합니다.

StackBlitz에서 Next.js 프로젝트 생성 단계StackBlitz 웹사이트 접속: 먼저 웹 브라우저를 통해 StackBlitz 웹사이트에 접속합니다.새 프로젝트 생성 시작:메인 페이지에 접속하시면 "Create New Project" 또는 "Start a new project"와 같은 옵션을 찾으실 수 있습니다. 또는 좌측 상단의 "Start new app" 버튼을 클릭하거나, 이미 계정이 있으시다면 대시보드에서 "+ New Project" 버튼을 클릭합니다. Next.js 템플릿 선택:다양한 프레임워크 및 기술 스택 템플릿 목록이 나타납니다. 여기서 "Next.js" 템플릿을 찾아 선택합니다. StackBlitz는 공식 Next.js 예제 코드를 TypeScript와 함께 제공하기도 합니다 ..

Eclipse를 사용해 "Hello, Java"를 출력하는 과정1단계: 새 자바 프로젝트 생성Eclipse를 실행한 후, 상단 메뉴에서 File > New > **Java Project**를 선택합니다.Project name에 원하는 프로젝트 이름을 입력하세요 (예: HelloJavaProject).Finish 버튼을 클릭하여 프로젝트를 생성합니다.2단계: 패키지 및 클래스 생성Package Explorer 뷰에서 방금 생성한 HelloJavaProject를 우클릭하세요.New > **Package**를 선택하고, 패키지 이름을 입력하세요 (관례적으로 소문자를 사용합니다. 예: com.example).Finish를 클릭합니다.새로 만든 패키지를 우클릭하고 New > **Class**를 선택합니다.Name..

STS(Spring Tool Suite) 파일을 다운로드한 후 앱을 실행하고 첫 화면을 띄우는 방법1. STS 압축 해제 및 실행다운로드한 sts-4.x.x.RELEASE.zip 파일을 원하는 위치에 압축 해제하세요. 압축이 해제된 폴더로 들어가서 STS.exe (Windows) 또는 SpringToolSuite4 (macOS) 실행 파일을 더블클릭해 실행합니다.2. 워크스페이스(Workspace) 설정STS를 처음 실행하면 워크스페이스를 설정하는 창이 나타납니다. 워크스페이스는 프로젝트들이 저장될 폴더를 의미합니다.Browse 버튼을 클릭해서 프로젝트를 저장할 폴더를 선택하세요.폴더를 선택한 후 Launch 버튼을 클릭합니다.**"Use this as the default and do not ask a..

STS에서 스프링부트 로컬 서버 실행하는 방법프로젝트 우클릭 방식 프로젝트 폴더에서 마우스 우클릭[Run As] 메뉴 선택[Spring Boot App] 클릭 Run 버튼 이용 STS 상단의 툴바에 있는 녹색 Run 버튼 클릭또는 부트 대시보드에서 앱을 선택하고 툴바에서 "run" 버튼을 눌러 빠르게 시작할 수도 있습니다 여러 인스턴스 실행 방법 Run 아이콘 옆 화살표 클릭Run Configurations 클릭Spring Boot App 우클릭New Configuration 클릭프로젝트 선택 후 Main Class 지정 서버 확인 방법 서버가 성공적으로 실행되면 콘솔 창에 로그가 표시됩니다웹 브라우저에서 localhost:8080으로 접속하여 애플리케이션이 제대로 실행되는지 확인할 수 있습니다

code sandbox manual https://codesandbox.io/ CodeSandbox: Instant Cloud Development EnvironmentsCodeSandbox is a cloud development platform that empowers developers to code, collaborate and ship projects of any size from any device in record time.codesandbox.io 쿠키 팝업은 리젝트올 해도 됩니다. 본인이 편리한 로그인 방법을 택하세요.저는 깃허브 로그인 추천 합니다. 저 위에 크리에잇 버튼 탭 합니다. 리액트 탭 합니다.타입스크립트 (TS) 금지 입니다. 비져빌러티는 나중에 변경 가능 합니다.공개/비공개..

스택블리츠로 새 프로젝트 생성하기 https://stackblitz.com/ 로그인 방법 선택 대쉬보드에서 new project + 버튼 - 탭 모달 - frontend 탭 - 탭react javascript - 탭타입스크립트 말고 자바스크립트 탭 합니다. 바이트 리액트가 생성됩니다.프로젝트 생성 완료Vite가 CRA 와 다른 점 jsx파일을 사용합니다.index.js 가 main.jsx로 변경됩니다.css 파일이 달라질 수 있습니다.App main 코드가 약간 다를 수 있습니다.JS 반복문 사용하면 에러가 날 수 있습니다.스택블리츠에서 라이브러리/디펜던시 추가하기 스택블리츠는 터미널을 제공 합니다.기존 터미널 옆에 플러스 버튼 탭하고 터미널 하나 추가 합니다.기존의 터미널은 삭제하지 말고 그대로 둡니..

확장팩 설치 매뉴얼 vs code exetension installvs code 확장기능 설치 - 웹표준 기준 레프트 하단 익스텐션 메뉴 클릭 네모난거 네개 익스텐션 화면 위 검색창에 테스트로 html css support 검색 롸잇트 인스톨 버튼 클릭 팝업 - 두유 트러스트 더 퍼블.... 버튼 - 트러스트 퍼블리... 디져블/언인스톨 버튼 보이면 성공 디져블 - 이 기능 잠시 안쓸께요. 언인스톨 - 이거 삭제할래요. React 관련 익스텐션 추천 필수 VSCode 확장 프로그램ESLint 기능: 자바스크립트 코드의 문법과 스타일을 검사해 주는 린팅 도구입니다. 장점: 코드 오류를 실시간으로 포착하고, 일관된 코딩 스타일을 유지할 수 있도록 도와줍니다...