본문 바로가기

전체 글

(134)

[JavaScript] 숫자만 입력 가능한 정규식 조건 만들기 - 만들고 싶은 기능 - > text 타입의 input 컴포넌트에 숫자만 입력하도록 하기 - 방법 구상하기 - > input 컴포넌트의 value 에 넣어주는 값을 다른 변수 val와 바인딩해 둔다. > input 컴포넌트에 onChange 이벤트를 걸어둔다. > onChange 이벤트 리스너에 조건문 처리를 해준다. 입력한 값이 숫자일 때는 value 와 바인딩해 두었던 변수 val 의 값을 수정하고, 숫자가 아닐 때에는 a 의 값을 수정하지 않고 그대로 둔다. - 구현하기 -

row 번호 자동으로 뽑아주는 함수 만들기 | 번호 | 제목 | 내용 | --------------------------- 1 key1 data1 2 key2 data2 3 key3 data3 4 key4 data4 5 key5 data5 6 key6 data6 7 key7 data7 8 key8 data8 9 key9 data9 10 key10 data10 11 key11 data11 12 key12 data12 ...... .... .. - 만들고 싶은 기능 - 만약 위와 같은 테이블을 만들어야 한다고 생각해 보자. 제목과 내용에 들어가는 값들은 어쨌든 key 값들이니 일일이 넣어줘야 할 것이다. 이 부분은 어쩔 수 없으니 넘어가자. 하지만 번호까지 1,2,3,4... 일일이 쓰는 건 너무 프로그래머로서 귀찮다. 또 항목 순서가 바뀌거나, 항..

datagrid 에 rowData 만들어서 넣어주기 - 고정 출력 행 있을 때 fruitName | color | store | price | ------------------------------------------------- apple | red | A | 800 | melon | green | B | 2500 | orange | | | | mango | yellow | C | 1200 | grape | | | | - 만들고 싶은 기능 - 위처럼 과일 목록 테이블을 만들어야 한다. 단, 과일 이름(fruitName 칼럼)은 항상 나온다. 모든 과일 이름들은 고정으로 출력되고, 나머지 값들은 있을 때만 나온다. - 문제 - 언뜻 생각하기에 간단할 것 같지만 생각보다 문제가 복잡하다. 일단 서버로부터 과일 정보 목록을 받아와야 한다. 그런데 DB에서는 데이터가 있는 과일만 se..

[React] 렌더링 기본 개념 정리 - 렌더링/렌더/커밋/가상DOM - 렌더링이란? - 리액트가 컴포넌트에게 UI 영역이 어떻게 보이기를 원하는지 props 와 state 를 바탕으로 요청하는 프로세스 - 렌더링 프로세스 개요 - 리액트는 컴포넌트 트리의 루트 컴포넌트부터 시작해서 아래로 순회하면서 업데이트가 필요한 모든 컴포넌트를 찾는다 컴포넌트에 플래그를 지정해 두고 렌더 함수를 호출하여 렌더 출력을 저장한다. 컴포넌트 트리 전체에서 렌더 출력을 수집한 후에 리액트는 새로운 객체 트리(가상 DOM)와 실제 DOM 을 비교하며 UI가 원하는 대로 보이도록 변경 사항을 수집한다. 참고1) 렌더 출력은 보통 JSX 문법으로 작성된다. 자바스크립트가 컴파일 될 때는 React.createElement() 함수로 변환된다. JSX를 이용해서 사람이 보기 편하도록 HTML 태그..

[React] store 에 있는 객체를 view 에 바인딩하여 출력할 때 주의할 점 - setProps @action setMyDetailProps(key, value) { this._myDetail[key] = value; } vs @action setMyDetailProps(key, value) { this._myDetail = {...this._myDetail, [key]: value}; } - React 에서 객체의 속성 값들을 화면에 바인딩하여 출력할 때 주의점 - 상세 정보를 조회하는 페이지에서는 값을 잘 맵핑하는 것이 중요하다. 화면에 출력되는 값들이 각자 따로 관리되는 게 아니기 때문이다. 상세 정보 객체가 하나 있고 그 객체 안에 있는 여러 속성들이 화면에 바인딩되어 출력되는 구조이다. 출력하는 값들을 묶어 놓은 상세 정보 객체는 보통 store 에서 들고 있는다 view 에서는 그 sto..

[React.js] 클래스형 setState 안 될 때 - 덮어쓰기 되는 경우 state = { isOpenModal: true, fruitList: [], }; onClickButton(e, ele) { let newFruitList = []; // 빨간색 과일 if(ele.name === "red") { newFruitList = [{ fruitName: "apple", fruitColor: "red", fruitPrice: "12000", },{ fruitName: "strawberry", fruitColor: "red", fruitPrice: "18000", }]; } else { // 노락색 과일 newFruitList = [{ fruitName: "banana", fruitColor: "yellow", fruitPrice: "7000", },{ fruitName: "ma..

[JavaScript] 문자열을 그대로 html 태그로 DOM에 추가하고 싶을 때 - 사용 기술 - React(class형) / mobx - 기능 설명 - 버튼이 있다. 이 버튼을 누르면 모달이 하나 뜬다. 모달은 왼쪽과 오른쪽으로 나뉘어 있다. 왼쪽은 목록이고 오른쪽은 미리보기다. 왼쪽에는 미리 작성해둔 양식들의 제목이 목록으로 뜬다. 목록에 있는 제목 위에 마우스를 가져다 대면 모달 오른쪽으로 해당 양식의 미리보기가 뜬다. - 문제 - 서버로부터 받아오는 값은 html 문자열이다. 예를 들어 이런 식이다. const contents = "안녕하세요"; 이 내용을 모달 오른쪽으로 출력해야 한다. 그런데 문자열을 그대로 출력하는 게 아니라 html 태그로 생성해서 화면에 띄워야 하는데 그게 안 됐다. 1) textarea 가장 먼저 시도한 방법은 textarea 에다가 value로 넣..

[JavaScript] 값이 null 일 경우 parameter 에 key 조차 존재하면 안 될 때 - 사용 기술 - React(class형) / mobx - 상황 - 자동차를 만들고 있다. 중간중간 점검을 실시한다. 점검은 총 5번 있다. 점검 일정이 잡히면 DB에 넣어둔다. 자동자A 의 점검 일정을 복사하여 자동차B 점검 일정에 입력하는 기능이 있다. carB.checkDate1 = carA.checkDate1 || ""; carB.checkDate2 = carA.checkDate2 || ""; carB.checkDate3 = carA.checkDate3 || ""; carB.checkDate4 = carA.checkDate4 || ""; carB.checkDate5 = carA.checkDate5 || ""; - 문제 - 점검은 날짜가 정해진 일정도 있고 아직 정해지지 않은 일정도 있다. 이때 날..

이전 1 2 3 4 5 ··· 17 다음

티스토리툴바