[JavaScript] localStorage와 sessionStorage 차이점
2022. 11. 23. 20:20
프로그래밍/JavaScript
localStorage 사용자 세션 데이터 유지 브라우저 닫았다가 다시 열었을 때도 지속 탭을 여러개 열어도 공유됨 명시적 삭제가 있을때까지 지속 변경 사항은 저장되어 현재 및 향후 사이트 방문 시 사용할 수 있음 * 정리 : 사용자가 브라우저 창을 닫았을 때 데이터는 삭제되지 않으며, 일, 주, 월 및 연도에 사용할 수있는 만료 날짜없이 사용자 정보 데이터를 저장한다. //Set the value in a local storage object localStorage.setItem('sample', 'valueText'); //Set the value in a local storage object localStorage.getItem('sample'); //Delete the value from loca..
[JavaScript] 자바스크립트 스크롤 위치 저장
2022. 11. 22. 20:07
프로그래밍/JavaScript
페이지 이동 시 스크롤 위치를 저장하고 싶은 경우 스크롤Y의 위치를 sessionStorage에 저장해 놓고 다시 페이지에 들어올 때 저장해 놓은 값을 가져와서 위치를 설정해주기 /** * 스크롤이 움직일때마다 값을 sessionStorage에 넣어줌 */ let scrollHeight = 0; addEventListener('scroll', (event) => { scrollHeight = $(document).scrollTop(); sessionStorage.setItem("scrollY", scrollHeight); }); /** * 스크롤 위치 지정 */ $(document).ready(function() { const scrollY = parseInt(sessionStorage.getItem("..
[JavaScript] 자바스크립트 뒤로가기 시 이벤트
2022. 11. 21. 20:29
프로그래밍/JavaScript
뒤로가기로 페이지를 이동했는지 체크할 수 있는 자바스크립트 코드 if(window.performance && performance.getEntriesByType("navigation")[0].type === 'back_forward') window.performance.navigation.type, window.PerformanceNavigation.type 은 deprecated 되어 사용을 추천하지 않음 그 외에 페이지 이동, 새로고침 시 코드를 따로 적용할 일이 있다면 아래와 같이 비교할 수 있음 performance.getEntriesByType("navigation")[0].type === 'navigate'// 페이지 이동시 performance.getEntriesByType("navigati..
[React] State 끌어올리기 - 리액트 자습서6
2022. 11. 18. 20:52
프로그래밍/React
게임 완성하기 이제 틱택토 게임을 위한 기본 구성 요소를 가지고 있음 완전한 게임을 위해 게임판의 “X”와 “O”를 번갈아 표시할 필요가 있으며 승자를 결정하는 방법이 필요 State 끌어올리기 현재 게임의 state를 각각의 Square 컴포넌트에서 유지하고 있음 승자를 확인하기 위해 9개 사각형의 값을 한 곳에 유지할 것임 Board가 각 Square에 Square의 state를 요청해야 한다고 생각할 수도 있음 그리고 React에서 이런 접근이 가능하기는 하지만 이 방식은 코드를 이해하기 어렵게 만들고 버그에 취약하며 리팩토링이 어렵기 때문에 추천하지 않음 각 Square가 아닌 부모 Board 컴포넌트에 게임의 상태를 저장하는 것이 가장 좋은 방법임 각 Square에 숫자를 넘겨주었을 때와 같이 ..
[React] props와 state 확인하기 - 리액트 자습서5
2022. 11. 17. 20:03
프로그래밍/React
개발자 도구 Chrome과 Firefox의 React Devtools 확장 프로그램을 사용하면 브라우저 개발자 도구에서 React 컴포넌트 트리를 검사할 수 있음 React DevTools를 통해 React 컴포넌트의 props와 state도 확인할 수 있음 React DevTools를 설치한 후에 페이지의 모든 엘리먼트에 오른쪽 클릭을 하고 “요소 검사”를 클릭하여 개발자 도구를 열면 탭의 오른쪽 끝에 React 탭(“⚛️ Components”와 “⚛️ Profiler”)을 확인하실 수 있음 컴포넌트 트리를 검사하고 싶다면 “⚛️ Components”를 사용하기 참고 자료 : https://ko.reactjs.org/tutorial/tutorial.html#overview 자습서: React 시작하기 ..
[React] 사용자와 상호작용하는 컴포넌트 만들기 - 리액트 자습서4
2022. 11. 16. 20:54
프로그래밍/React
사용자와 상호작용하는 컴포넌트 만들기 Square 컴포넌트를 클릭하면 “X”가 체크되도록 만들어보자 먼저 Square 컴포넌트의 render() 함수에서 반환하는 버튼 태그를 아래와 같이 변경하기 class Square extends React.Component { render() { return ( {this.props.value} ); } } Square를 클릭하면 ‘click’이 브라우저 개발자 도구의 콘솔에 출력되는 걸 확인할 수 있음 주의 타이핑 횟수를 줄이고 this의 혼란스러운 동작을 피하기 위해 아래부터는 이벤트 핸들러에 화살표 함수를 사용할 것임 class Square extends React.Component { render() { return ( console.log('click')}..
[JavaScript] 배열 특정 값 찾기
2022. 11. 15. 20:37
프로그래밍/JavaScript
find const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // callback(element, index, array) array.find(v => v > 5); // 6 find 메서드는 해당 조건에 만족하는 첫 번째 요소의 값을 반환하며 만족하지 않으면 undefined를 반환 const array = [{name: 'red'}, {name: 'green'}, {name: 'yellow'}]; array.find(v => v.name === 'green'); // {name: 'green'}; find 메서드는 object가 담겨있는 배열에서도 유용하게 사용 가능 findIndex const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; ..
[JPA] jpa delete 안됨
2022. 11. 14. 20:26
프로그래밍/JPA
jpa delete 안되는 문제 코드를 살펴보면 보통 delete 후에 insert 하는 작업이 있는 경우 delete가 작동안하게 됨 update가 안되는 경우도 아래의 해결방법과 원인을 살펴보기 해결 방법 repository.flush()로 date 반영해준 뒤 insert 작업하기 👉 순서상 insert 가 먼저 실행되기에 delete가 적용 안될 수 있음 delete -> flush -> insert 순으로 실행하기 원인 hibernate에서 동작하는 SQL 순서가 정해져 있기 때문 hibernate 레퍼런스를 찾아보면 작업 순서가 정확하게 나와있음 @Transactional이 있기 때문에 함수 종료시 쿼리문들이 한꺼번에 실행되는데 이때 insert가 먼저 실행되고 delete가 마지막에 실행되기..