오롯이, 나의 개발 일지

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

• [ JavaScript ] scrollIntoView()로 스크롤을 원하는 위치로 이동하기 개인적으로 요즘은 무한 스크롤 방식을 많이 사용해서 스크롤을 많이 내렸을 때 빠르게 상단으로 이동하고 싶은데 막막할 때가 많다. 그럴 때 위와 같이 스크롤을 상단으로 이동하는 버튼이 있으면 참 편리하다는 생각을 많이 했다. 그래서 해당 버튼을 구현해 보았고,이렇게 스크롤을 원하는 위치로 쉽고 간단하게 이동하는 방법으로는 scrollIntoView() 메소드를 활용할 수 있다. scrollIntoView 메서드 사용법 원하는 DOM요소에 이 메소드를 호출하면 해당 요소가 뷰포트 내로 보이도록 한다. const targetElement = document.getElementById('targetElement'); targetElement.scrollIntoView(); 위의 코드는 targetElement라.. 2023.08.03
• [ JavaScript ] 논리연산자(&&, ||)를 활용한 단축평가 단축평가(Short-circuit Evaluation)란 논리 연산자를 사용해 조건식을 평가할 때, 첫 번째 피연산자만으로 결과를 확정지을 수 있을 때 두 번쨰 피 연산자의 평가를 생략하는 것을 말한다. 단축평가를 사용하면 보다 간결하게 코드를 작성할 수 있다. 아래의 예를 보자. ' && ' 연산자를 활용한 단축평가 ( AND 연산 ) 첫 번째 피연산자가 Falsy한 값일 경우 그 값을 반환하고 첫 번째 피연산자가 Truthy한 값이면 두 번째 피연산자를 반환한다. const value = 0; const text = value && "Hi!"; console.log(text); //출력:0 const result = false && "Hi"; console.log(result); //출력:false .. 2023.08.28
• [ JavaScript ] 요소의 크기나 위치를 알 수 있는 getBoundingClientRect() getBoundingClientRect() 요소의 크기와 위치에 관한 정보를 제공하는 자바스크립트 메서드이다. 특정요소의 경계상자(BoundingBox)에 대한 정보를 얻을 수 있다. 메서드는 호출한 요소의 사각형 경계에 대한 정보를 포함하는 DOMRect 객체를 반환한다. 이 DOMRect 객체에는 다음과 같은 속성이 있다. top: 요소의 상단 경계선의 Y 좌표 right: 요소의 우측 경계선의 X 좌표 bottom: 요소의 하단 경계선의 Y 좌표 left: 요소의 좌측 경계선의 X 좌표 width: 요소의 너비 (right - left) height: 요소의 높이 (bottom - top) x: 요소의 좌측 경계선의 X 좌표 (left와 동일) y: 요소의 상단 경계선의 Y 좌표 (top과 동일) .. 2023.08.03
• [ CSS ] font-size (폰트 사이즈) rem 과 em이 뭐죠? rem 과 em 은 CSS에서 사용되는 상대적인 길이 단위 rem (Root EM) 최상위 요소인 의 폰트 크기 기준으로 설정된 길이. 요소의 폰트 크기를 1rem으로 간주하여 이를 기준으로 상대적인 크기를 지정한다. ex) 3rem이라고 하면 현재 폰트 크기의 3배 em (EM) 현재 요소의 폰트 크기를 기준으로 설정된 길이. 상위 요소의 폰트 크기를 상속받아 계산된다. ex) 부모 요소의 폰트 크기가 18px이고 자식요소의 폰트 크기가 1.5em이면 27px html 폰트크기가 커져도 상관없이 해당 요소의 상위요소 크기를 기준으로 계산됨. rem이나 em을 쓰는 이유는? rem이나 em은 상대적인 길이 단위이기 때문에 반응형 웹 디자인을 구현하거나 유연한 레이아웃을 만들 때 유용하다. rem은 루트 .. 2023.08.02
• [ Firebase ] getAuth(app)와 getFirestore(app)는 전역에 쓸까, 지역에 쓸 1. 전역 const firebaseConfig = { ... }; const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); 전역에서 사용하는 경우, Firestore 인스턴스를 한번만 얻어와서 모든 컴포넌트 또는 함수에 사용한다. 인스턴스를 여러 번 생성하지 않고 하나의 인스턴스를 재사용하여 성능을 최적화할 수 있고, 여러 곳에서 Firestore에 접근해야 할 경우 반복된 코드를 쓰지 않기에 코드를 간결하게 할 수 있다. 2. 지역 각 컴포넌트나 함수 내에서 필요한 시점에 Firestore 인스턴스를 얻어온다. 프로젝트의 구조를 모듈화하여 관리하고자 할 때 유용하다. 어떤 방법을 .. 2023.08.01
• [ JavaScript ] localStorage와 sessionStorage 차이 Session Storage 세션스토리지- 세션에 대한 유지 기가 동안 데이터를 저장하는 데 사용한다.- 브라우저 탭이나 창을 닫으면 저장된 세션 스토리지의 저장된 데이터가 삭제된다.- 다른 탭이나 창에서는 세션 스토리지에 접근할 수 없다.- 보안적인 측면에서 더 안전한 옵션이지만, 재부팅이나 브라우저 종료 시 데이터가 손실된다. Local Storage 로컬스토리지- 영구적으로 데이터를 저장하는 데 사용된다.- 사용자가 명시적으로 데이터를 삭제하지 않는 이상, 브라우저를 닫아도 데이터가 유지된다.- 다른 탭이나 창에서도 로컬 스토리지에 접근할 수 있다.- 보안에 주의해야 한다. 로그인 아이디와 같은 중요한 정보는 일시적인 세션에 저장하는 것이 보안적인 측면에 더 안전하다.로그인 상태를 유지하는 경우에는.. 2023.07.27
• SQL 자격검정 실전문제 풀이 해설 노랭이 52번, 53번(P.67,68) 2021-11-27 02:31:40 SQL 자격검정 실전문제 풀이 해설 노랭이 52번 인라인 뷰 통해 집계 함수 처리 후 해당 인라인 뷰와의 조인 수행하는 SQL문 작성 인라인 뷰에서 메인 SQL의 테이블 칼럼 쓸 수 있는지 여부 FROM절에 위치하는 서브 쿼리인 인라인 뷰의 경우 FROM절이 있기에 메인 쿼리 테이블 칼럼 사용할 수 X 이는 메인쿼리 테이블 칼럼이 메인 쿼리 SELECT 사용되기 때문 *보기에 광고매체 ID별 최초 게시 광고명 광고 시작일자 출력 그룹-광고매체 ID , 최초-광고시작일자 MIN값 해당 인라인뷰 조인하는 SQL 찾기 1. 연관 서브 쿼리 활용이지만 이를 이용하기 위해 WHERE절 사용 (인라인 뷰 안에서 뷰 바깥 테이블과 조인 X) 인라인 뷰에서 메인테이블의 칼럼을 조건절.. 2023.03.30
• SQL 자격검정 실전문제 풀이 해설 노랭이 20번, 21번 22번 (P.49,50) 2021-11-26 21:56:06 SQL 자격검정 실전문제 풀이 해설 노랭이 20번 (P.49) 정답 5번 1. 삽입 칼럼 명시 X - 모든 칼럼 삽입 2. DEGREE 칼럼 길이 칼럼 길이 VARCHAR2(1) - 'AB' 칼럼 길이 초과 3. NOT NULL 칼럼인 AMT 칼럼 명시 X - NOT NULL AMT 누락 4. INSERT INTO TBL(ID, AMT) VALUES(3,300) - DEGREE는 NULL허용(생략되어있음) 5. DEGREE VALUES - NULL로 해도 됨 SQL 자격검정 실전문제 풀이 해설 노랭이 21번 (P.50) 정답 2번 2. REG_DATE NOT NULL인데 누락 SQL 자격검정 실전문제 풀이 해설 노랭이 22번 (P.50) 정답 1,3번 1.SQL 수행 .. 2023.03.29
• SQL 자격검정 실전문제 풀이 해설 노랭이 47번,51번(P.31,34) 2021-11-26 18:24:23 47번 문제_ 정답 2번 2. 개별 테이블 모두 조회하는 트랜잭션이 대부분이라는 가정 (전제조건) 있으므로 UNION/UNION ALL 할 경우 개별 조회에 따른 시간 소요와 조합하는 성능 저하 발생, 따라서 하나의 테이블로 통합, 대신 PK체계나 일반 속성에 각 사건 구분할 수 있게 구분자 부여 4. 세 개의 테이블 그대로 유지하되 반정규화된 형태의 통합테이블을 하나 더 생성하여 조회의 성능을 향상하도록 한다 - 단순 조회 성능 상승을 위한 중복 데이터 저장은 무결성에 위배 51번 문제_ 정답 2,4번 엔터티 간 논리적 관계있을 경우, 즉 엔터티 간 관계 정의해 관련 엔터티 상호 간 업무적 연관성 있음 표현 경우, 이 데이터들이 업무에 밀접하게 연결되어 상호간 조인이.. 2023.03.28
• [ 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