cosmic developer

요즘 vscode 활용을 많이 하기 시작했다. 아직 막 익숙하지는 않지만 가볍고 너무 좋다,,,자바스크립트 공부를 시작하면서 좀 더 손에 익히기 위해 알고리즘 문제를 풀어보는 과정에서 비주얼스튜디오코드로 자바스크립트 코드를 실행하는 방법을 잘 모르겠어서 구글링을 했다. 그런데 HTML이나 node를 활용하여 설명한 글들이 많았다. 그치만 그건 너무 귀찮았다. 그러던 중 다양한 경우의 수로 설명한 글을 찾았고 나도 이 포스팅을 참고해서 나에게 도움이 되었던 부분을 뽑아 기록하려고 한다. 1. Visual Studio Code 실행 2. Extensions (marketplace 접근)설치된 확장 프로그램을 관리하고 새로 설치할 수 있다. 자세한건 여기에서 다루지는 않겠다.extentions에 접근하는 방법..

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

저번 포스팅에서는 expo를 활용하여서 환경 세팅을 해보았다. 오늘은 React Native cli를 활용해 환경 설정을 해보자.둘의 차이는 이미 잘 설명해둔 글들이 많다. 어쨌든 expo가 알아서 해주던 것을 좀더 커스텀화하기 위해 사용하는 방법인 것. 나는 사용하려는 라이브러리가 expo에서 지원하지 않아서 이 방법을 사용하기로 하였다.이곳을 보면서 따라가볼 예정이다. 1) Node, Python2, JDK 환경설정 작업하고자 하는 폴더에서 다음과 같은 명령어를 실행한다. 1choco install -y nodejs.install python2 jdk8cs 나의 경우 아래와 같은 오류가 발생했다. 관리자 권한으로 실행하기 위해 앞에 sudo를 붙여 해결하였다. 1sudo choco install -y..

현생에 치여 너무 오랜만에 돌아온... 블로그다.사실 공부를 하지 않은 것은 아닌데 블로그에 글을 작성하는 것이 생각보다 오래걸려서 엄두가 나지 않았다.그리고 Github에 푹 빠져버렸기 때문임 어쨌든 핑계이고 오늘은 드디어 React-Native에 도전하는 역사적인 날이다. 자바스크립트도 제대로 공부하지 않고 (HTML/CSS도 딱히 체계적으로 하진 않았음) 바로 간단한 React.js 프로젝트에 도전했던 나는 생각보다 큰 재미를 느꼈고 react-native에도 패기있게 도전하기로 했다. 꼭 시험을 앞두면 이런 도전적인 것들이 몇 배로 더 재미있다. 먼저 나는 깃허브에 레포부터 파놨다. 꼭 레포부터파고 그걸 내 로컬 작업공간에 받아오는 습관이 생겼다.어쨌든, 어떤 튜토리얼을 가지고 공부해볼까 하다가 ..

리액트를 사용함에 있어서 기존의 웹사이트에 추가하는 방법도 있지만, 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..