-
컨셉에 따라 이미지 사용하기
안녕하세요! 똑똑한개발자 디자이너 이지민입니다! 몇 개월전 뷰티브랜드 관련 프로젝트를 시작한 뒤, 최근 개발이 거의 완료된 시점에서 메인과 브랜드스토리 페이지의 디자인을 새롭게 변경하게 되었습니다. 처음 작업을 시작하는 시점에서는 해당 브랜드 제품의 실물조차 나와있지 않은 상태라 사용할 수 있는 이미지 자체가 없었습니다. 하지만 최근 패키지의 실물이 나오고 제품사진의 촬영을 진행하시면서 몇가지 소스가 생기게 되고 브랜드의 컨셉도 명확하게 잡히면서 웹의 디자인도 수정이 필요하게 되었죠! 새롭게 재 작업을 진행하면서 느낀점은 좋은 이미지가 주는 힘이 엄청났다는 것입니다.. 뷰티브랜드의 특성상 실제...
-
Next.js 11!!!
안녕하세요, 똑똑한개발자에서 프론트엔드 개발을 하고 있습니다. 똑똑한개발자 지난 6월 16일 Next.js conference에서 11버전이 발표되었습니다. 퍼포먼스 최적화는 물론이고, 개발편의성을 위한 몇 가지 기능들이 추가되었는데, 중요한 부분들만 알아보겠습니다. Blog-Next.js 똑똑한개발자 프론트엔드 팀에서는 기본적으로 next.js를 활용하여 빌드하고, 프로젝트를 진행합니다. 리액트로 프로덕트를 빌드하는 방법은 CRA나 Gatsby와 같이 여러가지 방법이 있지만, SSR, SSG, ISG의 필요성 때문인지 next.js를 많이 사용하는 듯 합니다. CRA(Create-React-App), Gatsby, Next.js를 npm trends에서 비교해봤습니다. 당연히, Next.js가 압도적입니다. Next.js 는 단순한 SSR프레임워크에서 점점 SEO최적화 까지 함께 포괄하는 개념의...
-
Django Session 알아보기
시작하기 전에 안녕하세요 똑똑한 개발자에서 백엔드 개발을 하고 있는 jujun입니다. 오늘은 Django 의 세션에 대해 알아보려합니다. 세션에 대해 막연하게만 알고 있어서 이번 기회에 보다 깊이 이해해 보려고 합니다. . 본론 Session? a session is a temporary and interactive information interchange between two or more communicating devices, or between a computer and user (see login session). An established communication session may involve more than one message in each direction. A session is typically stateful, meaning that...
-
타입스크립트를 이용하여 리액트 프로젝트 시작하기
타입스크립트를 이용하여 리액트 프로젝트를 처음 시작할 때, 알아야하는 최소한의 내용을 다룹니다. 순서 1.Setup 2.Components 3.Hooks 4.Event 1. Setup CRA로 프로젝트를 시작한다면 손쉽게 타입스크립트를 추가하여 개발환경을 구현할 수 있습니다. npx create-react-app my-app --template typescript Next.js 프로젝트에서 Typescript를 설정하는 방법은 여기서 확인할 수 있습니다. 이제 타입스크립트를 이용하여 프로젝트를 작성할 수 있습니다. 최종적으로 .ts .tsx 파일은 트랜스파일되어 Javscript 파일로 만들어집니다. 2. Components 함수형 컴포넌트를 이용하여 다음과 같이 작성할 수 있습니다. import React from "react"; type Image = {...
-
HTML Canvas API를 이용한 2d 3d
Canvas API란? Canvas API는 Javascript와 HTML을 이용해서 그래픽을 처리를 할 수 있게 도와줍니다. 이 API를 이용해서 애니메이션, 그림, 비디오등을 처리 할 수 있고, 이번에 소개해 드릴 2D 및 3D 그래픽을 그립니다. Canvas API 기본적인 예시 Canvas API를 이용한 간단한 예시를 보여드리겠습니다. <canvas id="scene"></canvas> //html id가 scene인 값을 참조 합니다. const canvas = document.getElementById("scene"); //렌더링이 될 수 있는 대상을 얻는 메소드를 얻습니다. //HTMLCanvasElement.getContext() => 캔버스의 드로잉 컨텍스트를 반환 합니다. 지원이 되지 않는 다면 //null를 반환 const...