본문 바로가기

전체 글

 (58)
[프로젝트] setTimeout()을 사용해 버튼클릭에 제한을 두자(react) 요새 우리학교 랜덤 채팅 웹앱을 제작중이다 잠시 서버 오픈 했었는데 사람들이 이메일 인증번호 전송을 클릭하고 금방 메일이 오지 않자 다시 전송을 누르는 현상이 생겼다 이를 시간 제한을 둬서 해결 해 보자 위의 사진이 회원가입 인터페이스이다 전송을 누르면 요론 메시지가 나오도록 설정했다 state값: this.state = { email: "", //입력받은 이메일 waitingEmail: true, // false면 눌러도 메일이 안가게 할거다 }; 전송버튼: 전송 onClick 이벤트 발생시 sendEmail 함수를 실행시킨다 sendEmail 함수: sendEmail = (e) => { //전송 버튼 눌렀을 때 e.preventDefault(); if (this.state.waitingEmail ==..
[react,javascript] 템플릿 문자열을 사용해보자 (`${백틱}`) 문자열을 사용하려면 이렇게 + 써줬어야 + 했다 `템플릿 문자열`이라고 간단한 기능이 있다 알아보자 기존 자바에서 사용 할 때 let string1 = "ㅎㅇ요"; let string2 = "ㅂㅇ요"; let greeting = string1 + " " + string2; let product = { name: "도서", price: "1231원" }; let message = "제품" + product.name + "의 가격" + product.price + "입니다"; let multiLine = "줄바꿈을 \n 해보자"; let value1 = 1; let value2 = 2; let boolValue = false; let operator1 = "곱하기" + value1 * value2 + "입니..
[프로젝트]텍스트 입력후 데이터베이스에 넣기(nodejs,react,mysql사용) 영빈이가 오랜만에 오더를 줬다 제작중인 웹에 피드백을 받기위해 불편사항 신고기능을 만들어라고 했다 입력받은 내용을 디비에 넣기만 하면 된다 함 해보자 내 핸드폰 아이폰7기준으로 인터페이스를 만들었다 정말 깔끔하고 예쁘다 기능을 보자 제출 버튼에 onClick 이벤트를 주고 onSubmit함수를 이용해 데이터를 보낼 예정이다 제출 제목을 받는 input 태그와 내용을 받는 textarea 태그에 onChange함수 이벤트를 주었다 onChange로 인해 input이나 textarea에 입력이 있을 때마다 state값이 초기화 된다 onChange = (e) => { this.setState({ [e.target.name]: e.target.value, // 변화가 있을때마다 state값을 초기화 }); }..
[react] 리액트가 무엇일까(컴포넌트,게임엔진,npm,웹팩) 리액트를 이용해서 프로젝트를 만들고 있다 사용하면서도 자세하게 알려고 한적이 있던가 알아보자 리액트는 프론트엔드 프레임워크 중 하나다 현재 많이 쓰이는 프레임워크가 리액트(react), 앵귤러(angular), 뷰제이에스(vue.js) 등이 있다 앵귤러는 화면 출력, 형상 관리, 배포하여 완성형 프레임워크를 지향한다 뷰제이에스는 가장 나중에 나왔고 다른 프레임워크 장점은 유지하고 단점은 보완하였다 이중 가장 많이 사용하는게 리액트다 페이스북도 리액트로 개발 되었다 리액트개발자 찾는 기업이 많다고 한다 좀 이득이다 컴포넌트(component) 가장 큰 특징은 "화면 출력에 특화된 프레임워크"이다 컴포넌트는 작고 독립적인 코드 블록을 조합하여 빠르고 효율적으로 화면을 구성한다 컴포넌트를 만드는 과정은 레고 ..
[프로젝트]채팅앱기본 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..

티스토리툴바