IT_Developers/Online IDE26 Repl.it - 레플릿 이메일로 가입하기 repl.it email로 회원가입 안녕하세요. 고코더 입니다. ● 1. 이전 시간에는 레플릿에서 회원가입 없이 코딩을 연습할 수 있는 방법을 배웠습니다. 하지만 다양한 서비스를 만나보고 싶다면 가입하여 사용하시는 걸 추천합니다. ● 2. 사이트에 접속해서 Sign up을 클릭합니다. 혹은 https://repl.it/signup 에 바로 접속하셔도 좋습니다. ● 3. 접속한 후에는 차례대로 정보를 입력합니다. 첫 번째 칸은 이름을, 두 번째 칸은 이메일을, 마지막 칸은 비밀번호를 입력하고 Sign up를 클릭합니다. ● 4. 그럼 바로 사용할 수 있도록 개인 창이 뜨지만 상단 위에는 "Please verify your email. Resend verification link"라며 이메일을 인증하라고 메.. 2021. 1. 17. Repl.it - 레플릿 회원가입 없이 코딩 연습하기 회원가입 없이 코딩하기 안녕하세요. 고코더 입니다. ● 1. repl.it는 간단하게 코딩을 연습할 수 있기에 좋은 사이트입니다. UI도 좋고 기능도 강력하며 설치도 필요 없습니다. 그런데 홈페이지에서 "Start coding"을 클릭하면 ● 2. 회원가입 창이 나타납니다. 그래서 회원가입이 필수라고 생각할 수 있는데요. 회원을 가입하지 않아도 간단하게 코딩을 연습할 수 있습니다. ● 3. 바로 해당 URL로 https://repl.it/languages/c 접속하게 되면 바로 코딩이 가능합니다. 그리고 여기서 원하는 언어를 선택하면 바로 회원가입 없이 프로그래밍 연습이 가능합니다. 마무리 그래도 회원가입을 해서 사용하는 게 좋습니다. 2021. 1. 17. Repl.it - 온라인에서 코딩을 할 수 있는 사이트 / Online IDE 온라인에서 프로그래밍을 공부할 수 있는 사이트 안녕하세요. 고코더 입니다. ● 1. 오늘은 온라인 IDE 중에서도 강력한 기능을 자랑하는 사이트를 소개하려고 합니다. "read evaluate print loop"의 약자를 따서 만든 https://repl.it/ 라는 사이트입니다. 온라인에서 설치 없이 바로 코딩을 하고, 실행도 하고, 컴파일도 할 수 있는 최고의 서비스입니다. ● 2. 이 사이트는 페이스북 개발자들이 퇴사해서 만든 스타트업 기업이라고 합니다. Amjad Masad,Faris Masad,Haya Odeh 창립하였습니다. 이들의 목적은 "웹 브라우저에서 코드를 쉽고, 빠르게 작성하여 작성할 수 있도록 하는 것입니다."라고 합니다. ● 3. 이 사이트에서 실행할 수 있는 언어의 수는 현재 .. 2021. 1. 17. CodePen - 코든펜 공식 영문 메뉴얼 사이트 코드펜 블로그에 나온 매뉴얼 안녕하세요. 고코더 입니다. ● 1. 요즘 나오는 서비스가 그러하듯이 코드펜 역시 자신들의 공식 매뉴얼을 제공합니다. 사이트 형태로 제공합니다. 모든 기능에 대한 설명이 나타나 있습니다. 단점은 역시 영문으로 되어 있는데요. https://blog.codepen.io/documentation/ ● 2. 크롬을 사용하셔서 한국어로 번역해보시길 바랍니다. ● 3. 그럼 한글로 자연스럽게 번역된 코드펜 매뉴얼을 확인할 수 있습니다. 조금 어색한 부분도 있지만 충분히 이해 가능한 수준입니다. 마무리 이상하게 공식 매뉴얼은 눈에 안 들어긴 하네요 2021. 1. 10. CodePen - 코드펜을 웹에서 삽입할 수 있게 하기 / Embed 코드펜 에디터 다른 곳에서 보여주기 안녕하세요. 고코더 입니다. ● 1. 코드펜에서 작성한 코드를 에디터 창 그대로 웹으로 공유하는 방법을 알아보려고 합니다. 코드펜은 누구나 함께 소스를 오픈하고 개발하면서 서로의 작품을 공유하는 공간입니다. 가끔 좋은 펜(Pen)이 있다면 이를 웹페이지에 삽입할 수 있습니다. ● 2. 방법은 우선 Pen에 접속해서 embed를 클릭합니다. 해당 기능은 다른 웹페이지에 소스를 심을 수 있게 만들어 줍니다. ● 3. 그럼 이렇게 Embed 모드가 활성화됩니다. 여기에 있는 옵션을 사용하여 퍼갈 수 있게 됩니다. ● 4. iframe 이랑 HTML 모드가 존재합니다. 이는 방식의 차이입니다. ● 5. 소스를 확인해보면 HTML 모드는 P태그로 페이지에서 작동되도록 되어 있고.. 2021. 1. 10. CodePen - 코드펜 에디터 레이아웃을 변경하기 코드펜 에디터 가로로 사용하기 안녕하세요. 고코더 입니다. ● 1. 코드펜의 기본 레이아웃은 보시는 거처럼 상단에 코드를 작성할 수 있는 코드들이 있고 결과는 아래에 표시되는 형태를 취합니다. 개인적으로는 와이드 화면에서 위와 아래로 나누는 화면은 효율적이지 못한 거 같습니다. 그리고 코드가 한눈에 보이는 건 위아래로 나열할 때 저는 좀 더 편한 걸 느낍니다. ● 2. 화면 상단에 Change View를 클릭합니다. 그럼 "Editor Layout"에 3가지 형태의 레이아웃 존재합니다. 이중에 하나를 선택하면 다르게 코드 작성이 가능합니다. 나머지 레이아웃들은 모두 와이드 화면에 왼쪽과 오른쪽에 코드 작성 창이 위치한 방식입니다. ● 3. 왼쪽에 코드 창이 위치한 레이아웃입니다. 요즘처럼 16대 9 비율.. 2021. 1. 9. CodePen - 코드펜 에디터(editor) 테마 변경하기 Pen 개발 창 밝게 바꿔 보기 안녕하세요. 고코더 입니다. ● 1. 코드펜은 기본적으로 다크 테마가 기본입니다. 익숙하기도 합니다. 하지만 간혹 어두운 테마를 싫어하는 개발자도 있고, 우리의 눈은 흰 바탕에 검은 글자가 가장 이상적이라는 글을 본 기억도 있습니다. 사람마다 성향이 다르므로 코드 펜에서는 여러 가지 테마를 준비해놓았습니다. 이번 시간에는 좀 밝은 버전으로 에디터 창을 변경해보겠습니다. ● 2. 로그인 후에 프로필을 클릭해 Settings를 클릭합니다. ● 3. 그리고 왼쪽 탭에서 "Editor Preferences"을 클릭합니다. 에디터의 설정을 바꿀 수 있는 공간입니다. 그러면 테마를 바꿀 수 있는 기능이 맨 위에 보이게 됩니다. ● 4. 여기서 "Light Themes"에서 "Clas.. 2021. 1. 9. CodePen - 코드펜 Pen 생성하기, 삭제하기 삭제된 펜 복원, 삭제 안녕하세요. 고코더 입니다. ● 1. 이전 시간에 가장 기초 작업 단위인 Pen을 추가하고, 삭제하였습니다. 이번에는 이 펜을 복원하거나 3일의 유예기간 없이 완벽히 삭제하는 방법을 배워 보겠습니다. ● 2. 삭제된 펜은 아래 URL에서 확인이 가능합니다. 삭제한 펜이 보입니다. https://codepen.io/your-work?item_type=deleted_item ● 3. 그대로 유지하면 3일 후에 자동으로 삭제되어 있어서 복원할 수 없다고 명시되어 있습니다. ● 4. 그리고 삭제된 펜은 복원한다고 해도 조회수나 좋아요 수는 모두 초기화 됩니다. 오직 소스 코드만 되돌려진다고 명시되어 있습니다. ● 5. Restore를 누르면 삭제된 펜은 다시 복원됩니다. ● 6. Pens.. 2021. 1. 9. CodePen - 코드펜 Pen 생성하기, 삭제하기 펜을 만들고, 지우는 기초적인 작업 배워보기 안녕하세요. 고코더 입니다. ● 1. 코드펜을 사용하는 가장 기초적인 사용법인 Pen을 생성하고 삭제하는 방법을 알아보겠습니다. Pen이라는 단위는 코드펜에서 사용하는 하나의 아이템입니다. 웹으로 치면 하나의 페이지라고 생각하면 쉽습니다. ● 2. 로그인한 후에 코드펜에 접속하면 아래처럼 Work 창이 나타납니다. 여기서 왼쪽 위에 Create에서 Pen을 클릭합니다. ● 3. 그럼 아래처럼 여러 Pen의 종류가 나타납니다. 가장 기본적인 단위인 Pen을 생성해보겠습니다. 그 밖에 다른 Pen들은 차차 알아가 보도록 하겠습니다. ● 4. 펜을 클릭하면 우리가 자주 보게 될 펜 코드 창이 나타납니다. 여기서 프런트엔드의 전반적인 개발을 연습해볼 수 있습니다. h.. 2021. 1. 9. 이전 1 2 3 다음
