본문 바로가기
반응형

분류 전체보기

 (150)
[프로젝트]채팅앱기본 React에서 Socket.io를 사용해보자(node.js) 채팅 앱 같이 실시간 연결 되어 소통이 일어 날 수 있게 해야한다 친구 영빈이가 가르쳐 줬다 복습 해보자 react 프레임워크에서 서버는 node.js 언어를 사용했다 우선 사용 할 모듈을 설치해 주자 npm install socket.io npm install socket.io-client 서버 사용 하기 위해 npm install body-parser npm install cors npm install express express, cors, bodyParser 모듈도 받아줬다 준비가 됐다 '클라이언트페이지1' 과 '클라이언트페이지2', 그리고 '서버페이지' 세개의 .js 파일을 만들 거다, 클라이언트는 라우터로 나눠주었다 "socket.emit 데이터 줄때" "socket.on 데이터 받을때" "s..
[css] 텍스트 속성을 알아보자(font-family, font-size, line-height, text-indent, font-weight...) 많이 사용하는 텍스트 속성 속성 설명 비고 font-family 어떤 폰트를 사용 할지 font-size 폰트의 크기 정함 웹단위 설정 font-style 폰트의 모양이 normal 또는 italic 또는 oblique인지 normal, italic, oblique font-weight 폰트의 두께 웹단위 설정 font-variant 영문 폰트 모양 조절 normal, small-caps line-height 텍스트와 텍스트 사이 간격 설정 웹 단위 설정 text-transform 영문자를 대문자, 소문자를 대문자 capitalize, uppercase, lowercase, none text-decoration 폰트의 밑줄 등 꾸밈 웹 단위 설정 word-spacing 단어 간의 간격 설정 웹 단위 설정..
[html] 에는 무슨 API가 있을까?? (드로그앤드롭,지오로케이션,웹캐시,웹스토리지,웹워커) HTML5의 가장 특징적인 API(Application Programming Interface)에 대해 알아보자 특정기능에 대한 API가 정의되어 있어 정의되어 있는 API 기반으로 프로그래밍 하면된다 대표적으로 드래그 앤 드롭(Drag&Drop), 지오로케이션(Geolocation), 웹 스토리지(Web Storage) , 웹 캐시(Web cache),웹 워커(Web Worker)가 있다 드래그 앤 드롭(Drag&Drop) '끌어다 놓기'이다 윈도우 이전 도스(DOS)환경에서는 모든 기능을 키보드를 이용해서 파일을 복사, 이동 , 삭제를 했지만 윈도우 출현 이후 파일의 복사,이동,삭제등이 아이콘 클릭 후 끌어다 놓는 방식이 가능해 졌다 웬만한 브라우저에서 다 HTML5의 드래그 앤 드롭이 사용되는 것은..
[css] 반응형 웹을 만들어보자(모바일,테블릿,데스크탑,미디어쿼리..) 반응형 웹이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC등 접속하는 디스플레이 종류에 따라 화면 크기가 자동으로 변하게 만드는 기법이다 개인적으로 애플 공식홈페이지가 멋있는것 같다 요새 사이트에서 반응형웹은 필수이다. 알아보자 반응형 웹 디자인을 체크할 수 있는 가장 쉬운 방법은 크롬 브라우저를 사용하는 것이다 F12를 누르면 다음과 같이 html css 정보 및 모바일 화면을 볼 수 있다 일반인이라면 허겁지겁 꺼야되는 화면이지만 개발자는 유용하게 사용할 수 있다 가장 먼저 해주어야 할 것은 HTML파일 내부의 안에 다음과 같이 설정해 주어야 한다 @import url("main.css") only screen and (min-width:200px) and (max-width:480px); @me..
[css] 텍스트 문장 구성 관련 속성 (overflow , text-overflow, visibility, display...) overflow 속성 설명 visible 오버플로우된 항목을 잘라내지 않는다 hidden 오버플로우된 부분을 감춘다 scroll 오버플로우 속성에 강제로 스크롤 바를 생성한다 auto 오버플로우되면 자동적으로 스크롤 바가 생성된다 inherit 속성이 상속된다 visible default 값이다 .container{ width: 300px; //박스 크기 설정 height: 500px; overflow: visible; } 꾸역꾸역 넣어서 삐져나감을 볼 수 있다 scroll 강제 스크롤 생성 .container{ width: 300px; height: 500px; overflow: scroll; } text-overflow 속성 설명 clip 기본값으로서, 단순하게 텍스트틀 자른다 ellipsis 잘린부..
[프로젝트]챗봇(chatbot)에 대해서, API종류 우리학교를 위한 정보 쳇봇 프로그램을 만들기로 했다 그전에 쳇봇이 먼저 알아야한다 알아보자 챗봇이란? 쳇봇의 기초적인 의미는 사람 간의 대화(문자 또는 음성)을 시뮬레이션 및 프로세싱하는 컴퓨터 프로그램이다 마치 사람과 대화를 나누는 것처럼 디지털 장치와 소통할 수 있게 해주는 기술이다 쳇봇은 단순하게는 한줄로 간단한 문의 할 수 있는것부터 디지털 어시스턴트처럼 정보를 수집과 처리하여 이를 학습하고 맞춤 서비스를 제공하는 정교한 프로그램 등이 있다 챗봇은 어떻게 작동할까? AI: 인간의 학습능력과 추론능력, 지각능력, 자연언어의 이해능력 등을 컴퓨터 프로그램으로 실현한 기술 머신러닝: 기계학습으로 지도학습과 비지도학습으로 크게 나누어짐. 주로 통계적인 기법 통해서 학습 딥러닝: 머신러닝의 한 분야로 사물..
[react] Lifecycle이란 (Mount,PropsUpdate,StateUpdate..) 생명주기 이다. 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생한다 한 번에 이해 할 수있는 그림이다 Mount 컴포넌트가 처음 실행될 때 그것을 Mount라고 한다 ① 컴포넌트가 시작되면 context, defaultProps, state를 저장한다 ② componentWillMount 메소드를 호출한다 ③ render로 컴포넌트를 DOM에 부착한다 ④ Mount가 완료된 후 componentDidMount가 호출된다 주의: componentWillMount 에서는 Mount중 이기 때문에 pops나 state를 바꾸면 안된다 그리고 아직 render하지 않았기 때문에 DOM에도 접근 할 수 없다 componentDidMount 에서는 DOM에 접근할 수 있다 때문에 주로 AJA..
[css] flex 사용법 ② (order, flex-grow, flex-shrink, flex-basis, align-self) ①에서 컨테이너에 적용하는 친구들 이었다면 이번은 아이템들에게 적용해 준다 아 반드시 컨테이너에는 display:flex 가 있어야 한다 order 컨테이너 안 item 들에게 order(순서)를 줄 수 있다 .box{ order: 2; } .box2{ order: 1; } .box3{ order: 3; } 0이 default이며 음수 값을 가질 수 있다. 정해 준 숫자 순서 대로 정렬 가능하다 flex-grow 브라우저 크기를 늘리면 입력값에 따라 아이템이 늘어나게 할 수 있다 .box{ } .box2{ flex-grow: 1; } .box3{ flex-grow: 2; } defalut는 0이며 box2보다 box3이 두 배 더 커진다 flex-shrink 브라우저 크기를 늘리면 입력값에 따라 아이템이..
반응형

티스토리툴바