[React] 실습

✍🏻 기존코드 App.js 코드 import "./App.css"; function Header(props) { return ( {props.title} ); } function Nav() { return ( html css js ); } function Article(props) { return ( {props.title} {props.body} ); } function App() { return ( ); } export default App; ✍🏻 li태그 동적으로 생성하기 import "./App.css"; function Header(props) { return ( {props.title} ); } function Nav(props) { let lis = []; for (let i = 0; i <..

→2022.01.03

[React] 리액트 CRA로 시작하기(create-react-app)

리액트 CRA로 시작하기 리액트 개발환경 설치 npm install --global create-reate-app 해당 폴더에 리액트 프로젝트 설치 npx create-react-app . + CRA 설치, 파일명 앞에 . 을 붙이면 현재 디렉터리에 그대로 생성된다. npx create-react-app react-app 리액트 프로젝트 디렉토리로 이동 cd react-app 리액트 실행 npm run start 아래와 같은 빌드화면 확인 가능하다. create-react-app 성공적으로 실행되었다면, react-app 으로 된 폴더가 생성되고 아래와 같은 파일 구조를 가진다. . ├── README.md ├── node_modules ├── package.json ├── public ├── src └..

→2021.12.31

express : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\sandy\AppData\Roaming\npm\express.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를..

VSCode에서 express 명령어를 입력후 아래와 같은 오류가 발생 1. 관리자권한으로 powershell 실행 2. Get-ExecutionPolicy를 입력하여 실행규칙 상태 확인 3. RemoteSigned가 아닌경우, Set-ExecutionPolicy RemoteSigned 을 입력하여 실행규칙 변경 4. Y입력 5. 확인 휴 .. 해결했다

→2021.12.08

템플릿 엔진 Template Engine (+Pug)

템플릿엔진이란 ? SSR을 구현하는 방법으로, 서버에서 클라이언트로 보낼 HTML의 형태를 미리 템플릿으로 저장 동작 시에 미리 작성된 템플릿에 데이터를 넣어서 완성된 HTML 생성 => 템플릿 작성 문법과 작성된 템플릿을 HTML로 변환하는 기능을 제공 템플릿엔진의 종류 EJS - html과 유사한 문법의 템플릿엔진 Mustache - 간단한 데이터 치환 정도만 제공하는 경량화된 템플릿 엔진 Pug - 들여쓰기 표현식을 이용한 간략한 표기와 레이아웃 등 강력한 기능을 제공 (가독성이 좋고 개발 생산성이 높음.) Pug알아보기 express-generator사용 시 기본적으로 jade라는 템플릿엔진을 사용하고 있으며, jade는 pug의 이전이름으로 템플릿엔진을 pug로 지정해 줘야햔다. express ..

→2021.12.08

DATABASE

DATABASE 란? 여러 사람이 공유하여 사용할 목적으로 체계화하여 관리되는 데이터의 집합 데이터베이스는 DBMS에 의해 제어된다. *데이터베이스를 사용하는 이유 1) 데이터 공유, 여러명이 동시에 공유하더라고 안정성과 정확성을 낮춘다. 2) 데이터 중복 최소화. 하나의 데이터베이스에 여러 테이블을 나누어 데이터 중복 최소화 3) 지속성. 데이터가 여러 군데에 산재해 있으면 동시에 관리하기 어렵고, 무결성 유지도 어렵다. 데이터베이스는 DBMS에 읳 ㅐ중앙집중적으로 관리되어 무결성 유지가 용의 4) 보안성. DBMS에 의해 중앙집중적으로 관리되기ㅏ에 한군데만 보안을 유지하면 됨. SQL VS NoSQL ACID(Atomicity Consistency Isolation Durabilty) 원자성 : 모두..

→2021.12.08

웹

웹이란 ? 사전적의미 - World Wide Web, 인터넷상에서 동작하는 모든 서비스 일반적의미 - 웹 브라우저로 접속해서 이용하는 서비스, 웹사이트 웹의 동작과정 1. 주소창에 주소 입력 2. URL파싱 - 프로토콜 : 서버와 클라이언트 간 어떤 방식으로 정보를 통신하니? - 호스트 : URL 에서 웹서버의 위치 - 포트 : 웹서버에서 자원에 접근하기 위해 사용되는 장소 - 경로 : 웹서버에서 자원에 대한 경로 - 매개변수 : 서버에 요청하는 데이터, 키와 값으로 구분 3. DNS 조회 DNS 서버에 해당 주소를 요청하여 IP주소를 반환한다. 4, TCP 연결 5. 서버와 연결 서버에게 원하는 페이지의 정보를 입력받는다. 정보를 모두 받게 되면, 브라우저는 HTML/CSS/JS코드를 그려낸다. 더보기..

→2021.12.01