IT_Developers/Online IDE26 CodePen - 코드펜에서 소스 정렬하기 codepen.io 에서 소스 보기 좋게 만들기 안녕하세요. 고코더 입니다. ● 1. 코드펜은 프론트엔드를 연습하기 좋은 온라인 사이트입니다. 다양한 편의 기능은 언제나 봐도 일품입니다. 코드펜에서 제공하는 기능중에 하나가 바로 소스 정렬 기능입니다. ● 2. 코드펜에서 아래 화살표로 되어 있는 버튼을 클릭합니다. ● 3. "Format JavaScript"을 클릭합니다. ● 4. 보기 좋게 소스가 정렬됩니다. 기능도 매우 훌륭하여 정렬도 눈이 편하게 잘해주는거 같네요. 마무리 정렬 기능 중 가장 좋은거 같네요. 2021. 2. 13. Repl.it - 레플릿 깃허브(github) 연동하기 repl 깃허브 연동하여 사용하기 안녕하세요. 고코더 입니다. ● 1. 레플릿을 이메일로 가입했다면 깃허브 연동을 따로 해야 합니다. 개인적으로 깃허브로 레플릿을 가입하기 보다는 이메일로 가입 후에 따로 연동하는 것을 추천합니다. 왜냐하면 아이디를 마음대로 만들 수 있기 때문입니다. ● 2. 그리고 레플릿은 깃허브와 연동하여서 소스를 가져오는 일이 가능합니다. 그래서 이번 시간에는 깃허브를 연동하는 방법을 알아봅니다. 프로필 수정에서 제일 아래쪽에 "Connected services" 해당 메뉴가 나타납니다. 깃허브를 Connect를 클릭합니다. https://repl.it/account ● 3. 그러면 새 탭으로 깃허브 로그인 창이 나타납니다. 여기서 자신의 계정을 클릭하고 "sign in"을 클릭합니.. 2021. 2. 10. Repl.it - 레플릿 프로필 수정하기 레플릿 Profile 수정하기 안녕하세요. 고코더 입니다. ● 1. 레플릿을 가입하였다면 자신의 계정으로 공식 프로필이 생겨납니다. 제 프로필의 주소는 아래처럼 생성되었습니다. 아무런 설정을 하지 않은 상태라 기본 그대로입니다. https://repl.it/@gocoder ● 2. 기본 프로필이 주어진 사진도 이뻐서 저장.. ● 3. 프로필 수정을 위해 아래 사이트로 이동합니다. 그리고 자신의 정보를 입력합니다. 참고로 Bio는 자신의 소개를 입력하는 칸입니다. 수정이 완료되면 Save를 클릭하고 "View my public profile"을 클릭합니다. https://repl.it/account ● 4. 그럼 변경된 프로필을 확인 가능합니다. 프로필을 편집하여 자신의 존재를 들어내세요. 마무리 기본 그.. 2021. 2. 10. Repl.it - 레플릿 유료로 업그레이드 하기 / 소스 비공개하기 repl.it 소스 비공개는 유료 서비스 안녕하세요. 고코더 입니다. ● 1. 레플릿에서는 무료로 소스 코딩 연습이 가능하지만 유료로 업그레이드하여서 좀 더 집중적으로 사용이 가능합니다. 그리고 무엇 보다. 소스를 비공개하려면 결제가 필요합니다. Hacker라고 하는 게 바로 유료 서비스입니다. ● 2. 로그인 후에 해당 사이트를 접속하면 유료 구매가 가능합니다. 구매 후에 서비스는 아래와 같습니다. 소스 비공개와 저장공간 5GB, 메모리 2GB, CPU 속도는 4배입니다. Private repls 10x the storage = 5 GB 4x the memory = 2 GB 4x the speed = 2 vCPUs https://repl.it/site/pricing ● 3. Upgrade to Hack.. 2021. 1. 23. CodePen - 코드펜에서 미리보기(Preview)가 안보일때 코드펜 라이브 뷰 안 보일 때 안녕하세요. 고코더 입니다. ● 1. 코드펜을 사용하다 무엇을 잘못 만졌는지 화면처럼 미리 보기 화면이 깜쪽같이 사라져 버렸습니다. 당황스럽지만 차분하게 모든 버튼을 클릭하고 눌러봤지만 도저히 나타나지가 않네요. 그러다가 우연히 알아낸 건 매우 황당한 사실.. 바로 맨 밑에 두꺼운 바를 클릭해보았습니다. ● 2. 네 바로 미리보기가 제일 작가 되어서 바닥 맨 밑에까지 붙어버려서 보이지 않았고 이를 클릭하여 위로 올려보니 프리뷰가 다시 나타납니다. 와 이걸로 30분은 헤맨 거 같습니다. 결국 단순하게 프리뷰를 최소화시켜놓았던 것입니다... ● 3. 혹시 코드펜에서 코딩하시다가 프리뷰가 안 보이는 분들은 만 아래에 바를 클릭하여 올려 보세요.. 마무리 겨우 이런 이유 때문에 3.. 2021. 1. 23. CodePen - 코드펜 작업을 자동 저장하기 코드펜 오토 세이브 사용하기 안녕하세요. 고코더 입니다. ● 1. 코드펜을 사용할 때는 저장이 중요합니다. 언제 갑자기 브라우저가 종료돼버리면 작업한 것들이 모두 날아가버리기 때문입니다. 펜을 수정 창에서 "Settings"를 클릭합니다. ● 2. Behavior에서 "Save Automatically"를 활성화 하시기 바랍니다. 그래서 자동으로 시간마다 저장이 실행되는 이 부분을 On으로 설정하면 30초마다 자동으로 결과 물이 저장되므로 브라우저 종료로 인한 작업 날림이 적어질 것입니다. 마무리 기본 옵션은 자동 저장입니다. 괜히 off 해놓고 하다가 날렸네요. 2021. 1. 20. 테이어(Theia) - 크롬에서 VSCode를 사용하는 방법 / theia-ide.org 온라인 IDE 테이어 안녕하세요. 고코더 입니다. ● 1. 재밌는 클라우드 온라인 개발 프로그램을 하나 소개해드리려고 합니다. 현재 무료 IDE 중에 최고라고 하면 저는 단연 비주얼 스튜디오 코드를 뽑습니다. 이클립스라는 절대 강자가 있지만 자바에 한정된 무료 도구이지만, VSCode는 만능입니다. 이 대단한 도구를 온라인에서 사용이 가능합니다. 일렉트론으로 개발했으니 온라인으로 실행도 가능하겠네요. ● 2. 테이어를 사용하기 위해 해당 사이트에 접속합니다. 그리고 "Try in Gitpod"를 클릭합니다. https://theia-ide.org/ ● 3. 그럼 이렇게 현재 로그인된 깃허브와 연동할 수 있는 화면이 나타납니다. "Authorize gitpod-io"를 클릭합니다. ● 4. 그럼 자동으로 .. 2021. 1. 19. CodePen - 코드펜 소스 비공개는 유료 서비스 입니다. 코드펜 소스를 나만 보는 방법 안녕하세요. 고코더 입니다. ● 1. 코드펜은 누구나 무료로 프런트엔드 소스를 저장하고 실습하고 공유할 수 있는 좋은 사이트입니다. 그런데 기본 정책은 공개입니다. 즉 내가 만든 모든 소스들은 누군가 참고하고 수정할 수 있는 것입니다. 그런데 가끔은 비공개로 소스를 나만 가지고 싶을 때가 있습니다. 그럴 경우에는 로컬에서 개발하는 게 맞지만 코드펜에서도 소스를 비공개할 수 있는 방법이 있습니다. ● 2. 유료 서비스를 사용하면 코드펜에서는 "Private Pens, Collections, and Projects." 라는 서비스를 Annual Starter 부터 제공을 합니다. ● 3. 일명 코드펜 Pro가 되면 만들어놓은 소스를 공개하지 않고 혼자만 볼 수 있습니다. 1년에.. 2021. 1. 18. Repl.it - 레플릿 깃허브 연동하여 가입하기 github 아이디로 연동하여 회원가입 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 이메일로 가입이 아닌 깃허브를 연동해서 가입하는 방법을 알아보겠습니다. https://repl.it/signup 회원가입 주소로 접속 후에 깃허브 아이콘을 클릭합니다. ● 2. 깃허브에 로그인한 상태라면 아래처럼 연동을 위한 절차가 진행됩니다. 제공될 정보는 아래와 같습니다. "Authorize Repl.it Online IDE"를 클릭합니다. - GitHub ID - 액세스 할 수 있는 리소스 파악 - 활동 내역 - 계정에 이메일 주소 ● 3. 그런데 가져온 ID가 하이픈을 빼고 입력이 됩니다. 깃허브에서는 gocoder-net으로 가입했는데 리플릿에서는 하이픈이 빠진 gocodernet이 되어버렸습니다. 음 이.. 2021. 1. 17. 이전 1 2 3 다음
