본문 바로가기

IT_Developers1149

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.
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.
HTML - <h1>,<h2>,<h3>,<h4>,<h5>,<h6> 제목요소 제목 태그 사용법 안녕하세요. 고코더 입니다. ● 1. 책을 읽다 보면 언제나 제목이 중요합니다. 표지에 적혀 책의 이름을 나타내는 제목 그리고 각 챕터마다의 제목까지 나타냅니다. HTML에서도 이런 제목을 나타내는 태그가 있습니다. 바로 ,,,,, 가 그 주인공입니다. 예제 사용법 ● 2. 사용법은 아주 단순합니다. 제목 태그 안에 텍스트를 넣으면 완성입니다. 1부터 6까지 크기가 비례합니다. 1이 가장 크고 6이 가장 작습니다. 제목 레벨 1 제목 레벨 2 제목 레벨 3 제목 레벨 4 제목 레벨 5 제목 레벨 6 ● 3. 결과 화면은 아래와 같습니다. ● 4. 문서 구조의 대한 정합성을 위해서 해당 태그는 순서에 맞게 사용하는 게 좋습니다. 제목 레벨 1 제목 레벨 6 제목 레벨 1 제목 레벨 2 마.. 2021. 1. 19.
React.js - 코드펜(CodePen)으로 리액트 실행하기 CodePen으로 리액트 실행 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 코드펜을 사용하여 리액트를 실행하는 방법을 알아보겠습니다. 코드펜은 제 블로그에서 다루었던 프런트엔드 개발을 연습할 수 있는 온라인 IDE 사이트입니다. 해당 사이트의 사용법은 해당 "코드펜 사용법" 태그를 통해서 학습해주시기 바랍니다. 하지만 보통의 개발자라면 바로 사용법을 익힐 수 있기 때문에 그대로 따라오 오셔도 될 거 같습니다. ● 2. 코드펜을 로그인하고 Pen을 생성합니다. 무료 사용자도 사용이 가능합니다. ● 3. 펜이 생성되었다면 Settings를 클릭합니다. ● 4. 왼쪽 탭에 JS를 클릭합니다. 자바스크립트 설정을 할 수 있는 화면이 오른쪽에 나타납니다. 그리고 "Add External Scripts/Pe.. 2021. 1. 18.
CDN - JSDelivr js,css 버전 변경하기 / 구버전 사용하기 JSDelivr 구버전 소스 사용하기 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSDelivr에서 구버전 소스를 참조하는 방법을 알아보겠습니다. JSDelivr는 강력한 js, css CDN 서버입니다. 게다가 무료입니다. 각종 필요한 라이브러리를 타 서버를 이용해 빠르게 사용할 수 있다는 건 분명 큰 장점입니다. 그리고 무엇보다 최신 버전의 라이브러리를 제공받아서 사용이 가능하다는 장점이 있습니다. 그런데 가끔 구버전의 라이브러리가 필요합니다. ● 2. 우선은 URL에 버전이 생성된 경우가 있습니다. 아래와 같은 경우는 URI 중간에 4.7.0이 있습니다. 이 부분은 버전입니다. 중간에 숫자를 변경하는 것만으로 버전을 변경 가능합니다. 이렇게 접속하면 4.7.0 버전의 CDN 소스를 사용 가.. 2021. 1. 18.

티스토리툴바