라이브러리6 [220609] 타입스크립트 개발환경 만들기 라이브러리 설치 언제나 그랬듯 새로운 기능을 위해 라이브러리를 설치해주자. $ npm init -y $ npm install -D typescript ts-node @types/node 이제 해야할것 자바스크립트는 해석해주는 프로그램이 브라우저, nodejs가 있지만 타입스크립트를 해석해주는 프로그램이 없어서 런타임이 없다. 리액트는 웹팩을 통해 번들링을 해서 나온 자바스크립트 파일로 브라우저가 실행해주는것처럼, 타입스크립트도 번들링이라는 작업을 해서 자바스크립트로 바꿔줘야함. 타입스크립트 실행하기 ts-node는 타입스크립트를 알아듣는 실행기. 개발용이라서 배포는 안됨. -D는 디렉토리 내에서 선언. -g는 전역적으로 선언. npx는 패키지를 임시 설치해서 실행하는 npm 소속 도구. $ npx ts-.. 2022. 6. 9. [220422] 리액트로 덧글기능 만들기 (CRUD 중 UD), 생명주기함수 CRUD 중 U 만들기 클릭했을때 input박스가 나오도록 만들기 //App.jsx componentDidMount(){ //최초실행 this.setState({ ...this.state, list:[ //클릭유무를 알 수 있도록 updateflag 추가 {userid:'ingoo7022',content:'안녕하세요2222',date:'2022-04-21',updateflag:true}, ... //CommentList.jsx handleSubmit = e=> { e.preventDefault() console.log(this.state.value) const obj={ userid:'ingoo7022', content:this.state.value, date:'2022-04-21', //클릭유무를 알 .. 2022. 4. 29. [220418] webpack이란? 프론트엔드를 한다면 필수적으로 알아야할 webpack. 프론트엔드 개발을 하지 않더라도 알아두면 좋은 webpack. webpack이란? html에 들어가는 js 파일들을 뭉쳐서 하나로 만들어주는 방식을 모듈 번들링(=webpack_)이라고 한다. 굳이 하나로 뭉쳐서 하나로 만들어야하는 이유는? 1. 한 페이지를 구성하기 위해 존재하는 여러 파일들을 하나의 파일로 만들어 읽기때문에, 웹페이지 성능이 최적화된다. 2. 혼자서 프로그램을 작성할때도 변수명이 겹치는 것을 파악하기 힘든데, 여럿이서 사용한다면 더 힘들어진다. 하지만 하나의 파일로 묶어줌으로써 개발할때 편리해진다. 기초개발 환경세팅 test폴더를 만들고 그 안에 index.html, dist폴더, src폴더를 만든 후 webpack 라이브러리를 .. 2022. 4. 19. [220413] 리액트 시작하기 (react, react-dom, 컴포넌트) 사전지식 자바 프레임워크라고도 부르고, 자바 라이브러리라고 부르는 리액트. 조금 자세히 따지자면 프레임워크에 가깝다. 라이브러리 : 폴더 구조가 없음 프레임워크 : 폴더 구조가 있음 1. react 시작하기 react는 react문법을 사용해서 작성한다. react-dom은 바뀐 값을 찾아서 그 영역만 바꿔준다. 주로 맨 마지막 한줄만 사용함 1-1. react 문법 버튼을 리액트로 만드는 코드 //인자값 3개 들어가는 React.createElement() //첫번째 인자 : 엘리먼트 명 //두번째 인자 : 속성값 //세번째 인자 : innerHTML React.createElement('button', null, '버튼') 1-2. react-dom 문법 //ReactDOM.render() //첫번째.. 2022. 4. 15. [220317] websocket (웹소켓) 구현하기 / 채팅창 만들기 목록 1. websocket 사용환경 만들기 2. 요청/응답 코드 작성하기 3. websocket의 이벤트 4. string 형식으로 데이터를 주고받는 websocket 5. 채팅창 완성하기 외부 라이브러리 ws 설치하기 $npm install ws 라이브러리 가져와서 세팅하기 const webSocket = require('ws') 백엔드에서 요청을 받아주는 코드 작성하기 handshake를 만들고 Connection을 이루는곳까지 코드로 구현했다. //socket.js const webSocket = require('ws') module.exports = (server) =>{ // 클래스 문법이니까 new로 선언 const wss = new webSocket.Server({server}) //응답이.. 2022. 3. 18. [211228] label응용, positon:flex, box-shadow, 라이브러리 목차 1. input과 label 2. transform 3. display:flex 4. box-shadow 1. input과 label See the Pen label by supermint (@ma_ad_shouri) on CodePen. 1) input과 label이 선언된 순서대로 각각 생성된다. 2) 코드가 옆으로 나열되는 것과 background가 글씨크기만큼 생성되는 것을 보면 inline 속성이다 3) input id를 label 요소인 for로 연결하면, label을 클릭할때 input의 checkbox도 같이 반응한다. 4) 2번째 박스는 색이 없고, 3번째 박스는 색이 있는 이유. 인접접근자는 연결하려는 본체코드 밑에 있어야 적용되기 때문. 2번째 박스는 input 코드가 label.. 2021. 12. 28. 이전 1 다음
