본문 바로가기

전체_컨텐츠2572

CodePen - 코드펜에서 소스 정렬하기 codepen.io 에서 소스 보기 좋게 만들기 안녕하세요. 고코더 입니다. ● 1. 코드펜은 프론트엔드를 연습하기 좋은 온라인 사이트입니다. 다양한 편의 기능은 언제나 봐도 일품입니다. 코드펜에서 제공하는 기능중에 하나가 바로 소스 정렬 기능입니다. ● 2. 코드펜에서 아래 화살표로 되어 있는 버튼을 클릭합니다. ● 3. "Format JavaScript"을 클릭합니다. ● 4. 보기 좋게 소스가 정렬됩니다. 기능도 매우 훌륭하여 정렬도 눈이 편하게 잘해주는거 같네요. 마무리 정렬 기능 중 가장 좋은거 같네요. 2021. 2. 13.
React.js - 리액트, 클래스형 컴포넌트(Class Component)란? 클래스형 컴포넌트 사용하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간은 클래스형 컴포넌트에 대해 알아보겠습니다. 기본적으로 클래스형 함수는 state, lifeCycle 관련 기능 사용을 사용 가능하다는 점이 있습니다. 그리고 함수형 컴포넌트보다 조금 더 메모리 자원을 많이 사용하는 큰 특징이 있습니다. ● 2. 클래스형 컴포넌트를 만드는 방법은 맨 앞에 class 사용하면서 시작합니다. 그리고 "render()" 메서드를 사용합니다. 이 메서드를 통해서 JSX을 렌더링 할 수 있습니다. props를 조회할 때 this를 사용하는 특징이 있습니다. 1번 라인 : class로 시작합니다. 2번 라인 : render() 메서드를 사용합니다. class ClassComponent extends React.. 2021. 2. 13.
React.js - 리액트, 함수형 컴포넌트(Functional Component)란? 함수형 컴포넌트를 사용하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 컴포넌트의 종류 중에 하나인 함수형 컴포넌트(Component)를 알아보도록 하겠습니다. v16.8 버전 이전까지는 클래스형 컴포넌트를 사용했었지만 이후부터는 함수형 컴포넌트에 훅을 지원해주어서 함수형 컴포넌트를 함께 사용할 것을 공식 문서에서 권장하고 있습니다. ● 2. 먼저 가장 기초적인 사용 방법을 알아봅니다. 이미 이전 소스에서도 많이 보아왔던 방식입니다. 지금까지 저와 함께 했던 이 방식이 바로 함수형 컴포넌트를 생성하는 방식이었습니다. 2번 라인 : 함수형으로 function을 선언한다. // 보통의 방식 function Guest(props) { return ( Hi! {props.name} ); } ● 3. 만약.. 2021. 2. 12.
Android Studio - 안드로이드 스튜디오 "사용자 가이드" 공식 문서 안드로이드 스튜디오 공식 사용자 가이드 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 안드로이드 스튜디오에서 제공하는 공식 가이드북을 확인하는 방법을 알아보겠습니다. 많은 블로거들이 안드로이드 스튜디오를 친절하게 설명하고 있지만 그래도 구글이 제공하는 공식 가이드를 확인하고 다른 자료를 검토하는 것이 더 좋다고 생각합니다. 보통 이런 공식 가이드는 이해를 돕기 위한 게 아닌 사실을 전하기 위해서 작성된 것이므로 이해되지 않더라도 한번 정도 정독해보시길 바랍니다. ● 2. 사이트 주소는 아래와 같습니다. 왼쪽 메뉴에는 큰 카테고리가 있고 오른쪽 화면에서는 해당 카테고리의 목차를 확인 가능합니다. 거의 완벽한 공식 문서라고 할 수 있습니다. https://developer.android.com/stud.. 2021. 2. 12.
Android Studio - 안드로이드 스튜디오 "단축키(Keymap)" 공식 문서 안드로이드 스튜디오 단축키 알아보기 안녕하세요. 고코더 입니다. ● 1. 마우스의 손을 대지 않을수록 속도는 빨라지고 흐름은 끊기지 않습니다. 그래서 개발할 때 최대한 키보드와 가까워지려고 합니다. 젯 브레인사의 IDE 들은 단축키가 참 잘되어 있습니다. 안드로이드 스튜디오도 마찬가지입니다. 이번 시간에는 안드로이드 스튜디오가 제공하는 공식 단축키 문서를 살펴보려고 합니다. ● 2. 해당 사이트에 접속하면 단축키를 알 수 있는 공식 문서를 보실 수 있습니다. 해당 PDF는 다운로드할 수도 있고, 웹상에서 볼 수도 있습니다. 웹상에는 최신의 문서가 업데이트되기 때문에 온라인으로 확인해보시길 바랍니다. https://resources.jetbrains.com/storage/products/intellij-i.. 2021. 2. 12.
React.js - 리액트, 컴포넌트(Component)란? 컴포넌트에 대해 알아보자 안녕하세요. 고코더 입니다. ● 1. 이번 시간부터는 리액트의 가장 중요한 요소인 컴포넌트(Component)를 알아보는 시간을 가져 보겠습니다. 컴포넌트는 템플릿 이상의 기능을 수행합니다. 데이터를 UI로 만들어 주는 기능을 합니다. 라이프 사이클 API를 통해 컴포넌트가 화면에 나타내는 변화를 작업들을 수행합니다. ● 2. 사이트를 구성하는 예를 들어보겠습니다. 기본적인 홈페이지의 구조는 아래 그림과 같습니다. 헤더, 바디, 푸터로 나뉘어 있습니다. 헤더와 푸터에는 사이트에서 제공하는 기본 내용들이 담겨 있습니다. 그리고 몸통 부분은 바디의 내용이 바뀌는 게 지금까지 많이 개발되어온 구조입니다. 그렇게 하나의 홈페이지가 만들어집니다. ● 3. 컴포넌트란 기능을 단위별로 캡슐화.. 2021. 2. 12.
Go - 레플릿(repl.it)에서 Golang 실행하기 고를 온라인에서 실행하는 최선의 방법 안녕하세요. 고코더 입니다. ● 1. 레플릿에서는 거의 모든 언어의 실행 환경을 제공합니다. 당연히 Go도 예외가 없습니다. 이전 시간에서는 공식 홈페이지에서 제공하는 실행 환경을 알아보았는데 편의성이 부족한 관계로 개인적으로 레플릿을 추천드립니다. ● 2. 해당 주소를 접속하면 Go를 실행할 수 있는 온라인 IDE가 나타납니다. 가독성도 뛰어나고 로그인 없이 사용이 가능합니다. 정말 편리합니다. https://repl.it/languages/go ● 3. 만약 리플릿을 가입되어 로그인되어 있다면 좀 더 편리하게 사용이 가능합니다. ● 4. 테스트한 파일을 저장하고 빌드를 하면서 하나의 프로젝트로 만들어 갈 수도 있습니다. 현재 Go를 쉽게 실행하고 테스트할 수 있는.. 2021. 2. 10.
Go - 공식 홈페이지에서 Golang을 실행 하고 테스트하기 / play.golang.org 홈페이지에서 고 실행해보기 안녕하세요. 고코더 입니다. ● 1. Go의 공식 웹사이트는 https://golang.org/ 이라는 주소를 가진 사이트입니다. 사실 사이트 분위기나 이미지가 유아 코딩처럼 느껴질 정도로 애니 틱 하지만 최고의 개발자가 만든 언어 Go의 공식 홈페이지입니다. 홈페이지를 자주 방문해야 하는 이유가 하나 있습니다. 바로 Go를 실행할 수 있는 온라인 IDE 환경을 제공해주기 때문입니다. 홈페이지를 접속하자 보이는 화면도 바로 Go의 헬로우 코드를 실행해 볼 수 있는 화면이 나타납니다. ● 2. 그리고 해당 주소로 접속하면 본격적으로 GO를 테스트할 수 있는 온라인 환경이 나타납니다. Run을 클릭하면 바로 실행이 가능합니다. https://play.golang.org/ ● 3. .. 2021. 2. 10.
Repl.it - 레플릿 깃허브(github) 연동하기 repl 깃허브 연동하여 사용하기 안녕하세요. 고코더 입니다. ● 1. 레플릿을 이메일로 가입했다면 깃허브 연동을 따로 해야 합니다. 개인적으로 깃허브로 레플릿을 가입하기 보다는 이메일로 가입 후에 따로 연동하는 것을 추천합니다. 왜냐하면 아이디를 마음대로 만들 수 있기 때문입니다. ● 2. 그리고 레플릿은 깃허브와 연동하여서 소스를 가져오는 일이 가능합니다. 그래서 이번 시간에는 깃허브를 연동하는 방법을 알아봅니다. 프로필 수정에서 제일 아래쪽에 "Connected services" 해당 메뉴가 나타납니다. 깃허브를 Connect를 클릭합니다. https://repl.it/account ● 3. 그러면 새 탭으로 깃허브 로그인 창이 나타납니다. 여기서 자신의 계정을 클릭하고 "sign in"을 클릭합니.. 2021. 2. 10.

티스토리툴바