목록전체 글 (161)

Daily Front_Minhhk

[React] props, state

학습 목표 state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다. React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다. React 컴포넌트(React Component)에 props를 전달할 수 있다. 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다. 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다. 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다. React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다. 🔑 Props P..
Code개발일지 2022. 11. 30. 03:01
[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 // Axios

📌 Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. ✅ Axios는 Fetch API보다 사용이 간편하면서 추가적인 기능들이 포함되어 있습니다. Fetch API vs Axios Axios Fetch API 써드파티 라이브러리로 설치가 필요합니다. 빌트인 API라 별도의 설치 필요없습니다. 자동으로 JSON데이터 형식으로 변환됩니다. .json() 메서드를 사용해야 합니다. Axios는 써드파티 라이브러리이기 때문에 사용하기 위해서는 설치 ➡️ npm install axios GET 요청 GET 요청은 일반적으로 정보를 요청하기 위해 사용되는 메서드입니다. 첫번째 인자에는 url주소가 들어갑니다. url주소는 필수입니다. 두번째 인자에는..
카테고리 없음 2022. 11. 25. 22:22
[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
이전 Prev 1 ··· 18 19 20 21 22 23 24 ··· 27 Next 다음