전체 글82 [React] React Project에 typescript 설치 'create-react-app' 명령어로 간편하게 React Project를 생성할 수 있다. npx create-react-app my-app npx create-react-app 'React App 이름' 다만 React App을 개발할 때 TypeScript를 사용해서 개발할 생각이라면 일단 먼저 TypeScript를 설치를 해줘야 한다. 하지만 CRA로 초기 React App을 만들 때 아래와 같이 명령어를 추가해 주면 일일이 수동으로 TypeScript를 설치할 필요가 없는 것 같다. npx create-react-app my-app --template typescript npx create-react-app 'App 이름' --template typescript 기존 'create-react.. 2024. 4. 20. [JavaScript] Promise 1. Promise 2. Promise 객체 내부 Property 3. '.then()' / '.catch()' / '.finally()' ① .then() ② .catch() ③ .finally() 4. Reference 1. Promise Promise란 비동기 작업을 처리할 때 Callback 함수 대신 유용하게 활용할 수 있는 JavaScript 내장 객체로, 비동기 작업을 수행하고 나서 작업의 성공/실패 여부와 그 결과 값을 나타낸다. const prom = new Promise((resolve, reject) => { //executor, 실행자, 실행 함수 }); 위의 예시처럼 'new Promise()' 연산자를 통해 Promise 객체를 생성할 수 있다. 여기서 Promise 객체를 생성.. 2024. 4. 10. 최대 공약수 구하는 Logic function GetGCD(num1, num2){ let gcd = 1; for (let i = 2; i 2024. 4. 2. 동기와 비동기 그리고 Blocking & Non-Blocking 0. 개요 1. 동기 Synchronous와 비동기 Asynchronous ① 동기 Synchronous ② 비동기 Asynchronous 2. 블로킹 Blocking & 논블로킹Non-Blocking ① Blocking ② Non-Blocking 3. 동기 / 비동기 + 블로킹 / 논블로킹 📔 Reference 0. 개요 프로그래밍을 하다 보면 동기, 비동기라는 단어를 몇 번 본 적이 있을 것이다. 물론 필자도 두 단어를 프런트엔드 공부를 하면서 본 적이 있었고 그럴 때마다 여기서 말하는 동기와 비동기란 무엇인지 되게 궁금해져서 구글링을 해본 적도 있었다. 그리고 비교적 최근에 동기와 비동기에 대해 정리한 글을 블로그에 올린 적이 있었는데 당시 글을 올리는 시점에서 동기와 비동기에 대해 이해를 덜 한 .. 2024. 3. 26. MPA와 SPA 1. MPA, Multiple Page Application MPA, Multiple Page Application은 말 그대로 여러 개의 페이지로 구성된 애플리케이션이다. MPA라는 개념은 SPA라는 개념이 등장하고 나서,이 둘을 구분 짓기 위해 생겨난 개념으로 SPA 등장 전에 만들어졌던 대부분의 웹 사이트들은 MPA 방식으로 만들어졌다. 우리가 자주 사용하는 Naver도 SPA 등장 전에 만들어진 웹 사이트로 MPA, Multiple Page Application에 가깝다고 할 수 있다. 기본적으로 MPA 방식으로 만들어진 웹 사이트는 아래 이미지와 처럼 동작한다. 클라이언트 (사용자) 측에서 서버에게 HTML 파일을 요청, 서버는 HTML 파일을 응답으로 전송한다. 그리고 이를 전송받은 클라이언트.. 2024. 2. 26. [React] react-router, <Link> 태그 Issue 해결하기 1. 문제 설명 위의 이미지와 같은 특정 날짜를 기준으로, 주간 박스 오피스 정보를 출력하는 웹 페이지에서 영화 제목을 클릭하면, 해당 영화에 대한 상세 정보가 적힌 웹 페이지로 넘어가는 기능을 React Router를 활용해서 구현하고 정상적으로 동작하는 지 테스트를 해봤다. 더보기 'Home.js' (영화 웹 페이지의 기본 화면 담당) import { useState } from "react"; import { useEffect } from "react"; import Movie from "../Components/Movie"; function Home(){ const [Loading, setLoading] = useState(true); const [Movies, setMovies] = useSta.. 2024. 2. 13. [JavaScript] 콜백 함수 Callback Function 1. 콜백 함수 Callback Function 콜백 함수란 인자, 값의 형태로 전달되는 함수를 말한다. JavaScript에서 함수를 순차적으로 실행하고자 할 때 활용할 수 있는 방법이다. function Test(Callback){ Callback(); console.log("Test 함수 실행"); } const Test2 = () => { console.log("Test2 함수 실행"); } Test(() => { console.log("임의 함수 생성, 실행")}); Test(Test2); 위의 예제처럼 Test 함수 호출 시, 임의의 함수를 만들어서 콜백 함수로 활용할 수도 있고 아니면 기존에 만들어둔 함수를 콜백 함수로 사용할 수도 있다. 콜백 함수는 기본적으로 함수를 다른 함수의 인자로 전.. 2024. 2. 4. [React] state 더보기 📃 목차 1. 개요 / 버튼 예제 구현 2. state의 정의 ① state ② state 사용해 보기 3. 버튼 예제 Update 1. 개요 / 버튼 예제 구현 React를 활용해서 버튼 하나와 버튼을 클릭한 횟수를 보여주는 간단한 예제를 하나 만들어보자. // 'index.html'의 'root' 요소에 App Component가 성공적으로 Rendering 됐다면 아래 이미지처럼 안내 메시지와 버튼 그리고 버튼 클릭 횟수를 기록하는 문구가 보일 것이다. 여기서 버튼을 클릭했을 때 하단의 '버튼 클릭 횟수: 0회'에 변화가 있어야 하지만 실제로 확인해 보면 처음 상태 그대로인 것을 볼 수 있다. 버튼을 클릭했을 때, ClickCount 함수가 정상적으로 실행되는지 확인하기 위해서 해당 함수 내.. 2024. 1. 29. [마듀] 24년 1월 금제 이후, 드래곤 링크 (단순 기록용) 보호되어 있는 글 입니다. 2024. 1. 16. 이전 1 2 3 4 ··· 10 다음
