Web: html ccs javascript react 16

[react] 가짜 데이터 사용해 보기: chance

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다. 우분투 환경에서 진행함 chance Chance - Utility library to generate anything random. Latest version: 1.1.11, last published: 6 months ago. Start using chance in your project by running `npm i chance`. There are 1220 other projects in the npm registry using chance. www.npmjs.com //util.ts //가짜 데이터 만드는 함수 정의 export const makeArray = (length: number) => new Arr..

[react][npm] 리액트-node.js-npm-프런트엔드 개념 알기

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다. 우분투 환경에서 진행함 React react, 리액트는 2013년 페이스북에서 발표한 프런트엔드 오픈소스 자바스크립트 프레임워크이다. ( 정확히는 라이브러리가 맞다..!) *프런트엔드: 웹 브라우저를 대상으로 사용자에게 보여지는 부분을 자바스크립트 언어로 작성 *백엔드: 프런트엔드에서 요구하는 데이터를 제공하는 형태의 개발 백엔드 ↔ 프런트엔드 통신: JSON 데이터로 통신 *JavaScript Object Notation (JSON): Javascript 객체 문법을 따르는 문자 기반의 데이터 포맷 따라서 리액트는 백엔드에서 받은 JSON 데이터를 해석하여 화면을 생성한다. 즉, DOM을 조작할 수 있는 프론트엔드 ..

[react] 웹팩과 빌드/개발모드로 실행하기

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다. 우분투 환경에서 진행함 웹팩 웹팩은 프런트엔드 프레임워크에서 사용하는 대표적인 모듈 번들러이다. 웹팩: 다양한 입력 모듈들 결합 → 단순한 형태의 모듈로 변환 모듈: 애플리케이션이 동작하는 데 필요한 파일들 (js, css, html, jpg,..) 번들: 웹팩의 결과물 웹팩은 빌드 / 개발모드일 때 동작 방식이 서로 다르다. 빌드 모드로 실행하기 빌드 모드: 애플리케이션을 사용자에게 서비스할 때 사용 npm run build 명령어 입력하면 빌드 후 명령 종료되고, build 폴더가 생성된다. 빌드 모드로 실행할 때 웹팩은 리액트 프로젝트의 다양한 파일들을 입력으로 하여 번들 파일들을 생성한 후, public 디렉터..

[react] 첫 번째 리액트 프로젝트 만들기

"Do it! 리액트 모던 웹 개발 with 타입스크립트" 책을 정리하는 포스트입니다. 우분투 환경에서 진행함 Setting 프로젝트를 만들기 앞서 node.js 프로그램과 타입스크립트 컴파일러를 설치해야 한다. *node.js: 자바스크립트 웹 서버를 개발하는 프로그램 #타입스크립트 컴파일러 설치 npm i -g typescript ts-node 리액트 프로젝트 만들기 리액트 웹 애플리케이션은 CRA라는 프로그램으로 Node.js 프로젝트를 생성해서 제작한다. - CRA로 타입스크립트용 리액트 프로젝트 생성하는 명령어: npx create-react-app 프로젝트_이름 --template typescript npm(node package manager): Node.js 프로젝트에서 개발에 필요한 오픈..

[CSS] css display: inline-block 예시

hello! /*display: inline-block 예시*/ p strong{ border: 1px solid blue; display: inline-block; } .txt{ border: 1px solid rgb(189, 189, 158); } 미세한 차이가 보이는가?! display:inline-block 속성을 추가함으로서 인라인 요소와 블록 요소의 속성을 모두 사용할 수 있게 되었다. 인라인 요소: strong 블록 요소: p 사용하기 전에는 두 solid 선이 겹쳐서 인라인 요소 부분에서는 선 하나만 보였지만, 사용 후에는 두개의 선 모두 보인다.

[HTML] 기본 문법: DOCTYPE, head, body

Do it! 인터랙티브 웹 페이지 만들기 도서 공부를 정리하는 글입니다. DOCTYPE, head, body 태그 코드 및 설명 안녕하세요. 코드 작성 후 웹 브라우저에서 결과 확인하기 Live server 실행 Live server 확장을 설치하면 웹 브라우저에서 결과 확인을 더 쉽게 할 수 있다. 코드 작성 후 에디터 오른쪽 아래에 있는 Go live 버튼을 누른다. 웹 문서가 크롬에 나타나서 입력한 내용을 확인할 수 있으며, head의 title에서 설정해준 문서 제목인 Document를 탭에서 확인할 수 있다. 또한 body의 내용도 볼 수 있다. Live server를 종료하려면 다시 오른쪽 아래에 있는 Port를 선택하면 된다.