글쓰는 개발자

tailwindcss를 분석해보면 size 관련 변수들은 rem을 기준으로 되어있다. 예를들어 text-lg 클래스의 정의를 확인해보면 font-size는 --text-lg의 값을 가지고 있고 --text-lg는 1.125rem 이다..text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height));} 반응형 미디어 쿼리부터 border-radius까지 모두 rem 기준으로 되어있다.rem은 최상위 요소의 font-size를 기준으로 계산되는 상대적인 값이다. 보통 HTML 최상위는 16px로 되어있기 때문에 1rem은 16px로 계산해도 무난하다.이렇게 상대값으로 페이지를 구성해두면 브라우저의..

사용자가 웹페이지를 스크롤할때 스르륵 나타나는 애니메이션이 다양한 웹사이트에서 사용되고 있다. React를 사용할때는 페이지가 새로고침이 되어도 스크롤의 위치가 유지되는데 이때문에 현재 위치를 기반으로 걸어둔 애니메이션이 의도치 않게 동작될 때가 많다. window.history.scrollRestoration의 옵션을 manual로 변경하면 페이지를 새로고침 할때마다 스크롤이 맨위로 초기화 되기때문에 위 문제를 해결할 수 있다.useEffect(() => { window.history.scrollRestoration = 'manual';}, []);

1. 기본 개념과 목적구분jQueryReact목적Dom 조작 및 Ajax를 쉽게 하기 위한 유틸리티 라이브러리UI를 컴포넌트 기반으로 구성하고 상태 기반 렌더링 제공철학HTML을 조작하는 방식 중심UI = 상태(state) 라는 철학에 기반 2. DOM 조작 방식구분jQueryReact목적직접 DOM 요소 선택 후 조작Virtual DOM 사용 -> 변경된 부분만 효율적으로 업데이트철학수동으로 DOM 상태 관리상태(state) 변경 -> 자동으로 UI 갱신 3. 구조 및 확장성구분jQueryReact목적명시적 구조 없음 (절차적 코드로 구성)컴포넌트 기반 구조화 가능철학규모가 커지면 코드 복잡도 증가컴포넌트화로 유지 보수 용이 4. 학습 곡선 및 개발 환경구분jQueryReact목적낮음 (간단한 문법..

1. 새 프로젝트를 생성합니다. 2. 배포할 Repository를 선택합니다. 3. Deploy 버튼을 눌러서 배포를 실행합니다. 4. deploy 상태가 표시됩니다. 5. deploy가 완료되면 preview를 확인할수 있습니다. preview 화면을 클릭하면 실제 배포된 사이트로 이동할수 있습니다.

터미널 창에 다음 명령을 입력해 vue cli를 설치합니다.npm install -g @vue/cli VS Code에 vue관련 두개의 extension을 설치합니다.- vue (Official) - vue 3 snippets vue 프로젝트를 생성합니다vue create vue 3를 선택합니다.Vue CLI v5.0.8? Please pick a preset: (Use arrow keys)❯ Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select featuresYan과 Npm 중 선호하는 패키지 매니저를 선택합니다.Pick the package manager to use when installing depen..

next.js 는 폴더 구조를 따라 라우터를 구성할 수 있는 app router라는 기능을 제공합니다.app 폴더 내에 dashboard 라는 폴더내에 page.js 혹은 page.tsx 파일을 위치시키면 /dashboard라는 주소로 해당 페이지에 접근할 수 있습니다. App Router 기능을 잘 활용하여 네비게이션 바를 구성합니다. 위 네비게이션 바 메뉴의 구성에 맞춰 폴더와 페이지, 스타일 파일을 구성합니다. community, course, faq, review 폴더를 생성하고 page.tsx와 style.module.css 를 각각 만들었습니다.components 폴더에 네비게이션 바를 위한 index.tsx를 만들고 네비게이션은 모든 페이지에 나타날 수 있도록 layout.tsx에 포함해 줍..

CSS는 다음과 같이 클래스명에 매핑시켜서 사용한다.// .tsximport './style.css'// .css.main { display: flex;} 이는 정석적이고 쉽고 간편한 CSS의 사용법이다.그런데 리액트같이 컴포넌트형 구조를 가지고 있다면 클래스 명의 충돌이 일어날수 있다. button-text 이라는 이름의 컴포넌트가 존재한다고 할때, 다른 페이지에 같은 이름의 button-text라는 클래스명을 가진 엘리먼트가 존재한다면, 여기서 css의 충돌이 일어나게 된다. 재사용을 위해 컴포넌트화 한 클래스의 경우 더이상 그 내부를 신경쓰지 않기 때문에 중복되는 이름이 발생활 확률이 높다.이를 방지하기 위해서 컴포넌트형 클래스 명 앞이나 뒤에 추가적인 이름을 붙여서 이러한 충돌을 피할수 있다.하지..

터미널에 nextjs 프로젝트를 생성하기 위한 명령어를 입력합니다.npx create-next-app@latest 넥스트 js 프로젝트 세팅을 위한 옵션 사용여부를 각각 체크해줍니다.What is your project named? my-appWould you like to use TypeScript? No / YesWould you like to use ESLint? No / YesWould you like to use Tailwind CSS? No / YesWould you like your code inside a `src/` directory? No / YesWould you like to use App Router? (recommended) No / YesWould you like to use ..