select *from table_namewhere 1=1 and user_id = 'id' and user_pw = 'pw' 보통 이런식으로 로그인을 짜게되면 SQL Injection의 위험이 있다 예를들어 로그인을 할 때 1=1 --을 넣게되면select *from table_namewhere 1=1 and user_id = 'id' or 1=1 -- and user_pw = 'pw'그냥 로그인이 되어버린다 그래서 아예 id만 가지고 데이터를 아래와 같이 가져온 뒤select *from table_namewhere 1=1 and user_id ='id' 컨트롤러에서 pw를 검증했다.HashMap retMap = new HashMap();HashMap u..
1. 새로운 리액트 앱 생성npm create vite@latestsection05react 선택javescript 선택 2. 폴더열기파일 - 폴더열기 - 금방 만든 section05파일 열기 3. dependencies 다운로드npm install 4. 리액트 실행npm run dev 5. 불필요한 파일 삭제 1. /src/App.jsx에서 상단 svg 파일 사용 하지 않기 때문에 파일, impor문 모두 삭제하나는 퍼블릭, 하나는 에셋 폴더에 들어가 있다. 2. useState 삭제 import { useState } from 'react'const [count, setCount] = useState(0) 3. App()을 리턴하고 있는 Div 모두 삭제 후 리턴문 수정div> a hre..
1. localhost:5173 으로 접속 할 수 있었던 이유- 리액트 앱에 웹서버가 내장 되어 있어 npm run dev는 리액트 서버 가동 명령어이기 때문- 포트번호 : 하나의 컴퓨터에서 여러 대의 서버를 동작시키기 위해 필요한 주소 → 프로그램이 실행 될 때마다 컴퓨터가 자동으로 고유한 포트번호를 지정해 줌 2. 화면에 요소를 랜더링 하는 원리- 우리가 localhost:5173 으로 접속을 하면 리액트는 index.html 파일을 브라우저에 보여준다. index.html main.jsxcreateRoot(document.getElementById('root')).render( ,) index.html 에 연결 된 스크립트파일 main.jsx에서 root라는 ..
1. 터미널 열어서 vite 다운 npm create vite@latest 2. 라이브러리 설치하기pakage.json 의 dependencies와 devDependencies 을 기반으로 라이브러리를 별도 설치 해 줘야 함터미널 열기 : 커멘드 + jnpm install혹은npm i 혹시 위와 같은 에러가 난다면 현재 위치를 잘 확인하자 cd 로 selection04 경로로 들어가서 npm install을 해줘야한다 3. 설치 파일의 용도 1. public 폴더이미지 파일, 폰트, 영상 같은 파일들을 저장하는 곳 2. src 폴더실제로 작성하게 될 코드를 보관하는 곳 2-1 src - assets - .jsx리액트 코드가 작성 되는 곳 2-3 src - assets - React.svg이미지, 폴더..
1. 컴포넌트를 기반으로 UI를 표현- 중복코드 제거의 장점이 있음.- 유지보수 용이 2. 화면 업데이트 구현이 쉬움- 선언형 프로그래밍 방식 (목적만 간결히 명시하는 방법)- 컴포넌트의 State 변수의 값에 따라 랜더링 결과가 달라지기 때문에 업데이트 구현이 쉬움 3. 화면 업데이트가 빠르게 처리 됨- DOM을 한번에 모아서 처리
https://www.npmjs.com/ npm | HomeBring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Javawww.npmjs.com 1. random color 라이브러리 설치하기 검색창에 random color 검색 후 오른쪽 Install 을 위한 명령어를 vscode에서 입력 2. 라이브러리 ..