본문 바로가기

전체 글

[Gradle] Gradle 설치하기 📌 Gradle 다운로드 Gradle 설치 페이지에서 가장 최신 버전인 Gradle v8.0을 다운로드합니다. Gradle 홈페이지 : https://gradle.org/releases/ 📌 시스템 환경 변수 추가 시스템 속성 > 고급 > 환경변수 > 시스템 변수 > Path 에 Gradle 경로를 추가합니다. 이때 Gradle 경로는 bin 폴더가 있는 파일 경로( gradle-8.0\bin )를 추가합니다. 예) D:\dev\gradle-8.0\bin 아래와 같이 환경 변수를 추가한 후 확인 버튼을 눌러 적용합니다. 📌 Gradle 확인 윈도우 CMD에서 gradle 명령어를 입력해 Gradle이 잘 설치되어있는 지 확인합니다. 더보기
[후기] 매직 키보드 후기 📌 매직키보드 구매 현재 집에서 맥북, 아이패드🍎를 사용하고 있고, 회사에서는 윈도우를 사용하고 있어요. Mac의 Capslock키 한/영 변환이 익숙하지 않아, 윈도우 한/영키 위치로 바꿔 사용중인데요. 이때문에 집에서 사용하고 있는 앱코 무접점 키보드가 맥과 키보드 호환이 쉽지 않아 애플 매직 키보드를 구매했습니다. 또한 저는 여자이다 보니 손이 작아 텐키가 없는 키보드를 선호하는 편입니다. 10만원 정도 투자해볼 가치가 있다고 판단하여 매직 키보드를 구매하게 되었습니다 :D 📌 매직키보드 사양 • 충전 : Lightning-USB 케이블 Lightning-USB 케이블을 통한 충전이라 다행히도 케이블을 동봉해주었습니다. (USB-C 충전이 아닌 점이 살짝 아쉬웠어요🙃) • 무게 : 231g 무게가 .. 더보기
[React] 리액트 부트스트랩(react-bootstrap) 적용하기 📌 react-bootstrap 이란? • react 에서 Bootstrap5 을 사용 가능하도록 개발한 라이브러리입니다. • 각종 레이아웃, 버튼, 입력창, 테이블 등을 미리 디자인을 정의해두어 React에서 컴포넌트를 불러 사용가능합니다. • 프로젝트 내 따로 bootstrap.js 파일을 둘 필요가 없고 react-bootstrap 라이브러리만 설치하여 사용 가능합니다. 📌 Bootstrap 라이브러리 설치하기 • react Bootstrap 문서에서 참고해 npm에서 react-bootstrap 라이브러리를 설치합니다. • npm install 은 yarn add 와 동일하기 때문에, yarn은 yarn add react-bootstrap bootstrap 으로 설치하시면 됩니다. npm inst.. 더보기
[카드] 엘포인트로 롯데카드 결제대금 납부하기 안녕하세요. 오늘은 "엘포인트(Lpoint)"로 롯데카드 대금을 납부하는 방법에 대해 포스팅하겠습니다 :D 롯데카드 앱(DIGI LOCA)에서는 포인트로 카드 대금 납부가 불가하며, 롯데카드 홈페이지(PC)로만 가능합니다. 카드 대금 납부의 경우 평일/주말 09:00~22:00만 가능합니다. 📌 납부 방법 1) 롯데카드 홈페이지 로그인 보안 프로그램이 설치되어있지 않다면, 보안프로그램을 설치하셔야 합니다. 2) MY > MY 한눈에 보기 상단 'MY' 메뉴에서 'MY 한눈에 보기'를 클릭합니다. 3) 포인트 > 포인트 사용 클릭하기 MY페이지 내 포인트 탭에서 "포인트 사용"을 누른뒤, 포인트 사용 페이지에서 "결제 대금 납부" 버튼을 클릭합니다. 4) 결제 대금 납부하기 보유한 엘포인트의 사용 가능 포.. 더보기
[React] State란? 변경되는 동적인 값 📌 State 란 무엇인가? - state란 리액트에서 이벤트에 의해 변경되는 동적인 값입니다. - 버튼을 클릭하는 onClick 이벤트, input 입력으로 인해 발생하는 onChange 이벤트에 의해 입력값이 변경된 경우 사용됩니다. - props는 부모 컴포넌트가 설정하는 값이며 읽기 전용이지만, state는 하위 컴포넌트도 데이터를 변경할 수 있습니다. - 함수형 컴포넌트는 'useState'라는 Hook 을 사용하여 state를 다룰 수 있습니다. 📌 State 사용하기 : useState 함수형(function) 컴포넌트에서 { useState } Hooks를 활용해 state를 사용해보겠습니다. useState란 리액트의 기본 Hook 중 하나로, 컴포넌트에서 state를 추가할 때 사용합니.. 더보기
[React] Props란? 컴포넌트에 데이터 전달하는 프로퍼티 📌 Props 란 무엇인가 - props(property)란 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용하는 속성입니다. - 상위 컴포넌트가 하위 컴포넌트에 값을 전달하기 때문에 단방향 데이터 흐름을 갖습니다. - 부모 컴포넌트는 수정 가능하지만, 자식 컴포넌트는 읽기만 가능합니다. 📌 Props 사용하기 : 단방향 데이터 흐름 props 를 사용하려면 두 단계가 필요합니다. 1) 상위 컴포넌트에서 Props를 지정하고, 2) 하위 컴포넌트에서 받은 Props값을 렌더링해야 합니다. 이 때 상위 컴포넌트에서 하위 컴포넌트로 프로퍼티가 전달되는데 이것이 "단방향 데이터 흐름" 입니다. 1) 상위 컴포넌트에서 Props 지정하여 넘기기 - 아래 코드에서 App 컴포넌트가 MyComponent 컴포넌.. 더보기
[React] React 컴포넌트란? React 앱을 구성하는 요소 📌 컴포넌트 (Component)란? 리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용합니다. 쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있고, 레고 블록으로 집을 쌓게 된 경우 하나의 블록이 '컴포넌트'라고 할 수 있습니다. 컴포넌트는 새로운 컴포넌트를 생성할 수 도 있고, MVC 의 뷰를 독립적으로 구성하여 재사용할 수 있습니다. 리액트의 중요한 핵심인 '컴포넌트'에는 함수 컴포넌트, 클래스 컴포넌트 2가지가 있습니다. • 컴포넌트 구성 요소 1) property(props) - 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터입니다. 프로퍼티값은 자식 컴포넌트에서 수정할 수 없습니다. 2) state - 컴포넌트의 상태를 저장하고 수정 가능한 데이터입니다. .. 더보기
[React] JSX 정의 및 문법 📌 JSX (Javascript XML)란? • Javascript 에 XML을 추가해 엘리먼트를 생성하는 문법 리액트에서 'JSX' 라는 특별한 문법으로 엘리먼트를 만들어 사용자에게 UI가 실제로 어떻게 표현될 것인지 나타냅니다. JSX는 Javascript에 XML을 추가한 Javascript를 확장한 문법으로, 공식적인 자바 스크립트 문법은 아닙니다. 하지만 가독성이 높고 이해하기 쉬운, 리액트만의 특별한 스크립트 문법입니다. 아래는 리액트에서 App.js 에 JSX로 "Hello! React"를 화면에 나타내는 코드입니다. function App() { const HelloBlock = Hello React!; return( {HelloBlock} ); } 여기서 "Hello! React" 가 마.. 더보기

티스토리툴바