오롯이, 나의 개발 일지

zestlumen의 오롯이, 나의 개발 일지 인기글 TOP10

• [ JavaScript ] scrollIntoView()로 스크롤을 원하는 위치로 이동하기 개인적으로 요즘은 무한 스크롤 방식을 많이 사용해서 스크롤을 많이 내렸을 때 빠르게 상단으로 이동하고 싶은데 막막할 때가 많다. 그럴 때 위와 같이 스크롤을 상단으로 이동하는 버튼이 있으면 참 편리하다는 생각을 많이 했다. 그래서 해당 버튼을 구현해 보았고,이렇게 스크롤을 원하는 위치로 쉽고 간단하게 이동하는 방법으로는 scrollIntoView() 메소드를 활용할 수 있다. scrollIntoView 메서드 사용법 원하는 DOM요소에 이 메소드를 호출하면 해당 요소가 뷰포트 내로 보이도록 한다. const targetElement = document.getElementById('targetElement'); targetElement.scrollIntoView(); 위의 코드는 targetElement라.. 2023.08.03
• [ css ]요소가 부드럽게 나타나고 사라지게 하려면 opacity를 쓰자 이전에 getBoundingClientRect()에 대해 포스팅에도 쓰였던 이미지다. 이번에는 버튼이나 헤더에 위치한 로고와 네비게이션바를 자세히 보면 스크롤을 내리고 올릴 때 부드럽게 사라지고 부드럽게 나타나는 것을 유심히 보자. display: none 으로도 설정할 수 있지만 해당 요소가 레이아웃에서 완전히 제거되기 때문에 다른 요소가 해당 공간을 채우게 될 수도 있고 요소의 위치가 변경되기도 한다. opacity 의 경우에는 여전히 레이아웃에 존재하면서 단지 보이지 않을 뿐이다. 마우스를 해당 요소의 위치에 가지고 가면 포인터가 보이는데, 보이게 하기 싫다면 pointer-events: none 으로 해주면 포인터가 표시되지 않는다. 해당요소의 공간을 사용하지 않으려면 visibility: hid.. 2023.08.03
• SQL 자격검정 실전문제 풀이 해설 노랭이 40번 (P.27) 2021-11-26 18:05:46 정답 1번 반정규화 고려 시 판단요소 -반정규화 정보에 대한 재현의 적시성 (필요할 때 적시에)으로 판단, 예를 들어 빌링(전자결제시스템)의 잔액은 다수 테이블에 의한 다량 조인이 불가피하므로 데이터 제공의 적시성 확보를 위한 필수 반정규화 대상정보 -다량 데이터 탐색 경우, 인덱스가 아닌 파티션 및 데이터 클러스터링 등의 다양한 물리 저장기법 활용해 개선 유도, 다만 하나의 결과셋 추출하기 위해 다량의 데이터 탐색 처리가 반복적으로 빈번 발생 시 반정규화 고려 -이전 이후 위치 레코드 탐색은 WINDOW FUCTION으로 접근 가능 -집계 테이블 이외 다양한 유형 (다수 테이블의 키 연결 테이블 등)에 대해 반정규화 테이블 적용 필요할 수 있음 반정규화 정규화된 엔터.. 2023.03.28
• HTTP 완벽 가이드 참고 공부 1 - HTTP개관 웹 애플리케이션을 개발 공부를 하면서 HTTP가 뭐냐고 하면 한 마디도 못할 것 같은 부족한 내 지식에 절망해서 공부하기 시작했다. 비전공자라서 모르는 용어들이 많아 하나씩 찾아보면서 공부하고 있다. 간단하게 정리해 가면서 읽고자 블로그에 요약해 본다. HTTP ( Hypertext Transfer Protocol ) 학습 목표 얼마나 많은 클라이언트와 서버가 통신하는지 리소스(웹콘텐츠)가 어디서 오는지 웹 트랜잭션이 어떻게 동작하는지 HTTP 통신을 위해 사용하는 메시지 형식 HTTP 기저의 TCP 네트워크 전송 여러 종류의 HTTP 프로토콜 인터넷 곳곳에 설치된 다양한 HTTP 구성요소 웹 클라이언트와 서버 웹 콘텐츠는 웹 서버에 존재하는데 웹 서버는 HTTP프로토콜로 의사소통하기 때문에 보통 HTT.. 2023.02.24
• [ JavaScript ] JavaScript scrollTo와 scrollBy 차이 쉽게 정리 JS에서 스크롤 이동할 때 사용하는비슷하지만 다른 scrollBy와 scrollTo에 대해 알아보자.by와 to의 뜻으로 짐작해서 쓴다면 쉽게 헷갈리지 않을 것이다! scrollBy(x-coord, y-coord) 위치하는 곳에서 ~만큼 이동 현재 위치에서 y좌표로 200px만큼 이동하기x,y축으로이동할 만큼의 픽셀값을 지정해주기만 하면 된다. window.scrollBy(0,200); 오브젝트 형태로도 전달 가능하다. 세로값인 y대신 top, 가로값인 x대신 left를 통해이동할 만큼의 픽셀값을 지정한다. window.scrollBy({ top: 100, left: 0 }); options - behaivor window.scrollBy({ top: 50, left: 20, behavior.. 2023.02.11
• React 컴포넌트 생명주기 쉽게 이해하기 리액트 컴포넌트의 생명주기란컴포넌트가 생성되고 소멸될 때까지의 과정이다.(생성되고 -> 업데이트 -> 사라진다) 컴포넌트 생명주기의 3단계- 마운트 Mount나타나는 것, 컴포넌트가 생성되는 시점constuctor() 컴포넌트가 생성될 때 처음으로 호출된다.초기 상태를 설정하거나 메서드를 바인딩하는 등의 작업을 수행한다.render() 컴포넌트의 UI를 렌더링 한다.cpmponentDidMount() 컴포넌트가 DOM에 들어가고 호출된다. - 업데이트 Update컴포넌트의 상태나 속성props가 변경될 때 발생하는 단계shouldComponentUpdate(prevProps,prevState)컴포넌트가 업데이트 된 후 호출된다.(또는 forceUpdate() 강제 업데이트 함수 호출로 인해 컴포넌트.. 2023.08.08
• [ React ] 리액트의 Render에 대하여:: Virtual DOM과 리렌더링 Recat의 렌더링 과정 1. 데이터 변경 감지 Data Change (State/Props) React는 상태(State)와 속성(Props)를 모니터링해 데이터의 변경을 감지한다. 상태가 변경되거나 부모 컴포넌트로부터 새로운 속성을 받았을 때, React는 컴포넌트를 리렌더링해야 할 필요가 있는지 확인한다. 2. 가상 DOM 생성 Createing Virtual DOM 데이터 변경이 감지되면, React는 가상 DOM을 생성한다. ***가상 DOM ( Virtual DOM ) 메모리 상에 존재하는 가벼운 복사본으로 실제 DOM과 유사한 계층 구조를 갖는다. 가상DOM은 실제 DOM과 동기화 되지 않고 독립적으로 존재한다. 3.가상 DOM 비교하기 Comparing Virtual DOM 이전에 생성된 .. 2023.08.05
• [ JavaScript ] replace와 정규식을 사용해서 해당 문자 대체하기(제거하기) replace와 정규식을 사용해서 큰 따옴표 제거하기 한번씩 문자열을 가져올 때 큰 따옴표까지 같이 값으로 가져와지는 경우도 있다. 그럴 때 replace와 정규식을 사용해서 큰 따옴표를 제거할 수 있다. JavaScript의 replace()메서드는 첫번째로 일치하는 패턴을 대체한다. 모든 큰 따옴표를 제거하기 위해서 (대체하기 위해서는) 정규식에서 'g'플래그를 사용하면 전역 검색(global search) 이 가능해진다. /는 정규 표현식의 시작과 끝을 나타내는 구분자로 replace(/"/g, '')로 써주면 모든 큰 따옴표를 빈 문자열 ('') ←작은 따옴표 2개 로 대체하여 큰 따옴표를 제거할 수 있다. replace와 정규식을 사용해서 숫자를 제외한 문자 제거하기 const imgUrl = .. 2023.08.02
• [ Firebase ] FirebaseError: [code=permission-denied]: Missing or insufficient permissions. 권한 부족 또는 없음 오류 유저가 로그인을 하고 멤버십을 선택할 때, Firestore에서 컬렉션 ' users'에 userId(uid)를 문서명으로 문서마다 유저이메일(email), 유저이름(name), 유저가 선택한 멤버쉽(membership), 유저의 가입날짜(date)를 필드로 넣는 코드를 작성했지만 프로젝트의 시작부터 파이어베이스 에러가 발생했다. FirebaseError: [code=permission-denied]: Missing or insufficient permissions. Firebase의 데이터베이스나 스토리지 등 접근 시에, 사용자에게 필요한 권한이 없거나 부족하여 접근이 거부되었을 때 나타나는 오류이다. 해결방법 Firebase 콘솔에서 해당 프로젝트의 데이터베이스나 스토리지 규칙을 확인하고 권한 설정을.. 2023.07.28
• SQL 자격검정 실전문제 풀이 해설 노랭이 101번,102번,106번(P.104,106,110) 2021-11-28 19:37:24 SQL 자격검정 실전문제 풀이 해설 노랭이 101번 문제가 데이터 모델에서 평가대상상품에 대한 품질평가항목별 최종 평가 결과를 추출하는 SQL 문장으로 옳은 것은? (단, 평가항목에 대한 평가(평가등급)가 기대 수준에 미치지 못할 경우 해당 평가항목에 대해서만 재평가를 수행한다) >>평가회차가 중요 ①인라인뷰/평가결과 특정 상품 평가항목에 대한 최종평가 회차가 아님, D의 MAX회차가 어느 상품의 평가항목에 해당하는 회차인지 알 수 없음 전체 데이터 중 평가회차 가장 큰 값 가지고 조인 수행 ②연관서브쿼리/ 특정 상품, 평가항목별로 최종 평가회차와 조인 수행 ③특정 평가회차 결과 아닌 평가결과 엔터티의 평가 회차, 등급, 일자, 속성에 대해 개별 MAX를 구함 ④평가등.. 2023.03.30