전체 글
-
[TailwindCSS] TailwindCSS 유용한 속성프론트엔드 개발자가 될거야./css 라이브러리 2023. 5. 15. 12:53
놀라운 점은 tailwind에만 있는 속성이 아니고 기존 css에도 있는 속성도 많다. space-x-3 자식 컴포넌트의 좌우 margin을 알아서 계산해줘서 margin을 따로 생각할 필요가 없다. css로 보면 이러한 구성이다. .space-x-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.75rem * var(--tw-space-x-reverse)); margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse))); } ring list (array.map) : 배열을 map으로 돌릴 때 사용할 수 있는 속성들이다. 1. first, last f..
-
[TailwindCSS] TailwindCSS란? TailwindCSS 사용법프론트엔드 개발자가 될거야./css 라이브러리 2023. 5. 15. 12:21
회사에서 계속 CSS 라이브러리로 Styled-component만 썼는데 이에 국한되고 싶지 않아서 TailwindCSS를 공부하고 있다. https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com TailwindCSS TailwindCSS는 유틸리티 우선 CSS 프레임워크로 아주 많은 클래스네임을 가지고 있다. 여기서 유틸리티란 tailwindCSS가..
-
stacked card slider 구현하기(react, styled-component)프론트엔드 개발자가 될거야./react 2023. 5. 11. 12:59
디자이너님에게 아래에 있는 card slider처럼 stacked card slider를 구현해달라는 요청을 받았다. Stripe Sessions 2023 | Stripe Sessions Conference San Francisco 그동안 슬라이드를 구현할 때 react-slick 라이브러리로 구현했는데 stacked card slider는 react-slick로 구현할 수 없었다. react-slick의 verticalSwipeToSlide를 활용해볼까도 했지만 라이브러리가 너무 망가져서 슬라이더가 오히려 이상해지기만 했다. 구글링을 통해 codepen에서 html, css, jQuery로 구현된 좋은 예시를 발견했고 이 코드를 내 코드로 녹여 구현할 수 있었다. https://codepen.io/ak..
-
[모던 자바스크립트] 세트, 문자열 패딩프론트엔드 개발자가 될거야./js 2023. 4. 19. 15:37
set (세트) 세트란 어떠한 자료형의 값이든 각 원소를 고유하게 저장하는 객체이다. 고유한 값만 보유할 수 있는 set의 특징을 이용하여 배열에서 중복을 제거할 수 있다. const myArray = ['a', 'b', 'c', 'd', 'a', 'a', 'b', 'b']; const set = new Set(myArray); console.log(set); // Set {'a', 'b', 'c', 'd'}; // Set을 배열로 변환하기 const uniqueArray = Array.from(set); console.log(uniqueArray); // ['a', 'b', 'c', 'd']; // 한줄로도 구현가능 const uniqueArray = Array.from(new Set(myArray))..
-
[모던 자바스크립트] 루프프론트엔드 개발자가 될거야./js 2023. 4. 19. 15:18
- 배열에 대한 반복 1. 기존 for문 var fruits = ['apple', 'banana', 'orange']; for (var i=0; i < fruits.length; i++) { console.log(fruits[i]); } // apple // banana // orange 2. for of 문 const fruits = ['apple', 'banana', 'orange']; for (const fruit of fruits) { console.log(fruits[i]); } // apple // banana // orange - 객체에 대한 반복 Object.key()로 객체의 모든 키를 가져온 후, 키에 대해 반복을 수행하면서 값에 접근하자! const car = { maker : "BM..
-
[모던 자바스크립트] 템플릿 리터럴, 디스트럭처링프론트엔드 개발자가 될거야./js 2023. 4. 18. 18:41
템플릿 리터럴 ES6에서 문자열을 삽입하는 방식이 변경되었다. - 여러 줄 문자열 생성 전체를 백틱으로 감싸면 된다. 백슬래시의 지옥에서 벗어날 수 있다. const content = `hello, my name is jeongeun how are you?`; 객체 디스트럭처링 - 객체에서 변수를 생성하기 쉬워졌다. // 예전 var person = { first : "noh", last : "jeong eun", } var first = person.first; var last = person.last; // 현재 const person = { first : "noh", last : "jeong eun", } const {first, last} = person; 디스트럭처링을 이용하여 객체가 가진 속성..
-
[모던 자바스크립트] 함수 기본값 인수프론트엔드 개발자가 될거야./js 2023. 4. 18. 18:19
ES6에서는 함수 기본값 인수를 매우 쉽게 설정할 수 있다. - tax나 tip 값을 할당하지 않으면 기본 값으로 0.1과 0.05이 쓰인다. function calculatePrice(total, tax = 0.1, tip = 0.05) { return total + (total * tax) + (total * tip) } - calculatePrice(100, 0.15) 처럼 매개변수를 다 전달하지 않으면 어떻게 될까? tip에 0.15를 할당하려 했더라도 이렇게 쓰면 두번째 인수 tax에 0.15가 할당된다. => calculatePrice(100, undefined,0.15) 이렇게하면 tip에 0.15를 할당할 수 있다. 그렇지만 깔끔하지 않으니 개선해보자. - 디스트럭처링으로 함수의 인수를 객..
-
[React-i18next] 웹페이지에 '더 효율적으로' 다국어 적용하기 (with: typescript)프론트엔드 개발자가 될거야./라이브러리 2023. 3. 9. 17:29
불러와야하는 json파일이 길 때, json파일을 항상 호출하는 것은 매우 비효율적이다. 이에 i18next에는 네트워크를 통해 번역 파일을 서버에서 가져오게 하는 기능이 있다. 1. 초기세팅 import i18n from "i18next"; import { initReactI18next } from "react-i18next"; import HttpBackend from "i18next-http-backend"; i18n .use(initReactI18next) .use(HttpBackend) .init({ fallbackLng: false, // 지원하지 않는 언어 또는 키가 사용되었을 때 fallback 언어로 사용할 언어 설정 fallbackNS: false, // fallback 언어로 사용할 ..