전체 글 (134) 썸네일형 리스트형 [React] onChange 값이 한 박자씩 늦게 들어갈 때 / observable 변수 렌더링 뒤늦게 반영될 때 - 사용 기술 - React(class형) / mobx - 상황 설명 - Select1 | Select2 | Input type1 | type2 | title 폼이 있다. 폼 안에는 요소가 총 세 개 있다. select 두 개와 input 하나가 있다. 이 모든 요소들은 값이 store 에 있는 data와 바인딩되어 있다. select1 은 data.type1 과, select2 는 data.type2 와 바인딩해 놓았다. input 은 data.title 과 바인딩해 두었다. select 에는 각각 이벤트가 걸려 있다. 값이 바뀌면 onChange 이벤트가 발생한다. 받아주는 함수 내용은 두 가지다. 첫째로 store 가 들고 있는 data 에 값을 넣어준다. key-value 쌍으로 넣어주는데 dat.. [JavaScript] concat() 함수 사용법 / 변이 (mutation) 함수 - 사용 기술 - React(class형) / mobx - 배경 설명 - select 요소가 있다. select 를 클릭하면 option 목록이 뜬다. option 목록 중 하나를 클릭하면 select 값이 바뀐다. option 목록은 정해져 있지 않다. 서버에서 요청해서 db로부터 뽑아온다. 그 db 값들을 가지고 option 목록을 만든다. option list 에서도 고정된 값이 있기는 하다. 가장 첫 번째 값은 '전체'다. 조회하는 조건을 select 하는 건데, 조회 조건에 '전체'도 있다. 따라서 option list 를 아래와 같은 순서로 만들었다. 우선 빈 배열을 하나 만든다. 그 배열 안에 '전체' 요소부터 먼저 넣는다. 그 다음에 서버로부터 받은 리스트를 합친다. 합칠 때는 concat.. [JavaScript] 배열에서 중복되는 요소 제거하여 합치기 - 조건 설명 - 두 배열이 있다. 그 안에 있는 요소들은 서로 겹치는 요소도 있고 아닌 요소도 있다. 동시에 두 배열은 null 이거나 비어 있을 수도 있고 아닐 수도 있다. 이 두 배열에 들어 있는 모든 요소들을 합해서 하나의 배열로 통합하려고 한다. 단, 모든 요소는 한 번만 들어가야 한다. 중복되는 요소가 있어서는 안 된다. 즉, 두 배열을 통합해서 새로운 배열을 만들고 싶다. - 구상 - 처음에는 좀 어렵게 생각했다. 일단 두 배열을 합친다. 합친 배열 안에 있는 모든 요소들로부터 id 나 seq 처럼 unique 한 값만 추출해서 새로운 배열을 만든다. 이렇게 만든 id list 안에서 중복을 제거한다. 그러면 모든 요소들의 id 가 한 번씩만 들어가 있는 목록이 만들어진다. .. [React] + dataGrid 트리 구조 테이블에서 합계 구하는 법 (feat. 재귀 함수) | 1월 | 2월 | 3월 | 4월 | 5월 | ... --------------------------------------------------------------------- 총 비용 | | | | | | --------------------------------------------------------------------- 재료비 | | | | | | --------------------------------------------------------------------- 시멘트 | | | | | | --------------------------------------------------------------------- 철근 | | | | | | -----------------------.. [React] 주요 LifeCycle 함수들 호출 시점 / 활용 방법 / 주의할 점 정리 리액트에서 LifeCycle 개념은 중요하다. state와 props를 알맞게 관리하고 렌더링을 의도한 대로 다루려면 LifeCycle 개념을 정확히 이해해야 하기 때문이다. 이참에 주요한 몇 가지 LifeCycle 함수들을 살펴보자. - constructor - constructor(props) { super(props); this.state = { date: new Date() }; this.handleClick = this.handleClick.bind(this); } / 호출 시점 > 생성자 constructor 는 컴포넌트가 마운트되기 전에 호출된다. / 활용 목적 > constructor 에서는 주로 state를 초기화하거나 이벤트 핸들러 메소드들을 바인딩한다. / 주의할 점 > 다른 구문보다.. [React] componentDidUpdate 사용 시점과 무한 루프 렌더링 주의 - 구현 기능 설명 - --------------------------------------------------------------- 버튼 | 번호 | 제목 | 작성자| 조회수| 작성일 | ..... --------------------------------------------------------------- o | 1 | | | | | | | --------------------------------------------------------------- o | 2 | | | | | | | --------------------------------------------------------------- o | 3 | | | | | | | --------------------------------.. [JavaScript]두 배열 요소 합쳐서 return 하기 / concat 함수 null 체크 - Cannot read properties of undefined 에러가 나는 경우 - 배열 a와 b가 있다. getTotalMember(a, b) { // do somethig } 배열 a와 배열 b는 둘 다 null일지 아닐지 모른다. 근데 두 배열이 가지는 요소들을 합쳐서 return 해줘야 하는 상황이다. 당장 떠오르는 방법은 배열 a나 b에 concat() 함수를 붙여주는 방법이다. a.concat(b); b.concat(a); 그런데 이렇게 하면 null 에러가 뜰지도 모른다. > Uncaught TypeError: Cannot read properties of undefined (reading 'concat') 왜냐하면 배열 a와 배열 b는 양쪽 모두 null로 넘어올 수 있는 상황이기 때.. JavaScript ES6 문법 get/set 키워드 무한 루프 해결법 getter/setter 함수 사용법 - JavaScript 안에서 getter/setter 함수 - let user = { name: "Tom", lastName: "Holland", get fullName() { return `${this.name} {this.lastName}`; }, set name(data) { this.name = data; } } 위와 같은 user 객체가 있다. user 객체가 가지는 name 속성값을 'Hello'로 바꾸고 싶으면 어떻게 해야 할까? 간단하게 생각하자면 아래와 같은 명령어를 떠올릴 것이다. user.name = 'Hello'; 그러나 이 객체에 위와 같은 명령어를 실행하면 에러가 난다. > Uncaught RangeError: Maximum call stack size exceeded 명령어를.. 이전 1 2 3 4 5 6 ··· 17 다음