728x90 반응형 전체 글136 [typescript] 타입스크립트 사이트, 설치, 컴파일 설정 타입스크립트!!!!! 시작!!!!! 2012년에 발표 대규모 javascript 애플리케이션 개발 microsoft오픈소스 프로그래밍 언어 -자바스크립트의 상위 집합 -자바스크립트를 사용, 모든 기능 포함 -자바스크립트에 포함되지 않는 새로운 기능 -정적인 언어 *자바스크립트와 가장 큰 차이!!!!!! 자바스크립트는 동적인 언어이며 프로그램 구동 중에 타입이 다이나믹하게 변경되나 타입스크립트는 정적인언어이며 프로그램을 작성할 때 타입을 정의함 웹브라우져가 해석할수 있는 언어 html, css, javascript 컴파일(컴퓨터가 이해할 수 있는 언어로 변경) scss >>>>> css typtescript >>>>>>> javascript 타입스크립트의 장점 1. 버그를 줄이고 유지보수하기 쉬움, 질좋은.. 2023. 2. 15. [React]Todolist(useState사용) App.js import React, { useState } from 'react'; import HeaderInput from './components/HeaderInput'; import Todolist from './components/Todolist'; const App = () => { const [todoState, setTodoState] = useState({ todolist : [ {id: 1, text: "할일1", isDone: true}, {id: 2, text: "할일2", isDone: false} ], InputText: "" }) const [id, setId] = useState(3) const onChange = (e)=>{ //console.log(e) setTodoSt.. 2023. 1. 31. [React]redux 지금까지 usereducer와 usestate로 상태 관리해보았다 이번엔 redux!!!! 참고사이트!!! https://ko.redux.js.org/ Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. ko.redux.js.org redux 설치 npm install react-redux react - redux 설치 npm install react-redux 리덕스 라이브러리!!!!! 같이 사용할 수 있는 언어는 javascript, vue, angular, react와 같이 사용할수 있다 react와는 찰떡임!!!!!!!!!!! redux를 쓰는 이유가.... 1. props 문법 귀찮을때 사용???ㅎㅎㅎ 2. stat.. 2023. 1. 27. [javascript] Promise & Async/Await Promise 비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트 정해진 기간의 기능을 수행하고나면 정상적으로 기능이 수행되면 성공의 메시지와 결과값을 전달하고기능을 수행하다가 예상치 못한 결과가 생겼다면 에러를 전달한다 자바스크립트의 클래스이다 state(상태) promise가 수행중이면 pending 상태임 promise가 수행이 종료되면 fullfilled가됨 promise가 수행중 오류가 발생하면 reject 2가지로 나눠짐 프로듀서 : 프로미스를 만들어서 제공하는 쪽 컨슈머 : 프로미스의 결과를 사용하는 쪽 구문) const promise = new Promise((resolve, reject)=>{ //생성자 resolve() //성공수행 reject() //성공실패수행 }); new 라는 .. 2023. 1. 24. [javascript] Fetch API Fetch API 도 XMLHttpRequest와 비슷하게 서버로부터 데이터를 받아오고 전송하지만 가장 큰 차이점은 Fetch API는 Promise방식으로 구성되어있다 그리고!!!! XMLHttpRequest보다 훨~~~씬 더 간결하다!!!!!! 구문) fetch("https://jsonplaceholder.typicode.com/posts/1") .then(Response=>Response.json()) //요청받은걸 제이슨데이터로 변환 .then(json=>console.log(json)); //변환받은걸 then으로 받음 에러 핸들링 사용 했을 때 2023.01.24 - [javascript 고급문법] - [javascript] try...catch(에러 핸들링) 방법 1 fetch("http:/.. 2023. 1. 24. [javascript] try...catch(에러 핸들링) 자바스크립트에서 오류는 try...catch문을 통해서 관리함 구문) try{ //code(코드에서 에러가 발생했다!!!) } catch(err){ //발생한 에러를 캐치에서 잡아줌 } 코드실행이 멈추지 않고 계속 진행하면서 에러를 잡아줌 콘솔을 잘 이용해야할거같당...후후 try 선언의 구성은 하나 이상의 try블록을 반드시 포함하며 catch블록과 finally블록 중 최소한 하나 혹은 둘다 포함하여 이루어짐 try...catch try...finally try...catch...finally try{ console.log("try 블럭 시작") throw new SyntaxError("구문이 틀렸어요: 다시작성") //SyntaxError 의도적으로 에러를 만들어줌 console.log("try 블.. 2023. 1. 24. [javascript] XMLHttpRequest ● XMLHttpRequest(XHR) 서버와 통신을 하도록 하는 객체 1. 객체는 서버와 상호작용하기 위해 사용 2. 전체 페이지를 새로고침하지 않아도 URL을 통해 데이터를 전송하거나 받아 올수 있음 3. XML데이터 통신 x, 모든 종류의 데이터 받아올 수 있음 4. 객체는 브라우저에서 제공하는 API임 node.js환경x ● ajax(Asynchronous javascript and xml) 동적으로 서버에서 데이터를 주고받는 기술 ● XML - 마크업 언어 ● JSON(javascript object notation) 오브젝트를 보고 만든 데이터포멧 텍스트를 기반으로 하여 파일이 가벼움 데이터를 직렬화하여 전송할때 쓰이는 파일 프로그램 언어와 플랫폼에 상관 없이 사용가능함 모바일에서도 서버와 전.. 2023. 1. 23. [javascript] this키워드 this 키워드는 사용되는 위치에 따라 this키워드에 바인드 된 객체가 달라짐! 콘솔에 this를 입력하면 console.log(this) 출력값 함수 안에 넣었을 때 function a() { console.log(this) } a() 출력값 this는 기본적으로 window를 가리킴!!!!!!!!! 객체 메서드 var obj = { a: function () { console.log(this) }} obj.a() 출력값 객체 메소드 a안의 this는 객체를 가리킴 이유는 객체의 메소드를 호출할 때 this를 내부적으로 바꿔주기 때문임 밑에 자료와 같이 바꿔주면 결과값 달라짐 명시적으로 this를 바꾸는 함수 메소드는 bind, call, apply를 사용하면 this가 객체를 가리킵니다 생성자일 경.. 2023. 1. 23. [React]multer,postman 보호되어 있는 글 입니다. 2023. 1. 20. [React]Node.js node는 브라우저가 아닌 곳에서도 javascript를 실행할 수 있도록 나온 어플리케이션 우리가 브라우저가 아닌 곳에서도 node.js를 이용하면 javascript를 시행 할 수 있음 폴더 생성 비쥬얼 스튜디오 코드를 연뒤 npm 패키지로 초기화 npm init 결과 test.js console.log("Hello javascript!!"); 터미널에 실행 node test.js 출력값 common JS react를 개발할 때느 ES6를 기반으로 하기에 import와 export를 사용해서 모듈을 불러왔음 Node에서는 기본 채택된 문법이 ES6문법이 아닌 Common JS방식을 사용 React도 Node를 기반으로 함 하지만 내부 빌드 과정에서 ES6를 사용할 수 있도록 변형했다고 볼 수 있음 B.. 2023. 1. 19. [React] react router 설치 & 사용 & hook함수(useParams, useNavigate) 참고 사이트 https://reactrouter.com/en/main Home v6.6.2 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com 리액트 라우터 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리 spa에서 새로운 페이지를 로드하지 않고 하나의 페이지안에서 필요한 컴포넌트만 가져와서 다른 페이지를 나타내는 방식을 지원.. 2023. 1. 18. [React] react Icons 설치, Axios 설치 react Icons 참고 사이트 https://react-icons.github.io/react-icons/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io react Icons 설치 npm install react-icons --save.. 2023. 1. 16. 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음 728x90 반응형
