본문 바로가기

전체 글

 (120)
[REACT]컴포넌트 함수형 VS 클래스형 React에서 컴포넌트를 만드는 방식은 함수형 컴포넌트와 클래스형 컴포넌트 두 가지로 나눌 수 있습니다. 최근 React에서는 함수형 컴포넌트와 Hooks를 주로 사용하지만, 클래스형 컴포넌트 역시 여전히 많은 프로젝트에서 사용됩니다. 이번 블로그 글에서는 함수형 컴포넌트와 클래스형 컴포넌트를 비교하며 각 방식의 차이점, 장단점, 그리고 사용 사례에 대해 살펴보겠습니다. 1. 함수형 컴포넌트란?함수형 컴포넌트는 간단하게 함수로 정의되며, JSX를 반환하는 구조입니다. 상태를 관리하거나 생명주기 메서드를 사용하기 위해 React의 Hooks를 활용할 수 있습니다. 최신 React 애플리케이션에서는 주로 함수형 컴포넌트가 사용되고 있습니다.import React, { useState } from 'react..
[REACT]리액트에서 컴포넌트(component)란? 리액트에서는 컴포넌트라는 개념이 매우 중요합니다. 컴포넌트에 대해서 확인해보고 이와 더불어 state와 props에 대한 내용도 확인해 봅시다.React 컴포넌트란?React에서 컴포넌트는 UI를 구성하는 가장 작은 단위로, 독립적이고 재사용 가능한 코드 조각입니다. 이 컴포넌트는 각자 자신의 상태를 관리할 수 있고, 서로 데이터를 주고받으며 동작합니다. 이 컴포넌트는 다음과 같은 두 가지 형태로 작성할 수 있습니다:함수형 컴포넌트 (Functional Components): 함수 형태로 정의된 컴포넌트.클래스형 컴포넌트 (Class Components): 클래스를 이용해 정의된 컴포넌트. (최근에는 함수형 컴포넌트와 Hooks를 더 많이 사용함)함수형 컴포넌트의 예시const MyComponent = ..
[REACT] NPM과 Yarn 뭐가 더 좋으려나 패키지 매니저(Package Manager)리액트로 개발을 하다보면 npm이라던가 yarn이라던가 하는 것들을 반드시 보게된다. 얘들은 뭐길래 사용해야하는 걸까?  이들은 패키지 매니저라고 불리는 것들이다. 말그대로 패키지를 관리하는 도구로서 프로젝트에서 라이브러리, 프레임워크, 모듈 등의 패키지를 관리한다. node.js에서는 흔히 npm과 yarn을 자주 사용한다. 이들은 웹사이트에서 패키지를 다운로드하여 컴퓨터에 설치를 해준다.간단하게 이야기 하자면 설치된 프로그램을 관리하는 프로그램이다.  그렇다면 node.js에서 가장 많이 사용되는 npm과 yarn은 어떤 차이를 가지고 있는 걸까?NPMnpm은 node.js와 함께 2009년에 처음 출시된 패키지를 쉽게 설치하고 관리하기 위해 설계된 패키지 ..
[React] 리액트가 뭘까?? 과거 자바스크립트는 웹 브라우저에서 간단한 연산이나 시각적인 효과를 주는 단순한 스크립트 언어였습니다.하지만, 현재는 웹 어플리케이션에서 가장 중요한 역할을 하고 있습니다.  최근에는 수 많은 앱들이 자바스크립트를 활용하여 개발되고 있습니다. 하지만 대규모 앱을 개발하기 위해서 순수 자바스크립트만으로 개발하기에는 많은 한계점들이 존재합니다. 그래서 등장한 것이 REACT입니다. REACT란?리액트는 메타(구 페이스북)에서 개발한 오픈소스 자바스크립트 라이브러리입니다. SPA를 전제로 하고 있으며 Dirty Checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM요소를 찾아서 해당 부분만 업데이터 하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 매우 빠른 퍼포먼스를 내는게 가능합니다. ..
[React] 초심자의 마음으로.. 최근에는 자바스크립트에 익숙해지고자 유튜브 실습 강의 들으면서 해당 내용들을 정리하곤 했었습니다.이젠 어느 정도 javascript에 익숙해진것 같아 React 공부를 시작을 하게되었습니다.  사실 이전에 React강의도 들었고 이를 통해 팀프로젝트로 개발도 진행한 경험이 있었는데,겉핥기식으로 대충하다보니 머리속에 있는 지식으로 한게 아니라 끼워맞추는 식으로 개발을 진행했었습니다. 그래서 이번에는 좀 더 이 분야의 전문가로 성장하기 위해서 꼼꼼하고 심도 있게 공부해보려고 합니다. 저는 개발공부할때 보통 인강을 많이 들었었는데, 저는 성격이 급해서 속도를 1.5배속이상으로 강의를 듣게 되더라구요. 그 순간에는 이해가 되는 듯 싶다가도 잠깐 지나가고 나면 잊어버리게 되는 게 반복되다보니 결론적으로는 지식들이..
[JS] Toast Notification 토스트 노티피케이션은 어떤 동작에 대한 피드백을 나타내는 것을 뜻합니다이번 포스트에서는 버튼을 눌렀을 때 그 동작에 대한 반응을 확인 하라 수 있는 toast notification을 만들어 보려고 합니다.   저기 위에 버튼들을 누르면 해당 토스트들이 생성이 됩니다. 그리고 timeout을 걸어서 시간이 되면 사라지게 만들었습니다. 함께 코드 보면서 진행해봅시다.  ToastBox와 메시지 변수 선언 let toastBox = document.getElementById("toastBox");let successMsg = 'successfully submitted';let errorMsg = 'Please fix the error';let invalidMsg = 'Invalid input, check a..
[JS]QR code생성기 (qrcode generator) 우리 일상에서 qr코드는 흔하게 사용되는 기술이고 매우 유용하게 사용되고 있습니다간편하게 신원을 조회하거나 사이트에 접근하기 편하기 때문인거 같아요  그 qr코드를 어떤 식으로 만드는 지 실습을 통해 알아보도록 하겠습니다 이 프로그램에 들어가게되면 텍스트나 url을 입력하는 Input창과 생성하기 버튼이 먼저 눈에 들어옵니다. input에 원하는 사이트를 입력하면 해당 사이트에 대한 qr코드가 생성이됩니다.이 qr코드가 잘 생성이 된건지 확인 해보기 위해서 카메라를 통해 확인을 해보았습니다. 오호라 사이트가 뜨는 걸 보니 잘 작동이 되고 있습니다.이번에는 어떤식으로 코드가 진행이되었는지 살펴 보도록 하겠습니다.1. 변수 선언 및 DOM 요소 선택let imgBox = document.getElementB..
[JS] 인용구 생성기(quotable generator) 안녕하세요 오늘 만들려고 하는 건 인용구를 랜덤으로 생성해주는 앱입니다. https://github.com/lukePeavey/quotable GitHub - lukePeavey/quotable: Random Quotes APIRandom Quotes API. Contribute to lukePeavey/quotable development by creating an account on GitHub.github.com이API를 사용해서 아주 쉽고 간단한 랜덤 인용구를 생성시킬 수 있습니다.  페이지를 열게 되면 "Quote of the day"라는 제목으로 아래 " "안에는 인용구 밑에는 작가 이름이 생성이 됩니다. 지난 번에 했을 때는 잘됐는데 지금은 잘 안되고 있는게 아마 API문제인것 같아요.. 해..

티스토리툴바