분류 전체보기
-
[React] useEffect의 dependency array에 objectReact 2022. 11. 1. 16:45
// custom hook을 만들던 도중 무한루프에 빠지는 현상이 생겨 이유에 알아보았다. useEffect는 렌더링이 될 때마다 실행된다. 이는 두 번째 매개변수인 dependency array를 사용하여 useEffect의 실행을 제어할 수 있다. dependency array의 값들에 대하여 이전값과 현재값을 비교하게 되는데 만약 동일하지 않다면 Effect가 호출된다. 이때 리액트는 Object.is() 메소드를 통해 두 값을 비교하여 호출 여부를 결정한다. 리액트는 렌더링 시 props를 새 객체로 생성한다. 따라서 props로 전달한 객체가 이전 객체와 동일하더라도 다른 참조 주소를 가진 객체이기 때문에 dependency array에 넣어도 계속 호출되어 무한루프에 빠지고 만다. 즉, 객체나..
-
[CSS] 이미지 Layout Shift 방지CSS 2022. 10. 26. 19:15
이미지에 사이즈를 명시해주지 않으면 페이지 레이아웃이 변동(Layout Shift)되는 모습을 종종 볼 수 있다. (이미지 뿐만 아니라 동적으로 삽입되는 컨텐츠, 광고들도 마찬가지) 이는 사용자 경험에 좋지 않다. 따라서 해결방법으로 이미지 사이즈를 명시해주면 된다. 하지만 요즘은 반응형으로 많이 제작하는 터라 직접적인 사이즈를 명시하기보다는 width:100%과 같은 스타일로 작성된 코드들을 많이 볼 수 있다. 이때 aspect-ratio를 사용하면 된다. img { width: 100%; height: auto; aspect-ratio: width / height; } aspect-ratio 속성에 관한 글은 예전글로 대신 대체한다 [CSS] aspect-ratio : 요소의 비율 유지하기 목적 반응..
-
[Git] 마지막 커밋 메시지 수정하기 : git commit --amendetc. 2022. 10. 20. 17:31
아직 push를 하지 않은 상태일 경우 가장 최근의 커밋 메시지를 수정하고 싶을 때 사용할 수 있다. git commit --amend 위의 명령어를 작성 후 Enter 하면 vi 편집 화면이 뜬다. 메시지를 수정하고자 하면 키보드 Insert 키 누름 메시지 수정 키보드 ESC 키를 누른 후 :wq를 작성 후 Enter 이후 git log 명령어로 확인하면 메시지가 수정된 것을 확인할 수 있다. git commit --amend -m "수정된 메시지" 명령어를 사용할 때 한 줄로도 수정이 가능하다. 메시지가 길 경우 위의 방식, 짧을 경우 아래 방식에 적합할 것 같다.
-
[JavaScript] checkbox 체크 확인, select, radio 값 가져오기JavaScript 2022. 10. 11. 21:10
input 값이 변할 때마다 상태를 저장해야 했다. 입력값이 변할 때마다 작업을 해야하니 onChange 이벤트를 사용하고 이벤트가 발생할 때 changeHandler라는 이름의 함수를 만들어 등록하였다. 또한 이벤트가 발생했을 때의 값을 넘겨줘야 했다. (편의상 매개변수를 값만 넘겨주기로 가정) checkbox 체크박스의 경우 체크를 하였는지 확인만 하면 되었다. 이때 e.target.checked로 체크여부를 진리값으로 줄 수 있었다. changeHandler(e.target.checked)} /> name select option value 속성에 각각 자신의 선택되었을 때의 값을 명시하였다. 그리고 e.target.value로 사용자가 선택한 값을 넘겨주었다. changeHandler(e.targ..
-
[Database] 데이터베이스와 사용자etc. 2022. 9. 28. 17:59
강의를 듣고 난 정리 책 출처 : Fundamentals of Database Systems (7th Edition) Basic Definitions Database 관련있는 데이터들의 모임 Data 묵시적 의미를 갖는 기록된 알려진 사실 (*묵시적 : 직접적으로 말이나 행동으로 드러내지 않고 은연중에 뜻을 나타내 보이는 것.) Mini-world 데이터가 데이터베이스에 저장된 실세계의 일부분 Database Management System (DBMS) 컴퓨터에서 데이터베이스의 생성과 관리를 지원하는 소프트웨어 패키지/시스템 Database Ststem 데이터와 이를 관리하는 DBMS 소프트웨어를 합쳐서 부르는 용어 종종 응용 프로그램도 포함됨 핵심 DBMS 기능 특정 데이터 베이스의 데이터 타입, 구조..
-
[React] 객체 key에 접근React 2022. 9. 21. 15:35
useState로 객체인 상태를 관리를 하던 중, 상태를 업데이트를 할 경우 key를 동적으로 받으려는 코드를 작성하려고 하다가 막혀 정리한다. const [filters, setFilters] = useState({ brightness: 100, contrast: 100, saturate: 100, grayscale: 0, invert: 0, huerotate: 0, blur: 0, sepia: 0, }); 위의 코드처럼 객체를 상태 관리 하려고 한다. 이때 하나의 속성 값이 바뀔경우 이 객체의 상태를 업데이트하는 하나의 함수를 작성하려고 한다. 그러면 이전 상태를 받아 그대로 전개하고 바뀐 속성을 찾아 업데이트를 해주면 된다. 이때 바뀐 속성의 key를 찾는 방법으로 대괄호([])을 이용하면 객체의 ..
-
[CSS] flex: 1이란CSS 2022. 9. 14. 20:31
flex: 1을 사용할 때마다 헷갈려가지고 매번 구글에 검색하였다. 이 의미에 대해 확실히 이해하고자 쓴다! flex flex-grow, flex-shrink, flex-basis를 한 번에 사용하는 단축 속성 flex: 1 === flex: 1 1 === flex: 1 1 0 flex: 1은 flex: 1 1, flex: 1 1 0과 같다. 즉, 아래와 같다. flex-grow: 1; flex-shrink: 1; flex-basis: 0; flex-grow [기본값] flex-grow: 0; 0 : 부모의 너비가 남을 경우에도 해당 아이템의 기본 너비를 유지한다. 1 : 부모의 너비가 남을 경우 너비를 채운다. flex-shrink [기본값] flex-grow: 1 0 : 부모의 너비가 해당 아이템보다..
-
[JavaScript] FileReader 객체JavaScript 2022. 9. 11. 19:27
FileReader 객체란 FileReader는 Blob(따라서 File도) 객체에서 데이터를 읽는 것을 목적으로 하는 객체이다. *blob 객체 : 주로 이미지, 비디오, 사운드 등과 같은 멀티미디어 객체 속성 FileReader.error : 파일을 읽는 도중에 발생한 에러를 나타냄 FileReader.readyState : FileReader의 상태를 나타내는 숫자 EMPTY : 0 : 아직 데이터가 로드 되지 않았음. LOADING : 1 : 데이터가 로딩 중. DONE : 2 : 모든 읽기 요청이 완료됨. FileReader.result : 파일의 컨텐츠 이벤트 핸들러 FileReader.onabort : 읽기 작업이 중단 될 때마다 발생 FileReader.onerror : 읽기 작업에 에러가..