The Popular Articles
-
[Flutter] 플러터 vscode 개발 환경 구축 / 플러터 비주얼스튜디오 개발 환경 / 플러터 vscode 애뮬레이터 / vscode 확장 설치 오류
VSCode에서 Flutter를 사용하기에 앞서, Flutter SDK 설치와 설정이 필요하다. 해당 부분은 아래의 글을 참고하고 설치가 완료되었다면 VSCode 설치를 진행한다. [Flutter] 플러터 개발환경 구축 및 세팅 [Flutter] 플러터 개발환경 구축 및 세팅 Flutter 개발환경 구축하기 1. 윈도우 플러터 개발 환경 구축 (1) 플러터 SDK 다운받기 아래의 플러터 홈페이지에 접속해 플러터 SDK를 다운받는다. https://docs.flutter.dev/get-started/install Install Install Flutte parkjh7764.tistory.com Visual Studio Code 설치하기 vscode 공식 사이트에 접속한 뒤, 자신의 운영체제(OS)에 맞게 ..
2023.01.28
-
비주얼스튜디오 코드 자동완성 안 될 때 / VSCode 자동 완성 오류 안 됨
비주얼스튜디오 코드(Visual Studio Code)를 통해서 코드를 작성할 때 '자동완성' 기능을 정말 유용하게 사용한다. 그러나 가끔 자동완성 기능이 안 먹힐 때가 있다. 내가 해결한 해결책을 알려드리고자 한다. 자동완성 기능 오류 해결책 아래와 같이 ! 느낌표를 했을 때 자동완성 기능이 작동하지 않으면 HTML 틀을 생성하는 것을 사용하지 못 한다는 어려움이 있다. 1. 맨 아래 오른쪽에 'HTML'을 클릭한다. 2. 위에 검색창이 활성화 되는데, 'HTML'을 입력 후 클릭한다. 3. 자동완성 기능이 활성화가 되는 것을 확인할 수 있다. 그런데도 활성화가 안 된다면? 윈도우 기준으로 자동완성을 띄우고자 하는 키워드를 입력한 후 ctrl + 스페이스바를 누른다. 그러면 아래와 같이 자동완성 기능을..
2022.07.13
-
비주얼스튜디오 코드 색상 바꾸기 / 테마 추천 / 노마드 코더가 사용하는 글꼴 색상, 코드 테마 / 비주얼스튜디오 코드 색상 테마 추천 및 비교 / Material Theme
오늘은 '노마드 코더'라는 인기 프로그래머 유튜버가 사용하는 비주얼스튜디오 코드 편집기를 봤는데 코드 색상이 너무 예뻐 해당 테마 정보를 가져와 보았습니다. 아래 유튜브 영상을 보면 코드가 빨강, 보라, 초록, 하늘색 등 대조적인 색깔로 코드가 작성이 되어 기존의 코드보다 더 한 눈에 들어올 수 있을 거 같아 저도 해당 테마를 적용해보려고 합니다. 노마드 코더가 사용하는 비주얼 스튜디오 코드 색상 테마 바로 해당 테마를 말씀드리면 'Material Theme'이다. 그러면 바로 설치하고 설정을 같이 해보도록 하자. 1. 비주얼스튜디오 코드를 실행하고, 왼쪽 블럭모양을 클릭한다. 2. 검색창에 'material theme'를 검색한다. 그리고 아래와 같은 프로그램을 찾아 설치한다. 3. 설치를 하면 아래와..
2022.01.05
-
비주얼 스튜디오 코드 익스텐션 28개 추천 / 확장 프로그램 설치 및 웹 개발 환경 설정 (Visual Studio Code) / VS Code HTML, CSS Extension
목차 오늘은 흔히 웹 공부를 할 때 사용하는 텍스트 에디터인 '비쥬얼 스튜디오 코드(Visual Studio Code)의 확장프로그램'을 소개할 것이다. 나도 매번 개발하는 컴퓨터와 노트북, 개발 환경이 계속 바뀌기 때문에 저번에 설치했던 확장프로그램이 정말 유용했는데 기억이 나질 않아서 내가 지속적으로 활용하고자 이렇게 글로 작성하게 되었다. 그럼 바로 정말 내가 사용하는 웹 개발에 유용한 익스텐션을 추천하도록 하겠다. 우선 해당 확장 프로그램은 '비쥬얼 스튜디오 코드'가 깔려 있어야 한다. 해당 다운로드는 아래 링크를 통해 자세히 알아보도록 하자. Visual Studio Code 쉬운 설치 Visual Studio Code 쉬운 설치/ VSCode 코드 편집기 추천 및 설치/ Vscode 한글 설정..
2022.05.18
-
[Flutter] 플러터 vscode 애뮬레이터로 실행하기 / vscode 모바일 디바이스로 실행
비주얼스튜디오 코드에서 모바일 디바이스 화면을 띄울 수 없을까? 그러나 위와 같이 홈페이지의 형태가 아니라 아래와 같이 모바일 디바이스의 형태로 띄워주고 싶을 수도 있다. 이는 비주얼 스튜디오 코드(Visual Studio Code)에서도 가능하다. 이는 애뮬레이터(emulator)이다. 위와 같이 모바일 디바이스로 vscode에서 애뮬레이터를 띄우기 위해서는 '안드로이드 스튜디오(Android Studio) 애뮬레이터 가상 디바이스 설치'가 필요하다. 결국은 vscode에서 android studio를 기반으로 안드로이드 스튜디오에 있는 애뮬레이터로 디버깅 하는 형태인 것이다. 안드로이드 스튜디오에서 플러터 개발환경 세팅은 아래의 글을 참고하자. 아래의 과정이 완료되고 나서 vscode에서 설정을 할 ..
2023.01.28
-
[VScode] Mac 단축키 비주얼스튜디오 코드 맥 맥북 단축키 모음
Mac KeyBoard Symbols 심볼의미 ⌘ 커맨드 (command) ⌃ 컨트롤 (control) ⌥ 옵션 (option) ⇧ 쉬프트 (shift) ⇪ 캡스락 (caps lock) General 단축키설명 ⇧⌘P, F1 Sh명령 팔레트 표시 ⌘P 빠른 열기, 파일로 이동… ⇧⌘N 새 창/인스턴스 ⌘W 창/인스턴스 닫기 ⌘, 사용자 설정 ⌘K ⌘S 키보드 바로가기 키 Basic Editing 단축키설명 ⌘X 라인 잘라내기 ⌘C 라인 복사 ⌥↓ / ⌥↑ 라인 아래, 위 이동 ⇧⌥↓ / ⇧⌥↑ 라인 아래, 위 복사 ⇧⌘K 라인 삭제 ⌘Enter / ⇧⌘Enter 라인 삽입 위, 아래 ⇧⌘\ 매칭 브래킷으로 점프 ⌘] / ⌘[ 들여쓰기, 내림 줄 Home / End 줄 시작, 끝으로 이동 ⌘↑ / ⌘↓ ..
2023.03.04
-
바탕화면 캘린더 / 데스크탑 캘린더 다운로드 및 사용법 / 바탕화면 달력 / PC 일정 관리 프로그램
개발자나 컴퓨터로 업무를 보는 사람들은 매일 컴퓨터를 키고, 바탕화면을 보게 된다. 컴퓨터를 부팅했을 때, 매일 보는 바탕화면에 짠!! 하고 캘린더가 있다면? 일정을 한 눈에 파악하고 할 일을 더욱 더 잘 실천할 수 있을 것이다. 그러면 유용한 프로그램 하나를 소개하겠다. 바로 '바탕화면 달력' 같이 다운로드를 받아보도록 하자 . 아래 주소를 클릭한다. http://www.desktopcal.com/ 바탕화면 달력 저는 바탕화면위에 방치하는 아주 근사한 일력소프트웨어이다. 바탕화면일력은 당신을 도와 약속、처리할 사항、일정안배를 쉽게 관리하게 한다…바탕화면위에 사소한 일들을 기록한다 ... Eve www.desktopcal.com 1. 자신의 컴퓨터 운영체제에 맞게 윈도우, 맥 중에 다운로드를 받는다. 2..
2021.12.27
-
OneDrive 동일한 위치에 리디렉션할 수 없는 폴더 / 레지스터 변경 없이 에러 해결법
Contents 폴더를 여기로 이동할 수 없습니다. OneDrive 문제 해결 " 동일한 위치에 리디렉션할 수 없는 폴더가 있기 때문에 폴더를 이동할 수 없습니다. 액세스가 거부되었습니다 " OneDrive 연동 파일 경로 문제점 C:\Users\ckseh\OneDrive 컴퓨터 포맷을 하고 윈도우 11를 설치하면서 OneDrive와 자동으로 연동이 되었다. 그때부터 모든 파일의 경로가 OneDrive를 향하고 있었다. 기본폴더들이 OneDrive를 향하면서 경로에 "바탕화면"과 같이 한국어가 자동으로 포함되게 된다. 코딩을 할 때 폴더를 바탕화면에 저장을 하면 경로에 '한글'이 포함이 되어 프로그래밍을 함에 있어 오류가 생기는 일이 잦았다. 그래서 OneDrive경로를 기본 경로로 다시 되돌리도록 하려..
2023.03.15
-
[CSS] CSS 초기화 / 리셋(reset) CSS / CSS 리셋 하는 방법 / Reset CSS 2.0 Eric Meyer’s / CSS 기초 지식
reset CSS란? 우리가 html로 코드를 작성하고 브라우저로 실행을 해보면 내가 적용을 하지 않았는데도 자동으로 margin이 들어간 경우를 흔히 봤을 것이다. 이는 '웹 브라우저'마다 default 값으로 스타일이 적용되어 있기 때문에 우리는 브라우저마다의 기본 디폴트 스타일 값이 아니라 동일한 CSS 스타일을 보여주기 위해 이런 default 디폴트 값을 초기화 해주어야 한다. 아래와 같이 자동으로margin: 8px; 값이 들어간 것을 확인할 수 있다. 그러면 같이 CSS 초기화를 해보도록 하자. 1. 구글에 "Reset CSS"라고 검색을 하고 초기화 코드를 찾는다. 나는 아래 사이트에서 가져왔다. https://cssdeck.com/blog/scripts/eric-meyer-reset-cs..
2022.01.05
-
VSCode 개발 환경 설정 동기화 하고 불러오기 / 비주얼스튜디오코드 세팅 설정 동기화
목차 비주얼스튜디오 코드 세팅 값 동기화 설정하기 파일 -> 기본설정 -> '설정동기화 켜기' 클릭 동기화 항목 체크 후, 로그인 및 켜기 클릭 Microsoft 또는 GitHub에 설정값 동기화 선택 나는 GitHub에 VSCode 설정 값을 동기화 하겠다. GitHub 로그인 후 Authorize 클릭 Visual Studio Code 열기 클릭 URI 열기 허용 설정 동기화: 지금동기화 (지금) 확인 아래와 같이 동기화됨(지금)이 뜨면 정상적으로 동기화가 실행되고 있는 것이다. 비주얼스튜디오 동기화 값 불러오기 파일 -> 기본설정 -> '설정동기화 켜기' 클릭 설정 동기화 : 지금 동기화 클릭 병합 클릭 후 작업환경 세팅 확인 수동으로 병합[Merge Manually..] : 이 옵션을 선택하면 기..
2023.01.28
