# Extensions

15개의 포스트
post-thumbnail

개발을 위한 환경 세팅(Web Editor, Extensions)

이번 글에서는, 개발을 위한 컴퓨터 환경 세팅과 꿀팁을 적었다. 꿀팁 먼저 적자면, 부트캠프 강의에서 멘토님의 화면공유를 보며 벤치마킹한 것이 하나 있다. 1. Mac북 Dock을 왼쪽으로 정렬하여 보다 효과적으로 화면을 사용하는 법 여러 개의 웹을 하나의 화면에 띄어놓고 왔다갔다 이동하며 코드를 작성하고, 구현하고, 문제를 확인하기에는, (게다가 줌까지 사용하고 있다면,) 맥북의 하단에 놓인 Dock을 왼편에 놓는 것이 더 효율적이다. ![](https://velog.velcdn.com/images

2023년 8월 15일
·
0개의 댓글
·
post-thumbnail

[UX Engineering] [IDE] [VS code] Extension & Setting recommendation + shortcuts

저는 vscode 좋아합니다. python은 pycharm 이 좋은거 같은데 javascript는 vscode가 짱입니다. Visual Studio는 학부 시절에 쓴거 같습니다... vim은 트라우마 있어서 별로 안좋아합니다... 맨날 인터넷에 vim 단축키 검색합니다... 😥 그래도 이 단축키 알고 있으면 가끔 커맨드창 다룰때 도움되기는 하더라구용... UI 개발, svg, interaction 등 이제 관련 일을 시작한지 1년이 다 되어가네요. 😎 제가 코드 짜면서 유용했던 Extension, Setting, shortcut 공유해 보겠습니다. 저는 이것저것 찾아보는거랑 드림코딩 유튜브에서 도움을

2022년 12월 11일
·
0개의 댓글
·

VSC - Extensions

Material Theme - 테마 정하기 Marterial Icon Theme - 아이콘 테마, 아이콘이 조금 더 생동감 있게 바뀜 Preitter - Code formatter - 코드 포멧팅 - ctrl + 눌러서 setting 창으로 이동 Bracket Pari Colorizer - 괄호마다 코드에 색깔을 다르게 줌 Indent-rainbow - 들여쓰기 된 부분을 레인보우컬로로 하이라이트 표시 - 코드 읽을 때 도와줌 Auto Rename Tag - 앞에 태그를 바꾸면 뒤에 태그를 자동으로 바꿔줌 CSS Peek - html에서 css를 금방 찾게해줌 - html에서 커맨드나 컨트롤키를 누른 상태로 클릭하면 정의된 css파일로 이동하게 해줌. HTML CSS Support - html에서 css의 자동완성을 이용하게 해줌 Live Server - html이나 css 수정 시 브라우저창에 새로고침하는 것을 없애줌. - 커맨드 팔

2022년 8월 5일
·
0개의 댓글
·

vsCode :: 단축키

단축키 tab : 자동 완성 cmd + up(화살표 위) : 코드 화면 확대 cmd + down(화살표 아래) : 코드 화면 축소 cmd + b : 사이드바 열기/닫기 cmd + p : 파일 검색 cmd + f : 해당 문자 검색 cmd + alt + f : 해당 문자 바꾸기 cmd + shift + [ : 좌측 창으로 전환 cmd + shift + ] : 우측 창으로 전환 cmd + \ : 편집기 분할 cmd + / : 주석 처리 alt + up : 커서가 있는 줄이 위로 이동 alt + down : 커서가 있는 줄이 아래로 이동 alt + shift + up : 커서가 있는 줄을 윗 줄에 복사 alt + shift + down : 커서가 있는 줄을 아래 줄에 복사 Extensions Korean Language Pack for Visual Studio Code

2022년 8월 2일
·
0개의 댓글
·
post-thumbnail

크롬 무료 익스텐션

니꼬쌤의 무료 익스텐션 TOP 10개 추천한다 에서 추천하는 익스텐션 링크를 모아둔 글입니다. ColorZilla 동일한 색상 코드 추출하는 도구. 클론 코딩 시 유용. Momentum 새탭 오픈 시 배경 그림 및 시간, 간단한 todo 작성할 수 있는 익스텐션. ![](https://velog

2022년 6월 19일
·
0개의 댓글
·
post-thumbnail

유용한 VSCode Extensions

들어가며 안녕하세요. 서버파트장 채정아입니다👏🏻 1차 세미나 이후 제가 사용하는 vscode extensions을 소개해달라는 요청이 몇번 있어서 이렇게 글로 적어봅니다. Extension VSCode를 다채롭게 즐길 수 있는 확장 프로그램 이라고 생각하시면 됩니다. VSCode 좌측 메뉴에서 테트리스 처럼 생긴 아이콘을 클릭하시면 됩니다! Material Icon Theme 예쁜건 중요합니다. VSCode 폴더, 파일 아이콘을 예쁘게 만들고 싶다면 Material Icon Theme 를 사용하세요.

2022년 4월 7일
·
3개의 댓글
·

리액트 네이티브 환경 설정

1.Extension 1.1 Prettier 프리티어 설정 참고 1.2 Colorize 색과 관련된 코드의 색상을 표시 1.3 vscode-styled-components 스타일드 컴포넌트를 좀더 보기 좋게 표시 1.4 ESLint 2.node 내 node 버전 : 15.14.0 강의 node 버전 : 14.15.5 3. IOS 3.1 아이폰 Expo GO 라는 어플 설치 3.2 Macbook Homebrew 설치 watchman 설치 (Homebrew 이용) https://facebook.github.io/watchman/docs/install.html xcode 설치 (appstore 이용) preference(설정)-location-Command Line Tools 에서 최신버전 선택 cocoapods 설치 xcode 프로그램 라이브러리 관리 4. Andr

2022년 2월 5일
·
0개의 댓글
·
post-thumbnail

[VSCode] 유용한 VSCode Extensions

개발을 시작한지 2년 차! 저의 첫 개인 맥북을 구입하게 되었습니다. VSCode를 설정할 때마다 매번 설치하면서도, 정확히 기능을 알지 못했던 Extensions들을 이번에는 정확히 알고 정리하는 시간을 가져보려 합니다. Material Theme theme 색상을 설정할 수 있습니다. 저는 보통 darker highcontrast를 사용합니다. Material Icon Theme 파일 아이콘을 예쁘게 바꿔줍니다. Prettier 코드를 formmatting 해줍니다. 1) setting에 들어가서 Editor:Format on save를 check하면, 파일이 저장될 때마다 자동으로 formatting이 됩니다. 2) setting에 Prettier 항목에서 format에 대한 세부 설정이 가능합니다. single quote를 사용하고 싶다면, JavaScript와 TypeScript를 single quote로 설정해줍니다.

2022년 1월 9일
·
0개의 댓글
·

[Extension] Identifier

VC, TVC, CVC의 classNamed을 String으로 가져올 수 있도록 연산 프로퍼티 설정

2021년 11월 16일
·
0개의 댓글
·
post-thumbnail

[Swift 공식문서 읽기]Extensions

안녕하세요. 엘림입니다🙇🏻‍♀️ Swift 공식 문서를 정독하기 시리즈입니다! 제 스타일대로 정리했으니 추가적으로 더 필요한 정보는 공식문서 링크를 눌러 확인해주세용! 좀 더 편하게 보기위해 한국어로 번역된 사이트를 함께 확인했습니다!ㅎㅎ 자, 그럼 시작해볼까요 > 이 글은 공부하면서 작성한 글이기 때문에 잘못된 정보가 있을 수 있습니다.🥺 금방 잊어버릴... 미래의 저에게 다시 알려주기 위한 글이다보니 혹시라도 틀린 부분이 있다면, 댓글로 친절하게 알려주시길 부탁드립니다.🙏 익스텐션 익스텐션을 이용해 클래스, 구조체, 열거형 혹은 프로토콜 타입에 기능을 추가할 수 있습니다. 원본

2021년 8월 24일
·
0개의 댓글
·

[Swift] 20. Extensions

Extension은 존재하는 클래스나 구조체,열거형, 프로토콜 타입에 새로운 기능을 더하는 것이다. 원래의 코드에서는 접근할 수 없는 타입을 추가시키는 기능이다. 계산 타입 프로퍼티나 계산 인스턴스 프로퍼티 추가 타입 메서드나 인스턴스 메서드 정의 새로운 생성자 선언 subscripts 선언 새로운 nested types 사용하거나 선언 존재하는 타입을 프로토콜을 따르도록 함. 프로토콜을 연장해서 요구사항을 제공하거나 프로토콜에 추가 기능을 추가할 수도 있습니다. 익스텐션으로 타입에 새로운 기능을 추가할 수는 있지만 기존의 기능을 오버라이드 할 수 없다. Extension Syntax extension 키워드로 선언하면 된다. extension은 존재하는 타입을 확장하여 하나 이상의 프로토콜을 따르게 할 수 있다. 프로토콜을 추가하는 것은 클래스나 구조체를 쓰는 것 처럼 프로토콜의 이름을 쓰면 된다. extension은 존재하는

2021년 8월 11일
·
0개의 댓글
·
post-thumbnail

VScode에서 웹 개발 환경설정

VScode에서 웹 개발을 좀 더 편리하게 도와 줄 Extentions 소개 1. Prettier - Code formatter > 정해진 스타일을 따르도록 코드를 강제로 정렬해준다. 설정 1) 저장할 때 코드가 자동으로 정렬된다. 2) single qoute 설정 2. ESlint > #### 에러난 부분을

2021년 3월 17일
·
0개의 댓글
·
post-thumbnail

7 Must Have VS Code Extensions

one of the most impressive parts of VS Code is customizability, especially via extenstions. If you are new to Web development, you won't be able to live without installing these extensions! I use these extensions every day and hope you love it too! 1. Javascript (ES6) Code Snippets https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets ![](https://images.velog.io/images/emilyscone/post/3c5f7dd4-4bfc-442f-ac29-64bba965d229/Screen%20Shot%202020-12-29%20at%202.35.36

2020년 12월 28일
·
2개의 댓글
·
post-thumbnail

VS Code로 PHP시작하기

📕 Visual Studio Code에서 PHP준비하기 (Extensions&Shortcut&기초문법) Visual Studio Code를 통해 php공부를 해보려 합니다. 가장 좋은 점은 Github와 연결이 된다는거죠😊 Github공부도 할 겸 Visual Studio Code로 PHP를 시작해보기로 하겠습니다. 📌 Extensions 먼저 PHP를 사용할 때 편리하게 코딩을 도와주는 extension들을 설치해줍니다. [ ] PHP IntelliSense PHP를 위한 고급 자동완성 및 리팩토링 지원 File > Preferences > Settings [ ] phpfmt- PHP formatter 코드 정렬 지원(

2020년 12월 4일
·
0개의 댓글
·

ESlint 와 Prettier

지난 프로젝트에서 여러명의 개발자들과 작업을 진행할때 사용하였던, Eslint와 Prettier를 사용하여 여러명의 개발자들과의 코드 통일성과 문법 오류 자동으로 고쳐주는 편리성에 대해 작성해보겠습니다. ESLint ESLint는 자바스크립트 문법검사를 해주는 것으로 알려져 있습니다. vs code Extensions에서 ESLint로 검색하셔서 설치하면 됩니다. extention에서 설치하면 문법에 맞지 않게 작성된 코드들은 빨강색 밑줄로 표시 됩니다. 참고로 지난 프로젝트는 eslint-config-airbnb을 사용하였습니다. Prettier Prettier는 자동으로 코드 스타일을 정래 해주기 때문에 한 프로젝트에서 여러명의 개발자분들이 작업할 경우 코트 스타일의 통일성을 갖게 됩니다. vs code Extensions에서 Prettier 설치하면 됩니다. 셋팅 페이지에서 단축키 Ctrl + , 입니다. format javascript 검색 후 foramt:E

2020년 4월 6일
·
0개의 댓글
·