css에서 길이 단위가 여러가지가 있는데, 하나씩 살펴보자 !절대 단위, 상대 단위절대 단위항상 고정된 길이를 나타내는 단위이다.px, cm, mm 등이 있지만 px을 사용한다. 상대 단위고정되지 않고 어떤 기준에 따라 유동적으로 바뀌는 길이를 나타내는 단위이다.em, rem, vw, vh 등이 있다.px- 절대값을 사용하는 단위1px은 항상 고정된 물리적 크기에 해당한다.em, remem (element)- 부모 요소의 font-size 기준같은 요소 내에 설정된 폰트 크기 값이 있을 때는 해당 요소의 font-size가 기준이 된다.html { font-size: 16px;}div { font-size: 20px; width: 10em; /* 200px */} rem (root element)..
ES6 문법 중 정말 많이 사용하는 문법들 위주로 정리했다. let, const keywordlet, const, var 키워드에 대해서는 따로 자세하게 정리할 예정이다.간단하게 살펴만 보자 var : 재정의와 재선언이 모두 가능하다.let : 재정의는 가능하나, 재선언은 불가능하다.const : 재정의와 재선언 모두 불가능하다.// varvar a = 2;a = 5;var a = 7;console.log(a); // 7// letlet x = 1;// let x = 2; // SyntaxError: Identifier 'x' has already been declared{ let x = 4; console.log(x); // 4}console.log(x); // 1// const{ const y ..
24기 활동이 끝난 시점이 되어서야 23기 활동 후기를 씁니당.. 회고라고 하기엔 조금 늦은 감이 있지만,조금이나마 기억에 남아있을 때 첫 회고를 남겨봅니다! 두근두근하며 넥스터즈 23기 지원을 완료했던 날.웹 개발에 발을 들인지 그리 오래되지 않았던 터라, 큰 기대가 없었습니당.. 교내에서 프로젝트를 진행해도 항상 같은 사람들과 했어요.진행하는데 있어 점점 트러블도 줄어 좋은 사람들이었지만 새로운 경험을 하고싶은 마음이 정말 컸던 것 같습니다.디자이너가 없었던 것도 큰 계기였던 것 같네요. 정말 열심히 지원서 쓰고 얼렁뚱땅 만든 포폴도 제출했지만 큰 기대가 없었어서 너무 놀랐어요.. 대외 활동 첫 면접이라 면접 준비도 정말 열심히 했어요. 프론트 후기가 별로 없었어서 아쉬웠던 기억이 있습니다. 열심히 ..
vscode를 껐다 켰더니 갑자기 모든 파일에서 오류를 뱉어내기 시작했다. import React from 'react' 생략해도 되는 이 import문을 다 적어 달란다. 이미 파일 갯수가 몇십개인데 그런 미친짓은 안해야지. 원래 됐으니까 방법이 있을거라 확신하고 찾아봤더니 react가 17버전알 때 발생하는 오류로, tsconfig.json 파일에서 { ... "jsx": "react-jsx", ... } 이렇게 설정하면 괜찮아 진다고 했다. 그렇지만 tsconfig.json 파일엔 이미 아래처럼 설정이 되어있었다. 심지어 나는 react 버전이 18이었던 것.. { "compilerOptions": { "target": "ES5", "lib": ["dom", "ES2015", "ES2016", "E..
중첩 라우팅 중첩 라우팅이란 라우팅 맵핑을 최상위 컴포넌트만이 아니라 여러 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법이다. 웹 페이지의 헤더는 계속 고정해두면 되기 때문에 아래처럼 쉽게 구현할 수 있다. 하지만 다음과 같은 상황에서는 어떨까? 메인페이지와 마이페이지 마이페이지에서만 사이드 바를 띄우고 싶음 사이드 바에서 항목을 클릭하면 마이페이지 내부에서 또 다시 라우팅을 하고 싶음 사이드 바는 고정 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 파일이 하나 생기는데, 여기서 자신이 원하는 대로 설정을 하면 된다...
