ougi FE

저는 얼마 전 아이디어페스티벌을 하다가 같은 팀인 친구가 profile 이미지 설정을 구현하다가 어떻게 할지 몰라 고민하는 모습을 보고 같이 조사를 해보다 알게 된 Cropper.js에 대해서 소개해보겠습니다✂️ Cropper.js? 어떤 라이브러리일까?Cropper.js는 이미지를 자르는 기능을 지원해주는 라이브러리 입니다예를 들어 사진을 게시물에 올릴 때나 프로필 사진을 설정할 때 이미지를 원하는대로 잘라서 원하는 부분만 올리신 적이 있으실 겁니다 이 기능을 구현할 때 사용됩니다🎯어떻게 사용할까!!!npm install cropperjs # npmyarn install cropperjs # yarn먼저 cropper.js를 설치해줍니다 먼저 기본적인 html..

오늘은 제가 개발을 할 때 없으면 어색하고 이상해서 개발하기 힘들 정도인 없어선 안될 Prettier에 대해 말씀 드리겠습니다!📌 Prettier 그게 뭔데?파일을 저장할때마다, 코드를 사용자가 원하는 형식으로 모양을 예쁘게 만들어주는 도구 입니다이 도구가 코드 스타일을 정리해주어서 팀원들과 일관된 코드 스타일을 갖을 수도 있고 클린 코드를 작성할 수도 있습니다탭, 공백, 세미콜론, 따옴표 등등을 알아서 수정해줍니다🎯 사용법 (Node npm 방식)npm install --save-dev prettierprettier 설치해주기npx prettier --write . # 전체 파일npx prettier --write yourfile.js # 특정 파일코드 포맷할 파일 지정해주기🎯 사용법 (VSC 확..

저는 예전부터 유용하게 사용하던 ESLint라는 도구를 소개해드리고 싶어서 이렇게 글을 작성하게 되었습니다 이 도구가 무엇을 도와주는 도구인지 어떻게 사용하는지 설명 드리겠습니다혹시 코드가 문법상으로 오류가 있는데 오류가 안나서 힘들었던 경험이 있나요? ESLint를 이용하면 더 이상 힘들어하지 않아도 됩니다!!📌 ESLint가 뭘까?ESLint는 EcmaScript(javascript) 와 Lint를 합친 것으로 여기서 Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미입니다 즉 ESLint는 자바스크립트 문법에서 에러가 발생하면 표시해주는 도구입니다++ 코드 스타일 정리🎯 사용법 npm init -y # package.json 파일 생성npm install eslint --save-dev..

저는 소프트웨어마이스터고등학교 4개가 모이는 토크콘서트를 얼마 전 다녀왔습니다 그 곳에서 친구들과 명함을 주고 받다가 친구의 명함에 Tailwind CSS라는 것이 있는 것을 보곤 무엇인지 궁금증이 들어 이렇게 글을 써보게 되었습니다📌 Tailwind CSS란?Tailwind CSS는 사용자(개발자)가 앱을 더 빠르고 쉽게 만들 수 있도록 설계된 유틸리티 우선 프레임 워크입니다이미 만들어진 유틸리티 클래스를 이용하기 때문에 시간을 많이 절약할 수 있습니다유틸리티란?유틸리티는 특정한 작업이나 기능을 수행하도록 설계된 작은 코드 조각을 의미합니다. CSS에서는 요소의 스타일을 간단하게 정의하는 단일 속성 클래스를 지칭하며, 이를 통해 반복적인 스타일링 작업을 간편하게 처리할 수 있습니다.ex)// css...