본문 바로가기
반응형

전체 글

 (134)
React 시작하기 - 05 - 컴포넌트 안에서 state와 생명 주기 활용하기 리액트 컴포넌트에는 state라는 개념이 있다. 컴포넌트 안에서는 state 값을 공유한다. 또 특정한 생명 주기에 어떤 작업을 수행하도록 만들 수 있다. 예를 들어 리액트 엘리먼트를 생성하고 DOM에 마운트 하기 전에 어떤 함수를 실행하는 것이다. state라는 개념과 생명주기 개념을 활용하여 시간을 출력하는 간단한 기능을 구현해보자. - 220525 참고 자료 - https://ko.reactjs.org/docs/state-and-lifecycle.html
React 시작하기 - 04 - 클래스 컴포넌트, 함수 컴포넌트, props 주고받기 React에서는 컴포넌트라는 개념이 있다. 어떤 요소를 미리 만들어두고 여러 번 꺼내서 재사용할 수 있다. 만드는 방법은 클래스로 만드는 방법과 함수로 만드는 방법이 있다. props라는 속성값을 이용하여 컴포넌트 안에서 쓰는 특정 값을 편하게 관리할 수 있다. -------------------root1-------------------------------- -------------------root2-------------------------------- -------------------root3-------------------------------- -------------------root4-------------------------------- -------------------root..
React 시작하기 - 03 - 리액트에서 엘리먼트 다루기와 루트 돔 변화 리액트 엘리먼트는 React 앱을 이루고 있는 가장 작은 단위다. React DOM 은 따로 관리하는데, 기존 DOM 과 비교하여 필요한 부분만 최소한으로 변경할 수 있도록 해준다. 변경해야 하는 부분이 적어질수록 성능은 향상될 것이다. - 220524 참고자료 - https://ko.reactjs.org/docs/rendering-elements.html
React 시작하기 - 02 - jsx 개념과 리액트 엘리먼트 리액트를 사용할 때 jsx를 꼭 써야만 하는 것은 아니다. React.createElement() 같은 함수로 대체할 수도 있다. 하지만 이는 매우 복잡하고 번거로운 작업이 된다. 대신 jsx 를 쓰면 훨씬 간편해진다. 그래서 보통 React와 jsx는 실과 바늘처럼 함께 쓴다. jsx 개념은 무엇이고 React 엘리먼트와 어떤 관계일까. - 220523 참고자료 - https://ko.reactjs.org/docs/introducing-jsx.html
React 시작하기 - 01 - 가장 간단한 형태의 리액트 요소 뭐든지 걷어내고 걷어내서 뼈대만 남겼을 때 핵심이 보인다. 리액트 문법을 처음 익힐 때도 최대한 간단한 형태로 먼저 띄어 보자. -220523 참고 자료 - https://ko.reactjs.org/docs/hello-world.html
개발자가 동사 중심으로 생각해야 할 때 설계할 때 일단 중심이 되는 기능은 '동사'다. 동작, 행동 등이다. 예를 들어 언어를 생각해 보면 쉽다. 문장에서 핵심 요소는 동사다. 형용사, 부사 등은 없어도 된다. 동사만 있으면 손짓, 발짓으로 의사소통이 된다. 거기에 하나를 더 꼽는다면 주어이다. 주어와 동사는 가장 기본적인 문장 구조다. 이어서 목적어다. 대부분의 의사소통은 주어 동사 목적어, 이 세 가지로 충분하다. 프로그램을 설계할 때도 마찬가지다. 동사를 중심으로 생각해야 한다. 받아오는 건지, 보여주는 건지, 지우는 건지, 수정하는 건지, 그러고 나서 무엇을 받아올지, 무엇을 보여줄지, 무엇을 수정할지, 대상을 잡는다. 화면을 보거나 기능을 설계할 때 급한 마음에 무턱대고 키보드에 손을 올리고 타자부터 치기 시작한다면 오히려 먼 길을 ..
JavaScript - html 요소 중 특정 class 가 포함돼 있는지 확인하는 함수 $(document).on('click', 'a.btnType', function(){}); document.addEventListener('click', (e) => { console.log("DOMLoaded click event"); console.log(e); if (e.target.parentNode.tagName == 'a' && e.target.parentNode.classList.contains('btnType')) { e.preventDefault(); } }); html 요소가 특정 class 를 포함하는지 확인하는 방법 어떤 html 요소의 class가 특정 class를 포함하고 있는지 확인하는 방법이 있다. ele.classList 에 접근하면 가지고 있는 class 이름들을 lis..
Vue.js - 에러도 없이 렌더링도 되지 않을 때 콘솔 창에 어떤 에러도 뜨지 않으면서 렌더링도 되지 않을 때 {{ item.return_cnt }} {{ item.pur_cnt }} {{ item.pur_id }} {{ item.sales_type }} {{ item.model_nm }} {{ item.mfcomp }} {{ item.price }} {{ item.total }} const tbodyOrderDetail = new Vue({ el: 'tbody#orderDetailMain', data: { orderDetailList: [{}] }, methods: { } }) tbodyOrderDetail.orderDetailList = [{pur_id: 132, purinf_id: 154, sales_type: 'ups', model_nm: 'SM..
반응형

티스토리툴바