전체 글50 콜백함수, Primise, async, await 콜백 함수(Callback function)는 다른 함수에 인수로 전달되어 실행되는 함수입니다. 콜백 함수는 특정 이벤트가 발생했을 때나, 특정 작업이 완료되었을 때 실행되도록 설계됩니다. 이를 통해 프로그램의 유연성과 모듈성을 높일 수 있습니다.콜백 함수의 일반적인 사용 사례는 다음과 같습니다:비동기 프로그래밍: 자바스크립트와 같은 비동기 환경에서 주로 사용됩니다. 예를 들어, 서버에서 데이터를 받아오는 동안 코드의 나머지 부분이 실행될 수 있도록 합니다.function fetchData(callback) { setTimeout(function() { const data = "some data from server"; callback(data); }, 1000);}f.. 2024. 6. 8. withCredentials: true 리액트에서 axios를 사용할 때withCredentials: true를 설정하는 것은클라이언트가 서버와 통신할 때 쿠키를 포함한 자격 증명을 함께 보내겠다는 뜻입니다.쉽게 설명하자면, 서버와의 요청에서 로그인 상태나 사용자 정보를 유지하기 위해 필요한 설정입니다. 예를 들어, 어떤 웹사이트에 로그인한 상태에서 다른 페이지로 이동하거나 데이터를 요청할 때,서버는 이 사용자가 누구인지 알아야 합니다.이때 쿠키가 사용자 정보를 담고 있으며,withCredentials: true를 설정하면 이 쿠키를 서버로 함께 보내어 서버가 사용자를 인식할 수 있게 합니다. 다음은 withCredentials 옵션을 사용하는 간단한 예제입니다.import axios from 'axios';axios.get('https://.. 2024. 5. 25. styled-components의 장점과 단점 styled-components는 React 애플리케이션에서 CSS를 작성하고 관리하는 방법을 제공하는 인기 있는 라이브러리입니다. 이 라이브러리는 JavaScript 안에 CSS를 직접 작성할 수 있게 해주며, 컴포넌트 단위로 스타일을 관리할 수 있는 장점을 가지고 있습니다. 그러나, 모든 기술이 그러하듯 styled-components에도 장단점이 존재합니다.장점컴포넌트 기반 스타일링:스타일을 컴포넌트 내부에 포함시킴으로써 스타일과 로직을 함께 관리할 수 있습니다. 이는 각 컴포넌트의 스타일이 독립적으로 유지될 수 있게 하여 유지보수를 쉽게 합니다.동적 스타일링:props를 통해 스타일을 동적으로 변경할 수 있습니다. 이를 통해 조건부 스타일링이 쉬워지고, 스타일 재사용성이 높아집니다.자동 중첩 및 .. 2024. 5. 21. 리액트 훅(React Hooks) 리액트 훅(React Hooks)은함수형 컴포넌트에서 상태(state)와 라이프사이클(lifecycle) 기능을 사용할 수 있게 해주는 기능입니다.리액트 16.8 버전에서 도입되었으며, 클래스형 컴포넌트의 복잡성을 피하고,함수형 컴포넌트의 장점을 살릴 수 있도록 돕습니다. 주요 훅은 다음과 같습니다: 1. useStateuseState 훅은 컴포넌트에서 상태 변수를 선언할 수 있게 합니다.import React, { useState } from 'react';function Example() { const [count, setCount] = useState(0); // 초기 값 0 return ( You clicked {count} times setCount(count + .. 2024. 5. 20. React Component, Element 기능 구현을 하다보면 가끔 component랑 element의 정확한 뜻이 헷갈려서어? 배웠는데 뭐지? 하는 경우가 생겨서 다시 정리를 해본다...⭐엘리먼트는 리액트 애플리케이션의 가장 작은 단위로, 화면에 표시되는 내용을 기술한다. 반면, 컴포넌트는 이러한 엘리먼트들을 조합하고 재사용 가능한 코드 블록을 형성한다. 📌 리액트 컴포넌트란?이제 리액트 컴포넌트에 대해 알아보자. 리액트 컴포넌트는 엘리먼트를 좀 더 자유롭게 다루기 위한 문법이다.가장 간단한 컴포넌트 생성 방법은 자바스크립트 함수를 사용하는 것이다.리액트 엘리먼트를 함수 형태로 만들어내면 JSX 문법을 작성할 때 커스텀 태그처럼 활용할 수 있다.아래 코드에서 볼 수 있는 Hello 함수가 하나의 예시이다.import ReactDOM fro.. 2024. 5. 17. SPA & MPA / SSR & CSR SPA SPA는 Single Page Application의 약자로써, 하나의 페이지로 이루어져 있는 애플리케이션을 뜻합니다.대표적으로 React, Vue, Angular가 있어요.React에 대해 본격적인 학습에 들어가기 전, SPA 아키텍쳐의 동작원리를 이해하는 것은앞으로 React를 이해하는 데에 큰 도움이 될거에요! (1) SPA에 들어가기 전, MPA와 SSR에 대해 MPA(Multi Page Application)란, 2개 이상의 페이지(html)로 구성된 애플리케이션을 의미합니다. 요청 : 클라이언트(브라우저)에서 네모를 눌러 서버에 응답을 요청합니다.생성 : 서버(웹서버)에서는 요청에 따라 새로운 html 파일을 만듭니다.응답 : 새로 만든 html 파일을 클라이언트(브라우저)에게 보.. 2024. 5. 14. React의 주요 개념 익히기 1. 가상 DOM - 가상 DOM은 실제 DOM을 흉내 낸 가상의 DOM입니다.- React 같은 라이브러리는 가상 DOM을 사용해서 실제 DOM보다 빠르게 UI 변경사항을 관리해줍니다.- 가상 DOM은 변경이 필요한 부분만 실제 DOM에 반영해줘서, 페이지 전체를 새로 불러오는 것보다 훨씬 효율적입니다.- 개발자 입장에서도 DOM을 직접 다루는 대신, React가 가상 DOM을 이용해 필요한 부분만 자동으로 업데이트를 해주니 훨씬 편리하게 그리고 높은 생산성으로 서비스를 만들 수 있어요. 2. JSX - JSX는 Javascript를 확장한 문법으로, React에서 UI 구조를 표현하는데 사용됩니다.- HTML 태그와 유사하게 생겼지만, 실제로는 Javascript의 확장입니다.- JSX는 React.. 2024. 5. 13. 라이브러리와 프레임워크 React JS 웹과 네이티브 UI를 위한 Library이다.공식 홈페이지에서는 React를 UI를 만들기 위한 라이브러리라고 소개하고 있습니다. 프레임워크 개발자가 기능 구현에만 '딱' 집중할 수 있도록 필요한 모든 프로그래밍 재원을 지원하는 '기술의 조합'. Spring Framework : Java 기반의 웹(백엔드) 프레임워크- FE까지 가능한 full stack coverage framework- JSP, Thymeleaf Vue js, Angular js : Javascript 기반 웹 프론트엔드 SPA 프레임워크 Django, Flask : Python 기반의 웹 프레임워크 Express js, Nest js : Javascript 기반 웹 백엔드 프레임워크 라이브러리? 공.. 2024. 5. 10. DOM과 Class, Closer 1. DOM (1) DOM의 기본 개념javascript브라우저에서 쓰려고 만들어진 JS에요!본연의 역할 : 웹 페이지를 동적으로 만들기 위해! 즉, HTML문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어에요.웹 페이지가 뜨는 과정사용자가 브라우저에 ‘www.naver.com’ 주소를 입력합니다.클라이언트가 서버에게 ‘요청(request)’를 했네요.여러분이 크롬을 통해 클라이언트의 역할을 하는 것이랍니다 🚀💡 사용자 = 브라우저 = 클라이언트, 같은 의미로 생각해주세요🙂HTML 문서를 서버로부터 수신합니다.네이버서버는 여러분(=브라우저 =클라이언트)에게 ‘응답(response)’를 줬네요.그 응답은 HTML 문서(document)랍니다.브라우저가 HTML 파일을 해석(parsing 파싱).. 2024. 5. 7. 이전 1 2 3 4 5 6 다음
