본문 바로가기

기술67

Styled Components 리액트 컴포넌트 스타일 Styled Components는 Javscript와 CSS를 결합하여 React 컴포넌트에 스타일을 적용하는 라이브러리, CSS-in-JS 방식의 대표적인 예로, 스타일을 컴포넌트 단위로 관리할 수 있게 한다.  1. 기본 개념 Styled Components는 CSS 코드를 JavaScript 파일 안에 작성할 수 있게 해주는 라이브러리이다.React 프로젝트에서 주로 사용된다.  스타일이 컴포넌트에 국한되어 전역 네임스페이스 충돌을 방지한다. (Scoped styling) 동적인 스타일링이 가능하다. (props나 상태에 따라 스타일 변경)CSS를 별도 파일로 분리하지 않아도 되므로 유지보수가 편리하다.  2. 기본 사용법 먼저 Styled Components를 설치한다.  npm install s.. 2025. 3. 8.
GSAP 웹 고성능 애니메이션 JS 라이브러리 GSAP은 GreenSock Animation Platform의 약자로, 웹에서 고성능 애니메이션을 만들기 위한 자바스크립트 라이브러리이다. HTML, SVG, CSS, 캔버스 요소 등을 포함한 다양한 웹 요소를 부드럽고 정교하게 애니메이션화할 수 있게 설겨되었다. 성능, 사용 용이성, 브라우저 호환성이 뛰어나다.  GSAP는 애니메이션 프레임을 최적화하여 CPU와 GPU를 효율적으로 활용한다. CSS 애니메이션보다 더 부드럽고 안정적인 결과를 제공하고, 모바일에서도 잘 작동한다.  간단한 이동 애니메이션부터 복잡한 타임라인 기반 시퀀스까지, 다양한 애니메이션 작업을 지원한다.  ScrollTrigger, Draggable, MorphSVG 같은 플러그인을 통해 추가 기능을 쉽게 확장할 수 있다.  직관.. 2025. 3. 7.
Laravel 웹 애플리케이션 프레임워크 PHP 라라벨 Laravel은 PHP 기반의 오픈소스 웹 애플리키션 프레임워크이다. 2011년 등장했고, 현재는 전 세계적으로 가장 인기 있는 PHP 프레임워크 중 하나로 자리 잡았다.  Laravel은 복잡한 PHP 코드를 간소화해서 초보자도 쉽게 이해하고 사용할 수 있다. Eloquent ORM이라는 도구로 데이터베이스 쿼리를 직접 SQL로 쓰는 대신 객체 지향적으로 다룰 수 있다. 테이블을 모델 Model로 표현해서 SQL을 몰라도 데이터를 쉽게 가져오고 수정할 수 있다. $users = User::all(); 모든 사용자를 가져옴  라우팅 Routing : URL과 기능을 연결하는 시스템이 간편하다. /about 페이지를 만들고 싶다면 간단히 라우트 파일에 Route::get('/about', funct.. 2025. 3. 7.
Tailwind CSS 프레임워크 사용하기 Tailwind CSS는 유틸리티 퍼스트 utility-first CSS 프레임워크로, 클래스 이름으로 스타일을 직접 HTML에 적용하는 방식이다. 빠르고 효율적으로 디자인을 적용할 수 있다.  1. Tailwind CSS 설치 Tailwind CSS를 사용하려면 먼저 프로젝트에 설치해야 한다. Node.js 환경이 필요하니 설치되어 있어야 한다.  1) CDN 방식으로 사용 (빠른 테스트용)HTML 파일에 스크립트를 추가하면 설치 없이 바로 사용할 수 있다.  2) 프로젝트에 설치해서 사용 (권장)프로젝트 초기화 및 Tailwind 설치터미널에서 아래 명령어를 실행한다. npm init -y # package.json 생성npm install -D tailwindcss # Tailwind CSS 설.. 2025. 3. 6.
json 파일 include 하는 방법 import 와 fetch 2가지 방법이 있다. import를 사용할 때 json 파일 대신 확장자를 js로 변경하고 script type="module"로 선언한다.  import 사용할때  script type=moduleimport data from './test.js';console.log(data);/script export default{"fruit":"Apple","size":"Small","color":"Green"} fetch 사용할 때 scriptfetch('http://www.domain.com/test.json').then(function(response){retrun response.json();})/script  {"fruit":"Apple","size":"Small","colo.. 2025. 3. 1.
웹크롤링과 웹스크래핑 웹 크롤링 Web Crawling 웹 사이트 데이터를 긁어와 저장하는 기법, 웹 스크래핑 Web Scraping 파이썬 등을 이용해서 편리하게 데이터를 수집할 수 있다. 하위 페이지를 차례대로 방문해 돌아다니는 모습이 거미와 비슷하다고 해서 스파이더로 불린다.  크롤링과 스크래핑 차이 크롤링는 데이터를 수집하는 것, 스크래핑은 원하는 데이터를 추출하는 것 크롤링이 좀 더 널은 의미로 크롤링을 해서 스크래핑의 과정으로 넘어간다고 봄외국에서는 보통 스크래핑이라는 용어를 사용한다.  웹 크롤링은 예를 들자면, 검색 포털 실시간 검색어 순위 자료, 멜론 음악 차트 순위 자료, 뉴스 기사 분석, 영화 목록과 원하는 영화의 평점 정보, 주식과 암호화폐 등의 시세 정보 모니터링, 쇼핑몰 상품 정보, 도서검색 시스템 .. 2025. 2. 28.
Grid Layout 쉽게 사용하기 egjs-grid.js 간헐적으로 필요한 레이아웃이다. 간단하게 CSS + HTML + JS로 구현해도 된다. 레이아웃 그대로 그려주는 상황이면 그래도 된다. 보통은 이 기능 붙여주세요, 저 기능 붙여주세요, 부드럽게 효과를 주면 좋겠어요 .. 커스텀의 세계로 깊숙이 들어간다.  최신 JS를 지원하는 환경이라면 egjs-grid.js 를 사용하면 한결 편하다. ES6를 지원해야 한다.  https://naver.github.io/egjs-grid/storybook/?path=/story/introduction--page 만약에 ES5 엔진이면 UI/UX 개발담당자 공수가 꽤 들어간다. 게다가 경험이 없다면 대부분의 요청은 테스트 후 가능여부가 결정된다. Marsonry Layout으로 검색을 많이 하고, 여러 테스트 코드를 실.. 2025. 2. 28.
무료 아이콘 폰트 font-awesome 작업 중에 아이콘이 필요한 경우, 일부 무료로 사용할 수 있는 아이콘 폰트이다. 사용법은 간단하다.  폰트어썸 공식 홈페이지에서 Start 메뉴를 클릭하고 이메일을 입력하면 사용할 수 있다. 무료와 유료가 있고, 무료로도 일반적인 아이콘을 편하게 사용할 수 있다. https://fontawesome.com/ 다운로드 받아 css 파일을 참조해서 사용하는 방식이고, 웹 상에서 간단히 테스트하고 싶다면 cdnjs.com 의 에셋을 참조한다.https://cdnjs.com/libraries/font-awesome 원하는 아이콘은 폰트어썸 사이트에서 검색을 통해 찾을 수 있다. 이미지와 코드를 함께 제공하고 있어서 편리하다. https://fontawesome.com/search 아이콘을 정말 간단하게 사용할 .. 2025. 2. 27.
오픈AI GROK3 무료화 (그록3) 일론 머스크가 설립한 인공지능 기업 xAI가 최신 챗봇 모델 그록3을 공개했다. 그록은 로버트 하인라인의 공상과학소설 "낯선 땅의 이방인"에서 영감을 받아 명명됐다. 무언가를 깊이 이해한다는 뜻을 가졌다.  그록3 사용을 위해서는 x.com 계정이 필요하다. x.com 로그인 후 왼쪽 메뉴 목록에서 Grok (그록)을 클릭한다. https://x.com/i/grok  기존 그록과 다른 점은 DeepSearch / Think 두 기능이 추가됐다. 모두 무료로 사용할 수 있다.   한국어도 지원한다.  검색하고 추론하는 과정을 반복하면서 결과를 낸다. 결과 후에 입력창에서 Think 하나만 선택하고 추가 질문을 하면 좀 더 추론을 더 해서 결과를 낸다.  그록3는 기본 모델 외에 추론 능력을 가졌고, Ope.. 2025. 2. 24.

티스토리툴바