Maenya's Techlog

이번 스터디 프로젝트 주제 : 주차장 공유 웹어플리케이션 [ UI React 프로젝트 생성 ] - index.js src 폴더에서 메인 프로그램 역할을 해준다. 여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표출한다. - App.js src 폴더에서 컴포넌트를 정의하는 파일. 실제로 화면에 표시되는 내용 모두 여기서 정의. - index.html 사진 상으로 안보이지만 public 폴더에 있다. 메인 프로그램인 index.js에 대응되는 것으로, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 일어 와서 렌더링된 결과가 표시된다. - Root.js Router 역할. 웹어플리케이션에 BrowserRouter를 적용할 파일. ..

[Node.js] 서버사이드 자바스크립트. 구글의 자바스크립트 엔진인 V8을 기반으로 구성된 일종의 소프트웨어 시스템이다. 이벤트 기반으로 개발이 가능하며 Non-Blocking I/O를 지원하기 때문에 비동기식 프로그래밍이 가능. 이 때문에 I/O 부하가 심한 대규모 서비스를 개발하기 적합하다. 또한 자바스크립트의 표준라이브러리 프로젝트인 CommonJS의 스펙을 따르고 있다 [싱글 쓰레드와 이벤트 기반의 비동기 I/O 처리] 싱글 쓰레드를 가진 노드는 I/O 작업이 시작되면 I/O 작업 처리에 대한 응답을 기다리지 않고, 바로 다음 작업을 실행한다. 대신 I/O 작업이 종료되면 이벤트를 발생시키고, 이 이벤트는 해당 프로세스의 이벤트 큐에 등록된다. 노드로 개발된 프로세스는 이 이벤트 큐에 등록된 새..

컨테이너에서 소스코드 수정하고 세번째 아이콘 누르면, 내가 수정한 파일이 스테이지 전파일로 뜬다. 체크하고 커밋메시지 써서 커밋하기 버튼 누른다. 그리고 맨위에 Push 버튼 누르면 끝 매우 간단!

아니 회사에서부터 오질라게 삽질중이다. MobX 쓰려면 decorator를 써야 간지인데 구름IDE 사용할 때 @observable 데코레이터가 안붙어서 죽겠당 ㅜㅜ 계속 이 에러가 난다. Support for the experimental syntax 'decorators-legacy' isn't currently enabled 심지어 groom ide에서는 eject도 안되는데 이럴땐 어떻게 해야할지 정말정말 모르겠다.. ----- 20201231 다음날 포기를 모르는 매냐 다시 도전!! 일단 eject 없이 MobX 설치하는 방법을 많은 searching 끝에 찾아내었다. 생각을 가다듬고 나는 데코레이터 레거시 에러를 해결만 하면 되는 간단한 문제라고 보기로 했다. eject 없이 하려면 custo..

두드려라 답이 나올지어니!!! 성능딸리는 컴퓨터를 들고 혼자 개발해보겠다고 오질라게 서핑하다가 구름ide 라는 신박한 아이템을 발견했다. '설치가 필요없는 통합 개발환경 서비스' 라고 한다. 나만 알았으면 좋겠다. 내 local 용량이 딸려서 node.js 마저 제대로 설치가 안되자, 이 서비스를 접하게 되었다. node.js 설치도 필요없이 그냥 npm i, npm start 하면 되었다. 지금 사이드 프로젝트를 제작하고 있는건(현재 리액트로 view단 제작중) 로컬에서 테스트 하면서 해야하는데, 거기에 매우매우 적합하다! 일단 다 한글로 되어있어서 너무 편하다. 세상은 아직 살만하다. 이러고 java, spring도 여기서 구현해서 rest api도 만들어야지. 정말 이렇게 설렐 수가 없다. 제작한 ..

MainContainer.js UserStore.js 데코레이터 autobind 서투른 맹이는 @Autobind를 쓰고싶은데 도저히...... 일단 욕심부리지 않고 기본적인 구동만 해보았다. 드디어 떠오른 맹이의 MainContainer 이거는 App.js Mobx 를 사용하고 있어서 좋은점은 어노테이션을 사용해서 가독성이 좋다. 회사에서는 프로젝트를 생성할 때 이미 reuse 부서에서 만들어 놓은 틀 이나 shared 파일들 덕분에 그냥 프로젝트생성하고 코딩에만 몰두하면 되지만, 막상 혼자 만들어 볼때 약간 삽질했다. $ npx create-react-app mobx-with-react $ cd mobx-with-react $ yarn add mobx mobx-react $ yarn start 여기에 ..

프로젝트 만들기에 앞서 워밍업으로 인터넷에 널려 있는 React 예제들을 한 번 구동시켜 보기로 했다. src/Counter.js import React, { Component } from 'react'; import { decorate, observable, action } from 'mobx'; import { observer } from 'mobx-react'; class Counter extends Component { number = 0; increase = () => { this.number++; } decrease = () => { this.number--; } render() { return ( {this.number} +1 -1 ); } } decorate(Counter, { number..

localhost:3000 에서 드디어 나왔다! 일단 나만의 앱을 만들기위해 이 로고를 삭제하기로 한다. package.json부분은 나는 이렇게 하고 컴파일했다. import React from 'react'; import './App.css'; function App() { return ( // // // // Edit src/App.js and save to reload. // // // Learn React // // // ); } export default App;