Web Development50 React/ part.2 JSX JSX란? JSX(JavaScript Syntax eXtension) 리액트에서 사용하는 자바스크립트 확장 문법 HTML과 자바스크립트 로직을 하나의 자바스크립트 파일 안에서 모두 처리하기 위해 확장한 문법 태그처럼 생긴 문법 자바스크립트 정식 문법은 아니기 때문에 작성한 코드는 브라우저에서 동작하기 전에 Babel이라는 transcompiler를 통해 일반 자바스크립트 코드 형태로 변환된다. 자바스크립트 문법을 가져와 쓰기 때문에 편하다. 하지만 자바스크립트보다 직관적이다. JSX 문법에 맞게 작성하는 것이 제일 중요하다. JSX element 자바스크립트 파일 어디에서나 HTML처럼 작성이 가능하다. javaScript 표현식 값.. 2023. 4. 21. React / part.1 CRA CRA(Create-React_App)란? 리액트 프로젝트를 시작하는데 필요한 개발 환경을 구축해주는 도구(toolchain)이다. 1. CRA를 이용한 프로젝트 구축 터미널에서 프로젝트를 시작하고자 하는 폴더에 진입한다. cd [ 프로젝트를 구축할 폴더명] 프로젝트를 설치한다.이때 프로젝트명은 대문자 혹은 소문자로 작성한다(~!()^*)등의 일부 특수문자는 에러 발생 npx create-react-app [프로젝트명] 프로젝트 폴더 진입 cd [프로젝트명] 로컬 서버에 띄우기 npm start http://localhost:3000 이라는 로컬 서버주소를 확인 2. CRA 초기 폴더 및 파일 구성 node_modules, .gitignore, package.json 상관관계 이해하기 node_modul.. 2023. 4. 21. React/ Part.1 Node.j & npm 1. Node.js 등장 배경 자바스크립트는 웹 브라우저에서 동작하기 위한 언어로 웹브라우저 밖에서는 사용할 수 없었다 하지만 자바스크립트를 웹 브라우저 밖에서 사용하고자하는 개발자들의 니즈가 늘어남에 따라 웹 브라우저가 아닌 작업환경에서 동작할 수 있도록해주는 도구가 필요해졌다. ⇒ 자바스크립트의 탈 웹 2. Node.js란? Node.js는 브라우저 밖에서도 자바스크립트를 실행할 수 있게 해주는 자바스크립트 실행 환경이다. 3. npm(Node Package Manager)이란? Node.js를 이용해서 실행할 수 있는 자바스크립트 파일들의 묶음이 package이다. 패키지를 손쉽게 설치하고 관리하기 위한 도구가 NPM(Node Package Manager) node = ios / npm (Node .. 2023. 4. 21. React / intro : 리액트란? 리액트란 무엇인가? 들어가기에 앞서 리액트의 등장 배경을 통해 리액트의 필요성을 알아보자. 새로운 기술을 이해하기 위해서는 그 기술이 나오게된 배경을 먼저 이해하는 것이 중요하다. 어떤 배경에서 어떤 문제를 해결하기 위해 만들어 졌는지를 알면 그 기술을 더 쉽게 이해할 수 있다. 1. Web Application의 발전 상호작용이 적고 단순한 과거의 웹페이지와 달리 현재의 웹페이지는 상호작용이 많고 페이지의 규모 또한 커졌다. 쉽게 말해 예전에는 사용자가 수동적으로 정보를 받는 입장이었다면, 현재의 사용자는 다양한 액션을 취해 다양한 결과를 얻을 수 있게되었다. 2. 프론트엔드, 프레임워크(Framework)와 라이브러리(Library)의 등장 규모가 커짐에 따라 복잡해진 웹어.. 2023. 4. 21. git & github 사용하기 시작하기에 앞서... git과 github를 사용하는 이유? git은 버전관리를 효율적으로 할 수 있는 도구로 개발 과정에서 기록을 남기고 추후 다시 되돌아가야하는 상황에서 이정표 역할을 한다. github는 hub라는 글자 그대로 개발되는 과정과 프로덕트를 온라인 저장소에 저장하고 공유할 수 있도록 해준다. git과 밀접한 상호작용이 있으나 같은 것은 아니다. 다수가 협업하여 개발하는 상황에서 편리성을 제공한다. 언제 어떤 개발을 누가 했는지 관리할 수 있다. 코드 리뷰가 가능하고 안전하게 코드들을 merge 할 수 있다. 사용하는 방법은 크게 두가지 상황에 따라 나뉜다. 1. 새로운 프로젝트를 시작할 경우 2. 이미 진행중인 프로젝트를 개발할 경우 1. 새로운 프.. 2023. 4. 12. 이전 1 ··· 3 4 5 6 다음
