Frontend

💡 원본글: https://dev.to/devshefali/21-html-tips-you-must-know-about-55j7 21 HTML Tips You Must Know About In this post, I’ll share 21 HTML Tips with code snippets that can boost your coding skills. Let’s... dev.to 이 게시물에서는 코딩 기술을 향상시킬 수 있는 코드 조각과 함께 21가지 HTML 팁을 공유하겠습니다. 그럼 바로 뛰어들어가 볼까요.🚀 연락처 링크 만들기 HTML을 사용하여 클릭이 가능한 이메일, 전화 통화 및 SMS 링크를 만들수 있습니다. Send Email Call Us Send SMS 접을(Collapse)수 있는 콘텐츠 ..

Nuxt3.js에서 scss로 font를 적용하기 (IBM Plex Sans 폰트 적용) 서론 최근 노마드 커뮤니티 서비스를 사이드프로젝트를 하면서, 디자이너 분이 선택한 폰트인 IBM Plex Sans 를 웹폰트가 아닌 일반적인 woff 파일을 받아서 처리하는 방식에 대해서 선택하였고, 그걸 작업한 내용을 공유드릴려고 합니다. 실제 nuxt.js에서 웹폰트를 쓰는 방법은 Nuxt.js config를 통해 웹폰트를 쉽게 적용해보자. 폰트 다운로드 해당 폰트는 https://github.com/IBM/plex/tree/v5.0.0/IBM-Plex-Sans-KR/fonts/complete 해당 주소에서 다운로드 받을수 있습니다. hinted vs unhinted 두가지의 차이를 알기. 위해서 Hinting이..

var가 있는데 const, let은 왜 나왔을까? 서론 JavaScript에선 변수를 정의할수 있는 예약어가 총 3개가 존재한다. 옛날엔 var를 모두 사용했지만, 최근에 const와 let이 추가되면서 총 3개의 방식이 생겼는데, 왜 새롭게 const, let이 도입되게 되었고, 각 차이점등에 대해서 알아볼 예정입니다. 과거의 var var의 문제점은 세가지가 있었습니다. 가변 - 정의된 변수를 변경할수 있었음. var number = 10; consloe.log(10); # 10 number = 20; consloe.log(20); 함수 scope const a = () => { if(true) { var number = 10; } console.log(number); } a() # 10; 호이스팅..

jest 27 → 28 자충우돌 upgrade 서론 최근 회사에서 사용하던 jest를 27 버전에서 28로 업그레이드를 하는 작업을 진행하였습니다. 작업을 하면서 이전 문서를 확인해야 하고, 최신 지원 하는 기능들을 사용하기 위함이였습니다. 마이그레이션 문서 : https://jest-archive-august-2023.netlify.app/docs/28.x/upgrading-to-jest28/ Breaking change : https://jest-archive-august-2023.netlify.app/blog/2022/04/25/jest-28 주요 Featrue Github action reporter github action에서 CI를 실행할 시, File Chanege에서 실패한 테스트를 리포팅..

Nuxt3에서 variables 전역으로 설정하자. 서론 기본적으로 스타일링을 할때, variables를 설정하고 전역으로 설정할수 있게 한다. Nuxt 3.6.5 버전 기준으로 해당 글은 작성되었다. 여기서 기본적으로 알아둬야 하는것은 Nuxt3는 기본적으로 vite를 사용한다. Scss 파일 생성하기. 해당 경로가 정답은 아니다. 경로는 편한대로 작성한다. // 브레이크 포인트 변수를 한곳에 모아두기 위해 따로 파일을 만든다. // /assets/styles/variables/_breakpoints.scss $xs-down: 'max-width: 375px'; $md-down: 'max-width: 768px'; $mobile: $xs-down; $tablet: $md-down; // 모든 변수 파일..

Nuxt.js config를 통해 웹폰트를 쉽게 적용해보자. 서론 Nuxt의 애플리케이션의 모든 페이지에 같은 폰트를 다운로드 받아서 적용하는 작업을 해볼 예정입니다. 손쉽게 Configuration을 통해 가능합니다. 테스트해볼 폰트는 google IBM Plex Sans font를 이용해볼 예정입니다. 참고로 해당 예제는 nuxt3로 진행하였습니다. nuxt3 옵션 nuxt3는 nuxt.config.ts 파일을 이용해 옵션을 설정할수 있습니다. app 공식문서 : https://nuxt.com/docs/api/configuration/nuxt-config#app app 전반의 옵션들을 설정하는 키값입니다. head 공식문서 : https://nuxt.com/docs/api/configuration/n..

React에 StoryBook을 입혀보자. 도입 최근 회사에서 webpack의 Module Federation을 도입하게 되면서 React 프로젝트를 도입할 수 있는 기회가 생기게 되었다. 아울러 그에 맞춰서 백지에서 시작하는 프로젝트를 할 수 있게 되었는데, 그에 맞춰 Storybook을 세팅한 이야기를 작성해보려고 한다. React 프로젝트 생성 React의 간단한 프로젝트를 생성하기 위해 create-react-app 을 사용해 간단히 만들어 본다. npx create-react-app react-storybook-playround Storybook 구축 storybook은 아래 명령어로 간단히 구축이 가능합니다. npx storybook init 그렇다면 아래와 같은 의존성과 스크립트가 포함됩니다..

10 JavaScript concepts for React beginners(React 초보자를 위한 10가지 JavaScript 개념) React는 JavaScript 프론트엔드 라이브러이며, 시작 하기 위해서는 JavaScript를 배워야 합니다. 그러나 JavaScript는 거대한 개념의 언어이기 떄문에 모든 것을 배우기에는 어렵습니다. 그래서 이 글에서는 React를 배우기 위해 알아야 하는 10가지의 JavaScript 개념에 대해 다룹니다. ✨ JavaScript이란? JavaScript는 웹 페이지용 높은 수준의 스크립트 언어입니다. 1995년 Brendan Eich에 의해 만들어졌습니다. 처음엔 JavaScript는 interactive(상호작용하는) 웹페이지로 만드는 것이 목표였습니다. ..

React의 defaultValue vs value 🧐 Input의 값을 어떻게 변수에 저장할까!? Vue.js에서는 v-model 이라는 속성으로 쉽게 input의 값을 변수에 저장해서 사용할 수 있었다. React를 하면서 v-model과 같이 Input값을 어떻게 변수를 저장할 수 있을지를 찾아본 결과 defaultValue와 value 라는 속성값이 나왔고, 둘의 차이를 비교해보기로 하였다. 참고로, onChange 이벤트를 이용해 직접 할당을 해줘야 하는 다른 점이 있지만, 지금 글과는 주제는 조금 다르기 때문에 아래 코드만 간단히 살펴보는것으로 하겠습니다. const [value, setValue] = useState(initialValue); const onChange: ChangeEvent..

5 Secret features of JSON.stringify() (JSON.stringify()의 5가지 비밀 기능) JavaScript 개발자들은 JSON.stringify() 메서드로 대부분 디버깅에 사용합니다. 그러나 console.log() 가 있어도 무슨 소용이 있을까요? // 사용자 객체 초기화 const user = { “name” : “Prateek Singh”, “age” : 26 } console.log(user); // [object Object] console.log 로는 원하는 결과를 인쇄하는 대 도움되지 않습니다. [object Object] 란 객체에서 문자열로의 기본 변환이기 때문에 이렇게 출력됩니다. 그래서 우리는 JSON.stringify() 를 사용해 변환한 다음 콘..