Dev ; jenna

[Portfolio 포트폴리오] 리액트에서 heroicons 설치 react heroicons install with yarn

heroicons installyarn add @heroicons/react 사용법import { BeakerIcon } from '@heroicons/react/24/solid'function MyComponent() { return ( ... )}

[Portfolio 포트폴리오] 리액트에서 외부링크 설정 react external link setting with yarn

a 태그에 외부링크 설정하기https://developer-talk.tistory.com/862 [React]새로운 탭 띄우는 방법새로운 탭 띄우는 방법 이번 포스팅은 React에서 외부 링크를 띄우는 방법을 소개합니다. a 태그를 활용하여 새로운 탭 띄우기 첫 번째 방법으로 HTML의 기본 요소인 태그를 사용할 수 있습니다. 태developer-talk.tistory.com

[사이드 프로젝트 Side Project] 리액트에서 여러가지 레이아웃 설정 react multiple layout setting

페이지마다 레이아웃을 다르게 설정 https://www.crocus.co.kr/1814 [React] outlet을 이용한 쉬운 레이아웃 교체🔰 리액트 라우터 v6 버전에서 중첩 라우팅을 이용하면 부모 레이아웃은 그대로 두고 자식 레이아웃만 쉽게 교체할 수 있다. ✅ 중첩 라우팅 v6에서 중첩 라우팅이 컴포넌트의 children과 같은 개www.crocus.co.krhttps://hyebeen2658.tistory.com/19 리액트 라우터 outlet 사용하여 중첩된 레이아웃 구성React Router v6에서 도입된 새로운 개념으로, 중첩된 라우팅 구조를 구성할 수 있도록 해주는 컴포넌트입니다. Outlet 컴포넌트는 라우팅 컴포넌트 내부에서 사용되며, 중첩된 자식 라우트가 렌더링hyebeen265..

[Portfolio 포트폴리오] 리액트에서 스와이퍼 설치 react swiper.js install with yarn

설치yarn add swiper swiper 을 사용하기 위해 importimport { Swiper, SwiperSlide } from 'swiper/react';import 'swiper/css'; 네비게이션, 버튼 등을 사용하려면 모듈 추가import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';import 'swiper/css/navigation';import 'swiper/css/pagination';import 'swiper/css/scrollbar'; return

[Portfolio 포트폴리오] 리액트에서 타입스크립트 설치 react typescript install with yarn

프로젝트 생성 시 typescript 로 설치하는 법yarn create react-app my-app --template typescript// ORnpx create-react-app my-app --template typescript 기존 프로젝트에 typescript 를 설치하는 법yarn add typescript @types/node @types/react @types/react-dom @types/jest// ORnpm install --save typescript @types/node @types/react @types/react-dom @types/jest 기존 프로젝트에 추가했을 경우tsconfig.js 파일에 설정을 추가해야함 이 때, tsconfig.js 파일이 없다면 생성해준다np..

[Portfolio 포트폴리오] 리액트에서 tailwindcss 설치 react tailwindcss install with yarn

yarn으로 tailwindcss installyarn add -D tailwindcss postcss autoprefixer tailwind.config.js 파일 생성yarn tailwind init -p tailwind.config.js 파일에module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [],} [src] 하위 파일 중 확장자가 ".js", ".jsx", ".ts", ".tsx" 인 파일을 대상으로 함 사용할 CSS 파일에 삽입@tailwind base;@tailwind components;@tailwind utilities; CSS 파일이 여러개여도선..

[Portfolio 포트폴리오] 리액트 설치 react install with yarn

reactyarn yarn 을 사용하기 위해 설치 먼저 실행npm install -g yarn 설치 후 버전 확인yarn --version yarn 으로 create-react-app 설치하기yarn global add create-react-app yarn 으로 내 프로젝트 설치하기(create-react-app 프로젝트명yarn create-react-app: command not found에러 발생)https://create-react-app.dev/docs/getting-started/ Getting Started | Create React AppCreate React App is an officially supported way to create single-page Reactcreate-rea..

[제로베이스 zero-base] 프론트엔드 스쿨 11기 수강 - HTML/CSS

안녕하세요, janie 입니다😎 첫번째 과제인 HTML/CSS 를 드디어 마무리 했습니다 ✨ ✔️ HTML/CSS 를 공부하면서 느낀 점 웹 퍼블리셔로 종사하고 있지만 역시나 계속해서 배워야 한다는 걸 한번 더 깨닫게 되었어요 공부의 끝은 없다,, 🙄 알고는 있지만 제대로 활용할 수 없었던 flexbox 와 grid 레이아웃에 대해서 강사님의 설명과 예제 실습을 통해서 습득할 수 있어서 유용했던 시간이였습니다 ✔️ HTML/CSS 를 공부하면서 어려웠던 개념과 이유 공공기관 프로젝트를 진행하다보면 웹접근성 검사와 웹표준 검사에서 꼭 이슈가 발생하더라구요,, 😵 특히 웹접근성 같은 경우에는 차별없이 동일하게 정보 전달이 되어야하므로 고려해야 할 사항이 많아서 비교적 어렵다고 느꼈어요 ✔️ 제로베이스 온라인..

[제로베이스 zero-base] 프론트엔드 스쿨 11기 수강 - 1주차

안녕하세요, janie 입니다😎 새해가 되자마자 수강이 시작되어 이것저것 확인하고, 세팅하느라 정신이 혼미하지만 🫠 그래도 새로운 것을 배울 생각에 설렘 가득이에요 ✔️ 제로베이스 프론트엔드 스쿨에 참여하는 나의 다짐 짧다면 짧고, 길다면 긴 6개월이라는 수강기간은 제가 세운 2023년도 계획과 맞아떨어지는 시기이고 지금 이 시기를 지나치면 새로운 타이밍을 잡기까지 막연할 것 같다는 생각이 들어요 다른 취업준비생분들보다 투자할 수 있는 시간이 적지만 제가 가용할 수 있는 시간 내에서 최대한 활용하고 매일 최소 30분이라도 책상에 앉는 습관을 길들여 todo list를 수행할 것입니다 🔥 ✔️ 프론트엔드 개발자가 되기로 결심한 이유 이커머스 솔루션 회사에서 GIS 솔루션 회사까지 웹퍼블리셔로 근무한 지 8..