구 원트노/멋사 - 1학기 보조

[멋쟁이 사자처럼 5기]C9의 파워풀한 기능들!!(C9 꿀팁) 1


C9의 Powerful한 기능들 (C9 꿀팁) 1


폭풍 같던 1주차 html & css & github의 늪을 지나고 


이제 멋사의 A to Z인 ruby on rails의 세계에 들어오신 걸 축하합니다.


이제 좋던 싫던 cloud9 (c9.io)에서 6개월~그 이상 지내실 예정입니다.


그래서 이번에는 C9에 대해, 특히 제가 생각하기에 C9의 꿀 같은 기능들에 대해 이야기해보도록 하겠습니다.


아 먼저 C9에 대해서 간략히 알고 싶은 분들은 이전글인  [멋쟁이 사자처럼 5기] c9과 github이란?


을 참고해주세요!




1. emmet 기능


html 이나 css를 작성할 때 많은 시간을 할애하고 있지 않나요? 


emmet은 html 코드 작성을 훨씬 빠르게 효율적으로 가능하게 하는 기능입니다.


그리고 이 기능은 c9에 자동으로 내장되어 있는 기능입니다.


기능에 대한 설명은 아래 움짤로 보여드리겠습니다.



사용법에 대해서 간략히 설명하자면 h1을 입력하시고 tab키를 누르면 


자동으로 <h1></h1>코드가 작성이 되어집니다.


class나 id를 지정하는 것도 간단히 설정할 수 있습니다. 만약 div.myclass#myid를 입력하고 tab키를 누르면


1
<div class="myclass" id="myid"></div>
cs


이런 코드가 완성이 됩니다.


더 자세한 사용법을 알고 싶다면 


https://opentutorials.org/course/671/3987 여기나 https://docs.emmet.io/ 


여기를 참고하면 됩니다.


물론 움짤 내용 부분만 알고 있어도 코드 작성 시간이 많이 단축되실 겁니다.




2. 자동 저장(autosave) 기능


저번 주 C9에서 작업하면서 가장 많이 겪었던 문제 중에 하나가 


분명 나는 코드를 변경하였는데 실제 확인해보니 그대로인 경우가 많이 있었죠?


이러한 오류의 80%는 변경 코드를 저장을 안 해서 생긴 문제였고


그래서 습관적으로 ctrl + s (command + s)를 입력하라는 말을 많이 했습니다.


이러한 문제를 해결하는 또 다른 방법은 애초에 코드를 자동 저장해버리는 겁니다.


적용 방법입니다.



먼저 workspace 내에서 Cloud9/Preferences를 선택합니다.



그 후 EXPERIMENTAL/FIles/Auto-Save 기능의 버튼을 사진처럼 활성화 시켜주면 자동 저장 기능이 활성화됩니다.


이 부분에 대한 내용은 https://apidoc.c9.io/c9v3/#!/api/autosave


여기를 참고해주시면 됩니다.



3. Collaborate(협업) 기능


C9은 클라우드 기반의 개발환경 IDE인 만큼 협업의 큰 장점을 가지고 있습니다.


그리고 다른 사람의 워크스페이스에 접속해서 온라인으로 같이 코드를 보고 작성할 수 있는 기능을 제공하고 있습니다.


다른 사람의 워크스페이스에 접근하는 방법은 간단합니다.


c9의 워크스페이스 주소는


https://ide.c9.io/사용자아이디/워크스페이스명 으로 이루어져있습니다.


이 형식대로 주소창에 입력하면 상대방의 워크스페이스에 접속 가능하구요.


더 쉽게 접근하고 싶다면 상대방에게 워크스페이스 주소를 알려달라고 하면 됩니다.


이렇게 상대방의 워크스페이스에 접속하면 상대방의 워크스페이스의 읽기 권한만 존재합니다.


수정 권한을 얻을려면




오른쪽 상단의 Request Access를 선택하고



저 버튼을 통해 요청을 하고 상대방이 받아들인다면 수정 권한이 생겨서 같이 작업할 수 있게 됩니다.


만약 코드를 작성하다가 문제가 생겨서 도움을 요청할 때에도 굉장히 유용한 기능이라고 생각합니다.


물론 협업을 요청하는 방법은 여러가지가 있구요 collaborate 기능에 대해서 더 자세한 내용이 궁금하다면


https://docs.c9.io/docs/share-a-workspace


여기를 참고하면 됩니다!



궁금하신 점 있으시면 댓글 남겨주세요!!

1 2 3 4 5