본문 바로가기

front_end

 (15)
bun 환경에서 webpack + typescript 설정하기 bun init bun project 생성 bun init 필요한 패키지 bun add -D webpack webpack-cli webpack-dev-server @types/webpack @types/webpack-dev-server 패키지 설명 webpack, webpack-cli = webpack과 webpack을 cli환경에서 사용할 수 있게 해줌 webpack-dev-server = 라이브 리로딩 등을 제공해 주는 개발 서버 3 @types/webpack, @types/webpack-dev-server = 웹팩의 타입을 정의해놓은 패키지 Webpack 설정 해보기 프로젝트 루트 디렉터리에 webpack 폴더, webpack.config.ts 만들기 # root dir 에서 touch ./webp..
sass - .scss & .sass 차이점, sass 에서 변수 지정하기 .scss & .sass 차이점 https://www.sassmeister.com/ 간단하게 .scss, .sass 테스트 가능 SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com 가장 큰 차이점은 indented / nested의 구조이다 scss file의 경우 css에서 가능했던 모든 기능을 사용 가능하고 nested 구조를 가지며 sass file은 indented 구조를 가진다 /****.scss file****/ h1 { color: blue; font-size: 2rem; span { color: red;..
react & sass single child carousel 싱글 차일드 케러셀 https://github.com/joepasss/single-carousel GitHub - joepasss/single-carousel: single child carousel in react single child carousel in react. Contribute to joepasss/single-carousel development by creating an account on GitHub. github.com 작업내용 정리 1. 캐러셀 내부에 들어갈 자식 요소들 정렬하기 2. 캐러셀 자식 또는 부모 컨테이너 이동하기 시작 전 세팅 - 리엑트 세팅 import './singleCarousel.scss'; export const SingleCarousel = () => { const [curre..
grid-alignment (justify-content, align-content) justify-content, align-content 미리보기 HTML 삽입 미리보기할 수 없는 소스 start, center, end, space-around, space-between, space-evenly 의 값을 적용할 수 있다 이전 justify-items, align-items와 같이 부모 요소에 적용하면 된다 코드 예시 section.grid-container { height: 100vh; display: grid; grid-template-columns: repeat(4, 10%); grid-template-rows: repeat(2, 150px); background-color: rgb(255, 255, 255); justify-content: start; align-content: ..
grid alignment (justify-items, align-items) justify-items, align-items 미리보기 HTML 삽입 미리보기할 수 없는 소스 그리드 아이템을 정렬할 때 사용한다. 총 4가지 property (stretch, start, center, end)가 있으며 부모 요소에서 적용할 수 있다 적용 예시 section.grid-container { height: 100vh; display: grid; grid-template-columns: repeat(4, 10%); grid-template-rows: repeat(2, 150px); background-color: rgb(173, 72, 72); justify-items: stretch; align-items: stretch; div.item { font-size: 1.5rem; text-a..
grid areas Grid Areas 미리보기 grid-template-areas 그리드 시스템에서 레이아웃을 짤때 사용 grid-container(부모)에서 grid-template-areas 로 정의하여 사용 가능하다 예시 .grid-container { background-color: #ff7052; display: grid; gap: 25px; grid-template-areas: 'header header header header header header' 'sec-1 sec-1 sec-2 sec-2 sec-3 sec-3' '. sec-4 sec-4 sec-4 sec-4 .' 'sec-5 sec-5 sec-5 sec-6 sec-6 sec-6' 'footer footer footer footer footer foo..
grid item 포지셔닝 css grid item 포지셔닝 포지셔닝의 방법에는 위치를 바꾸는 것, Spanning, template areas를 이용하는 방법이 있다 Set Up html 셋업 item-1 item-2 item-3 item-4 item-5 item-6 item-7 item-8 item-9 item-10 item-11 item-12 css (sass) 셋업 section.grid-container { height: 100vh; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 200px); div.item { font-size: 1.5rem; text-align: center; line-height: 200px; f..
css grid GRID grid 적용 전 grid 적용 후 flexbox와 다르게 2차원적으로 구성되는 특징이 있다 (column, row) 1. grid 적용 방법 grid-container 라는 클래스를 가진 section이 있다고 가정
useContext (typescript) useContext props를 app.tsx에서 각각 내려준다고 가정하자 이처럼 필요 없는 props를 내려주거나 하는 일이 발생할 수 있다. props에 해당되는 값들을 따로 모아 context를 만들어 주어 context 에서 직접적으로 props를 제공하는 역할을 하는 것이 useContext이다 context 셋업 특정 contextProvider 안에 있는 모든 childeren에서 theme라는 prop을 사용한다고 가정하자 theme props /* theme.ts */ export const theme = { primary: { main: '#3f5185', text: '#fff', }, secondary: { main: '#f50057'. text: '#fff', }, }; ThemeC..
React - useReducer (in typescript) USEREDUCER useState가 여의치 못한 상황일 때 사용 (state 종류가 많던지 등의) reducer 함수 예시 function reducer(state: CounterState, action: CounterAction) { switch (action.type) { case 'INCREMENT': return { count: state.count + action.payload }; case 'DECREMENT': return { count: state.count - action.payload }; default: return state; } } 사용 예시 import { FC, useReducer } from 'react'; type CounterState = { count: number; ..

티스토리툴바