hehehe

npm WARN old lockfile 낮은 버전의 npm으로 package-lock.json 파일이 만들어져서 일어나는 경고이다. lockfileVersion을 2로 변경해주면 된다.

% 부모의 크기를 100%로 잡고 값을 할당한다. px 각 디바이스마다 해상도가 다른 것을 고려해야 한다. vw, vh 사용자 화면의 크기를 파악하여 100으로 나누게 된다. vw는 사용자 디스플레이스의 넓이를 100으로 한 값이며, vh는 사용자 디스플레이스의 높이를 100으로 한 값이다. em, rem 폰트 사이즈 크기를 1로 기준하여 사용하는 크기이다. em은 부모의 폰트 사이즈를 기준으로 하고, rem은 html 최상위 요소의 폰트 사이즈를 기준으로 한다.

useState useState는 현재의 state값과 이 값을 업데이트하는 함수를 쌍으로 제공하며, 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있다. 하나의 컴포넌트 내에서 State Hook을 여러 개 사용할 수 있다. function Example() { const [count,setCount]=useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } useEffect useEffect는 함수 컴포넌트 내에서 side effects를 수행할 수 있게 해준다. React는 DOM을 바꾼 후 effect 함수를 실행하고, 기본적으로 매 렌더링 이후 effect를 실행한다. Effect는 컴포넌트 안에 선언되..

getServerSideProps sever-side rendering 함수를 내보내면 next.js는 반환된 데이터를 사용하여 각 요청에서 페이지를 미리 렌더링할 수 있다. export async function getServerSideProps(context){ return { props:{}, } } 렌더링 유형에 관계없이 props 모두 페이지 구성요소로 전달되며 초기 HTML로 볼 수 있다. 서버 측에서만 실행되고 브라우저에서는 실행되지 않으며, JSON을 반환한다. 데이터 가져오기 아래 코드는 데이터를 가져와서 결과를 미리 렌더링하는 형태이다. function Page({data}){ // rendering data } export async function getServerSideProps..

padding 요소의 안쪽 여백 영역 설정 .logo { padding-left: 70px; padding-right: 50px; padding-top: 30px; padding-bottom: 20px; } .logo { padding : 30px 50px 20px 70px; } /* 네 면 모두 적용 */ padding : 1em; /* 세로방향, 가로방향 */ padding : 5px 10px; /* 위, 가로방향, 아래 */ padding : 5px 0px 10px; /* 위, 오른쪽, 아래, 왼쪽 */ padding : 1em 0px 5px 10px;

rendering 서버로부터 요청해서 받은 내용을 브라우저 화면에 보여주는 것이다. Client Side Rendering(CSR) 클라이언트인 브라우저가 자바스크립트 코드를 요청하여 사용자가 보는 UI를 만든다. HTML 문서를 요청하는 것이 아니라 자바스크립트가 모든 UI를 생성한다. 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다. ex) React Pre-rendering 서버에서 필요한 모든 데이터를 가져와 HTML 파일을 생성한다. 사용자가 페이지를 요청하면 완성된 HTML을 얻게 된다. ex) Nextjs

next/link client-side 전환은 link 컴포넌트를 이용해 가능하다. - pages/index.js - pages/about.js a 태그를 사용하면 브라우저가 다른 페이지로 보내기 위해 전체 페이지를 새로고침 한다. link 컴포넌트를 사용하면 속도가 빠르며, 웹사이트를 새로고침 할 필요가 없다. import Link from 'next/link'; function Home(){ return ( Home About ) } next/image img 태그를 대신하며, 내부, 외부 경로를 가져올 수 있다. width, height 속성을 설정해주어야 한다. import Image from 'next/image'; function Home(){ return ( ) } next/script im..

library 개발자가 만든 클래스에서 호출하여 사용 코드에서 라이브러리를 불러와서 사용 framework 프로그래머가 완성시키는 작업 나의 코드를 호출하는 것 vs 제어 흐름에 대한 주도성이 어디에 있느냐 라이브러리는 라이브러리를 가져다 사용하고 호출하는 측에서 사용자에게 주도성이 있으며, 프레임워크는 틀 안에 제어 흐름에 대한 주도성이 내포되어 있다. 라이브러리를 사용하는 코드는 흐름을 직접 제어하며, 능동적으로 라이브러리를 사용한다. 프레임워크는 흐름을 주도하는 중에 개발자가 만든 코드를 사용하도록 만드는 방식으로 제어의 역전 개념이 적용되어 있다. 코드는 프레임워크가 짜놓은 틀에서 수동적으로 동작한다.

asc, desc 데이터를 오름차순(asc), 내림차순(desc)으로 정렬시킬 때 사용한다. default 값은 오름차순으로 생략이 가능하다. 오름차순 : 작은 값부터 큰 값 내림차순 : 큰 값부터 작은 값 예제 : select [컬럼] from [테이블] order by [컬럼] [asc | desc] 정수 컬럼의 수를 확인할 수 있다. 각 컬럼의 오름차순 기준으로 정렬한다. 예제 : select [컬럼] from [테이블] order by [숫자]

설명 XML에서 XPath 표현식에 일치하는 데이터를 추출하여 반환 extractvalue(xml_frag, xpath_expr) 두번째 인수에 유효하지 않은 XPath 표현식이 사용된다면 오류 발생 ERROR 1105 (HY000): XPATH syntax error: '[xpath_expr 인수값]') 인수 xml_frag : XML 마크업 xpath_expr : XPath 식으로 지정 error based injection 두번째 인수에 임의의 SQL 쿼리를 지정했을 때 이 쿼리의 실행결과가 오류 메시지에 포함되어 출력된다. 이 점을 이용해 error based injection 수행이 가능하다. 두번째 인수가 항상 유효하지 않은 XPath 표현식이 되도록 하기 위해 concat 함수를 이용해 콜론..