본문 바로가기

분류 전체보기

 (112)
[Next.js] next/Link 사용하기 (공식문서 내용 정리) next/Link 사용하기 1.pages의 하위 디렉토리가 아래와 같을때 pages/index.js pages/about.js pages/blog/[slug].js 2. import 후 import Link from 'next/link' 3. 아래의 형태로 사용 Home About Us Blog Post Link의 props정리 필수값 1. href 이동할 경로 혹은 URL ... 옵션값 1. as 이동할 경로 혹은 URL ... 2. passHref 기본값 : false next Link에서 하위 컴포넌트로 href 속성을 전달해주는 역할 A태그 // 자식태그가 styled component a태그인 경우 참고 : https://f-dever-error-log.tistory.com/56 위처럼 pass..
[Next.js] next/router 사용하기 (공식문서 내용 정리) next/router 사용하기 router 객체에 접근하기 위해서 useRouter를 사용한다 1. import 후 import { useRouter } from 'next/router' 2. 아래의 형태로 사용 const router = useRouter() 아래처럼 console에서 router 객체에 대한 정보를 얻을 수 있다. router object 1. asPath - basePath이나 locale이 포함되지 않은 path ex ) 'https://dlquff-byeol4001.vercel.app/501da229-9915-4264-9d37-6783545ee553' 의 경우 asPath = '/501da229-9915-4264-9d37-6783545ee553' 2. basePath - 활성화 ..
실행 컨텍스트(Execution Context)의 정의와 종류 1. GEC Global Execution Context 글로벌로 자바스크립트가 실행될때의 전역 실행 환경 콜스택에 제일 먼저 쌓이고 가장 나중에 제거된다. 자바스크립트가 싱글스레드이기 때문에 무조건 한개만 존재할 수 있다. 2. FEC Functional Execution Context 함수가 호출되고 실행될때 그 호출된, 실행되고있는 함수에 대해서 실행되고 있는 환경 함수 내부의 this와 함수가 필요로하는 지역변수들을 포함한다. 함수가 실행될때 생성되었다가 함수가 종료되면 제거된다. 3.Eval evel함수 실행시 생성되는 컨텍스트 (잘 안쓴다고 하기도 해서 따로 정리하진않음) ✔️ 참고 https://www.youtube.com/watch?v=AbNc8_poxu4
[Browser Rendering] - 3. 브라우저 렌더링 최적화 위의 내용을 보고 정리한 내용입니다..! Layer 웹페이지를 렌더링 하기 위해 필요한 이미지 단위 요소 레이어를 배치, 합성 하여 최종적인 웹페이지를 표현한다 페인트 단계에서 메인 스레드는 하나의 페이지를 여러 층의 레이어로 분리하고 그 레이어들을 어떠한 순서로 그릴지 결정한다. 이 과정에서, 레이아웃 트리를 기반으로 레이어 트리가 생성된다. 이렇게 레이어 트리가 생성되면 모든 시각적 부분을 그리기 위해 각 레이어의 픽셀을 채우게 된다. 즉, 웹 브라우저 화면에 있을때 기존의 렌더링 프로세스와 별개로 또 하나의 화면이라고 부를수 있는것이 Layer이다. 렌더링 과정 1. 스크립트가 들어오면 2. cpu에서 recalculate style이라고 스타일을 다시 계산함 3. 레이아웃 과정이 일어남 ( 브라우..
[Browser Rendering] - 2. 브라우저 렌더링 순서 ( webkit의 동작과정 ) 위 강의를 보고 정리한 내용입니다. URL과 URI URL은 URI에 포함된다. URI는 네트워크 상에서 자원을 식별하기 위한 문자열(식별자까지 포함) URL은 네트워크 상의 자원의 위치를 나타내는 주소 결론적으로 요약하자면, URL과 URN은 URI의 종류이다. 그렇기에 모든 URL은 URI이고, 또한 모든 URN은 URI이다. URL, URN 그리고 URI GraphQL과 RESTful API 정리하다가 URL, URN 그리고 URI의 차이점에 대해서 알고 넘어가야 할것 같아서 작성하는 글이다. 결론부터 말하자면 아래와같다. 자원의 식별자(URI), 위치(URL), 이름(URN) URI(Uniform.. im-designloper.tistory.com 렌더링 엔진 URI를 통해 요청을 받아서 해당하는..
[Next.js] router.query가 빈값일때! ( with.useEffect ) 오늘의 문제는 Next에서 useEffect내에서 router.query를 console에 찍어봤는데 자꾸 빈 배열이 반환되는 경우! 화면에는 제대로 나오는데 console에 찍어보면 자꾸 빈 객체가 보이는 문제였다.. // ❌ ❌ ❌ ❌ ❌ export default function App() { const router = useRouter(); const queries = router.query; useEffect(() => { console.log(queries,'{} 빈 객체가 찍힘') }, []) return ( {queries} ) } Why? 정적 파일 최적화(Automatic Static Optimization)에 의해 정적으로 최적화된 페이지는 루트 매개 변수가 제공되지 않아서, que..
[Browser Rendering] - 1. 브라우저 구성 요소, 렌더링 과정 위의 강의를 보면서 이해한 내용을 토대로 정리한 내용입니다 : ) 사실 글로 보는건 훗날 다시 보기 위함이기 때문에 정확한 이해를 위해 영상 보시는걸 추천드립니다 😁 Browser Elements 1. 사용자 인터페이스 페이지를 보여주는 창 외에 사용자가 컨트롤 할 수 있는 부분을 의미 2. 브라우저 엔진 1. 사용자 인터페이스와 렌더링 엔진 사이에서 동작 사용자가 입력한 URL의 URI값이나 사용자 인터페이서에서 입력된 값을 렌더링 엔진에게 전달하는 역할 2. 자료 저장소로 이동하는 역할 3. 렌더링 엔진 ✨ 사용자가 URI를 입력했을때 그에 해당하는 데이터를 파서를 통해 html, css를 파싱한 후 렌더링 한다. 4. 통신 렌더링 엔진으로부터 http요청 명령을 받아 서버에게 요청하고, 응답을 받아..
a태그의 target="_blank"와 rel="noopener noreferrer" 코드 작성하다가 발견한 rel="noopener noreferrer"에 대해서 정리해봅니다. target="_blank"을 사용하는 경우 보안상 취약점이 발견되서 피싱 공격을 피하기 위해 사용한다고 하는데, 아래에 쭉 정리해 두었습니다 : ) 1. target="_blank" a태그 , react나 vue에서 Link나 router-link로 사용하는 경우, 이동할 주소나 화면을 새창으로 열어주는 기능을 한다. 참고로, 웹 접근성을 위해 target="_blank"을 사용하는 경우 title="새창으로 열기" 등으로 새창으로 열린다는 부분을 추가해 주는것이 좋다고 한다. 2. Tabnabbing 피싱 공격 위의 코드를 사용해 A라는 메인 페이지에서 B라는 새로운 페이지를 열었을때, 서브 페이지인 B에서 ..
[ React ] Element, Component, Instance 개념정리 ( with - React가 DOM Tree를 파악하는 방법 ) 영상을 보고 정리한 글입니다! ( https://www.youtube.com/watch?v=QSJUTS9PScY ) 기존 UI model(OOP)의 문제점 아래 코드를 참고해 설명하자면, button의 속성(isSubmitted, buttonText)에 따라 버튼이 화면에 그려지거나( this.button.render() ) 제거( this.button.destroy() )되는 등의 관리가 필요하다. 각 컴포넌트가 많아지면, 버튼 같은 instance도 많아지고, 이 instance를 조작하는 코드를 일일히 조작해주어야 하는 부분도 많아져 관리할 코드가 늘어나고, 이렇게 되면 부모 컴포넌트와 자식 컴포넌트의 분리가 어려워진다. class Form extends TraditionalObjectOriente..
[ React ] React Hooks 정리 6 - useReducer useReducer state를 업데이트 할때 사용 dispatch(state를 업데이트 하기 위한 요청) action(요청내용)을 담아서 reducer에게 전달하면 state를 업데이트 시킨다. useReducer로 생성한 state는 useReducer에 인자로 전달된 reducer에 의해서만 값이 변경된다. reducer로 sate를 변경하는 과정 1. dispatch가 만들어준 useReducer함수에 action이라는 인자를 넣어서 reducer에게 전달해주면 2. reducer가 호출되어 reducer의 두번째 인자인 action으로 전달되고 그 action에서 값 변경후 return 한 값이 3. useReducer로 생성한 state의 값을 변경한다. action은 object로 전달하는데..

티스토리툴바