본문 바로가기

4. Node.js | React.js

 (18)
5/2(화) IT K-DT(43일차) / 27.validation~28.fetch 27. validation 27-1. Validation 개요 유효성 검사. 데이터나 값을 검증하여 올바른 형식이나 범위에 있는지 확인하는 과정. 웹 개발에서는 대부분 클라이언트에서 사용자가 입력한 데이터의 유효성 검사를 수행함. 예를 들어, 회원 가입 시 입력한 이메일 주소, 비밀번호 등의 정보가 올바른 형식에 맞게 입력되었는지 검사하는 것이 유효성 검사임. 이를 통해 올바르지 않은 데이터를 미리 걸러내어 시스템에 문제가 생기지 않도록 함. Express.js에서는 'express-validator 모듈'을 사용하여 서버 측에서 유효성 검사를 수행할 수 있음. 이 모듈을 사용하면, 다양한 유효성 검사 규칙을 설정하고, 해당 규칙에 따라 입력 데이터를 검증할 수 있음. 예를 들어, isEmail() 메서..
5/2(화) IT K-DT(43일차) / twitter 예제(1) 1. twitter 예제 refactoring 사전작업 1. Client 기본파일을 다운로드 (Twitter의 기능이 있는 client 기본파일) 2. Client가 있는 디렉토리에 Server 폴더 생성 index.js 파일 생성/작성 후 폴더 내부에 controller, data, router 폴더 추가 생성. 가능하다면 nodemon 툴, gitignore 파일도 생성. 3. server와 client 폴더 내 node.js 설치 1. cd C:\yjcho\Node.js\project\server 로 경로 변경. 2. npm audit fix --force // 보안 취약점을 수정해주는 코드 3. npm audit fix -force 4. npm i (node_modules의 복원). 5. npm ..
4/22(토) IT K-DT(-) / 11.폼~13.합성vs상속 11. 폼 HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작함. 예를 들어, 순수한 HTML에서 이 폼은 name을 입력받음. Name: 이 폼은 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행함. React에서 동일한 동작을 원한다면 그대로 사용하면 됩니다. 대부분 JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 하는 것을 추천. 이를 위한 표준 방식은 “제어 컴포넌트(controlled components)“라고 불리는 기술을 이용하는 것. 11-1. 제어 컴포넌트 (Controlled Component) HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사..
4/23(일) IT K-DT(-) / react.js를 이용한 '틱택토 게임' 예제 '틱택토 게임' 만들기 1-1. 초기 코드 살펴보기 초기코드는 제작할 틱택토의 '기본 틀'을 의미. (CSS 스타일은 기본적으로 제공됨.) 코드를 살펴보면, 세 가지 React 컴포넌트를 확인할 수 있음. * Square * Board * Game Square 컴포넌트는 을 렌더링하고 Board 는 사각형 9개를 렌더링함. Game 은 게임판을 렌더링하며 나중에 수정할 자리 표시자 값을 가짐. 지금 현재는 사용자와 상호작용하는 컴포넌트가 없는 상태. class Square extends React.Component { render() { return ( {/* TODO */} ); } } class Board extends React.Component { renderSquare(i) { return ; ..
4/22(토) IT K-DT(-) / 1.react.js개요~5. 엘리멘트 렌더링 0. react.js에 들어가기 전 1. react.js의 개요 2. react.js의 특징 2-1. 단방향 Data Flow 2-2. Component 기반 구조 2-3. Virtual DOM을 사용 2-4. Props and State를 사용 2-5. JSX를 사용 3. react.js의 형식 4. JSX 4-1. JSX에 표현식 포함 4-2. JSX 속성 정의 5. 엘리멘트 렌더링 5-1. DOM에 엘리먼트 렌더링하기 5-2. 렌더링 된 엘리먼트 업데이트하기 5-3. 변경된 부분만 업데이트하기 0. react.js에 들어가기 전 * react.js 교육 간 사용할 에디터 : Visual Studio Code 교육에 사용할 폴더를 드래그해서 바탕화면 아이콘에 드롭하여 실행. 교육 간 참고할 이론: (..
4/21(금) IT K-DT(37일차) / 22.POST~26.CORS 22. post 23. error-handling 24. route 25. public 26. CORS 과제 22. post HTTP 프로토콜의 메서드 중 하나로, 요청을 통해 전송된 데이터를 서버에서 처리하고, 필요한 경우 데이터베이스와 상호 작용하거나 다른 작업을 수행할 수 있음. 예를 들어, 웹 애플리케이션에서 로그인 폼을 작성하고 제출할 때, 사용자가 입력한 정보를 서버로 전송하려면 'POST' 메서드를 사용할 수 있음. 'POST' 메서드를 사용하면 클라이언트가 서버로 보낸 데이터가 URL에 노출되지 않기 때문에, 보안적으로 안전한 방법으로 데이터를 전송할 수 있음. 'POST' 메서드를 처리하기 위해서는 HTTP 모듈을 사용하거나 Express를 사용할 수 있음. import express f..
4/20(목) IT K-DT(36일차) / 17.template~21.DELETE 17.template 17-1. EJS 18. JSON과의 연계 19. Express 20. GET 21. DELETE 17.template 템플릿(Template)은 Node.js에서 클라이언트에게 보여지는 HTML 코드의 구조를 구성하는 데 사용되는 파일로, Node.js의 엔진 중에서 가장 많은 사용 빈도를 보임. 템플릿 엔진(Template Engine)은 Node.js에서 사용되는 HTML 코드에 동적인 데이터를 삽입하기 위해 사용. 템플릿 엔진은 정적인 HTML 코드와 동적인 데이터를 결합하여 클라이언트에게 보내지는 HTML 페이지를 생성. Node.js에서는 다양한 템플릿 엔진(Pug, EJS, Handlebars 등)이 지원됨. 이러한 템플릿 엔진을 사용하면 HTML 코드를 보다 쉽게 작성..
4/19(수) IT K-DT(35일차) / 15.npm~16.http 15. npm 15-1. npm의 개요 15-2. npm의 사용 방법 16. http 예제 15. npm 15-1. npm의 개요 Node Package Manager의 약자로, Node.js를 위한 패키지 관리자. Node.js로 작성된 애플리케이션을 쉽게 설치, 관리, 배포할 수 있도록 도와줌. 'node_modules' 디렉토리를 생성하여 프로젝트의 종속성(dependency)을 관리. 이 디렉토리에는 프로젝트에서 사용하는 패키지의 소스 코드가 저장되며, npm을 사용하여 필요한 패키지를 설치하면 이 디렉토리에 자동으로 추가됨. 이를 통해 프로젝트를 쉽게 관리할 수 있음. 또한, CLI를 제공하여 패키지의 설치, 삭제, 검색, 업데이트, 배포, 공유 등의 작업을 수행할 수 있음. Node.js에서 ..

티스토리툴바