에디터/아톰(Atom)2017. 1. 8. 17:40

몇개월 전에 비슷한 패키지를 소개해 드린적이 있습니다.[아톰(Atom)/패키지] advanced new file (단축키로 파일 생성)http://recoveryman.tistory.com/243그런데 이 패키지는 현재 중요도가 떨어져 더이상 사용하지 못할 수 있다는 소식을 들었습니다.댓글로 익명의 고마우신분이 알려주시고 이 패키지를 대응하는 새로운 패키지를 소개해 주셔서 이렇게 감사드리고 포스팅합니다. 이 패키지는 설치부터 진행됩니다.또한 Mac OS 관련 문의는 한시적으로 받지 못할듯 합니다.하지만 이 블로그를 지켜보셨던 분들은 맥 관련 설치 및 사용도 무리 없으시리라 생각됩니다. 설치 1. 패키지 설치의 기본이죠.- 컨트롤 + 쉼표(,)- 좌측의 열린 메뉴중 install 선택- PACKAGES 선..

에디터/아톰(Atom)2016. 12. 27. 21:46

예전에 이 좋은 패키지를 허접하게 포스팅 했었던 기억이 있네요.맥에서 아톰을 사용하고 아톰을 끄면 좌측의 프로젝트 목록이 전부 사라져서 그걸 어떻게 해결해 보고자 했었던 기억이 있습니다. 현 직장의 동료님들은 서브라임으로 프로젝트를 수행하며 관리를 하고있습니다.하나의 프로젝트에 아주 많은 폴더들이 있기에 원하는 폴더를 선택해서 바로 열어주는 기능을 사용하고 있었습니다.데문님 블로그를 추천해 주셨습니다. (데문님 세미나서 그런트를 처음 봤었죠. 근데 그 당시엔 그게 뭔지 들어도 몰랐었던 기억이 있습니다.) 일단 데문님 블로그를 주소를 링크 하기 전에,먼저 이게 어떤 패키지 인지 아래 사진을 보시면 금방 이해하실꺼예요.움짤이 작아서 확인이 잘 안되네요. ㅠㅠ요는 이렇습니다.단축키를 누르면 폴더이름 또는 파일..

에디터/아톰(Atom)2016. 12. 27. 20:42

서브라임 텍스트를 사용하고 있었을 때 아주 유용하게 써먹던 기능이 있습니다.다음과 같은 기능을 합니다. 꽤 유용합니다. 실제로 자주쓰이게 될꺼예요.서브라임은 단축키가 컨트롤 + 알트 + 엔터 입니다. 맥은 까먹었네요; 설치 1. 윈도우 : 컨트롤 + 쉼표(,)맥 : 커맨드 + 쉼표(,)이 단축키를 입력을 하면 셋팅 메뉴가 나옵니다.- 좌측 메뉴 중 Install 선택- 우측의 PACKAGES 선택 후 wrap 검색- 하단의 제작자가 sanusart 인 atom- wrap-in-tag 설치 2. 설치하고 바로 단축키를 확인 하거나 변경해 봅니다. 3. VIEW CODE 를 선택하여 이 패키지의 단축키를 확인해 보겠습니다. 4. 좌측 메뉴에서 keymaps 폴더를 열어 wrap-in-tag.cson 을 누르..

에디터/아톰(Atom)2016. 12. 27. 20:13

아톰은 설치를 하면 들여쓰기(탭) 간격이 스페이스바 2번 누른것과 같은 효과입니다.보통 암묵적으로 4칸 들여쓰기를 원칙으로 하고 있어서 이 부분을 수정하고 가면 좋습니다. 차이점 들여쓰기 간격이 기본설정인 상태 (2칸) 들여쓰기 간격을 4칸으로 바꾼 상태 설정하는법 설정은 아주 간단합니다.윈도우 : 컨트롤 + 쉼표(,)맥 : 커맨드 + 쉼표(,)단축키를 이용해서 셋팅창이 뜬다면 메뉴중에서 Editor 클릭,스크롤을 꽤 많이 내려야 Tab Length 가 보입니다. 이 값을 4로 바꾸어 줍니다.

에디터/아톰(Atom)2016. 12. 17. 21:37

예전에 HTML 작업물을 단축키로 브라우저로 여는 기능을 하는 패키지를 소개했던 적이 있습니다.http://recoveryman.tistory.com/239이 패키지는 그냥 단순히 HTML만을 열어볼 수 있었습니다.근데 이번엔 HTML 뿐만 아니라 JSP, PHP등의 페이지도 열어볼 수 있습니다. 또, 크로스브라우징 테스트 할 때 엄청 편합니다. 근데 사용하면서 한가지 오해가 있을꺼 같아서 미리 적어 올립니다.이건 FTP 뭐 그런게 아니라 무조건 내 컴퓨터 기준으로..작업중인 PHP 페이지를 보고싶다, 혹은 ASP 페이지를 보고싶다. 혹은 Ajax로 만든 작업물을 테스트해 보고싶다. 그리고, 모바일 웹 사이트를 만들었는데 휴대폰으로 테스트해야 한다.이럴때 조금 더 유용하다는 거예요. 그런데 이런 것들을 ..

에디터/아톰(Atom)2016. 12. 12. 22:34

아톰의 좌측 과 탭스에 아이콘을 표시하는 패키지 입니다.비슷한 거로 브라켓 에서도 있었죠.다음과 같은 아이콘들이 있습니다. 설치 1. 패키지 설치의 기본이죠.윈도우 : 컨트롤 + 쉬프트 + P -> install 입력 후 Install package and themes 선택맥 : 커맨드 + 쉬프트 + P -> install 입력 후 Install package and themes 선택 2. 좌측 메뉴에서 Install 선택 -> 우측 검색창의 PACKGES 선택 후 icon 검색 3. 설치가 되었으면 바로 적용되어있습니다.셋팅을 알아보기 위해 다음의 버튼을 눌러보겠습니다. 4. 좌측의 아이콘들이 바뀐게 보이실 꺼예요.상단의 탭에도 아이콘들이 표시되어 있습니다. 첫번째 부터 어떤 체크박스들이냐면- 단색의 ..

에디터/아톰(Atom)2016. 12. 12. 17:39

아톰 에디터에 가운데에 선이 하나 쭉 그어져 있는게 있습니다. 저게 왜 있는건지 잘 모르겠지만 용도를 정확히 몰라 일단 안보이게 하려합니다. 상단 메뉴중 File 를 클릭하면 Stylesheet.. 라는 부분이 보입니다. 이 부분은 에디터의 스타일을 책임지는 부분인듯 합니다. 다음과 같이 입력 후 저장합니다. 1 2 3 4 5 atom-text-editor::shadow { .wrap-guide { visibility: hidden; } } cs 그러면 선이 사라져 있습니다.

에디터/아톰(Atom)2016. 12. 10. 23:51

아톰을 굉장히 이쁘게 꾸밀 수 있는 패키지가 있어서 소개해 드리고 싶었습니다. 이런식으로 이쁘게 꾸며 줍니다. 설치 1. 패키지 설치의 기본이죠.윈도우 : 컨트롤 + 쉬프트 + P 입력 후 install 입력 -> Install Packages And Themes 선택맥 : 커맨드 + 쉬프트 + P 입력 후 install 입력 -> Install Packages And Themes 선택 2. 다음과 같이 설치합니다.- 좌측 Install 선택- 검색창 우측의 Themes 를 선택 후 material 검색- atom-material-ui 를 인스톨 3. 설치 완료 후 Settings 를 클릭 4. Settings 를 클릭하면 화면이 바뀌는데 스크롤을 내리면서 체크박스를 모두 체크해 줍니다.이 체크를 다 안..

에디터/아톰(Atom)2016. 12. 10. 22:02

아톰의 실시간 미리보기 입니다.브라켓에서 같은 확장 기능을 포스팅 했었던 적이 있었죠.아톰도 똑같은 기능을 사용하실 수 있습니다.바로 이렇게요. 설치 1. 패키지 설치의 기본이죠.윈도우 : 컨트롤 + 쉬프트 + P 입력 후 install 입력하면 나오는 창에서 Install Packges And Themes 선택맥 : 커맨드 + 쉬프트 + P 입력 후 install 입력하면 나오는 창에서 Install Packges And Themes 선택 2. 그렇게 입력해서 나오는 창에서 live server 를 검색하면 두번째에 atom-live-server 라고 뜹니다. install 합니다. 3. 설치가 완료되면 단축키 확인을 위해 다음과 같이 빈 공간을 클릭해 봅니다. 4. 다음과 같은 창이 나오면 View ..

에디터/아톰(Atom)2016. 5. 3. 01:17

처음 이 패키지의 사진을 보고 아톰을 써야겠다 마음먹었습니다. 저는 솔직히 이 느낌에 뿅 갔어요 ㅋㅋㅋ코딩할때 잠 안올꺼 같아요. 이런거 너무 좋아해요! 이 패키지는 제가 최근에 자꾸 들락날락 거리는 네이버카페의 개발자분이 알려주셨습니다. 네이버 카페 - 개기디마셔 (개발자 + 기획자 + 디자이너 + 마케터 + 퍼블리셔)http://cafe.naver.com/ggdms 설치 윈도우의 경우 : 컨트롤 + 쉬프트 + P -> 입력후 install packages 입력후 엔터맥의 경우 : 커맨드 + 쉬프트 + P -> 입력후 install packages 입력후 엔터 검색창에 activate power mode 검색후 엔터 -> 다음과 같은 패키지를 인스톨 합니다. 단축키가 컨트롤 + 알트 + O 라고 하는데..