분류 전체보기97 동기와 비동기 그리고 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 ApplicationMPA, Multiple Page Application은 말 그대로 여러 개의 페이지로 구성된 애플리케이션이다.MPA라는 개념은 SPA라는 개념이 등장하고 나서,이 둘을 구분 짓기 위해 생겨난 개념으로 SPA 등장 전에 만들어졌던 대부분의 웹 사이트들은 MPA 방식으로 만들어졌다. 우리가 자주 사용하는 Naver도 SPA 등장 전에 만들어진 웹 사이트로MPA, Multiple Page Application에 가깝다고 할 수 있다.기본적으로 MPA 방식으로 만들어진 웹 사이트는 아래 이미지와 처럼 동작한다.클라이언트 (사용자) 측에서 서버에게 HTML 파일을 요청, 서버는 HTML 파일을 응답으로 전송한다.그리고 이를 전송받은 클라이언트 측에서 해.. 2024. 2. 26. [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] = useSt.. 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. [JavaScript] 구조 분해 할당 1. 구조 분해 할당 Destructuring Assignment 구조 분해 할당은 배열의 요소나 객체의 Property를 말 그대로 분해해서 각 변수에 할당하는 문법이다. 기존 배열이나 객체에 저장된 데이터 중 일부만 필요한 경우에 활용할 수 있는 문법이다. 먼저 배열의 요소를 분해해서 할당하는 방법부터 알아보도록 하겠다. ① 배열, 구조 분해 할당 (1). 배열 요소를 각 변수에 분해 할당하기 const colors = ["Red", "Green", "Blue"]; let [c1, c2, c3] = colors; console.log(`c1 : ${c1}`); //c1 : Red console.log(`c2 : ${c2}`); //c2 : Green console.log(`c3 : ${c3}`); /.. 2024. 1. 9. [React] React Component 생성법 1. React Component 2. React.createElement() 3. JSX ① JSX ② JSX 코드에 JavaScript 추가하기 1. React Component React는 사용자 인터페이스 User Interface, 속칭 UI를 만들기 위한 JavaScript 라이브러리로 React로 개발한 웹 페이지는 여러 개의 Component를 조합해서 만들어진다. 여기서 Component란 '구성요소', '부품'이라는 의미를 가지고 있다. 이를 참고해서 React에서 Component는 UI를 만들기 위한 구성 요소 및 부품이라고 할 수 있다. 이해를 돕기 위해서 React로 개발된 웹 페이지 하나를 예시로 가져와봤다. https://www.instagram.com/ Instagram w.. 2024. 1. 5. 나의 개발자 인생 회고록 📆 Last Update : 2024.01.22 월요일 이 글은 처음 개발을 접했던 2017년부터, 웹 개발을 공부하고 있는 현재까지 개발자의 인생을 살아가고 있는 제 삶에 대한 나름의 회고록입니다. 사실은 개발자가 되기로 한 이유에 대해 명확하게 정의를 내리고 싶어서 쓰는 잡담 글이고 앞으로 이력서를 작성할 때 참고하려고 쓰는 글이기도 합니다. 💻 개발을 처음으로 접했던 시기 const MyInfo = { '학교' = "유한대학교", '전공' = "전자공학과 / 2년제", '입학' = 201703, '졸업' = 202202 }; 제가 개발, 프로그래밍을 처음 접하게 된 시기는 대학교 1학년 때였습니다. 2년제 전문대학이다 보니 이론 강의와 실습 강의를 같이 수강했었는데 그중 1학년 2학기에 있었던 '디.. 2024. 1. 2. 이전 1 2 3 4 5 6 ··· 11 다음
