cosmic developer

오늘 드디어 DOM의 기초 개념에 대해 공부를 하게 되었다!프로그래머스에 자바스크립트 기초 강의가 있어서 수강중인데 정말 쉽지만 도움이 많이 된다.강의 내용을 정리하기 위한 포스팅이니 긴말 없이 바로 시작!! 먼저, Javascript를 통해 HTML 문서에 접근이 가능한 이유는 1. HTML 문서가 DOM(Document Object Model)에 따라 기술되고2. 이 DOM 인터페이스를 통해 기술된 HTML element가 Object. 즉, 객체로서 자바스크립트와 연결되기 때문이다. 따라서 Javascript를 활용한 프론트엔드 개발 공부에 앞서 DOM의 개념에 대해 공부하는 것이 좋다. DOM (Document Object Model)컴퓨터가 문서를 잘 처리할 수 있도록 문서에 대한 구조를 약속한..

리액트를 사용함에 있어서 기존의 웹사이트에 추가하는 방법도 있지만, create-react-app을 활용하는 방법도 있다. 새로운 리액트 앱 생성을 위한 공식 문서는 이곳을 클릭. - Node 8.10 이상- npm 5.6 이상 1. 새로운 앱 생성Node와 npm에 대한 설치를 완료했다면, npx 명령어를 사용할 수 있다. (appname: 앱 이름)npx create-react-app appnamecs 2. 앱 생성 완료몇 분간의 설치가 완료되면 해당 폴더(appname)에 들어가서 아래와 같이 생성 되었음을 확인할 수 있다. 3. 앱 실행해보기해당 폴더에서 경로 부분에 cmd .. 를 입력하면 cmd 창이 실행된다. cmd 창에서 아래와 같은 명령어를 입력한 후 기다리면npm startcs 아래와 ..

아래의 세 가지 이미지는 자바스크립트를 기반으로 하는 웹 프레임워크의 로고로 왼쪽부터 앵귤러JS, 리액트, 뷰JS이다. 앵귤러같은 경우에는 구글, 리액트는 페이스북에서 시작되었지만 특이하게도 뷰js는 중국출신의 한 사람에 의해서 시작된 프로젝트라고 한다. 요즘 뷰js가 많이 떠오르고 있다고 하던데, 정말 대단하다고 생각한다. 오늘은 특히 리액트의 특징에 대해서 알아보자. 먼저 라이브러리라는 개념은 프로그래밍에 있어서 자주 쓰는 기능들을 모아뒀다는 것이다. 그리고 위 세가지는 화면을 만들기 위한 기능들을 모아놓은 자바스크립트 라이브러리이며, 이를 다르게 말하면 웹페이지를 쉽게 만들 수 있게 도와준다는 것을 의미한다. 리액트의 특징① 빠른 업데이트와 렌더링 속도리액트는 화면을 업데이트할 때 속도가 빠르다는 ..

요즘 리액트로 프론트를 구현하는 프로젝트를 맡아서 진행중인데, 자바스크립트도 건너뛰고 프레임워크 공부 경험이 없다보니 어렵게 느껴진다. 그래도 요즘 웹 공부에 재미를 많이 느끼고 있어서 다행이지만 한편으로는 그동안 이걸 안하고 뭐했지? 라는 생각이 들기도한다.. 어쨌든 까먹지 않기 위해서 간단한 내용이라도 조금씩 정리를 해두어야겠다.. 기초 공부 말고 실제로 프로젝트를 진행하면서 코드를 재사용하기 위해서라도 하하,,,, 빨리 리액트를 편하게 다루고 싶다. 어쨌든 시작! 일단 버튼 하나만 달랑(?) 구현해볼 것이다. ON이라고 쓰여있는 버튼을 마우스로 클릭하면 OFF로, 또 클릭하면 다시 ON으로 버튼의 텍스트를 바꾼다. 1. js 파일 만들기src 폴더에 js파일을 하나 만든다. 2. 소스코드 작성ver..