vscode37 VSCode 로그 가독성 높이는 방법 (터미널 → Debug Console) VSCode에서 Console 로그가 터미널창에 표시되어서 가독성이 정말 좋지 않더라구요. 바로 아래처럼 내가 보고 싶은 내용 외에도 정말 많은 정보가 표시되어서 빠르게 결과값을 확인하거나 로그를 확인하고 싶은데 가독성이 떨어져서 시간 소요되는 것이 아깝더라구요. 그래서 터미널(Termianl)이 아닌 디버그 콘솔(Debug Console) 창에 로그가 찍힐 수 있도록 설정을 변경하였더니 훨씬 가독성이 좋아지더라구요! VSCode에서 코딩 테스트 준비하는데 가독성이 좋지 않아서 고생이신 분들을 위한 글입니다. VSCode 로그를 Terminal이 아닌 Debug Console에 표시되도록 설정하기 1. VSCode에서 Setting 창으로 접근합니다. 방법 키보드: Ctrl + , 마우스: 상단 메뉴의 .. 2023. 3. 22. VSCode에서 Java 코딩 테스트 환경 구축하기 개발자라면 취업 혹은 이직 준비할 때 꼭 거쳐가야하는 단계가 있어요. 바로 온라인/오프라인 코딩 테스트인데요! 제가 처음 취업 준비를 할 때만해도 오프라인 코딩 테스트가 더 활성화되어 있었는데, 요즘은 대부분 온라인 테스트라 편리하더라구요. 온라인 코딩테스트를 미리 대비하고 연습하기 위해 테스트 환경을 미리 구축해보았어요. 혹시나 "실격 처리되는 것 아닌가?" 싶으신 분들도 있겠지만, 프로그래머스로 온라인 코딩테스트를 진행하는 경우 VSCode로 작성하고 제출하는 방식은 허용한다고 하더라구요! ( 프로그래머스여도 온라인 코딩테스트를 주최하는 업체에 따라 다를 수도 있으니 참고만 해주세요! ) VSCode에 Java 온라인 코딩테스트 환경 구축하기 VSCode 설치하기 개발을 진행할 텍스트 에디터(Text.. 2023. 3. 21. VSCode 설치하기 Java, Javascript 등 다양한 개발 환경에서 사용하는 언어를 실행할 프레임워크, 툴을 설치하는 과정입니다. VSCode는 대체로 Frontend 개발 환경에서 자주 쓰는 툴이자 프레임워크로 Visual Studio보다는 가볍다는 특징이 있습니다. VSCode 설치하기 개발을 진행할 텍스트 에디터(Text Editor)이자 코드 편집기를 설치하는 과정입니다. 1. Visual Studio Code 공식 사이트로 접속하여 OS에 맞게 Installer를 다운로드합니다. 주소: https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and avail.. 2023. 3. 17. [실습] 뷰(Vue)로 설정 화면 구현하기 - Backend(REST API) 연결하기 오늘의 실습 목표는 "설정 화면 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 설정 화면에서 Backend로 연동하기 위해 REST API 연결하는 과정입니다. 설정 화면 구현하기 - REST API 호출/연동하기 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 설정 화면 구현하기 - UI/Layout 구현하기 [실습] 스프링부트(Spring Boot)로 비밀번호 관리 기능 구현하기 - REST API 구현하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 화면과 API Server가 연동된 결과를 확인하실 수 있습니다. ▶ 초기 상태 DB (MySQL) [TABLE] admin_user_infor.. 2023. 3. 3. [실습] 뷰(Vue)로 설정 화면 구현하기 - UI/Layout 구현하기 오늘의 실습 목표는 "설정 화면 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 설정 화면의 UI/Layout을 구현하는 과정입니다. 설정 화면 구현하기 - UI/Layout 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - UI/Layout 구현하기 [실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - Backend(REST API) 연결하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 화면의 레이아웃을 구성하실 수 있습니다. 소스 코드 src\components\admin-web\users\AdminUsersDetail.vue 관리자 포탈 사용자를 등록, .. 2023. 3. 2. [실습] 뷰(Vue)로 설정 화면 구현하기 - 기획/설계하기 오늘의 실습 목표는 "설정 화면 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 설정 화면을 구현하기 위해 기획/설계하는 과정입니다. 설정 화면 구현하기 - 기획/설계 UI/UX Layout BaseAdminSettings: 라우터와 연결된 뷰 파일이자 하위 컴포넌트를 연결하는 최상위 컴포넌트 AdminUsersDetail: 로그인한 사용자의 개인 정보가 표시 및 수정 컴포넌트 관리자 포털 사용자 추가/수정 컴포넌트 재사용 UserPassword: 로그인한 사용자의 비밀번호 컴포넌트 기능 개인 정보 로그인한 사용자가 개인 정보를 직접 변경하는 영역 관리자 포털 사용자 추가/수정 팝업창에서 사용한 컴포넌트를 재사용 기존 컴포넌트의 일부 필드에 대해서는 Disable 혹은 Hide 하도록 수정 Disab.. 2023. 3. 1. [실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - Backend(REST API) 연결하기 오늘의 실습 목표는 "회원 관리 기능 만들어보기!" 입니다. 본 게시글에서 다루는 사항은 회원 관리 화면에서 Backend로 연동하기 위해 REST API 연결하는 과정입니다. 회원/사용자 화면 구현하기 - REST API 호출/연동하기 사전 준비 아래 사항에 대해서 사전 준비가 완료되지 않으신 분들은 아래 링크를 참조하여 사전 준비를 진행합니다. [실습] 뷰(Vue)로 회원/사용자 관리 화면 구현하기 - UI/Layout 구현하기 [실습] 스프링부트(Spring Boot)로 회원 관리 기능 구현하기 - REST API 구현하기 결과 이미지 구현하기에 앞서 본 글을 따라하시면 아래와 같이 화면과 API Server가 연동된 결과를 확인하실 수 있습니다. ▶ 초기 상태 DB (MySQL) 화면 ▶ REGI.. 2023. 2. 20. 이전 1 2 3 4 ··· 6 다음
