FE

📑 [React] State

리액트(React)의 또 다른 핵심 개념인 state에 대해 알아보겠습니다. state는 리액트 컴포넌트에서 동적인 데이터를 관리하는 데 사용되며, 컴포넌트의 상태가 변경될 때마다 UI를 다시 렌더링합니다. 이 글에서는 state가 무엇인지, 어떻게 사용하는지, 그리고 주의할 점에 대해 자세히 설명하겠습니다.   State란 무엇인가?state는 리액트 컴포넌트의 동적인 데이터를 저장하는 객체입니다. 컴포넌트는 state를 통해 자신의 상태를 관리하고, 상태가 변경되면 리액트는 자동으로 컴포넌트를 다시 렌더링하여 UI를 업데이트합니다. 이는 컴포넌트의 데이터가 변할 때마다 수동으로 DOM을 조작할 필요 없이, 리액트가 효율적으로 UI를 관리할 수 있게 해줍니다.   State 사용 방법 함수형 컴포넌트에..

📑 [React] 이벤트 핸들링

오늘은 리액트(React)에서 이벤트 핸들링(event handling)에 대해 알아보겠습니다. 이벤트 핸들링은 사용자가 웹 애플리케이션과 상호작용하는 중요한 방식입니다. 리액트에서는 이벤트를 다루는 방식이 HTML과 약간 다르기 때문에 이를 이해하고 올바르게 사용하는 것이 중요합니다. 이 글에서는 리액트에서 이벤트 핸들링을 어떻게 하는지, 예제와 함께 살펴보겠습니다.   리액트에서의 이벤트 핸들링   리액트의 이벤트 핸들링은 HTML의 이벤트 핸들링과 유사하지만, 몇 가지 중요한 차이점이 있습니다  이벤트 이름이 소문자 대신 캐멀 케이스(camelCase)를 사용합니다.이벤트 핸들러는 문자열이 아닌 함수로 전달됩니다.  이벤트 핸들러 사용 방법 리액트에서 이벤트 핸들러를 사용하는 기본적인 방법은 다음과..

📑 [React] Props

오늘은 리액트(React)의 핵심 개념 중 하나인 props에 대해 알아보겠습니다.  props는 리액트 컴포넌트 간의 데이터 전달을 담당하며, 이를 통해 컴포넌트들이 재사용 가능하고 더 유연해집니다. 이 글에서는 props가 무엇인지, 어떻게 사용하는지, 그리고 주의할 점에 대해 자세히 설명하겠습니다.  Props란 무엇인가?  props는 'properties'의 줄임말로, 컴포넌트 간의 데이터 전달을 위해 사용되는 객체입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되며, 자식 컴포넌트는 전달받은 props를 읽기 전용으로 사용할 수 있습니다. 이는 단방향 데이터 흐름(one-way data flow)을 보장하여 애플리케이션의 상태 관리를 용이하게 합니다.    Props 사용 방..

📑 [React] JSX

자바스크립트에서는 함수가 HTML을 리턴하도록 만들 수가 없다.그렇게 하면 문법적인 오류라고 판단하게 됩니다. 하지만 React에서는 JSX(Javascript Extentions) 라고 불리는 확장된 자바스크립트의 문법을 이용하기 때문에이러한 코드를 오류로 판단하지 않게 되는됩니다. function Footer() { const myName = "kim"; return ( 안녕 내 이름은 {myName}이야 footer );} 단순히 지금처럼 함수가 HTML 태그를 리턴하는 수준을 넘어서컴포넌트 내부에 변수를 하나 선언한 다음에 이 변수의 값을 이렇게 중괄호 안에 넣어 HTML을 렌더링 하도록 설정해 줄 수가 있습니다. JSX라..

📑 [React] App React

React로 만든 웹 서비스들은보통 React App, React Application이라고 부른다. 그 이유는 리액트로 만들어진 대다수의 웹 서비스들은 단순한 웹 페이지의 기능을 넘어서사실상 애플리케이션에 가까울 정도로 매우 다양한 기능들을 제공하고 있기 때문에,마치 단순한 웹이 아니라 웹 브라우저 위에서 동작하는 애플리케이션과 같다고 하여,보통은 리액트 웹 또는 리액트 애플리케이션이라고 부른다.  리액트 앱은 굉장히 다양한 방식으로 생성할 수 있는데요, 사실 리액트 또한 이렇게 npm에 등록된자바스크립트 라이브러리이기 때문에 node.js 패키지를 하나 만들고,패키지에 리액트라는 라이브러리를 설치하고 마지막으로 리액트를 좀 더 편하게 사용하기 위한추가적인 도구를 설치하면 됩니다.src 폴더src는 "..

📑 [React] React란?

React는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 사용됩니다. 특히, 복잡한 애플리케이션에서 UI 구성 요소를 효율적으로 관리하고 업데이트하는데 탁월합니다. 주요 개념  컴포넌트 기반 구조:컴포넌트 (Component)란? 구성요소 라는 뜻으로, 화면을 구성하는 요소, UI를 구성하는 요소를 말합니다.컴포넌트를 자바스크립트 파일로 모듈로 있다는 것은 중복코드를 제거하는 관점에서 매우 큰 장점이다.React 애플리케이션은 여러 개의 독립적이고 재사용 가능한 컴포넌트로 구성됩니다. 각 컴포넌트는 UI의 특정 부분을 담당하며, 이를 조합하여 복잡한 UI를 구성합니다.  JSX (JavaScript XML):JSX는 JavaScript에 XML/HTML 문법을 ..

📖 [JS] 동기와 비동기

자바스크립트에서 "동기"와 "비동기"는 코드 실행 방식의 차이를 설명하는 중요한 개념입니다. 이 두 개념은 특히 비동기 프로그래밍이 필수적인 현대 웹 개발에서 매우 중요합니다. 동기(Synchronous)동기적 코드 실행은 코드가 순차적으로 한 줄씩 실행됨을 의미합니다. 즉, 한 작업이 완료된 후에야 다음 작업이 시작됩니다. 이 방식은 이해하기 쉽고 예측 가능하지만, 시간이 많이 걸리는 작업(예: 네트워크 요청, 파일 읽기 등)이 있을 경우, 브라우저가 응답하지 않게 될 위험이 있습니다. 자바스크립트와 스레드자바스크립트는 싱글 스레드(Single-Threaded) 언어로 설계되었습니다. 이는 자바스크립트 엔진이 한 번에 하나의 작업만 실행할 수 있음을 의미합니다. 하지만 자바스크립트는 비동기 프로그래밍 ..

📖 [JS] 배열 변형 메서드

filter 메서드 기존 배열에서 조건을 만족하는 요소들만 필터링하여 새로운 배열로 반환let arr1 = [ {name: "kim", bobby: "game"}, {name: "serin", hobby: "game"}, {name: "sam", hobby: "football"}];const gamePeople = arr1.filter((item) => { if(item.hobby === "game") return ture;});// const gamePeople = arr1.filter((item) => item.hobby === "game");console.log(gamePeople); // >> (2) hobby:game을 가진 요소 출력  filter 메서드는 웹 서버를 개발 할 때, ..