본문 바로가기

개발

 (173)
JSX (JavaScript XML) JSX (JavaScript XML) JSX는 React에서 권장하는 JavaScript의 확장 문법이다. XML 또는 HTML과 비슷하지만 JavaScript로 컴파일된다. JSX를 사용하면 JavaScript 코드 내에서 더 간결하고 가독성있게 HTML 요소 및 컴포넌트를 작성할 수 있다. 1. 속성명은 카멜 케이스로 작성하기 JSX 문법에서도 태그에 속성을 지정해 줄 수 있다. 단, 여러 단어가 조합된 몇몇 속성들을 사용할 때는 반드시 카멜 케이스(Camel Case) 로 작성해야 한다. 예를 들면 onclick, onblur, onfocus 등과 같은 이벤트 속성이나, tavindex 같은 속성들이 있다. 단, 예외적으로 HTML에서 비표준 속성을 다룰 때 활용하는 data-* 속성은 카멜 케이스..
React의 기본 개념 React 개요 React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. Facebook에서 개발하였으며. 컴포넌트 기반 아키텍처를 통해 재사용성과 유지보수성을 높인다. React 기본 용어 1. JSX (JavaScript XML) JSX는 React에서 권장하는 JavaScript의 확장 문법이다. XML 또는 HTML과 비슷하지만 JavaScript로 컴파일된다. JSX를 사용하면 JavaScript 코드 내에서 더 간결하고 가독성있게 HTML 요소 및 컴포넌트를 작성할 수 있다. 2. 컴포넌트 (Components) 컴포넌트는 React 애플리케이션의 구성 요소이다. 재사용 가능하고 독립적인 코드 조각으로 UI를 표현한다. 함수형 컴포넌트: props를 받아들이고 렌더링 결..
VSCode로 React 개발 환경 세팅하기 1. node.js 를 다운받는다. (안정적으로 작동하는 LTS버전을 다운) 2. 전부 Next를 눌러 설치를 마친다. 3. 설치가 잘 되었는지 명령 프롬프트(cmd)에서 확인한다. node -v 는 Node.js의 버전을 확인하는 명령어이고, npm -v 는 Node.js에서 사용할 패키지를 관리하고 실행하는 도구의 버전이다. 4. 사용할 코드에디터인 VS Code 를 다운받는다. 6. create-react-app으로 리액트 프로젝트 생성 npm init react-app 혹은 폴더를 열어 터미널에서 npm init react-app . 을 작성하여 설치한다. * 터미널 열기: View - Terminal (Ctrl+`) 7. 개발 모드 실행하기 터미널에 npm run start 를 입력하면 생성한 ..
1일차 회의 기간은 2달 반으로 잡아 12월~2월 중순으로 잡았다. 주제는 쇼핑몰 사이트로 정했으며, 기준 사이트는 크림으로 결정했다. 사용 프로그램: Intellij 사용 언어: react, spring, mysql 1주차 목표(12월 4일까지): 각자 React 연습을 하여 페이지 하나씩 만들어오기 > 랭킹 페이지 만들기
자동차 대여 기록 별 대여 금액 구하기 SELECT RH.HISTORY_ID, ROUND(SUM(C.DAILY_FEE * (DATEDIFF(RH.END_DATE, RH.START_DATE) + 1) * (1 - IFNULL(DP.DISCOUNT_RATE, 0) / 100)), 0) AS FEE FROM CAR_RENTAL_COMPANY_RENTAL_HISTORY RH LEFT JOIN CAR_RENTAL_COMPANY_CAR C ON C.CAR_ID = RH.CAR_ID LEFT JOIN CAR_RENTAL_COMPANY_DISCOUNT_PLAN DP ON C.CAR_TYPE = DP.CAR_TYPE AND (CASE WHEN DATEDIFF(RH.END_DATE, RH.START_DATE) + 1 BETWEEN 7 AND 29 THEN '7..
조건에 맞는 사용자 정보 조회하기 SELECT USER_ID, NICKNAME, CONCAT(CITY, ' ', STREET_ADDRESS1, ' ', STREET_ADDRESS2) 전체주소, CONCAT(SUBSTRING(TLNO, 1, 3), '-', SUBSTRING(TLNO, 4, 4), '-', SUBSTRING(TLNO, 8, 4)) 전화번호 FROM USED_GOODS_USER WHERE USER_ID IN (SELECT WRITER_ID FROM USED_GOODS_BOARD GROUP BY WRITER_ID HAVING COUNT(*)>=3) ORDER BY USER_ID DESC https://school.programmers.co.kr/learn/courses/30/lessons/164670
특정 옵션이 포함된 자동차 리스트 구하기 SELECT CAR_ID, CAR_TYPE, DAILY_FEE, OPTIONS FROM CAR_RENTAL_COMPANY_CAR WHERE OPTIONS LIKE '%네비게이션%' ORDER BY CAR_ID DESC https://school.programmers.co.kr/learn/courses/30/lessons/157343
자동차 대여 기록에서 장기/단기 대여 구분하기 SELECT HISTORY_ID, CAR_ID, DATE_FORMAT(START_DATE, '%Y-%m-%d') START_DATE, DATE_FORMAT(END_DATE, '%Y-%m-%d') END_DATE, CASE WHEN DATEDIFF(END_DATE, START_DATE)+1>=30 THEN '장기 대여' ELSE '단기 대여' END AS RENT_TYPE FROM CAR_RENTAL_COMPANY_RENTAL_HISTORY WHERE START_DATE LIKE '2022-09-%' ORDER BY HISTORY_ID DESC https://school.programmers.co.kr/learn/courses/30/lessons/151138
DATETIME에서 DATE로 형 변환 SELECT ANIMAL_ID, NAME, DATE_FORMAT(DATETIME, '%Y-%m-%d') 날짜 FROM ANIMAL_INS https://school.programmers.co.kr/learn/courses/30/lessons/59414
카테고리 별 상품 개수 구하기 SELECT SUBSTRING(PRODUCT_CODE, 1, 2) CATEGORY, COUNT(*) PRODUCTS FROM PRODUCT GROUP BY CATEGORY ORDER BY CATEGORY https://school.programmers.co.kr/learn/courses/30/lessons/131529

티스토리툴바