리액트 - 중첩된 객체 state 변경하기 일반 state는 setState를 통해 가볍게 state 수정이 가능하지만, 아래와 같이 중첩된 state의 경우엔 setState만으로 값이 변경되지 않습니다. this.state = { tempList: { List1: [], List2: [], List3: [] } }; state의 List1, List2, List3 ... 같이 중첩된 객체의 state를 변경하려면, 단순 setState만으로는 한계가 있습니다. 이는 setState의 비동기성으로 인해 발생하는 상황인데, setState와 함께 업데이트 함수를 이용하여 state 값을 변경시킬 수 있습니다. const newList = [1, 2, 3] this.setState(prevState => ..

1. Java Optional.ofNullable() Optional member = Optional.ofNullable(aMember); Optional noMember = Optional.ofNullable(null); 자바는 NullPointerException (NPE) 에러를 유발하기 쉽다. 그런 상황을 모면하기 위해 if분기문으로 사전에 예방할 수 있지만, Optional.ofNullable() 메소드를 사용하여 null pointer exception을 방지할 수 있다. 위의 코드에서는 aMember가 null이 될 수 있는 변수가 된다. 2. Java ArrayList vs Array ArrayList language = new ArrayList (); // new ArrayList() 도..

HTML

리액트는 state가 변화할 때마다 매번 render가 작동됩니다. setState함수는 state의 상태를 변화시키기 때문에 component를 re-render하게 되는데, 종종 setState를 했음에도 값이 변하지 않는 상황을 마주하곤 합니다. 문제 setState를 사용하면 state의 상태변화가 한템포씩 늦는 경우를 종종 보게된다. 먼저 흔히 겪는 setState의 문제점을 코드로 보겠습니다. this.state.value = 1; this.setState({ value: this.state.value + 1 }); // +1 this.setState({ value: this.state.value + 1 }); // +1 this.setState({ value: this.state.value ..

1. React에서, eventHandler에서 다루지 않는 함수에는 bind를 붙일 필요가 없습니다. 예를 들어 onClick 시 동작해야하는 함수에는 bind를 항상 붙여야 하지만, 그렇지 않은 경우(eventHandler를 사용하지 않을 때)에는 굳이 bind를 붙일 필요가 없습니다. 이렇게 toggleList 함수가 onClick에 의해 작동할 땐 bind로 묶어줘야 합니다. aa 2. setState 함수 내부도 엄연히 하나의 scope입니다! this.setState({currBtn: btn}, () => { this.props.functionA(currBtn) }) setState함수 내부의 첫번째 currBtn에는 this.state를 붙일 필요가 없습니다. 하지만 props인 functi..

1. react.js 에서 state.array의 상태를 변경해야할 때 리액트에서 originList라는 기존 배열에 새로운 원소를 push해야 하는 상황일 때, 아래 코드처럼 setState를 하면서 push를 하면 작동하지 않습니다. this.setState({originList: originList.push(element)}); 이럴 땐 tempList라는 임시 배열을 복사하여 element를 push한 후에, setState를 통해 originList의 상태를 변경시켜야합니다. let tempList = Object.assign([], originList); tempList.push(element); this.setState({originList: tempList}); Object.assign메서..

윈도우 기준 1. 이클립스 파일 우클릭 후 속성 클릭 2. 아래 사진처럼 대상 인풋 값의 eclipse.exe 뒤에 -nl en_US 붙여넣기 3. 이클립스가 실행중이었다면 종료 후 재실행 => 영어 패치 완료

postman이나, elasticsearch head에서 아래와 같은 중첩 쿼리를 사용하면 곧바로 원하는 결과를 얻을 수(조회) 있습니다. Java-spring framework에서 중첩 쿼리의 데이터 조회는 QueryBuilder 클래스의 nestedQuery메서드를 통해 가능합니다. Spring 에서 중첩쿼리를 이용한 데이터 조회 방법을 바로 알아보겠습니다. license라는 중첩 필드 중 test_type이 '정보처리기사'인 데이터를 조회할 수 있는 자바코드를 생성하겠습니다. 자바 코드입니다. propertyValues 객체에, license.test_type 을 key 값으로, 찾고자 하는 값인 '정보처리기사'를 value 값으로 넣었습니다. 이것이 하나의 조회 조건이 됩니다. 즉, nestedQ..

본 포스팅은 우아한 형제들, 김영한 님의 '모든 개발자를 위한 HTTP 웹 기본 지식' 강의를 수강 후 정리한 글입니다. 1. 캐시 기본 동작 -> 아래와 같이 star 이미지를 요청하면 1.1Mbyte 용량의 데이터가 전송된다 (헤더 + 이미지 용량). -> 캐시가 없을 때, 두번째 요청을 한다면 똑같이 1.1Mbyte 용량의 데이터가 전송된다 (같은 요청이니, 같은 용량 전송) 2. 캐시가 없을 때, -> 서버측의 데이터가 변경되지 않아도 계속 네트워크를 통해 데이터를 다운받아야 한다. -> 느리고 비싸며, 브라우저 로딩 속도가 느리다 = 느린 사용자 경험 (slow ux) 3. 캐시 적용할 때, -> 1.1Mbyte의 데이터를 캐시 저장소에 저장한다. -> 두번째 요청에서 웹 브라우저는 네트워크를 ..