본문 바로가기

LearningJavaScript

[SQL] Schema & Query Design To do: 1. 데이터 간 다양한 관계 2. 데이터 간 관계를 기술하는 SQL 익히기 3. 합리적이고 효율적인 방법으로 데이터베이스 구성하기 4. 데이터베이스에서 관련 정보를 찾기 위한 SQL 쿼리 작성 방법 Schema 데이터베이스에서 데이터가 구성되는 방식과 서로 다른 entity간의 관계에 대한 설명, 즉, 데이터베이스의 청사진과 같다. entity: 테이블로 표현되는 데이터의 단위 field: 각 entity에는 해당 엔티티의 특성을 설명하는 fields가 있다. 테이블/행렬의 열(coloumn)에 해당된다. entity의 관계 일대 다(one-to-many)인 경우 1인 entity의 id no.를 이용해 다인 테이블에 적용시키면 보다 효율적이다. 다:다인 경우 join table을 이용해, .. 더보기
[SQL] Getting Started SQL Structured Query Language의 약자로 데이터베이스용 프로그래밍 언어인 SQL query를 데이터베이스에 보내 원하는 데이터를 뽑아올 수 있다. 지금까지는 in-memory와 file I/O를 사용해왔지만, 둘 다 한계점이 있었다. 먼저, 일반적으로 서버보다 클라이언트에 저장하게되는 in-memory의 경우, 데이터가 저장된 서버 혹은 클라이언트를 끄면 데이터가 사라지는 큰 단점이 있었다. 다음으로, 서버에 서버 파일시스템이 저장되는 file I/O의 경우, 원하는 데이터만 가져올 수가 없기때문에, 파일을 통째로 가져온 뒤, 서버에서 부담이 되는 필터링 처리가 필요했다. 따라서, 필터링 외에도 file I/O로 구현이 힘든 데이터 관리를 위해 필요한 여러 기능을 갖고 있는 데이터에.. 더보기
[React] 왜 Ajax요청은 componentDidMount에서 해야할까? 리액트 공식문서에서 보면 더보기
[React] 컴포넌트 렌더링할 때 왜 index 대신 고유 key를 쓸까? 사용하려는 데이터가 배열로 있는 경우, map을 이용해 각 데이터를 렌더 시키는데, 이 때 각각 렌더링 되는 html tag에 고유한 "key"를 줘야한다. 안할 경우 아래같은 에러가 발생하기 때문이다. 왜 key를 map함수의 두 번째 인자로 받을 수 있는 index값이 아닌 배열 요소가 고유한 경우, 그 요소 이름을 사용하며 굳이 unique 한 문자열인 값을 줘야할까??? .map() 사용 예시 function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => {number} ); return ( {listItems} ); } const numbers = [1, 2, 3, 4, 5];.. 더보기
[React] 정복하기: 2번째 노트 React란? 리액트는 페이스북 엔지니어들이 개발한 자바스크립트 라이브러리다. Why React? Fast: 빠른 반응 속도 Modular: 컴포넌트로 쪼개면 유지보수면에서 훨씬 용이하다 Scalable Flexible JSX란? JSX는 JavaScript를 확장한 문법이다. 예 const element = Hello, world!; 자바스크립트 element변수에 선언된 HTML 태그처럼 보이는 Hello, world!는 문자열도 HTML도 아닌, JSX element다. 모양은 HTML과 같지만, .html파일이 아닌, .js파일에서 볼 수 있다. 리액트는 JSX를 사용해 분리되었던 HTML의 마크업과 JavaScript의 로직을 "component"란 유닛에 통합하여 한 번에 사용할 수 있다. 사.. 더보기
오늘의 참고 www.daleseo.com/js-module-require/ 자바스크립트 CommonJS 모듈 내보내기/불러오기 (require) Engineering Blog by Dale Seo www.daleseo.com 이벤트루프 연습 latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dCh.. 더보기
구조분해할당 더보기
Code injection: XSS공격 Code injection공격법중 하나가 xss공격(html 스크립트 삽입)- > ~~상황을 이용해서 악성스크립트(팝업 띄우기)를 주입 방어 방법: 1. 태그 문자열 교체! (sanitizer) : &gt 2. innerHTML대신 textContent 다른 출처(스킴/프로토콜, 도메인/포트)에서 들어오는 요청을 ... 내가 원하는 메소드 크로스 오리진 요청을 받거나 막을 수 있다 오늘의 궁금점: 1. http와 https는 same origin이 아니고(스킴이 달라서), http와 https는 다른 프로토콜이면 http요청과 https요청은 같지만, ...가 다르다고... ㅋㅋㅋㅋ 듣고 까먹.. jeong-pro.tistory.com/89 developer.mozilla.org/ko/docs/Web/H.. 더보기