WEB개발이야기/React.js 2024. 2. 28.
Next.js 14버전에서 모달창 띄우는 초간단 방법
Next.js 14 버전에서 모달 창을 쉽게 띄우는 방법을 포스팅하려고 합니다. Next.js는 폴더의 형태와 이름에 따라 경로 구성과 기능이 달라지니, 폴더 구조와 이름을 주의 깊게 설정하는 것이 중요합니다. 아래 글을 참고하여 설정해 보세요. Next.js 14버전에서 App 라우팅 심화: 폴더 구조와 파일 특징 완벽 가이드 모달 창을 띄우기 위한 기술 Next 14버전에서 모달을 띄우기 위한 핵심기술로 패러랠 라우트와 인터셉트 라우트가 있습니다. 일반적으로 모달을 구현하기 위해 다음과 같은 폴더 구조를 사용합니다. └── app ├── @modal │ ├── default.js │ ├── (.)flow │ │ └── page.js │ └── ... └── ... 패러랠 라우트 개념 하나의 layou..
WEB개발이야기/웹퍼블리싱 2024. 2. 26.
Classnames vs. clsx: 당신에게 딱 맞는 CSS 클래스 조합 도구는?
React에서 동적으로 클래스 이름을 조작하는 것은 흔히 발생하는 작업입니다. 이 작업을 간편하게 해주는 두 라이브러리가 바로 classnames와 clsx입니다. 이 글에서는 두 라이브러리의 장점과 단점, 특이할 만한 사항 등을 비교 분석하여 개발자들이 각 라이브러리의 특성을 파악하고 적절하게 선택하는 데 도움을 드리고자 합니다. 또한 그 중에서 최근에 더 곽광을 받고 있는 clsx에 대해서 자세히 살펴보겠습니다. 1. Classnames classnames는 클래스 이름을 조합하고 조건부로 적용하는 데 사용되는 유틸리티 라이브러리입니다. 다음과 같은 특징을 지닙니다. 장점: 직관적인 API: classnames는 객체 형식으로 클래스 이름을 정의하여 간결하고 직관적인 코드를 작성할 수 있도록 합니다...
WEB개발이야기/웹퍼블리싱 2024. 2. 22.
Day.js vs Moment.js: 날짜 처리 라이브러리 비교 분석 (초보자를 위한 가이드)
JavaScript에서 날짜 처리를 위한 라이브러리는 필수적인 요소입니다. 다양한 날짜 형식을 다루고, 계산하고, 포맷팅하는 작업을 쉽게 해주죠. 그 중 가장 인기 있는 라이브러리로는 Moment.js와 day.js가 있습니다. 과연 어떤 라이브러리가 더 나은 선택일까요? 1. 비교 분석 기준 day.js Moment.js 크기 (gzip) 2.1KB 22.9KB 성능 약 1.4배 빠름 - API Moment.js와 유사, 변경 불가능 객체 사용 다양한 함수 제공, 객체 직접 수정 가능 기능 핵심 기능 집중, 플러그인을 통한 확장 가능 다양한 기능 제공 지원 활발하게 개발 중, 커뮤니티 성장 중 탄탄한 지원 체계, 활발한 커뮤니티 브라우저 지원 IE 11 지원하지 않음 IE 11까지 지원 장점 가볍고 빠..
WEB개발이야기/React.js 2024. 2. 20.
React와 Next.js에서 상태 관리하는 7가지 방법 비교: 심층 분석 및 실제 사례
React와 Next.js는 웹 개발에서 가장 인기 있는 프레임워크 중 하나이며, 동적인 웹 애플리케이션을 구축하기 위한 강력한 도구입니다. 하지만, 프로젝트 규모가 커지면서 여러 컴포넌트 사이에서 데이터를 공유하고 관리하는 것은 점점 더 복잡해집니다. 이러한 문제를 해결하기 위해 다양한 상태 관리 방법들이 등장했습니다. 본 글에서는 7가지 대표적인 상태 관리 방법 (useState, useReducer, Context API, Redux, Recoil, Zustand, Next.js SWR)을 심층 분석하고, 각 방법의 장단점을 비교하며 실제 사례와 함께 적용 방법을 제시하려고 합니다. 또한, 프로젝트 특성에 따라 적합한 상태 관리 방법을 선택하는데 도움이 되는 추가 고려 사항과 팁을 제공하려고 합니다..
WEB개발이야기/React.js 2024. 2. 19.
Next.js 14 핵심 기능: App 라우팅과 Pages 라우팅의 장단점 비교
Next.js 12버전이하에서는 기본적으로 Pages Routing 방식을 사용했으나 Pages Routing의 단점을 극복하고자 14버전에서 App Routing을 도입하게 되었습니다. 그래서 현재 14버전에서는 Pages Routing과 App Routing 방식을 선택하여 사용할 수 있습니다. 각 라우팅 컨벤션은 서로 다른 구조와 특징을 가지고 있으며, 프로젝트의 특성에 따라 적합한 컨벤션을 선택하는 것이 중요합니다. 기존 Next.js 프로젝트를 관리하는 차원이라면 Pages 라우팅 방식을 추천하지만 만약 새롭게 프로젝트를 진행하게 된다면 App 라우팅 방식을 추천합니다. 1. App 라우팅 컨벤션 App Routing Conventions는 Next.js 14 버전에서 새롭게 도입된 라우팅 컨벤..
WEB개발이야기/React.js 2024. 2. 19.
Next.js 14버전에서 App 라우팅 심화: 폴더 구조와 파일 특징 완벽 가이드
Next.js 14 버전에서 도입된 App 라우팅 방식은 폴더 구조와 파일 규칙을 기반으로 강력하고 유연한 라우팅 경험을 제공합니다. 이 글에서는 폴더와 파일의 명칭에 대한 규칙을 명확하고 간결하게 정리하여 개발자들이 App 라우팅을 쉽게 이해하고 활용할 수 있도록 정리 했습니다. 라우팅(Routing) 파일들 APP 라우팅 방식은 기본적으로 컴포넌트를 기준으로 경로를 설정하게 됩니다. 기본적으로 사용되는 라우팅 파일 형식은 아래와 같습니다. 파일 명 확장자 설명 layout .js .jsx .tsx 화면의 레이아웃을 정의 합니다. page .js .jsx .tsx 화면의 컨텐츠를 정의 합니다. loading .js .jsx .tsx 화면이 로딩될 때 보여줄 UI 화면입니다. not-found .js ...
WEB개발이야기/React.js 2023. 11. 25.
nextjs(react)에서 tailwindcss와 구글폰트 연계해서 사용하기
Next.js를 사용할 때 스타일링으로 tailwindcss를 많이 사용할 것입니다. 또한 폰트로 Google Fonts도 많이 사용하게 되는데요. 구글 웹폰트를 사용하는 경우 보통 아래와 같이 CDN으로 구글에서 웹폰트를 불러와서 적용하는 방법을 많이 사용합니다. Making the Web Beautiful! 이럴 경우 사용이 편한 장점도 있지만 오프라인이거나 네트워크가 좋지 않은 환경에서는 단점으로 작용을 합니다. 그래서 Next.js에서는 폰트를 별도의 패키지로 만들어서 제공하고 있습니다. 이럴 경우 사용하는 것은 웹폰트를 사용하는 것만큼 쉽고 퍼블리싱 할 때 local로 해당 폴더만 가져가기 때문에 오프라인일 때도 웹폰트가 표현이 되는 장점이 있습니다. Next.js에서 Google Fonts 적..
WEB개발이야기/React.js 2023. 11. 17.
Nextjs(React)에서 Google Sheets를 데이터베이스로 사용할 수 있을까
영세한 개발자나 취미로 개발을 하는 사람이라면 항상 생각하는 것이 내가 개발한 웹서비스를 무료로 서버에 올려서 사용할 수 있을까? 라는 것입니다. 스태틱 한 웹서비스인 경우는 상대적으로 길이 많은데 데이터베이스까지 붙여야 한다면 이건 또 말이 다르게 됩니다. 고성능의 데이터베이스까지는 필요도 없는데 말이죠. 저도 이번에 Next.js(React)로 아주 간단한 웹서비스를 토이 프로그램으로 개발하기로 하면서 데이터베이스에 대해 문득 든 생각이 Google Sheets를 사용하면 되지 않으까?였습니다. 그래서 여기저기 이것저것 알아보다가 굳이 고성능이 필요하지 않다면 Google Sheets가 대안이 될 수도 있겠다고 판단하여 시도해 봤습니다. 결과는 어느 정도 성공적이어서 잊어버리기 전에 공유를 하려고 합..
WEB개발이야기/VScode 2023. 2. 7.
VScode의 package.json에서 AWS의 S3로 배포하는 방법
React.js나 Vue.js 등의 Package 프로젝트로 개발을 할 때 쉽게 AWS의 S3로 배포하는 방법에 대해서 공유합니다. 먼저 AWS의 S3의 버킷은 이미 생성되어 있다는 가정입니다. S3 버킷 생성 아래와 같이 버킷이 생성되어 있습니다. 목차는 S3의 버킷입니다. 버킷의 이름이며 잘 기억해 놔야 합니다. 리전, 그러니까 실제로 물리적으로 파일이 저장되는 위치라고 보시면 됩니다. 기억해놔야 합니다. 액세스는 퍼블릭으로 되어 있어야 외부에서 접근이 가능합니다. IAM 권한 부여하기 이제 외부에서 접근하기 위해서 IAM에서 권한을 부여해야 합니다. 좌측 메뉴에서 사용자를 선택합니다. 보안 자격 증명 탭을 선택합니다. 중간쯤에 위치한 액세스 키를 발행합니다. 발행을 하면 Access key ID와 ..
WEB개발이야기/React.js 2022. 7. 14.
React.js에서 JSX사용하기
JSX란? React에서 JSX는 필수 요소는 아니지만 React를 코딩하는데 많은 편리함을 더해주는 확장 문법이라고 보면 됩니다. JSX란? - React 공식웹사이트 React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다. React는 JSX 사용이 필수가 아니지만, 대부분..
WEB개발이야기/React.js 2022. 7. 11.
React.js의 아주 기초적인 사용법
React를 공부하기 시작했습니다. 아주 간단한 것부터 알게 된 것을 기록해 볼까 합니다. React는 프레임워크라기보다는 라이브러리라고 할 수 있습니다. 그렇기 때문에 기존의 HTML에 간단하게 React를 적용할 수 있습니다. 먼저 가장 기본적인 HTML은 아래와 같습니다. React.js 적용하기 react.js를 적용하기 위해서 먼저 react.js javascript CDN을 적용해야 합니다. 이제 이 HTML 문서는 React를 실행시킬 수 있습니다. 간단하죠? 한번 간단하게 적용해 보겠습니다. 먼저 react가 발현될 dev를 지정합니다. 보통은 id="root"를 많이 사용하나 바꾸어도 상관없습니다. 그리고 react 문을 작성합니다. react도 javascript이므로 javascrip..
WEB개발이야기/VScode 2022. 2. 21.
[VScode 익스텐션] Visual Studio Code에서 클립보드에 저장된 Image 붙혀넣기 - Paste Image
마크다운(Markdown)으로 글쓰기를 할 때 이미지 붙여넣기에 대해 매우 유용한 익스텐션이 있어서 소개해 드릴게요. 캡처 프로그램으로 캡처를 하고 바로 마크다운 문서에 붙여넣기 하면 바로 이미지가 반영이 되고 이미지는 별도의 폴더에 저장이 되도록 구성되어 있어요.[Extension] Paste Image이미지를 클립보드에서 마크다운/asciidoc(또는 다른 파일)로 붙여넣기를 할 수 있어요.Paste Image 설정하기Paste Image를 몇 가지 설정하면 나에게 맞게 커스터 마이징 할 수 있어요. 모든 부분을 설명하기는 어렵고, 간단하게 몇 가지 설정하는 방법입니다. Base Path : 기본이 되는 폴더의 경로입니다. 입력값은 ${currentFileDir} 및 ${projectRoot} 입니다..
WEB개발이야기/VScode 2022. 2. 18.
Visual Studio Code에서 코드조각(Snippets)을 슬기롭게 사용하는 방법
Visual Studio Code (이하 VS code) 자체만으로도 매우 훌륭한 툴이지만 코드 조각(Snippets)을 잘 활용한다면 더 쉽고 빠르게 코딩을 할 수 있어요. 코드 조각(Snippets)이라고 하면 핸드폰의 단축키처럼 특정 문자를 입력하면 그에 해당하는 코드가 자동으로 작성이 되는 것을 말해요.저는 주로 Markdown으로 티스토리나 구글 블로거로 포스팅할 때 주로 사용해요. 기본 구성을 자동으로 해주기 때문에 상당히 편하죠.내장 코드 조각 (Built-in snippets)먼저 VS code를 설치하면 기본으로 설치되어 있거나 스니펫 익스텐션을 설치하면 사용할 수 있는 코드 조각들이 있어요. 이것만으로도 상당히 편리한 코드 생활이 가능하죠.예를 들면 위의 애니메이션 이미지처럼 html ..
WEB개발이야기/VScode 2022. 2. 17.
VScode(Visual Studio Code)소개와 설치하기
코딩을 하기 위한 편집기라면 TextEditor과 IDE로 나뉠 수 있을 거예요. 그중에 IDE는 특수한 환경이나 언어에 특화된 에디터라 매우 편리한 점은 있지만 범용적으로 사용할 수는 없는 거예요. 하지만 텍스트 에디터는 html, css, javascript, typescript, python, Markdown, C 등등.. 다양한 환경이나 언어에서 범용적으로 사용할 수 있기 때문에 나름 인기가 높습니다.라떼~ 개발자라면 울트라 에디터, 에디트 플러스, 노트패드 등등.. 을 아실 텐데요. 이 텍스트 에디터의 현재 버전이 Visual Studio Code라고 할 수 있어요.윈도의 메모장, 위드 패드 등이 1세대, 울트라 에디터, 에디트 플러스 등이 2세대라면 서브라임텍스트(Sublime Text), 비..
WEB개발이야기/Git 2022. 2. 11.
error: RPC failed; curl 18 transfer closed with outstanding read data remaining이
git을 이용하여 Clone 하는 도중.. error: RPC failed; curl 18 transfer closed with outstanding read data remaining 에러가 발생했다면 이렇게 한번 해보세요.문제 원인error: RPC failed; curl 18 transfer closed with outstanding read data remaining를 해석해 보면 미해결 읽기 데이터가 남아 있는 상태에서 curl 18 전송이 종료되었습니다. 라는 뜻이네요.문제의 원인은 네트워크의 문제로 인해 연결이 끊기고 git clone 종료된 상황이라고 합니다. 보통 네트워크 상황이 좋지 않고 대량의 파일을 Clone 할 때 발생할 수 있다고 합니다.해결 방안한 번에 모든 파일을 git cl..
WEB개발이야기/웹퍼블리싱 2021. 10. 20.
자식 컴포넌트의 CSS(SCSS)를 정의할 수 있는 딥셀렉터(v-deep) 설정하는 방법
Vue 프로젝트를 진행하다 보면 vuetify나 quasar 등 매우 다양한 프레임워크나 컴포넌트를 사용하게 됩니다. 그러면서 그 컴포넌트를 내 Vue 프로젝트의 자식 컴포넌트로 불러와서 사용하는 경우가 있는데 그 컴포넌트를 어떻게 CSS를 적용해서 내 입맛에 맞추어 스타일을 변경하고 싶으나 그게 생각처럼 되지 않는 경우가 있습니다. 그걸 되게 하는 방법을 설명해 보려고 합니다. 자식 컴포넌트의 CSS에 쉽게 접근이 되지 않는 이유이렇게 되는 이유는 웹 컴포넌트의 중요한 측면인 스타일 캡슐화때문이라고 합니다. 다시말해서 현재 컴포넌트에 적용된 css(scss)가 현재의 컴포넌트에만 적용되고 다른 컴포넌트에는 간섭이 되지 않도록 하기 위함이라고 보시면 됩니다. 그래서 Vue컴포넌트에서 그런데 scoped를..
WEB개발이야기 2021. 6. 5.
Docker로 Quasar framework 개발 환경 세팅하기
Docker와 docker-compose를 사용하여 Web 또는 App을 개발하는 환경을 세팅해 보려고 합니다. 이 세팅으로 여러사람, 또는 여러 장소에서 개발, 빌드의 환경을 동일하게 가져갈 수 있습니다. 일단 Windows 환경(WSL2)에서 Docker데스크톱이 설치되어 있다는 전제 입니다. Quasar 프로젝트 초기 파일 생성하기 (스캐폴딩 - Scaffolding)아무것도 없는 상태에서 Quasar 프로젝트를 시작하려면 먼저 스케폴딩을 파일을 가져와야 합니다. 보통 vue init나 quasar create로 생성해야 하며 이것도 Docker의 기능을 활용해서 가져오면 됩니다. 먼저 CMD창을 열고 프로젝트로 사용할 폴더를 만들고 해당 폴더로 이동합니다. # 프로젝트 폴더 생성 mkdir myp..
WEB개발이야기 2021. 2. 17.
headless CMS인 STRAPI 설치하기
이전시간에 프론트앤드 개발자에게 꼭 필요한 백앤드를 책임질 STRAPI 라는 제목으로 소개에 대한 포스팅을 했었습니다. 이번에는 STRAPI를 설치하는 방법에 대해서 포스팅을 하려고 합니다. STRAPI 설치하기strapi를 설치하기 위해서는 이미 컴퓨터에 npm 5.2.0이상 버전이 설치되어 있거나 yarn이 설치되어 있어야 합니다. 해당 패키지매니저를 설치하는 방법은 따로 설명하지 않겠습니다. Strapi 패키지는 yarn 또는 npx를 통해 설치할 수 있으며 여기서는 yarn으로 설치하는 방법만 작성합니다. 1. 프로젝트 폴더에 설치하기yarn의 아래 명령어로 Strapi의 프로젝트를 설치합니다. yarn create strapi-app my-project --quickstartcreate stra..
WEB개발이야기 2021. 2. 17.
프론트앤드 개발자에게 꼭 필요한 백앤드를 책임질 STRAPI
예전에는 그냥 퍼블리셔로 통칭 되었을텐데 현재는 프론트앤드 개발자라는 아주 중요한 직업군으로 형성되어 있습니다. Web개발의 패러다임이 javascript와 Node.js로 인해 백앤드에서 프론트앤드쪽으로 넘어오게 되면서 프론트앤드 기술을 구현할 수 있는 개발자의 몸값이 상당히 높아지고 있는 것이 사실입니다. 그래서 많은 사람들이 프론트앤드로 전향을 많이하고 있는 추세인데.. 그런 프론트앤드 개발자에게 한가지 걸림돌이 있습니다. 프론트앤드를 주력으로 하지만 어찌되었든 백앤드도 구비를 하고 있어야 한다는 점입니다. Firebase, Amazon, Express 등등.. 백앤드를 구비하는 여러가지 방법이 있으나 그중에서 아주 쉽고 직관적이며 무료로(유료도 있음) 사용할 수 있는 STRAPI라는 백앤드 툴이 ..
WEB개발이야기/Vue.js 2021. 1. 11.
Vue의 Vuetify로 대규모 프로젝트 SCSS(CSS) 진행하는 방법
안정성이 입증되었는지 요즘에는 Vue로 대규모 프로젝트를 많이 하는 추세인것 같습니다. 저도 대규모 프로젝트에 퍼블리셔로 참여하면서 얻은 경험을 기록 차원에서 포스팅을 해보려고 합니다. Vue는 하나의 파일에 구조(Template)와 구현(javascript), 표현(CSS)을 모두 다 담고 있기 때문에 풀스택(Full Stack) 개발자에게는 더할 나위 없이 편한 구조이지만 대규모 프로젝트 처럼 개발자, 디자이너, 퍼블리셔가 별도로 존재하는 경우에는 상당히 불편할 수 있는 구조를 가지고 있습니다. 개발자가 개발하는 파일을 퍼블리셔도 동일한 파일의 이번 포스팅에서는 Vue로 대규모 프로젝트를 진행할 때 퍼블리셔 관점에서 퍼블리셔와 프론트앤드 개발자와 협업을 원활히 하는 방법에 대해서 기술하려고 합니다. ..
WEB개발이야기/Git 2021. 1. 7.
Git 레파지토리 별로 사용자 지정하기
하나의 PC에서 여러 군데의 Git 레파지토리를 운영할 때 레파지토리 별로 사용자 이름과 이메일을 달리 사용해야 하는 경우가 있습니다. 보통은 글로벌하게 설정하여 사용하기 때문에 모든 레파지토리에서 커밋과 푸시를 하게 되면 동일한 이름이 사용되게 되어 있습니다. 모든 레파지토리에 글로벌하게 적용아마도 대부분 글로벌하게 적용하는 이 방법은 아시리라 생각됩니다. $ git config --global user.name "이름 1" $ git config --global user.email "이메일주소 1"하나의 레파지토리에만 적용하지만 하나의 레파지토리에만 다른 이름과 이메일을 적용하는 방법은 잘 모르시는 경우가 있습니다. 바로 --global 을 --local로만 변경해 주면 됩니다. 원하는 레파지토리의 ..
WEB개발이야기/VScode 2020. 9. 7.
[익스텐션] Vscode 에서 태그명 변경 시 자동으로 닫힘 태그명까지 변경 (Auto Rename Tag)
Visual studio code의 확장 프로그램인 Extensions에는 정말 재미있고 유용한 기능들이 너무 많습니다. 그중에서 태그를 수정할 때 자동으로 닫힘 태그까지 수정해 주는 익스텐션이 있습니다. Auto Rename Tag HTML, XML, php 등 태그의 이름을 바꾸면 쌍을 이루는 닫힘 태그의 이름이 자동으로 바뀝니다. 설치하기 아래의 링크를 클릭하거나 익스텐션 메뉴에서 Auto Rename Tag를 검색 후 설치를 하면 됩니다. Auto Rename Tag 바로가기 설정하기 ▲ 먼저 파일 > 기본설정 > 설정 으로 설정창을 열어야 합니다. ▲ 좌측메뉴 중 확장 탭을 선택합니다. Auto Rename Tag configuration을 선택합니다. 이 익스텐션의 설정은 settings.js..
WEB개발이야기/VScode 2020. 9. 4.
세상 편리한 VScode 설정 동기화 하는 방법
제 메인 코딩 에디터는 VScode입니다. 서브라임텍스트, 아톰, 브라켓 등을 써봤는데 저에게는 VSCode가 잘 맞는 것 같습니다. 요즘 재택근무다 뭐다 해서 근무하는 장소나 컴퓨터가 여러 대 일 때가 있고 윈도우 쓰다 맥 쓰다 하는 저에게 코딩 환경의 일관성은 매우 중요한 요소입니다. 그런데 글쎄 VScode에서는 환경설정을 동기화 해주는 기능이 있다고합니다. 예전에는 'Shan Khan'이라는 분이 익스텐션으로 개발한 Settings Sync 를 주로 사용했었는데 언제부터인지 이 기능이 VScode에 기본으로 포함이 되어버렸습니다. VisualStudio Code 에디터의 설치와 유용한 확장프로그램(플러그인) 바로가기 여러곳에서 코딩하는 사람에게는 필수 기능이지 않을까 합니다. 설정 동기화 기능설정..
WEB개발이야기/기타 2020. 8. 11.
PWA(Progressive Web Apps) Manifest 만들기
PWA란 무엇이고 장단점은 무엇인가에 이어 웹앱 매니페스트(Manifest)를 만들고 사용하는 방법입니다. PWA의 핵심은 매니페스트(Manifest)와 서비스워커(service-worker)입니다. 그중에서 매니페스트(Manifest)는 인스톨 배너와 앱 아이콘에 대한 설정을 담당합니다. 웹앱 매니페스트(Manifest)란?웹앱 매니페스트(Manifest)는 PWA(Progressive Web Apps)의 설치와 앱의 구성 정보를 담고 있는 json 설정파일입니다. 이 설정은 크게 아래와 같은 작업을 합니다. App Icon : 설치 시 앱의 아이콘 이미지와 크기 설정 스플래시((splash screen) 화면 : 로딩화면 설정 Start URL : 웹앱이 실행될 때 가장 처음 보여질 URL 설정 Di..
WEB개발이야기/기타 2020. 8. 3.
PWA(Progressive Web Apps)란 무엇이고 장단점은 무엇인가
Google I/O 2016에서 구글은 PWA(Progressive Web Apps)라는 신기술을 소개했습니다. 신기술이라고해서 없던 기능이 나온 것은 아니고 여러가지 있던 기능이나 이론을 조합하여 앱과 웹의 장점을 합친 것이라고 볼 수 있습니다. PWA란 무엇인가?PWA에 대해 이렇다 저렇다 여러 정의들이 있지만 쉽게 생각하면 아래와 같습니다. 인터넷 웹사이트의 파일들(html, javascript, css, images같은..)을 컴퓨터에 잘~ 저장(캐싱)해 놨다가 다시 요청이 올 때 저장(캐싱)된 파일들을 먼저 보여주고 필요할 떄 웹서버에 있는 데이터를 받아서 보여주는 기술과 홈스크린에 바로가기 아이콘을 설치 할 수 있게 하는 기술, 그리고 서버의 소식을 클라이언트에 전하는 Push기술 입니다. P..
WEB개발이야기/기타 2020. 7. 31.
브라우저에서 쿠키를 삭제하는 방법
웹어플리케이션이나 웹사이트를 개발하다 보면 쿠키를 삭제 해야 하는 일이 종종 있습니다. 쿠키는 브라우저를 리로딩하거나 껏다켜더라도 정보가 남아 있기 때문에 사용자의 편의를 위해 웹개발자들이 많이 사용하는 방법입니다. 다만 실제 서비스를 할때는 유용하지만 개발을 할때는 불편한것이 사실입니다. 그래서 간단하게 쿠키를 삭제하는 방법을 포스팅해 볼까합니다. 크롬에서 URL로 삭제하기먼저 크롬 브라우저에서 아래의 주소로 접근합니다. 주소입력창에 chrome://settings/clearBrowserData 를 입력합니다. 쿠키나 접속기록을 언제까지 삭제할 건지 기간을 선택합니다. 인터넷에 접속한 기록을 삭제할 것인지 체크합니다. 체크하면 접속 기록이 삭제됩니다. 브라우저에 쌓여있는 쿠키같은 데이터를 삭제 합니다...
WEB개발이야기/Vue.js 2020. 7. 27.
Vue에서 왕대접 받고있는 고급 에디터 컴포넌트 tiptap
Angular나 React에도 에디터 컴포넌트가 있겠지만 Vue에도 쓸만한 에디터 컴포넌트가 있습니다. Awesome Vue.js의 Rich Text Editing를 통해 알게된 에디터 컴포넌트입니다. 얼마전까지는 vue-quill-editor가 가장 많은 github Star(현재 5.8k)를 받고 있었지만 언제 부턴가 tiptap에디터가 github Star(현재 7.6k)를 넘어서 현재 1위를 달리고 있습니다. Star가 많다는 것은 그만큼 많은 사람들이 만족하게 사용하고 있다는 뜻이기도 합니다. Prosemirror를 기반으로 한 renderless 에디터라고 하네요. Prosemirror를 이번에 알게 되었지만 Prosemirror github star가 4.5k 정도이니 tiptap이 엄마보다..
WEB개발이야기/Vue.js 2020. 7. 23.
vuex-persistedstate 덕분에 Vue.js 화면을 새로고침 해도 안전해요.
Vue.js로 프로젝트를 개발하는 경우 화면을 이동 할 때 일반 웹페이지처럼 페이지 전체를 새로 고침하는 방식이 아니라 SPA(Single Page Application)와 같이 javascript로 필요한 부분만 교체하는 식으로 개발을 하게 됩니다. 이런 SPA방식의 개발은 모던한 웹사이트 개발에서 많은 잇점을 주고 있는 것이 사실이지만 몇가지 불편한 부분도 있습니다. 지금 소개하려고 하는 vuex-persistedstate는 이러한 불편을 해소해 주는 Vue플러그인이라고 생각하면 됩니다. 보통 모바일 웹이나 앱일 경우는 크게 착각하지 않는데 일반 웹브라우저에서 띄운 경우 습관적으로 뒤로가기 버튼을 클릭 할 때 화면이 새로고침이 되어 버립니다. 또는 기타 다른 이유로 화면을 새로고침하는 경우가 발생하게..
WEB개발이야기/Vue.js 2020. 7. 21.
Vue.js에서 fortawesome아이콘 라이브러리 사용하기
현재 가장 영향력 있는 무료 아이콘 제공처는 Fortawesome일 것입니다. Fortawesome은 초창기 유행하던 Font의 딩벳 형태로 아이콘을 제공하며 많은 개발자들의 사랑을 받았었습니다. Font Awesome 5를 슬기롭게 사용하는 방법 하지만 아이콘을 폰트형태로 만들어서 사용하는 방식에는 한가지 큰 문제가 있었습니다. 아이콘을 하나만 사용하던지, 100개를 사용하던지, 폰트에 포함되어 있는 아이콘을 일단 한번은 모두 다운로드 받아야 한다는 점입니다. 이럴 경우 몇개의 아이콘만 사용하면 되는데 너무 큰 트래픽의 손해를 봐야한다는 점입니다. 트래픽은 바로 비용과 연결이 되기 때문에 규모가 큰 웹사이트는 잘 사용하지 않게 됩니다. 그래서 현재 아이콘을 사용하는 방법의 유행이 fonts방식에서 SV..
