오늘은 Visual Studio Code 단축키들을 정리해볼 건데요! 아래 Reference에서 자주 쓰일 것 같은 것들만 정리해보겠습니다. Ctrl+Enter ; 커서가 위치한 곳 아래 줄에 빈 행 삽입 Alt + 방향키(위/아래) ; 커서 위치한 행이 방향으로으로 이동 Ctrl + BS ; 단어 부분 삭제(커서 왼쪽) Ctrl + DEl ; 단어 부분 삭제(커서 오른쪽) Ctrl + Shift + \ ; 대응하는 괄호에 점프 Ctrl + L ; 행을 선택하여 커서를 아래 행으로 이동 요즘은 어떤 프로그램을 쓰든 어느정도 익숙해지면 단축키부터 검색해서 익히는 거 같아요. 단축어만 알면 자주 사용하는 프로그램일수록 프로그램 사용의 질이 올라가고, 그에 따라 삶의 질이 올라간답니다. 처음 2~3번만 메모해..
안녕하세요, 피터팬입니다! 오늘은 localStorage에 대해 배워볼건데요. localStorage는 개발자 도구(F12 혹은 ctrl+shift+i)에서 보실 수 있습니다. 개발자 도구 > 애플리케이션 > 로컬 스토리지 > chrome-extension/.... 브라우저가 열려있는 동안 유지되는 sessionStorage와 달리, localStorage는 브라우저를 닫았다 열어도 데이터가 남아있습니다. localStorage ; 유효기간 없이 데이터를 저장하고, JS를 사용하거나 브라우저 캐시 또는 로컬 저장 데이터를 지워야만 사라짐 - localStorage환경에 객체를 저장하려면 JSON.stringify를 통해 직렬화를 시켜주어야 함 - localSotrage환경에서 객체를 가져오려면 JSON...
React - HTML,CSS,JS도 모두 JS화 해버리자 - 라이브러리. 기능이 비교적 간단함 - 타입스크립트 지원 - 단순한 컴포넌트 정의의 용이함 - 더 빠르고 담대한 개선 - 커뮤니티가 더 큼 + 회사가 더 많고, 사람이 더 많음 Vue - HTML,CSS,JS특징들을 각각 살려 편하게 만들자 - 프레임워크. 기능이 이미 갖춰져 있음 - 코드가 더 깔끔함 더보기 현직 vue.js 개발자인데요 구직사이트들 보면 리액트 구하는 곳이 훨씬 많아서 리액트도 틈나는대로 공부하고 있어요 하지만 vue.js를 쓰는 곳으로 갈 수 있다면 그 선택지를 고르고 싶습니다 저는 리액트와 뷰 둘다 하는 개발자입니다. 확실히 어떤 프로젝트에는 리액트가 더 적합하고, 어떤 프로젝트는 뷰가 더 적합하다고 느낄때가 많아요. 저..
웹 개발자 연봉 글로벌 / 미국 평균 연봉 백앤드 개발자 ; 9500~ / 1.3억~ 프론트앤드 개발자 ; 1억~ / 1억 1천~ 풀스택 개발자 ; 1억 1천~ / 1억 2천~ - 날이 갈수록 웹개발자 수요 많아지는 중 프론트앤드 개발 순서 1. Basic Tools ; 개발 툴 공부 - 컴퓨터 - Text Editor(VS code, Intellij, Atom, Sublime Text 등) 필요 - 브라우저(Chrome, Edge, Safari, Firefox) - Terminal(Powershell, Bash, zsh) 2. Front-end - HTML HTML Tags, Page Structure, Semantic Tags(어떨 때 어떤 태그를 쓰는것이 의미 있는지), SEO(특정한 키워드로 네이..
Bundler ; JS파일 뿐 아니라, 애플리케이션에 필요한 모든 종류의 파일들을 모듈 단위로 나누어 최소한의 파일 묶음(번들)으로 만들어냄 - Parcel ; 구성 없는 단순한 자동 번들링. 소/중형 프로젝트에 적합 - Webpack ; 매우 꼼꼼한 구성. 중/대형 프로젝트에 적합 - Rollup ICO Converter ; ICO 확장자로 변경해줌 - 32pixel로 설정 https://www.icoconverter.com/ ICO Converter Converts images to the ICO format for your websites or applications. www.icoconverter.com parcel-plugin-static-files-copy https://www.npmjs.co..
BootStrap ; 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크 - 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동 - 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도움 1. CSS로 적용 - 단 ; 기능에 한정적 https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com > Bootstrap > 좌측 상단 Docs 클릭 > 2번에 Include Bootstrap’s CSS and JS의 와 내용 html파일에 복붙 > 좌측 Components내용들 class명 이용하여 자유롭게 이..
1. 파일 생성 프로젝트 폴더 > index.html , css>main.css , js>main.js 파일 생성 2. HTML 기본 설정 설정 ; lang="ko"로 변경 3. CSS 기본 설정 /* COMMON */ 설정 ; Material Icon 연결하는 내용 추가 & body에 기본 설정 & img는 display:block 설정 더보기 /* COMMON */ .material-symbols-outlined {font-variation-settings:'FILL'0,'wght'400,'GRAD'0,'opsz'48} body { color:#333; font-size: 16px; /* 기본 font-size, font-wieght, line-height를 설정해 하위 요소들에 상속 */ font-..
