React Router Dom V6 : nested routes

Reac Router Dom가 V6로 업그레이드 되면서 중첩 라우팅 기능이 강화되었다. 공식 문서에서는 nested routes라고 설명하는 중첩 라우팅은 동일한 레이아웃을 공유하는 여러 페이지에 한번의 레이아웃 호출로 간단하게 레이아웃을 공유하게 해준다. 위 홈페이지는 패스트캠퍼스에서 미니프로젝트로 진행한 해커뉴스 페이지이다. 3개의 페이지를 보면 헤더와 네비게이션을 동일하게 가져가는 것을 볼 수 있다. 만약 중첩라우팅을 사용하지 않는다면 위 3개의 라우트에 모두 각각 헤더와 네비게이션을 따로 설정해줘야 할 것이다. 예시로 들어보면 아래와 같은 구조가 나올 것이다. // simplify Router 구조를 보면 Route들이 모두 안에 들어간 모습임을 볼 수 있다. 해당라우트가 상위 라우트이고 그 안..

React Router Dom V6 변경점-NavLink

리액트 라우터의 Link와 NavLink는 둘 다 새로고침 없이 URL을 변경해주는 역할을 한다. 그 중 NavLink는 해당하는 링크에서 스타일과 같은 특성을 바꿀 수 있게 해준다. 예를 들면 홈 화면에서는 이런 메뉴바가 News를 선택하면 그 부분의 스타일만 변경된다. 이런 NavLink도 리액트 라우터 돔이 V5 => V6로 업그레이드 되면서 변경점이 있다. 1. activeClassName, activeStyle 삭제 activeClassName과 activeStyle은 해당하는 NavLink가 선택되었을 때 알아서 클래스명을 추가하거나 스타일을 활성화하는 기능이다. 하지만 리액트 라우터가 V6로 올라오면서 삭제되었다. 따라서 다른 방식으로 클래스를 추가해 주어야한다. className // V5..

React Router Dom V6 변경점-Switch, Route

 리액트 라우터 돔이 V5에서 V6로 업그레이드 되면서 여러 변경점들이 생겼다. 이번에 새로 진행하는 프로젝트부터 V6를 사용하고 싶어서 큰 변경점들을 기록하려고 한다. 1. → 기존의 Switch가 Routes로 변경되었다. // V5 function App() { return ( ); } // V6 // Switch 대신 Routes를 사용하는 모습 function App() { return ( ); } 2. exact 옵션이 기본값이 되었다. // V5 // V6 // exact를 사용하지 않아도 된다. 따라서 exact를 제외하기 위해서는 주소에 *를 첨가해 주어야한다. // V5 // V6 // exact를 사용하지 않은 대신 users 뒤에 *를 붙여서 users 다음 어떤 경로가 들어와도 ..

This

자바스크립트에는 this라는 키워드가 존재한다. 또한 이 this 키워드가 다른 언어와는 다르게 동작을 해서 잘 알아두어야 한다. node.js와 브라우저의 js는 서로 다른 의미의 this를 가지며, 여기선 브라우저의 this를 알아볼 것이다. 가장 포괄적인 설명은 this는 호출한 객체를 의미한다는 것이다. 1. 전역 객체 브라우저에서 window객체는 브라우저에서 시행되는 가장 큰 객체로 존재한다. 따라서 달리 참고할 대상이 없는 this는 모두 window를 의미한다. // 전역에서 사용되는 this는 전역(global)과 같다. var a = 27; console.log(this.a); // OUTPUT: 27 function sum() { console.log(this.a + this.b + ..

Hoisting

JavaScript는 호이스팅이란 아주 유명한 특징이 있다. 특히 변수 var의 호이스팅은 장점도 있겠으나 여러 문제를 일으켰고, 이를 방지하기 위해 let과 const라는 새로운 변수가 생겼다. 그 후로는 let과 const를 사용하면서 호이스팅의 문제가 줄어들었지만, JS의 특별한 작동 방법을 알기 위해서라도 호이스팅을 알아볼 필요가 있다. 변수의 Hoisting 변수의 호이스팅은 변수의 선언이 발생한 스코프 최상단으로 이동하는 듯한 현상이다. 이는 자바스크립트를 실행하면 제일 먼저 코드 안의 모든 변수를 선언하는 과정을 거치기 때문이다. 변수는 결국 메모리 주소를 의미한다. var a = 10; 의 뜻은 a에 해당하는 메모리 주소에 10이라는 숫자를 넣어놓는다는 의미이다. 메모리 주소는 외우기가 극..

css : 인접 형제 결합자 +

종종 메뉴나 목록을 만들 때, 그 사이 구분선을 넣으면서 어쩔 수 없이 :last-child, :first-child를 쓸 일이 있다. 아래와 같은 예를 보자. 1 2 3 4 5 li { width: 50px; height: 20px; display: inline-block; background-color: cornflowerblue; text-align: center; margin: 0 10px; position: relative; } 만약 위 5개의 li 사이에 구분자 '|' 를 넣고 싶다고 해보자. li { width: 50px; height: 20px; display: inline-block; background-color: cornflowerblue; text-align: center; marg..

DOM API 란?

DOM은 Document Object Model의 약자이다. 프론트엔드에서 이는 HTML에 있는 요소들을 트리 구조로 다루는 모델을 의미한다. HTML 요소들을 DOM으로 접근하면, javascript를 이용해 동적으로 HTML의 내용, 구조, 스타일을 변형시킬 수 있다. DOM에 접근하는 여러 메소드가 있으나 가장 많이 사용되는 것은 querySelector일 것이다. querySelector는 태그, 클래스, 아이디 모두 사용 가능하며 querySelectorAll을 이용해 여러 요소를 한 번에 불러 오는 기능까지 있기 때문에 아주 유용하다. 아래와 같은 HTML이 있다고 해보자. 1 2 3 4 만약 우리가 1번 째 div를 호출하고 텍스트를 바꾸고 싶다면 아래와 같이 할 수 있다. // 호출 let..