프론트엔드 20

[Js] 조건부연산자 와 if-else문

평소에 조건부 연산자보다 If-else 연산자를 많이 사용하는데 조건부 연산자를 알게 된 후 if-else 문 보다 더 간결하며 예쁘게 생겨서(?) 정리해보았습니다. 조건부 연산자주어진 조건에 따라 두 가지 값 중 하나를 선택할 때 사용됩니다. 일반적으로 if-else 문을 간결하게 작성할 때 유용하게 사용되며 코드가 짧고 명확해지는 장점이 있습니다. 기본 문법조건식 ? 참일 때 실행할 코드 : 거짓일 때 실행할 코드;let food = 'apple';let answer = food ? 'apple' : 'banana';위 코드는 food가 존재한다면 'apple'이 선택되고 그렇지 않다면 'banana'가 선택됩니다. 중첩 조건부 연산자여러 조건을 처리할 때 삼항 연산자를 중첩하여 사용할 수 있습니다...

[Js] 연산자와 타입 변환 | 덧셈과 다른 연산자들의 차이

이 주제에 대해 생각하게 된 이유:자바스크립트 연산자를 공부하면서 덧셈 연산자에서 피연산자 두개가 있을때 한개의 피연산자가 문자열이라면 다른 한개의 피연산자는 무조건 문자열로 반환된다는 것에 대해 특이하다고 생각했다. 그래서 다른 연산자들도 알아보기로 했다.alert('1' + 9); // "19"alert(1 + 3 + '2'); // "42"1. 덧셈- 하나라도 문자열이면 문자열 결합이 된다.alert(2 + '5'); // "25"alert(3 + '4'); // "34" 2. 뺄셈 / 나눗셈- 하나라도 문자열이면 숫자로 변환 후 계산된다.alert('3' - 1); // 2 ('3' 이 자동으로 숫자 3으로 변환되어 연산)alert('8'-'2'); // 6 ('8' 과 '2'는 자동으로 숫자 6..

[SQL] DISTINCT - 중복된 값 제거

DISTINCT 키워드중복된 값을 제거할때 사용한다.예를들어 tSite에 회원가입된 사용자들의 지역 목록을 가져올때 사용할 수 있다. [ tSite 테이블 ]NAMEAGEREGION김영희23서울이철수18대전오미자33대전안지혁20부산박지수27강원 SELECT DISTINCT region FROM tSite;REGION서울대전부산 강원 SQL Server vs Oracle 중복 처리방식 차이SQL Server는 DISTINCT를 적용할 때 자동으로 정렬을 수행하면서 중복을 제거한다.Oracle은 DISTINCT를 적용할 때 별도로 정렬하지 않고, 단순히 중복만 제거한다.=> 중복 제거 후 순서를 정렬하기 위해선 ORDER BY를 쓰는 습관을 들이는게 좋다고 생각한다.   COUNT함수에서의 DISTINCT ..

[SQL] COUNT(*) vs COUNT(컬럼) 차이

SQL에서 COUNT 함수는 특정 컬럼이나 테이블의 행 수를 셀 때 사용되지만, 사용 방식에 따라 결과가 달라질 수 있다.내가 헷갈렸던 부분은 COUNT(*) 와 COUNT(컬럼)의 차이를 이해하는 것이였다. 예시 테이블 : OrdersOrderIDCustomerIDOrderDate11012025-03-012102NULL31032025-03-024104NULL51052025-03-03  1. COUNT(*) - 모든 행의 개수를 셈COUNT(*) 는 테이블의 모든 행을 센다. 이때 NULL 값을 포함한 모든 행이 계산된다. 따라서 OrderDate가 NULL인 행도 포함해서 총 5개의 행을 센다.SELECT COUNT(*) FROM Orders; 2. COUNT(OrderDate) – NULL을 제외한 ..

[SQL] GROUP BY 이해하기: SQL로 데이터 그룹화와 계산하기

예제 : 매장별 판매 합계 구하기 Sales 테이블 :StoreSalesAmountA500B300B200A150C450 우리가 Store를 기준으로 그룹을 묶고, 각 그룹의 SalesAmount 값을 합산하고 싶다고 가정하자.SELECT Store, SUM(SalesAmount) AS TotalSalesFROM SalesGROUP BY StoreORDER BY TotalSales DESC; 이 쿼리는 Sales 라는 테이블에서 각 가게의 총 판매 금액 합계를 구하는 쿼리이다. [ GROUP BY ]그 전에 GROUP BY 에 대해서 알아볼 필요가 있다. GROUP BY 는 특정 컬럼을 기준으로 데이터를 그룹화 할때 사용한다.GROUP BY Store는 Store 컬럼 값이 같은 데이터를 하나로 묶어서 그..

[ CSS ] 복합 선택자 쉽게 이해하기! (하위, 자식, 형제 선택자)

복합선택자가 중요한 이유!!복합 선택자를 사용하면 특정 부모 요소 안에 있는 태그나, 특정 태그 이후에 나오는 요소들만 스타일링할 수 있다. 복합 선택자 종류 하위 선택자는 특정 요소 안에 있는 모든 요소를 선택한다. 자식 선택자는 부모의 바로 아래에 있는 요소만 선택한다. 인접 형제 선택자는 특정 요소 바로 뒤의 형제 요소 하나만 선택한다. 일반 형제 선택자는 특정 요소 뒤에 나오는 모든 형제 요소를 선택한다. 실습 예제 (HTML 코드) 과일 목록 사과 바나나 과일은 맛있다 오렌지 포도  실습 예제 (CSS 코드)/* (1) 하위..

[SQL] 강원도에 위치한 생산공장 목록 출력하기 [ LIKE 연산자 ]

[ 문제 ] : https://school.programmers.co.kr/learn/courses/30/lessons/131112[ 요구사항 ]강원도에 위치한 식품공장의 공장 ID, 공장 이름, 주소를 조회하자.결과는 공장 ID를 기준으로 오름차순 정렬해야한다.[ LIKE 연산자 ]LIKE는 문자열 패턴 매칭을 위해 사용되는 연산자입니다. 이 연산자는 WHERE 절에서 주로 사용되며 특정 열(column)의 값이 특정 패턴과 일치하는지 확인하는 데 사용됩니다.WHERE 컬럼명 LIKE '패턴';와일드카드(wildcard) 문자와 함께 사용하여 부분 문자열을 검색할 수 있습니다.     % (퍼센트 기호): 0개 이상의 문자와 일치합니다. '%강원도%' : ‘강원도’라는 문자열이 어디든 포함된 모든 값..

[ HTML ] 시맨틱(semantic) 태그란? HTML 코드의 가독성 높이기!

시맨틱 태그시맨틱 태그(Semantic Tag)는 태그명 자체가 의미를 가지고 있는 HTML 태그를 뜻한다. 예를들어 , 같은 태그는 이름만 봐도 테이블과 주소 정보를 담는 역할을 한다는 걸 알 수 있다.  시맨틱 태그의 필요성과거에는 태그를 사용해 웹페이지의 모든 레이아웃을 구성했다. 그러나 웹사이트 구조가 점점 복잡해지면서 개발자와 검색 엔진이 코드를 이해하기 어려워졌다. 이를 해결하기 위해 HTML5에서 의미를 직관적으로 알 수 있는 시맨틱 태그가 추가되었다. 대표적인 시맨틱 태그 : 웹페이지의 머리글(로고, 제목 등): 내비게이션(메뉴) 영역 : 본문 콘텐츠 영역 : 논리적으로 연관된 콘텐츠 그룹 : 독립적인 콘텐츠(게시글, 뉴스, 블로그 글 등) : 사이드바(광고, 부가 정보 등) : 웹페이..

[ HTML ] map 태그를 알아보자!

태그란?하나의 이미지에서 특정 영역을 클릭 가능하도록 설정하는 기능이다. 사용자는 이미지의 특정 위치를 클릭하면 해당 영역에 연결된 링크로 이동할 수 있다.예를 들어, 이케아, 오늘의 집 같은 온라인 쇼핑몰에서는 제품이 배치된 이미지에 태그를 활용해서 각 상품을 클릭하면 해당 상품의 상세 페이지로 이동할 수 있도록 만들 수 있다.   태그 사용 방법 1. 이미지와 맵 연결하기 • 태그에 usemap 속성을 추가하고, # 기호와 함께 의 name 속성값을 지정해야 한다. 2. 맵과 클릭할 영역 설정하기 • 태그를 생성하고, name 속성을 usemap과 동일하게 설정하면 된다. • 태그를 이용해서 클릭 가능한 영역을 지정하고, c..

[ HTML ] 비디오 & 오디오 속성

태그 속성1. 기본적인 속성 controls: 비디오 재생, 멈춤, 음소거 등의 UI 버튼 제공 autoplay: 페이지가 로드될 때 자동으로 재생 muted: 음소거 상태로 시작 loop: 영상이 끝나면 다시 처음부터 반복 재생 poster: 영상이 실행되기 전에 보이는 썸네일 이미지 2. preload 속성 (비디오를 미리 로드하는 방식) auto: 사용자가 볼지 말지 관계없이 영상을 미리 다운로드, 중요한 영상일 경우 사용 metadata: 영상 데이터를 다운로드하지 않고, 길이 등의 메타 정보만 가져옴 none: 영상 데이터를 미리 다운로드하지 않음 (트래픽 절약)  태그 (비디오 자막 추가)1. 자막 관련 속성 srclang: 자막의 언어 (ex. ko → 한국어, en → 영어) label: ..