분류 전체보기

[React] Hook

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는 컴포넌트 안에 선언되..

[Next.js] getServerSideProps

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..

[Next.js] client side rendering vs pre-rendering

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

[Next.js] component

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 vs framework

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

programming/web 2023.01.31

[LOS] green_dragon

문제 https://los.rubiya.kr/chall/green_dragon_74d944f888fd3f9cf76e4e230e78c45b.php https://los.rubiya.kr/chall/green_dragon_74d944f888fd3f9cf76e4e230e78c45b.php los.rubiya.kr 문제풀이 select id,pw from prob_green_dragon where id='\' and pw='or 1=1%23' 백슬래시를 이용해 따옴표를 문자처리하고, 그 뒤 문장을 참으로 만들어준다. 올바른 구문이지만 결과가 나오지 않는다. 선택된 id, pw가 없기 때문에 union 구문을 이용해야 한다. select id,pw from prob_green_dragon where id='\' ..

write-up(web)/los 2023.01.28

order by

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

programming/sql 2023.01.25