본문 바로가기

자바스크립트49

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.
ReactJS - 리액트를 만든 개발자는? , 왜 리액트 사용해해야 하는가! 리액트란? 안녕하세요. 고코더 입니다. ● 1. 오늘은 리액트란 무엇인지 한번 알아보는 시간을 가져보겠습니다. 2013년도에 공개되어 2015년도에는 React Native가 발표되었습니다. 웹부터 모바일까지 확장해서 여전히 꾸준하게 사용되고 있는 최고의 라이브러리입니다. 오늘은 이 리액트란 녀석을 만든 사람과 왜 이걸 사용해야 하는지 알아봅니다. 페이스북 개발자가 만든 프런트엔드 라이브러리 ● 2. 리액트는 Jordan Walke라는 천재 개발자가 만들었습니다. 현재 2010년 페이스북에서 10년이 넘는 시간 동안 재직해왔고, 워싱턴 대학을 나오고, 아마존에서 일을 한 경험도 있는 엘리트 개발자입니다. https://twitter.com/jordwalke ● 3. Jordan Walke의 깃허브와 링크.. 2021. 1. 4.
WebRTC 란? - 개발한 곳은?, 탄생, 문제점, 대표API / 이론 위주로 쉽게 설명 WebRTC를 간단하게 알아보기 안녕하세요. 고코더 입니다. 오늘은 무료 API로 실시간 통을 가능하게 하는 WebRTC에 대해 알아보려고 합니다 한줄 요약 ● 1. 고코더가 생각하는 한줄 요약은 "웹브라우저만으로 플러그인 도움 없이 실시간으로 고품질 커뮤니케이션 기술로, 영상, 음성 및 데이터 통신을 하는 자바스크립트 API이다." 구글이 시작한 프로젝트 ● 2. WebRTC 공식 홈페이지 입니다. 접속하면 Real-time communication for the web(웹을 위한 실시간 커뮤니케이션) 이라고 정체성을 드러내는 문구가 인상적입니다. 그리고 하단에 보면 Google Developers (구글 개발팀)의 로고가 보입니다. https://webrtc.org/ ● 3. WebRTC 소스 저장소.. 2020. 3. 31.
JavaScript - 호이스팅이란? 간단한 예제로 알아보기 / Hoisting 호이스팅 쉽게 알아보자 안녕하세요. 고코더 입니다. 오늘은 자바스크립트 언어의 고유한 특징인 "호이스팅(Hoisting)"을 간단하게 알아보겠습니다. 저는 최대한 한눈에 알아 볼 수 있게 쉽게 설명하려고 합니다. 개념 ● 1. 호이스팅의 단어의 뜻 영어 사전을 보면 해당 단어의 뜻이 "끌어 올리기; 들어올려 나르기."라고 사전에 나옵니다. 이 개념의 의미는 선언들을 끌어올려 최상단에 갖다. 두는 걸 이렇게 표현했습니다. ● 2. 호이스팅의 개념 - 자바스크립트가 실행되면 parser가 빌드하면서 문법을 검사합니다. 이 와중에 끌어올릴 값을 선택하여 내부적으로 최상단으로 끌어 올려 처리합니다. - 여기서 끌어 올려질 내용들은 선언입니다. var, let, const, function 등이 대표적입니다. -.. 2020. 3. 30.
JavaScript - 자바스립트에서 문자열은 큰 따옴표? 작은 따옴표? 자바스크립트 리터럴 문자는 어떤 따옴표로? 안녕하세요. 고코더 입니다. ● 1. 자바스크립트 소스를 보면 문자열을 감싸는 따옴표가 저마다 조금 다른 경우가 있습니다. 12var a = "문자"var b = '문자'cs ● 2. 자바(java)에서는 리터럴 문자 즉 한글자 문자열은 작은 따옴표를 사용합니다. 긴 문자열에 작은따옴표를 사용하면 오류가 납니다. 123char c = 'g';String s = "gocoder"; cs ● 3. 그리고 반대로 SQL에서는 문자열을 큰 따옴표로 사용하게 되면 오류가 납니다. 1WHERE gocoder = 'IT';cs ● 4. 그래서 저마다 의견이 갈리는 경우가 있습니다. 프로시저 개발자들에겐 큰 따옴표로 문자열을 처리한다는게 어색하고 자바 개발자는 반대로 작은 따.. 2019. 12. 9.
V8 엔진 - 구글이 만든 자바스크립트 엔진 V8 JavaScript engine 안녕하세요. 고코더 입니다. 2008년 구글은 독일 개발 센터에서 크롬에 성능을 높히기 위해 C++로 개발한 v8이라는 오픈소스 엔진를 발표합니다. 자바스크립트로 작성된 코드를 JIT(Just-In-Time) 컴파일러를 통해 기계어로 변환해주는 역할을 합니다. 자바스크립트을 엔진으로 하는 프로젝트는 이전에도 많았습니다. 1. Chakra - MS의 익스플로러와 엣지에 사용 위해 개발 - https://github.com/Microsoft/ChakraCore 2. JavaScriptCore - 애플 사파리 브라우저에 사용하기 위해 개발 - https://svn.webkit.org/repository/webkit/ 3. Rhino - 모질라에서 개발한 - https://.. 2019. 11. 27.
JavaScript - getTime()에서 출력되는 값은 어떤 기준일까? getTime으로 표현한 데이터 15자리는 무슨 의미? 안녕하세요. 고코더 입니다. 자바스크립트에서 getTime()은 자주 사용하는 함수 입니다. 시간이 1/1000 까지 나타내주므로 페이지에 로딩 시간을 체크할 수도 있고 채팅에서는 아주 좋은 시간 값으로 사용이 가능합니다. ● 1. 그런데 숫자 모양이 조금 이상하게 느껴질 수 있습니다. 현재 getTime 을 가져오면 이와 같은 값이 나타납니다. 1574663052422 ● 2. 이건 1970.01.01 이후 부터 경과한 시간을 milliseconds 단위 그러니깐 1/1000단위로 표현된 숫자 표현입니다. 그래서 반대로 1970년대 이전으로 날짜로 하고 계산을 하면 이렇게 마이너스 값을 확인 가능합니다. -315619200000 ● 3. 결론은 1.. 2019. 11. 25.
javascript - 자바스크립트란? 그리고 개발자에게 자바스크립트란? 자바스크립트란? 안녕하세요. 고코더 입니다. 자바스크립트는 넷스케이프 커뮤니케이션즈 코퍼레이션사에 브래던 아이크가 개발한 객체기반의 스크립트 언어 입니다. HTML과 CSS로 만들어진 정적인 화면을 동적으로 변경해주는 언어입니다. 페이지에 컨텐츠를 변경하거나 이미지를 움직이게 하거나 그리기도 할 수 있습니다. 그 밖에도 동적인 모든것을 이벤트를 주어 사용할 수 있게 합니다. 자바스크립트의 특징은 이렇습니다. 1. 상속과 클래스 개념이 없는 객체 기반의 언어이다 2. 인터프리터 언어로 브라우저에 의해 해석 가능하다. 3. HTML 문서 안에 기술 가능하고 함께 수행한다. 4. 클라이언트 자원을 활용할 수 있게 한다. 자바스크립트의 구성 1. 객체 - 사용자 정의 객체, 내장 객체, 브라우저 객체를 사용할 .. 2019. 11. 22.

티스토리툴바