AI Platform / Web

html에서 영상을 넣는 방법은 아래와 같이 어렵지않다. 기본적으로 아래와 같이 적으면, 영상은 발생하지 않고 시작 이미지만 발생한다. 여기에 아래와 같이 controls만 붙여주면 우리가 아는 이미지 파일이 작동하는 것을 알 수 있다. 다른 속성들도 알아보자. controls : 이 값을 넣어줘야 사진이 아니라 영상으로 보여진다. (이거 하나만 적어도 작동한다.) muted : 음향의 디폴트를 무음으로 만들어 준다. autoplay : 접속 시 바로 시작하게 한다. loop : 영상을 다보면 자동으로 다시 재생한다. 위와 poster를 넣으면 영상 시작전에 img 를 넣어서 썸네일을 넣을 수 있다. 시작 전에는 jpg 파일이 뜨고 재생을 누르면 mp4가 실행된다.

html의 image tag에 대해 알아보자 src에는 현재 위치에서의 경로를 넣어준다. 위의 예시는 img 파일에서 hanpy.jpg 이미지를 가져온다는 뜻이다. alt는 안 적어도 에러가 나지 않는다. 다만 시각장애인 분들이 음성으로 웹을 이해하기위한 설명이다. 크기 조정 > 기본적으로 width, height 속성을 정하지 않으면 이미지 원본 크기가 그대로 나온다. # 픽셀 기준 설정 # 브라우저 창의 퍼센트로 비율 설정 이미지가 잘리는 것이 아니라 찌그러지가나 늘어나면서 사이즈가 변경된다. 이 때 파일의 용량이 줄어드는 것은 아니기 때문에 처음부터 적절한 크기의 이미지가 필요하다. 위와 같이 width나 height 하나만 설정할 경우 설정 한 값은 변경이 되고, 나머지는 비율만 변경된다. 이미지..

dotenv를 활용하여 공개하지 말아야할 내용을 숨기는 방식을 알아보자. 우리는 github에 올리기 싫은 파일이나 보안 때문에 중요한 파일들은 따로 저장할 필요가 있다. 주로 process.env로 환경 변수를 다루기도 하지만, 파일고 관리하려면 다음과 같이 하면된다. 매우 쉽다. 추가로 다른 frontend와 backend에 관한 정보는 아래의 링크를 참고하면 프로젝트에 많은 도움 될 것이다. [Web/nodejs] - nodejs 기초 총 정리 1. 설치 $ npm i dotenv 2. .env 파일 생성 > 파일 최상단 위치에 아래와 같이 .env 파일을 만든다. test 용으로 아래와 같이 작성했다. 단, 주의할 점은 작성 시 key와 value 형태로 적어야 한다는 것이다. 아래에서 사용 시 ..

쉽고 빠르게 로그인을 필요한 부분만 빠르게 만들어 보려고 한다. 어려워 보이지만 크게 어렵지 않다. 우선은 postman으로 rest api로 테스트를 진행한다. 테스트 성공을 하면, 테스트 한 방식데로 code에 적용한다. 바로 코드를 확인하려면 카카오 코드 만들기로 가면된다. 기본적은 원리는 아래와 같다. 핵심은 세 가지이다. 로그인해서 인증 코드를 받는다. 받은 인증 코드로 token을 받는다. token으로 로그인을 유지를 한다. 우선적으로는 postman으로 우선 로직을 실행해 보자. https://developers.kakao.com/console/app 카카오계정 로그인 여기를 눌러 링크를 확인하세요. accounts.kakao.com 위의 사이트에 들어가서 아래의 애플리케이션을 추가한다. ..

0. 들어가면서 HTML5를 우리가 배워야 하는 이유는 웹 애플리케이션 개발을 하기 위함이다. 이것을 통해 우리는 웹 개발뿐만 아니라 전반적인 SW 개발 방법 및 학습 과정을 익힐 수 있을 것이다. html을 배운 후에 CSS를 배우고, 추가적으로 Javascript를 배우면 될 것이다. [Web/JAVASCRIPT] - [DOM_1] DOM이란 [Web/JAVASCRIPT] - [DOM_2]자바스크립트 역사와 기초문법[web] [Web/JAVASCRIPT] - [DOM_3]Javascript과 DOM 심화(Event) [Web/Django] - 1. django 시작하기 [Web/Vue.js] - [Vue.js] 1. 시작하기 [인공지능(Artificial Intelligence)/머신러닝] - AI_..

로그인의 기본인 쿠키/세션을 nodejs에서 구현해 보려한다. JWT 방식도 있지만, 현업에서 가장 많이 사용하는 세션방식에 대해 알아 볼 것이다. 쿠키와 세션의 가장 큰 특징은, 식별을 도와주는 세션 id를 브라우저에 보내기 위해서는 쿠키에 담아서 보내야 한다는 점이다. 즉, 둘 중 하나를 선택하는 것이 아닌, 쿠키에 담에서 세션에 전달한다는 것을 먼저 알아야 한다. 아래의 코드만 따라한다면, login에 session을 넣을 수 있다. 추가로 다른 실무 내용을 확인하려면 아래의 url을 들어가보자. [Web/nodejs] - nodejs 기초 총 정리 쿠키 : client의 상태 정보를 client의 컴퓨터 메모리에 저장한다. 즉, 서버가 client에게 보내는 데이터의 조각이라고 할 수 있다. cl..

nodejs로 웹서버 만드는 가장 기초적인 방법인 express를 사용하는 방식에 대해 알아보고자 한다. 웹서버를 구축하는 방법은 아래의 내용을 순차적으로 따라하면 쉽게 구축할 수 있을 것이다. 기존에 구글링을 하다보면, express를 만드는 방식이 너무 다양한다. 초심자 기준으로 다양한 방식에 대한 이유를 판단 할 수 있도록 여러가지 예시를 담았다. node.js 프로젝트 구조를 어떻게 잡아야 할까? 이러한 질문을 시작으로 시작해 보려한다. 그리고 기본적으로 express.js를 활용하여 REST API를 사용할 것이다. 기본적으로 코드 중복을 피하고, 서비스 확장에 도움이 주는 방식을 적어보려한다. 로그인 구현 시 여기를 눌러서 확인하자. 추가로 nodejs에 대한 기초와 다른 실무 예시를 참고하려..

React 프로젝트 AWS EC2에서 우분투 환경으로 배포하는 방법에 대해 알아보자. 필자도 react 배포 시 아래의 내용을 참고하여 배포를 한다. 그리고 오류가 난다면 주기적으로 추가하고 있다. 0. 들어가면서 creat-react-app으로 local 개발 시 환경과 배포(production) 개발 환경은 달라야 한다. 따라서, 아래의 방법을 보고 우선 셋팅을 진행한다. [react] 실무 개발 환경/배포 환경 설정(.env) 천천히 읽어보면 그렇게 어려운 것은 없을 것이다. 만약 nodejs에서 express로 개발을 하여 백엔드를 만들었다면 아래의 방법을 참고하면 도움이 될것이다. 만약 react와 nodejs로 둘다 EC2에서 배포를 한다면 파일을 client와 server로 하나씩 만들어서 ..