중첩 라우팅 중첩 라우팅이란 라우팅 맵핑을 최상위 컴포넌트만이 아니라 여러 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법이다. 웹 페이지의 헤더는 계속 고정해두면 되기 때문에 아래처럼 쉽게 구현할 수 있다. 하지만 다음과 같은 상황에서는 어떨까? 메인페이지와 마이페이지 마이페이지에서만 사이드 바를 띄우고 싶음 사이드 바에서 항목을 클릭하면 마이페이지 내부에서 또 다시 라우팅을 하고 싶음 사이드 바는 고정 react-router-dom에서 Outlet 기능을 제공하는데, 우리는 이를 사용해서 원하는 대로 구현할 수 있다. 공식문서에서 설명하는 것을 토대로 기본 예제를 만들면서 알아보자. 우선 Router를 아래와 같이 설정해준다. const AppRouter = () => { return ( ); }; ..
항상 MUI만 사용해왔던지라 tailwindcss는 처음 사용해보는데, 앞으로도 많이 사용할 것 같아 초기 설치단계부터 적용까지 정리해두면 좋을 것 같다. Tailwindcss 설치 tailwind와 필요한 의존성을 모두 설치한다. yarn add -D tailwindcss postcss autoprefixer Tailwindcss 설정 npx tailwindcss init -p 이를 실행하면 자동으로 postcss.config.js와 tailwind.config.js 파일이 생성된다. postcss.config.js는 그대로 두고, tailwind.config.js 파일을 아래와 같이 수정한다. /** @type {import('tailwindcss').Config} */ module.exports =..
React 개발 환경 구축은 아래 글을 참고하면 된다. [React] CRA 없이 React 개발 환경 구축하기CRA(Create React App) CRA로 리액트 개발 환경을 구축하는 방법은 여기서 볼 수 있다. 단번에 TypeScript 설정까지 끝낼 수 있는 아주 간편한 방법이다. 이번에는 CRA 없이 개발 환경을 구축해보려 한다. Rearinn-story.tistory.comCRA로 프로젝트를 생성하면 따로 설정할 것 없이 Typescript는 지원되고 eslint도 적용된 부분이 있는데, 나는 CRA를 사용하지 않았기 때문에 eslint, prettier 하나씩 설치 및 설정해보려 한다. Eslint?코딩 스타일 도구이다. tab 설정이나 세미콜론의 여부 등 작은 부분부터 JavaScript ..
CRA(Create React App) CRA로 리액트 개발 환경을 구축하는 방법은 여기서 볼 수 있다. 단번에 TypeScript 설정까지 끝낼 수 있는 아주 간편한 방법이다. 이번에는 CRA 없이 개발 환경을 구축해보려 한다. React 설정 yarn init yarn add react react-dom TypeScript 설정 타입스크립트가 전역으로 설치되어 있다면 tsc --init 을, 해당 프로젝트에만 설치되어 있다면 경로를 직접 명시한다. yarn add -D typescript @types/react @types/react-dom node_modules/.bin/tsc --init init을 하면 tsconfig.json 파일이 하나 생기는데, 여기서 자신이 원하는 대로 설정을 하면 된다...
백준 15650 N과 M (2) 문제 자연수 N과 M이 주어졌을 때, 아래 조건을 만족하는 길이가 M인 수열을 모두 구하는 프로그램을 작성하시오. 1부터 N까지 자연수 중에서 중복 없이 M개를 고른 수열 고른 수열은 오름차순이어야 한다. 입력 첫째 줄에 자연수 N과 M이 주어진다. (1 ≤ M ≤ N ≤ 8) 출력 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해야 한다. N과 M 두번째 문제이다. 첫번째 문제는 여기를 참고하자. 이전 문제와 다른 점은 '오름차순'이라는 것이다. 오름차순이라고 해서 수열을 배열에 담아 sort하거나, 내가 자체적으로 정렬해줄 필요가 없..
HTTP/1이든 HTTP/2이든, HTTP 버전들에 대해 알아보기 전에 그 HTTP가 도대체 무엇인가를 한 번 살펴본 후에 버전들에 대해 자세히 알아보려한다. 😊 아래 글을 번역 및 참고한 것으로, 어색한 부분이 있을 수 있습니당 😊 https://cs.fyi/guide/http-in-depth https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/ HTTP HTTP(HyperText Transfer Protocol)는 WWW(World Wide Web) 기반으로 하이퍼텍스트 링크를 사용해 웹 페이지를 로드하는데 사용된다. HTTP Request HTTP request는 웹 브라우저와 같은 인터넷 통..
FE-Roadmap을 참고해서 공부를 하고있다. 적어도 인터넷이 무엇이고, 어떻게 작동하는지는 알아야 웹 개발을 하든 공부를 할 수 있을 것 같아 처음부터 하나씩 알아보았다. 아래 문서를 번역하면서 작성한 내용이라 다소 어색할 수 있습니다. https://cs.fyi/guide/how-does-internet-work How works? The internet is a network of networks. 네트워크 서로 연결된 컴퓨터나 기기들의 그룹 인터넷은 표준화된 프로토콜을 사용하는데, 이 프로토콜은 장치간 정보 교환 방법을 정의하고 데이터가 안전하게 전송되도록 보장한다. 다른 기기와 시스템들간의 트래픽 전달을 담당하는 상호연결된 라우터라는 것이 인터넷의 핵심이다. 아래 그림을 보자. 유저가 인터넷으..
java로 알고리즘 푸는 나는 너비 우선 탐색을 풀 때 Queue를 사용한다.그런데 왜 Queue를 선언할 때 LinkedList를 사용하는지, 구조적으로 어떤 차이가 있어 LinkedList를 사용하는지 알아보고자 했다. 먼저 ArrayList와 LinkedList 각각에 대해 알아보자.ArrayListArrayList는 중복이 가능하다.ArrayList는 순서가 유지된다. index로 원소를 관리함.ArrayList는 크기가 고정되어있지 않다.동적으로 늘어나는 것이 아니라, 넘치게 되면 내부에서 일정 수만큼 늘려주게 됨.add(E element) 제일 뒤에 원소를 추가한다.index로 원소를 관리하기 때문에 마지막 index의 원소 뒤에 넣기만 하면 된다. -> 빠름!add(int index, E e..
