오늘은 페이스북에서 개발한, 그리고 페이스북에서 사용되고 인스타그램에서도 사용되는 리액트를 설치하고 실행하는 방법에 대해서 알아보겠습니다 React는 유저 인터페이스를 만들 때 사용되는 오픈 소스 자바스크립트 라이브러리입니다 프런트엔드 개발자 사이에서 굉장히 많은 인기를 얻고 있어요 실제로 npm 패키지 다운로드 수는 react가 자바스크립트 라이브러리 중 1등입니다 그러면 이제 리액트를 설치해 볼까요? https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js 기반으로 실행되기 때문에 먼저 다운 받아 주세요 node.js 는 보통 서버 구축을..
TypeScript 마이크로소프트에서 발표한 JavaScript에 정적 타입 개념을 추가한 신형 언어. CoffeeScript와 마찬가지로 컴파일 결과는 JavaScript입니다 정적 타입을 명시할 수 있다는 점이 기존 자바스크립트와의 가장 큰 차이점 입니다 정적 타입을 명시하는 것은 개발자가 의도한 변수나 함수 등의 목적을 명확히 하는데 중요한 역할을 합니다 이는 잘못된 정보로 인한 에러를 미리 방지할 수 있습니다 자바스크립트에 타입을 추가해 타입 언어가 된 TypeScript는 코드의 견고함을 강점으로 내세우고 있습니다. 현재는 Angular 2 이후에서 이 언어를 채택하면서 많이 사용되기 시작했습니다. ECMAScript 2015 표준도 구현되어 있으며 순수한 JavaScript와 문법적인 차이가 ..
안녕하세요 웹 개발을 하시는 분들은 HTML CSS Javascript 조합으로 많이들 사용하실 텐데요 오늘은 javascript의 개발 시간을 단축시켜줄 수 있는 프레임워크들에 대해서 알아보겠습니다 언어들 중에 자바스크립트 언어가 프레임워크가 잘 나와있는 축에 속하는 것 같아요 ㅎㅎ 새련되고 이쁜 프레임워크들이 많습니다 jQuery 메서드 체이닝을 통해 DOM Manipulating 를 조작하는라이브러리입니다. 예전에는 자바스크립트 개발에 필수일 만큼 인기가 많았지만 react, angularjs 등의 프레임워크의 생산성이 워낙 높다 보니 2010년대 후반부터는 아주 간단한 웹사이트에서만 쓰이고 안쓰는 추세입니다. 기본적으로 document.querySelectorAll('oooo')를 $('oooo'..
안녕하세요 오늘은 프로그래밍을 하시는 분들이라면 거의 대부분이 필수로 사용하게 될 라이브러리와 프레임워크에 대해서 얘기를 해보려고 합니다 라이브러리와 프레임워크는 다른 개념인데요 개념을 잘 잡고 시작하면 앞으로는 이 두가지는 헷갈릴 일이 없을 거예요 이 두가지는 공통점이 있는데요 바로 코딩 시간을 줄여주고 사용자를 편리하게 만들어 준다는 점이예요 다른 점들은 사실 미세한 차이이기도 하고 엄청난 차이이기도 해요 라이브러리와 프레임워크는 어떤 것이들 있고 어떤 차이를 가지고 있는지 알아볼까요? 라이브러리 Library 소프트웨어 개발시 사용되는 프로그램의 구성요소이며 특정한 기능을 모듈화 해놓은 것 입니다 대상 플랫폼에서 바로 실행될 수 있는 형태로 제공됩니다 실제 실행되어 기능을 수행하는 단편화된 프로그램..
안녕하세요 오늘은 마이크로소프트의 vscode를 이용하여 Javascript 코드를 작성하는 방법에 대해서 알아볼게요 먼저 vscode를 다운 받아야 겠죠? 구글에 검색해서 다운받으셔도 되지만 아래의 링크에 들어가셔서 다운로드 하셔도 됩니다 code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for buil..
객체 기반의 언어 Javascript 를 사용하고 웹프로그래밍을 할 때 HTML은 코드를 한줄 한줄 읽어들이게 되는데요 HTML 로 자바스크립트를 불러올 때 여러 방법으로 코드를 가져올 수가 있어요 그 중 오늘은 asyn, defer 를 통해서 코드를 가져오는 방법이 어떻게 다른지에 대해서 알아볼게요 예전에는 이런 기능들이 없었기 때문에 HTML 사이트를 열려고 하면 그 안에 있는 script 코드까지 모두 다운로드가 다 된 이후에 페이지가 로드 됐었어요 페이지는 스크립트 다운로드가 끝나지 않아도 동작해야 이용자의 답답함을 줄일 수 있습니다. asyn async는 비동기 스크립트입니다. 페이지와 완전히 독립적으로 동작해요 HTML을 파싱(리딩)하는 도중 asyn을 보면 거기 있는 js 파일을 다운로드하고..
크롬을 이용해 Javascript 간단하게 코딩하는 방법 - 자바스크립트 개발자 도구 이용 방법 안녕하세요 요즘 웹개발에 빠져서 많이 알아보고 있는데요 오늘은 프론트엔드의 꽃 자바스크립트를 크롬에서 동작시키는 방법에 대해서 알아볼게요 먼저 크롬을 켜주셔야겠죠? 최근 크롬이 업데이트 되면서 cpu 이용율을 5배 개선했다고 해요 메모리 사용량도 줄였다고 하네요 www.bodnara.co.kr/bbs/article.html?num=166759 CPU 이용율 5배 개선, 메모리 사용량 줄인 크롬 신 버전 공개 :: 보드나라 구글 크롬 웹 브라우저의 속도가 대폭 개선된다. 구글은 공식 블로그를 통해 올해 마지막 버전 업데이트인 87.0.4280.66 빌드를 배포한다며, 이번 업데이트는 활성화 탭에 우선 순위를 정..