티스토리

Developer Story House
검색하기

블로그 홈

Developer Story House

maengmo.tistory.com/m

IT계의 큰손이 되고 싶은 개린이의 Log 일지

구독자
8
방명록 방문하기
공지 Developer Stroy Hous⋯ 모두보기

주요 글 목록

  • React STEP 24 - TODO 리스트 예제 ⭐ TODO LIST 1. 단계 1기본 구조 잡기AddTask.jsclass AddTask extends React.Component { render() { let inputStyle = { marginTop : 20, padding: "0px 10px", width: 125, lineHeight: "32px", fontSize : 14, border: "1px solid #ccc" }; let buttonStyle = { margin: "20px 0px 0px 5px", padding: 10, .. 공감수 2 댓글수 2 2025. 2. 11.
  • React STEP 23 - Create React App - 5 ⭐ Create React App컴포넌트 매핑 이해하기1. 단계 1src/DataComponent.jsclass DataComponent extends React.Component { render() { let ulStyle = { marginTop : 15 } let liStyle = { lineHeight : 1.8 } return ( member1 member2 member3 ) }} 2. 단계 2src/App.js class App extends Com.. 공감수 1 댓글수 1 2025. 2. 11.
  • React STEP 22 - Create React App - 4 ⭐ Create React Appmap() 함수로 태그 반환하기 1. 단계 1반복해서 출력해야 하는 태그들을 배열에 넣어두고 map() 함수로 순서대로 나열해 컴포넌트를 return 할 수 있습니다.src/ReturnMap.jsclass ReturnMap extends React.Component { render() { let ulStyle= { marginTop: 15 } let liStyle = { lineHeight: 1.8 } let forArray = [ React, 18.2.0, Array Map ]; r.. 공감수 0 댓글수 0 2025. 2. 11.
  • React STEP 21 - Create React App - 3 ⭐ Create React App 1. state 정의 하기App.jsimport React, { Component } from 'react';import SetState from './js/14_setState';import './App.css'; class App extends Component { render(){ return ( React Example ); } }export default App;SetState.jsimport React, { Component } from 'react';import ReactDOM from 'react-dom/client';con.. 공감수 1 댓글수 1 2025. 2. 11.
  • React STEP 20 - Create React App - 2 ⭐ 생명주기 함수 이해하기컴포넌트의 정보를 보여주는 도구를 설치 -> 크롬 브라우저에서 해당 URL 접속https://chrome.google.com/webstore Chrome Web Store브라우저에 새로운 기능을 추가하고 탐색 환경을 맞춤설정합니다.chromewebstore.google.comReact Developer Tool 검색 및 [Chrome에 추가] 버튼을 눌러 확장 프로그램을 설치React 개발상에서의 컴포넌트를 보고 싶을 때, [Components]라는 탭이 앞에서 설치한 확장 프로그램에 의해 개발자 도구에 추가되어 있습니다.실제 태그를 보고 싶을 때는 [Elements] 탭을 쓰면 되지만, React 코드를 분석할 때는 [Components] 탭을 쓰면 컴포넌트들을 볼 수 있습니다.. 공감수 1 댓글수 0 2025. 2. 10.
  • React STEP 19 - Create React App - 1 ⭐ 기본 구조 이해하기 1. src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root=ReactDOM.createRoot(document.getElementById("root")); root.render( ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals.. 공감수 0 댓글수 0 2025. 2. 10.
  • React STEP 18 - React 이벤트 ⭐ React EventJavaScript에서의 이벤트를 React에서도 사용 할 수 있습니다.1. 단계 1class CounterText extends React.Component { render() { let textStyle = { paddingBottom: 20, fontSize: 36, color: "#333" }; return ( {this.props.countProps} ) }}class App2 extends React.Component { constructor(props) { super(props); this.state= { count: 0 } } countPlus() { .. 공감수 1 댓글수 0 2025. 2. 10.
  • React STEP 17 - JSX에서 배열 사용 ⭐ JSX에서의 배열 1. 단계 1class Round extends React.Component { render() { let roundStyle = { display: "inline-block", margin:10, width: 100, height: 100, backgroundColor: this.props.backgroundColor, borderRadius: 50 } return( ) }; }root.render ( ) 2. 단계 2class Round2 extends React.Component { render() { let roundStyle = { display: "inline-bl.. 공감수 0 댓글수 0 2025. 2. 10.
  • React STEP 16 - State - 2 ⭐ Statestate를 활용한, 1초에 하나씩 수가 증가되는 프로그램1. 단계 1구조 생성class AutoCounter extends React.Component { render() { let titleStyle = { margin: 0, padding: 0, fontWeight: "bold", color: "#333" }; return ( ReactExample ) }}class AuthoCounterBox extends React.Component { render() { let boxStyle = { display: "inline-block", padding: 20, backgroundColo.. 공감수 0 댓글수 0 2025. 2. 10.
  • React STEP 15 - State - 1 ⭐ Stateprops를 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용 했다면, state는 하나의 컴포넌트 안에서 전역 변수처럼 사용합니다.1. state 사용하기class State extends React.Component { constructor(props) { super(props); this.state = { stateString : props.program, stateVersion: "18.2.0" }; } render() { return ( {this.state.stateString} {this.state.stateVersion} ) }}class App2 extends React.Compon.. 공감수 1 댓글수 1 2025. 2. 10.
  • React STEP 14 - Props의 사용 - 4 ⭐ Props컴포넌트 속성 전달하기Component1 -> Component2 -> Component3 내용 전달 1. 단계 1class Component3 extends React.Component { render() { return ( {this.props.color} {this.props.name} {this.props.size} ) }}class Component2 extends React.Component { render() { return ( ) }}class Component1 extends React.Component { render() { return ( ) }}ro.. 공감수 0 댓글수 0 2025. 2. 10.
  • React STEP 13 - Props의 사용 - 3 ⭐ Props- props를 사용한 컬러 팔레트 만들기 1. 단계 1컴포넌트를 화면에 배치class ColorPalette extends React.Component { render() { let paletteStyle= { display: "inline-block", marginRight: 10, width: 100, height: 100, backGroundColor: '#fff', boxShadow: "1px 1px 2px rgba(0,0,0,2)" }; return ( ) }}root.render( ) 2. 단계 2ColorPalette 컴포넌트에 ColorChip 컴포넌트 추가class ColorChip .. 공감수 0 댓글수 0 2025. 2. 10.
  • React STEP 12 - Props의 사용 - 2 ⭐ Props 1. props를 객체형으로 사용하기class Props extends React.Component { render() { let {propsValue} = this.props; return ( {JSON.stringify(propsValue)} {propsValue.program} {propsValue.version} ) }}class App2 extends React.Component { render() { let h1Style = { fontWeight: "normal" } return ( React Example ); }}r.. 공감수 0 댓글수 0 2025. 2. 10.
  • React STEP 11 - props의 사용 - 1 ⭐ props부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용합니다.props를 전달받은 자식 컴포넌트에서는 데이터를 수정 할 수 없습니다.데이터를 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어 사용해야 합니다1. props 사용하기.class Props extends React.Component { render() { // console.log(this.props); let propsValue = this.props.propsValue; propsValue+=" from App Component."; return ( {propsValue} ); }}class App2 extends React.Component { render() { .. 공감수 4 댓글수 2 2025. 2. 7.
  • React STEP 10 - EcmaScript6 문법 - 3 ⭐ EcmaScript6 1. forEach() 함수 사용하기배열 함수 forEach()는 for 구문에서 사용하던 순번과 배열의 크기 변수를 사용하지 않습니다.class ForEach extends React.Component { componentDidMount() { let forArray=[3, 2, 8, 8]; let forNewArray=[]; for(let i=0; i { // console.log(result); forEachNewArray.push(result); }); console.log("2. forEachNewArray : ["+forEachNewArray+"]"); } render(){ let h2Style={ .. 공감수 0 댓글수 0 2025. 2. 7.
  • React STEP 9 - EcmaScript6 문법 - 2 ⭐ EcmaScript6 1. 전개 연산자(...) 사용하기전개 연산자는 배열이나 객체를 좀 더 직관적이고 편리하게 합치거나 추출할 수 있게 도와주는 문법입니다.변수 앞에 마침표 3개(...)를 입력해 사용합니다.class SpreadOperator extends React.Component { componentDidMount() { //javaScript Array var varArray1=["num1", "num2"]; var varArray2=["num3", "num4"]; var sumVarArray=[]; sumVarArray=sumVarArray.concat(varArray1, varArray2); console.log("1. sumVarArray : "+su.. 공감수 1 댓글수 1 2025. 2. 7.
  • React STEP 8 - EcmaScript6 문법 - 1 ⭐ EcmaScript표준화된 스크립트 언어, 숫자는 버전을 의미ES6는 많은 기능이 추가 되었고, React에서도 모든 기능을 사용할 수 있습니다.1. 템플릿 문자열 사용하기문자열과 변수를 합치기 위해서는 문자열을 따옴표로 감싸고 +로 연결따옴표가 아닌 백틱(')으로 전체 문자열과 변수를 묶어 사용할 수 있습니다.변수는 ${변수명} 형태로 넣고 코드상에서 줄바꿈을 하면 개행 문자 없이도 사용할 수 있습니다.class ES6 extends React.Component { componentDidMount() { var jsString1 = "JavaScript"; var jsString2 = "입니다. \n 다음줄 입니다."; console.log(jsString1+" 프로그래밍"+jsS.. 공감수 1 댓글수 1 2025. 2. 7.
  • React STEP 7 - 생명주기 함수 ⭐ 생명주기 함수React 에서 생명주기란, 컴포넌트의 생성, 변경, 소멸 과정을 뜻합니다.1. 생명주기 함수 사용하기render() 사용하기- render() 함수는 return 되는 HTML 형식의 코드를 화면에 그려주는 함수, 화면 내용이 변경되어야 할 시점에 자동 호출class LifeCycle extends React.Component { render() { let h2Style= { fontSize: 16, fontWeight: "normal" }; console.log("3, render()"); return ( This is Render Function ) }}class App2 extends React.Component { ren.. 공감수 0 댓글수 0 2025. 2. 6.
  • React STEP 6 - 컴포넌트 이해 ⭐ 컴포넌트컴포넌트란, 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위컴포넌트를 파일 단위로 작성한 후, 필요한 위치에서 로드해서 사용할 수도 있습니다.1. 컴포넌트 조합하기단계 1class Component2 extends React.Component { render() { return ( This is imported Component. ); }}class Component1 extends React.Component { render() { return ( React Example ); }}root.render ( )단계2class Component2 extends React... 공감수 0 댓글수 0 2025. 2. 6.
  • React STEP 5 - 컴포넌트 스타일 2 ⭐ 컴포넌트컴포넌트는 화면을 구성하는 구성 요소를 의미합니다.1. 컴포넌트는 개별적인 속성을 정의할 수 있다.ReactDOM에서 호출된 컴포넌트에서 전달한 속성은 {this.props.propsValue} 방식으로 전달 받습니다.  props는 속성인 Properties의 약어입니다.this는 HelloReact 컴포넌트를 의미합니다. 이를 바인딩(binding)이라 합니다.전달받은 속성은 중괄호를 사용해서 렌더링하며, 이런 방식을 JSX의 표현식이라 합니다.class StudyReact extends React.Component { render() { return ( Study React {this.props.type} ) }}root.rende.. 공감수 1 댓글수 0 2025. 2. 6.
  • React STEP 4 - 컴포넌트 스타일 1 ⭐ 컴포넌트컴포넌트는 화면을 구성하는 구성 요소를 의미 //HTML //JS(Babel) const root=ReactDOM.createRoot(document.getElementById("root")); root.render( Hello React )클래스를 생성하는 구문- extends 키워드를 사용해서 React.Component를 상속 받는다.- 제작된 클래스는 React.Component의 기능을 모두 사용할 수 있습니다. - render() 함수는 return() 함수로 처리된 HTML이나 JSX를 그리는 명령어입니다. - render() 함수는 React, ReactDOM에서 모두 사용할 수 있습니다. - ReactDOM에서 사용하는 render() 함수는 실제 HTML에 그려집니다. .. 공감수 0 댓글수 0 2025. 2. 6.
  • React STEP 3 - 기본 메서드 ⭐ React의 기본 사용 메서드 1. React.createElement()태그 구성 요소를 생성하는 메서드 React.createElement( type, [props], [ ... children] ); type : 태그 이름 문자열, React 컴포넌트[props] : React 컴포넌트에 넣어주는 데이터 객체[ ... children] : 자식으로 넣어주는 요소들사용 예시root.render( React.createElement( "h1", null, "Hello React!!" ));실제 렌더링 결과 Hello React 공감수 0 댓글수 0 2025. 2. 6.
  • React STEP 2 - 프로젝트 구조 분석 ⭐ 프로젝트 구조프로젝트의 진입점인 src/index.js 를 살펴보면, import 구문✅ React와 ReactDOM 가져오기✅ CSS 파일(index.css) 가져오기✅ 메인 컴포넌트인 App 가져오기✅ 웹 성능 측정을 위한 reportWebVitals 가져오기 const root = ReactDOM.createRoot(document.getElementById('root')); ✅ ReactDOM.createRoot()를 사용해 React 18+ 방식의 root 생성✅ document.getElementById('root')는 public/index.html에 있는 root.render(  React.StrictMode>    App />  React.StrictMode>)✅ document.g.. 공감수 0 댓글수 0 2025. 2. 6.
  • React STEP 1 - 환경 구성 및 실행 ⭐ Reac JS 란사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구특징-> 빠른 업데이트와 렌더링-> Component로 이루어짐⭐ React 환경 구성1. Node.js 설치https://nodejs.org/ Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.orgNode.js 다운로드(LTS) 설치Node.js Setup 설치 진행 -> 따로 설정 할 것 없이 [Next]를 계속 누르고 [Install]cmd창 -> 설치 확인2. VS Code 설치https://code.visualst.. 공감수 2 댓글수 1 2025. 2. 6.
  • Vue.js 3.0 STEP 7 - TodoList 리팩토링 ★ 컴포넌트 분할과 정의 재사용성, 테스트 용이성, 디버깅 편의성 등을 고려해 컴포넌트를 분할하는 것을 권장하고 있다. 한 번에 변경되는 데이터를 렌더링하는 UI 단위로 컴포넌트를 분할하는 편이 좋다. 데이터가 변경되는 단위로 컴포넌트를 세분화하면 해당 컴포넌트만 다시 렌더링하고 나머지 컴포넌트는 다시 렌더링 하지 않게 되어 보다 좋은 렌더링 성능을 제공할 수 있게 된다. 특히 반복 렌더링하는 부분은 반드시 별도의 컴포넌트로 작성하는것이 좋다. ■ 관리해야 할 데이터 todo는 InputTodo 컴포넌트의 로컬 데이터로 정의한다. 왜냐하면, 데이터가 관리할 만큼 중요하지 않으므로 데이터의 생명주기 관리가 필요하지 않기 때문이다. { todoList : [ { id : 1, todo : "자전거 타기", .. 공감수 0 댓글수 0 2024. 1. 25.
  • Vue.js 3.0 STEP 6 - 단일 파일 컴포넌트 ★ 단일 파일 컴포넌트 단일 파일 컴포넌트는 컴포넌트 하나를 .vue 파일 하나에 작성하기 때문에 붙여진 이름 한 파일에 컴포넌트 구성을 위해 템플릿, 스크립트, 스타일 정보를 모두 포함하기 때문에 컴포넌트 단위로 분리 가능 Vue 애플리케이션을 개발하기 위해서는 Webpack, Rollup 과 같은 모듈 번들러 도구와 ES6, TypeScript와 같은 트랜스파일러를 함께 사용하도록 개발 프로젝트 환경을 설정해야 한다. 1. 프로젝트 설정 도구 1.1 Vue CLI 도구 Webpack 기반의 Vue 공식 프로젝트 설정 도구였다. 하지만, 이 방법은 프로젝트를 생성하고 구동하기까지 다소 긴 시간이 소요가 된다. 또한, 번들링 과정을 거쳐야하기 때문에 작성한 코드를 테스트하기에 조금 긴 시간을 기다려야 한.. 공감수 1 댓글수 2 2024. 1. 25.
  • Vue.js 3.0 STEP 5 - TodoList ★ TodoList 할일을 적고 해당 사항들을 수행해 나가는 List Step1 ~ Step4에 대한 내용을 가지고 해당 기능을 개발 1. 기본 UI 개발 큰 틀 잡기 :: Todolist App 본문 내용 삽입 추가 할일 1 (완료) 삭제 할일2 삭제 할일3 삭제 2. 데이터와 메서드 정의 [ 데이터 ] todo 텍스트 박스에 사용자가 입력하는 내용을 받아내기 위한 data 입니다. todolist 추가한 todo 들의 목록, todo 한 건은 다음과 같습니다. id todo 한 건의 고유 키, 이 예제에서는 timestamp를 이용합니다. todo todo 내용 completed 완료 여부(true, false) [ 메서드 ] addTodo 텍스트 박스에 사용자가 입력하는 내용을 받아내기 위한 dat.. 공감수 0 댓글수 0 2024. 1. 25.
  • Vue.js 3.0 STEP 4 - 스타일 적용 1. HTML의 스타일 적용 HTML 요소의 스타일 적용은 모두 문자열이며, 케밥 표기법을 주로 이용한다. font-size와 같은 형태 이와 같은 표기법을 사용하는 이유는 HTML에서는 대소문자를 구별하지 않기 때문이다. 케밥 표기법은 HTML, 스타일 특성 등에서 주로 사용한다. 버튼 1 버튼 2 이렇게 클래스를 적용하는 모든 HTML 요소에 동일한 스타일이 적용된다. 하지만, 적용되는 순서는 꼭 알아둬야 한다. 이렇게 살펴보면, style 특성에 직접 지정하는 인라인 스타일 방식이 마지막으로 적용된다. 요소의 기본 스타일 -> .test 스타일 -> .over 스타일 -> 인라인 스타일 2. 인라인 스타일 인라인 스타일은 v-bind:style로 작성한다. style로 지정할 정보는 데이터 속성에 .. 공감수 0 댓글수 0 2024. 1. 25.
  • Vue.js 3.0 STEP 3 - 이벤트 처리 ★ 이벤트 처리 동적 UI는 HTML 요소에서 발생하는 이벤트 처리를 통해 구현되는 경우가 많다. Vue의 이벤트는 HTML, 자바스크립트에서 사용하는 이벤트를 준용해서 사용하기 때문이다. 1. 인라인 이벤트 처리 Vue에서의 이벤트 처리는 아래와 같이 주로 사용한다. v-on:[이벤트 이름]="표현식" 가장 많이 쓰이는 click 이벤트 예 v-on 디렉티브는 @로 줄여 쓸 수도 있다. v-onclick="test($event)" @click="test($event)" 금액 : 입금 출금 계좌 잔고 : {{ balance }} 2. 이벤트 핸들러 메서드 Vue 인스턴스에 등록한 메서드를 이벤트 처리 함수로 연결 이와 같이 복잡한 기능은 메서드를 미리 작성해두고, v-on 디렉티브로 참조해서 이벤트를 수.. 공감수 0 댓글수 0 2024. 1. 18.
  • Vue.js 3.0 STEP 2 - Vue 인스턴스 ★ Vue 인스턴스 개요 const vm = Vue.createApp과 같이 메서드로 만든 객체들을 자주 사용한다. 이처럼 Vue.creatApp 메서드를 호출하여, 만들어진 객체를 애플리케이션 인스턴스라고 부른다. 여기서 사용된, name, data 옵션이 바로, 옵션 객체 이다. var vm = Vue.createApp({ name : "App", data() { return { name : "" }; } }).mount('#app') 1. data 옵션 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용한다. 관리와 추적의 의미는 변경을 탐지하고 추적하여, 화면을 갱신하겠다는 의미. 컴포넌트 인스턴스에서 $로 시작하는 이름은 인스턴스 내부에서 특수한 용도로 사용된다는 의미. 따라서 $,_로 시.. 공감수 0 댓글수 0 2024. 1. 18.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.