zestlumen의 오롯이, 나의 개발 일지 인기글 TOP10
- [ css ]요소가 부드럽게 나타나고 사라지게 하려면 opacity를 쓰자 이전에 getBoundingClientRect()에 대해 포스팅에도 쓰였던 이미지다. 이번에는 버튼이나 헤더에 위치한 로고와 네비게이션바를 자세히 보면 스크롤을 내리고 올릴 때 부드럽게 사라지고 부드럽게 나타나는 것을 유심히 보자. display: none 으로도 설정할 수 있지만 해당 요소가 레이아웃에서 완전히 제거되기 때문에 다른 요소가 해당 공간을 채우게 될 수도 있고 요소의 위치가 변경되기도 한다. opacity 의 경우에는 여전히 레이아웃에 존재하면서 단지 보이지 않을 뿐이다. 마우스를 해당 요소의 위치에 가지고 가면 포인터가 보이는데, 보이게 하기 싫다면 pointer-events: none 으로 해주면 포인터가 표시되지 않는다. 해당요소의 공간을 사용하지 않으려면 visibility: hid.. 2023.08.03
- [ React ] map() 사용 시 key를 넣어야 하는 이유 map()을 활용해서 리스트를 만들다 보면 이런 에러가 나타난다. 리스트의 각 아이템에는 고유한 key prop이 필요하다는 에러. Key는 왜 필요한걸까?Key가 필수도 아니고 안 써도 작동하지만 필수처럼 쓰이는 권장사항이다. Key는 React가 동적 리스트나 반복 요소를 렌더링 할 때어떤 항목을 변경하거나 추가, 삭제하는 것에 대한 식별을 돕는다.식별자를 제공하면 리액트가 요소 간의 변경을 더 효율적으로 추적할 수 있고업데이트도 더 빠르게 처리할 수 있다. 아이템의 재사용 관리도 더 쉬워지며 예상치 못한 버그나 렌더링 이슈도 방지할 수 있다. 엘리먼트의 안정적인 고유성을 부여하기 위해서는 배열 내부의 엘리먼트에 Key를 지정해야 한다. 데이터의 ID를 key로 지정하는 것이 고유하게 식별할 수 .. 2023.09.16
- [ JavaScript ] scrollIntoView()로 스크롤을 원하는 위치로 이동하기 개인적으로 요즘은 무한 스크롤 방식을 많이 사용해서 스크롤을 많이 내렸을 때 빠르게 상단으로 이동하고 싶은데 막막할 때가 많다. 그럴 때 위와 같이 스크롤을 상단으로 이동하는 버튼이 있으면 참 편리하다는 생각을 많이 했다. 그래서 해당 버튼을 구현해 보았고,이렇게 스크롤을 원하는 위치로 쉽고 간단하게 이동하는 방법으로는 scrollIntoView() 메소드를 활용할 수 있다. scrollIntoView 메서드 사용법 원하는 DOM요소에 이 메소드를 호출하면 해당 요소가 뷰포트 내로 보이도록 한다. const targetElement = document.getElementById('targetElement'); targetElement.scrollIntoView(); 위의 코드는 targetElement라.. 2023.08.03
- [ JavaScript ] replace와 정규식을 사용해서 해당 문자 대체하기(제거하기) replace와 정규식을 사용해서 큰 따옴표 제거하기 한번씩 문자열을 가져올 때 큰 따옴표까지 같이 값으로 가져와지는 경우도 있다. 그럴 때 replace와 정규식을 사용해서 큰 따옴표를 제거할 수 있다. JavaScript의 replace()메서드는 첫번째로 일치하는 패턴을 대체한다. 모든 큰 따옴표를 제거하기 위해서 (대체하기 위해서는) 정규식에서 'g'플래그를 사용하면 전역 검색(global search) 이 가능해진다. /는 정규 표현식의 시작과 끝을 나타내는 구분자로 replace(/"/g, '')로 써주면 모든 큰 따옴표를 빈 문자열 ('') ←작은 따옴표 2개 로 대체하여 큰 따옴표를 제거할 수 있다. replace와 정규식을 사용해서 숫자를 제외한 문자 제거하기 const imgUrl = .. 2023.08.02
- SQL 자격검정 실전문제 풀이 해설 노랭이 23번,26번 (P.51,52) 2021-11-26 22:23:37 DELETE DML / 데이터만 삭제 COMMIT 이전 ROLLBACK (O) 사용자 커밋 테이블 데이터 모두 삭제, 디스크 초기화X (로그 남김) TRUNCATE DDL(일부DML성격) / 테이블 최초 생성 초기 상태로 ROLLBACK (X) Auto Commit 테이블 데이터 모두 삭제, 디스크 초기화 O (로그 남기지X) 해당 테이블 모든 행 제거, 저장공간 재사용 가능하도록 해제 DROP DDL / 테이블 정의 자체 완전 삭제 ROLLBACK (X) Auto Commit 테이블 데이터 모두 삭제 + 구조 삭제, 디스크 초기화 O , 테이블 스키마 정의도 함께 삭제 (로그 남기지X) 테이블 구조 완전 삭제 *UNDO : 트랜잭션을 이전 상태로 돌리는 것을 의미 2023.03.29
- HTTP 완벽 가이드 참고 공부 1 - HTTP개관 웹 애플리케이션을 개발 공부를 하면서 HTTP가 뭐냐고 하면 한 마디도 못할 것 같은 부족한 내 지식에 절망해서 공부하기 시작했다. 비전공자라서 모르는 용어들이 많아 하나씩 찾아보면서 공부하고 있다. 간단하게 정리해 가면서 읽고자 블로그에 요약해 본다. HTTP ( Hypertext Transfer Protocol ) 학습 목표 얼마나 많은 클라이언트와 서버가 통신하는지 리소스(웹콘텐츠)가 어디서 오는지 웹 트랜잭션이 어떻게 동작하는지 HTTP 통신을 위해 사용하는 메시지 형식 HTTP 기저의 TCP 네트워크 전송 여러 종류의 HTTP 프로토콜 인터넷 곳곳에 설치된 다양한 HTTP 구성요소 웹 클라이언트와 서버 웹 콘텐츠는 웹 서버에 존재하는데 웹 서버는 HTTP프로토콜로 의사소통하기 때문에 보통 HTT.. 2023.02.24