본문 바로가기

전체 글2572

React.js - JSX에서 주석 사용하기 JSX에서 주석 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSX에서 주석을 사용하는 방법을 알아보겠습니다. JSX는 자바스크립트 기반입니다. 그러므로 주석도 스크립트에서 사용하는 방식입니다. 주석은 개발자들의 흔적을 남길 수 있고 지우는 대신에 주석을 처리함으로 실행되지 않게 할 수 있습니다. ● 2. 단일 행을 처리하는 주석입니다. 한 줄 한줄 사용 가능합니다. //단일행 주석 ● 3. 복수행을 처리하는 주석입니다. 여러 줄을 처리하는 복수행 주석을 사용합니다. /* 복수행 주석 */ ● 4. 예제 소스를 함께 살펴보겠습니다. 3번, 4번 라인 : 복수행 주석을 사용하여 2개의 줄을 한 번에 주석 처리했습니다. 5번 라인 : 중괄호 안에 자바스크립트에도 사용 가능 6번 라인 : 단일행을 주석.. 2021. 1. 20.
React.js - JSX에서 자바스크립트 문법 사용하기 JSX에서 javascript 문법 사용 안녕하세요. 고코더 입니다. ● 1. JSX는 자바스크립트와 XML이 합쳐진 확장 문법이라고 배웠습니다. 그러므로 JSX에서는 자연스럽게 자바스크립트의 모든 문법을 지원합니다. ● 2. 그러므로 자바스크립트에서 사용하는 제어문인 IF부터 함수를 만드는 function까지 모두 사용이 가능합니다. 예제 소스를 함께 살펴보겠습니다. function getGuest(user) { if (user) { return Hi {user}!; } return HI! Guest; } const element = {getGuest()}; //const element = {getGuest("GoCoder")}; ReactDOM.render( element,document.getEle.. 2021. 1. 20.
크롬 - 새 탭을 검은색 빈화면으로 나오게 하기 / Empty New Tab Page - Black 검은색으로 새 탭 만들기 안녕하세요. 고코더 입니다. ● 1. 이전 시간에 크롬 기본 기능으로 탭을 열 때 "about:blank"를 이용해 빈 페이지로 보이도록 하는 방법을 알아보았습니다. 이번에는 좀 더 탭을 열 때 집중력을 흩트리지 않도록 검은색 바탕의 탭으로 열 수 있는 방법을 알아보겠습니다. 이번 시간에는 크롬 확장 프로그램을 사용해야 합니다. ● 2. 크롬으로 해당 프로그램인 Empty New Tab Page - Black로 접속합니다. 그리고 해당 프로그램을 설치를 합니다. 단순히 "Chrome에 추가"만 클릭해주면 됩니다. ● 3. 그렇게 설치 이후에 새 탭을 열어보면 이렇게 검은색 바탕화면으로 시작합니다. 집중 안될 때는 이만한 게 없어 보이네요. 마무리 회사에서 사용하기 좋아요. 2021. 1. 20.
React.js - JSX에서 자바스크립트를 사용하는 방법 / 중괄호{} JSX에서 JavaScript 를 사용하기 안녕하세요. 고코더 입니다. ● 1. JSX에 대해 알아보았습니다. 자바스크립트와 XML 합성어로 만들어진 단어인 만큼 당연히 JSX에서는 스크립트를 사용할 수 있습니다. 하지만 규칙이 있고 방법은 어려운 부분은 아닙니다. 간단한 예제를 통해서 쉽게 학습할 수 있습니다. ● 2. JSX 태그안에서 중괄호 "{}"는 자바스립트를 사용할 수 있도록 합니다. 일종의 약속입니다. 이 부분만 안다면 자바스크립트를 원하는 곳에 자연스럽게 입력할 수 있습니다. 예제를 한번 살펴보겠습니다. ● 3. 스크립트 영역에서 name 이라는 변수에 "GoCoder"라는 텍스트를 입력하고 이를 element안에 변수를 함께 넣어서 문자열을 만들었습니다. 자바스크립트를 JSX 태그 안에 .. 2021. 1. 20.
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.
자바스크립트, CSS 브라우저별 호환성 체크 사이트 - caniuse.com JAVASCRIPT, CSS 크로스 브라우징 호환 테스트 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 정말 유익한 사이트를 하나 소개해드리겠습니다. 크로스 브라우징 환경에서 동작하는 웹사이트를 만들기 위해서는 기본적으로 호환성이 뛰어난 문법을 사용해야 합니다. 특히 익스플로러가 문제를 일으킵니다. 매번 브라우저별로 테스트를 할 필요 없이 이 사이트에서 간단하게 호환성을 체크할 수 있습니다. ● 2. 캔아이유즈 닷컴입니다. 해당 사이트를 접속하면 빨간 검색창이 눈에 먼저 보입니다. 이 검색창에 궁금한 문법을 입력하면 됩니다. 가령 예를 들면 https://caniuse.com/ ● 3. 자바스크립트에서 배열을 찾아주는 "findindex"를 검색해보았습니다. 브라우저별 호환성을 보니 ie11에서도 .. 2021. 1. 19.
무료 폰트 - 빙그레 서체 다운로드 / 첨부파일 / 싸만코체, 메로나체, 따옴체 빙그레체 무료 다운로드 안녕하세요. 고코더 입니다. ● 1. 요즘 각 기업에서 무료로 폰트를 만들어 제공하는 경우가 많습니다. 그리고 해당 폰트들은 기업의 이미지를 담아 그런지 쓸만하고 이쁩니다. 이번 시간에는 그중에서도 귀여운 느낌이 가득한 빙그레 서체를 알아보는 시간을 가져보겠습니다. ● 2. 해당 빙그레 서체를 배포하는 사이트를 방문하면 현재 5개의 폰트를 배포 중입니다. 당연히 기업까지 모두 무료입니다. http://bingfont.co.kr/index.html ● 3. 해당 URL로 접속하면 빙그레 폰트를 미리 사용해보시고 다운로드가 가능합니다. http://bingfont.co.kr/bingfont.html ● 4. 첨부파일을 다운로드해서 설치하셔도 됩니다. 설치 버전 폰트 파일 버전 마무리 .. 2021. 1. 19.
노션 - 제목 블록 사용하기 / Notion 노션에서 제목1, 제목2, 제목3 사용하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 노션에서 제목 블록에 대해 알아보려고 합니다. 제목은 HTML에서 "제목 태그"로 사용하는 그 개념과 같습니다. 해당 콘텐츠에 대한 대제목, 중제목, 소제목을 표현할 수 있습니다. HTML에서는 1부터 6까지의 제목을 지원하지만 현재 노션에서는 h1, h2, h3 이 3가지의 제목만을 사용 중입니다. ● 2. 블록을 생성 레이어를 열면 이렇게 1부터 3까지의 제목 태그가 있습니다. 대, 중, 소로 나뉘어 있습니다. ● 3. 해당 제목 태그를 차례대로 사용하였습니다. 맨 위에는 페이지의 제목이고 밑에부터 블록을 사용한 제목입니다. ● 4. 제목은 대, 중, 소 차례대로 사용하는 걸 권장합니다. 아래 그림은 정상적.. 2021. 1. 19.

티스토리툴바