목록Code개발일지 (93)

Daily Front_Minhhk

[React] SPA, Router

학습 목표 SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다. SPA의 장, 단점에 대해 이해하고 설명할 수 있다. 와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 정할 수 있다. React에서 npm으로 React Router를 설치(npm install react-router-dom@6.3.0)하고 이용할 수 있다. React Router를 이용하여 SPA를 구현할 수 있다. 라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다. [ React SPA ] → Single-Page Application SPA의 등장 배경과 개념 전통적인 웹사이트는 페이지 이동 시 매번 '페이지 전체'를 불러와야 했다. 하지만 SPA는 업데이트..
Code개발일지 2022. 11. 28. 14:35
[React] JSX,component

리액트의 3가지 특징 선언형 컴포넌트 기반 범용성 JSX란 무엇인가? JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아니다. React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. 이 문법을 이용해서 React 엘리먼트를 만들 수 있다. JSX는 브라우저가 바로 실행할 수 있는 자바스크립트 코드가 아니기 때문에 Babel을 이용한다. Babel은 JSX를 브라우저가 이해할 수 있는 자바스크립트로 컴파일한다. 컴파일 후, 자바스크립트를 브라우저가 읽고 화면에 랜더링을 할 수 있다. JSX 규칙 하나의 엘리먼트 안에 모든 엘리먼트가 포함 JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸..
Code개발일지 2022. 11. 25. 22:38
[JS] fetch API...sprint

fetch API는 특정 URL로 부터 정보를 받아오는 역할을 합니다. 이 과정은 비동기적으로 이루어집니다. let url = ""; fetch(url) .then((response) => response.json()) .then((json) => console.log(json)) .catch((error) => console.log(error)); 위 코드는 네트워크에서 JSON 파일을 가져와서 콘솔에 출력합니다. 가장 단순한 형태의 fetch()는 가져오고자 하는 리소스의 경로를 나타내는 하나의 인수만 받습니다. 응답은 Response 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없습니다. Response 객체 역시 JSON 응답 본문을 그대로 포함하지는 않습니다. Response는 HTT..
Code개발일지 2022. 11. 25. 22:19
[JS] fs모듈 (part-2)

📌 어렵다~ 스프린트 과제이지만,, 테스트케이스와 구글을 참고 하며 두들겨 보았다.. 느낌은 오는데 여전히 와닿지는 않는다^^ 01_callBack.js const fs = require("fs"); const getDataFromFile = function (filePath, callback) { // TODO: fs.readFile을 이용해 작성합니다 fs.readFile(filePath, "utf8", (err, data) => { err ? callback(err, null) : callback(null, data) }) }; getDataFromFile('README.md', (err, data) => console.log(data)); module.exports = { getDataFromFi..
Code개발일지 2022. 11. 25. 22:10
[JS] 타이머API[setTimeout,setInterval() ] / (node.js)-fs.readFile(path[, options], callback)

📌 슬슬 비동기 시간 부터 시작해서 머리가 복잡과 어렵기 시작했다.. 앞으로 서버 주고 받고 네트워크 형성이라고 해야하나? 할려면 비동기 계속 쓸텐데… 극복해야한다 하겠지? 타이머 관련 API setTimeout(), clearTimeout() // setInterval(), clearInterval(id) setTimeout(callback, millisecond) 일정 시간 후에 함수를 실행 매개변수(parameter): 실행할 콜백 함수, 콜백 함수 실행 전 기다려야 할 시간 (밀리초) return 값: 임의의 타이머 ID setTimeout(function () { console.log('1초 후 실행'); }, 1000); // 123 clearTimeout(timerId) setTimeout ..
Code개발일지 2022. 11. 24. 00:57
[JS] 비동기[callBack, Promise, async-await]

학습 목표 어떤 경우에 중첩된 콜백(callback)이 발생하는지 이해할 수 있다. 중첩된 콜백(callback)의 단점, Promise의 장점을 이해할 수 있다. async/await 키워드에 대해 이해하고, 작동 원리를 이해할 수 있다. blocking vs non-blocking 요청에 대한 결과가 동시에 일어난다 (synchronous) → 동기 요청에 대한 결과가 동시에 일어나지 않는다 (asynchronous) → 비동기 asynchronous 예제 function waitAsync(callback, ms) { setTimeout(callback, ms); // 특정 시간 이후에 callback 함수가 실행되게끔 하는 브라우저 내장 기능입니다 } function drink(person, cof..
Code개발일지 2022. 11. 24. 00:31
이전 Prev 1 ··· 7 8 9 10 11 12 13 ··· 16 Next 다음