study 코딩하자

리액트 네이티브 리액트 네이티브는 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크입니다. JavaScript로 개발이 가능하며 하나의 프로그래밍 언어로 IOS와 안드로이드 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼입니다. 리액트 네이티브는 네이티브 브릿지를 통해 네이티브 스레드(Native Thread)와 통신하면서 웹앱과 다르게 성능을 최적화시킵니다. 이런 웹을 사용하지 않고 네이티브와 통신하는 방법을 사용하는 것을 하이브리드 앱(Hybrid App)이라 블리며 자마린, 네이티브 스크립트, 플루터 등이 있습니다. 리액트 네이티브의 장점 1. 러닝 커브가 낮다. 리액트 네이티브의 가장 큰 장점이라고 할 수 있는 것은 앱을 만들기 위해 다른 언어를 학습하지 않아도 된다는 것입니다. 물론 J..

리액트 명령어 리액트를 시작할 때 알고 있으면 좋은 명령어들이다. npx create-react-app 폴더명 위 명령어를 입력하면 create-react-app을 이용한 개발환경이 설치된다. npm start 위 명령어를 입력하면 자동 빌드된다. (브라우저가 열림) npm run build 위 명령어를 입력하면 배포환경에서 사용할 파일을 만든다. npx serve -s build 위 명령어를 입력하면 로컬에서 웹 서버를 띄워 확인할 수 있다. npx test 위 명령어를 입력하면 테스트 코드가 실행된다. npm run eject 위 명령어를 실행하면 숨겨져 있던 create-react-app의 내부 설정 파일이 밖으로 노출된다. npm install react-router-dom 위 명령어를 실행하면 ..

리액트 훅이란? Hooks 는 리액트 v16.8 에 새로 도입된 기능이다. 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다. 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공한다. 그렇다면 왜 굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꿔야할까? react를 배우는 데에 있어서 클래스는 큰 진입장벽이었다. 코드의 재사용성과 코드 구성을 어렵게 만들고, this의 사용이나 이벤트 핸들러의 등록 등 기본적인 JS 문법 사항을 알아야 다룰 수 있기 때문이다. 또한 클래스는 잘 축소되지 않고, reloading을 깨지기 쉽고 신뢰하기 어렵게 만든다. 따라서 react의 최신 기술들이 클래..

Node.js 사용이유 Node.js를 사용하려면 먼저 JavaScript를 배워야한다. Node.js는 JavaScript를 사용하기 위해 만들어진 것이기 때문이다. JavaScript는 C/C++, Java 와 같은 프로그래밍 언어이다. 하지만 이름에서 알 수 있듯 JavaScript는 독립적인 언어가 아닌 스크립트 언어이다. 스크립트 언어는 특정한 프로그램 안에서 동작하는 프로그램이기 때문에 웹 브라우저 프로그램 안에서만 동작을 한다. 즉, 웹 브라우저(크롬, 사파리, 익스플로러, 파이어폭스 등)가 없으면 사용할 수 없는 프로그램이다. 여기서 Node.js가 나오는 이유가 된다. 즉, JavaScript 를 웹 브라우저에서 독립시킨 것으로 Node.js를 설치하게 되면 터미널프로그램(윈도우의 cmd..

Node.js란? Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임이다. 즉, 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는 데 제일 많이 사용된다. Node.js는 JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램이다. Node.js는 V8이라는 JavaScript 엔진 위에서 동작하는 자바스크립트 런타임(환경)이다. Node.js는 서버사이트 스크립트 언어가 아니다. 프로그램(환경)이다. Node.js는 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어졌다. Node.js는 확장성이 있는 네트워크 어플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 특히 서버사이트에서 많이 사용되고 있다..

JSX JavaScript eXtension React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다. HTML과 매우 흡사하긴 하지만, XML을 기반으로 한데다 Javascript 내부에서 사용하다보니 불가피하게 생긴 차이점이 몇가지 있다. HTML요소에 class값을 정의할 때, 원래 HTML에서는 과 같이 하면 되었지만, class라는 단어가 ECMAScript6의 클래스 문법과 겹치는 예약어이기 때문에 대신에 className이라는 단어를 사용한다. 마찬가지 이유로 루프문 예약어와 겹치는 for은 h..

리액트란? 유저 인터페이스를 만드는 데 사용되는 오픈 소스 자바스크립트 라이브러리로 메타에서 개발하였다. SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다. 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 메소드들을 지원하면서 사실상 웹 프론트엔드 개발의 표준으로 자리잡았다. 이와 더불어 타입스크립트나 sass 같은 언어..