- 블록체인이 필요한 이유
블록체인이라는 기술은 꼭 필요할까?
- SCSS vs Styled-Component
SCSS와 Styled-Component를 비교 분석해보았습니다.
- 개발자의 학습 전략
무엇을 어떻게 배울까?
- Custom Table Component
테이블 UI 컴포넌트를 직접 만들어 보았습니다.
- 프로토타입
프로토타입에 대해 알아보자
- DNS 대작전
인터넷 알아보기 대작전 2탄 - DNS
- Type vs Interface, 무엇을 써야할까?
Type과 Interface, 왜 두개가 존재하지?
- Resize Observer API
Resize Observer API란
- React 폼요소 제어하기
react-hook-form 사용법
- 실행 컨텍스트
실행 컨텍스트를 알아보자
- HTTPS
안전한 웹서비스 구동을 위한 HTTPS의 원리 이해하기
- SCSS THEME
SCSS로 테마작업 하기
- React hook useImperativeHandle 알아보기
조금 낯선 hook, useImperativeHandle에 대해 알아봅시다.
- 인증과 인가, JWT (JSON Web Token)
클라이언트가 서버에게 인증을 받는 방법, JWT를 왜 사용하는가에 대한 정보를 정리해보았습니다.
- Next.js SEO 자동으로 적용하기
robot, sitemap 파일을 명령어 한번으로 자동 생성해봅시다.
- font-feature-settings
타이포그래피를 더욱 풍부하게 해주는 font-feature-settings 속성
- 인터넷 알아보기 대작전
인터넷에 대해 알아보자
- FED로 UX하기 : 실전편
Firewatch 프로젝트
- named export vs default export
어떤 방식을 사용해야 할까?
- DeFi(Decentralized Finance)
모두에게 열려있는 탈중앙화 금융
- 이미지 성능 최적화
next/image 컴포넌트 적극 활용하기
- Javascript에서 scope란
scope 개념을 알아보자
- Array Method Update
2023 ECMAScript 업데이트에 따른 Array Method 추가 기능
- 타입추론, 타입명시
타입추론, 타입명시에 대해 알아봅시다.
- 컴포넌트 성능 최적화
Next.js에서 성능을 최적화 하는 법
- 코드 작성 시 놓치기 쉬운 부분
코드 작성 시 놓치기 쉬운 부분은 어떤 부분일까?
- Lodash 라이브러리 사용법
Lodash를 사용하면 어떤 점이 좋을까?
- 어떻게 커뮤니케이션을 하지?
알잘딱깔센
- 웹 접근성을 위한 focus 스타일, 상황에 맞게 적용하기
:focus, :focus-visible, :focus-within을 활용하여 상황에 맞는 포커스 스타일을 적용해봅시다.
- 블로그 2년
xe Group 블로그 2년
- Jotai
리액트 상태관리를 쉽게
- 약관을 자동으로 만들어보자!
실무에 알고리즘 활용하기
- Intersection Observer API
Intersection Observer API란
- 의미가 통하는 시맨틱(Semantic) 태그 사용하기
최적화(SEO), 웹 접근성 향상, 가독성 모두 잡는 시맨틱 마크업!
- React-Query
React-Query에 대해 알아보자
- 딥링크(Deeplink)
링크를 누르면 앱이 실행되요.
- object에 불변성 부여하기
preventExtensions, freeze, seal
- Next.js에서 다국어 적용하기
Next.js에서 다국어를 적용해 보았습니다.
- 좋은 코드를 만드는 방법!
어떤코드가 좋은코드 일까?
- React18에서의 Concurrent, Transition
Concurrent, Transition에 대하여
- ChatGPT가 프론트엔드 개발에 가져올 변화
CHAT GPT가 무엇일까요?
- Just Javascript
Just Javascript 스터디 중간 회고
- [WEMIX.Fi] UI 개발, 온전한 서비스 전달을 위한 여정
Blockchain UX 이야기
- 정규표현식, 복잡하지 않습니다!
정규표현식을 통한 손쉬운 문자열 parsing
- React useMemo를 사용해 보자
useMemo를 언제 사용해야 하고 왜 사용하는 걸까?
- Next.js Data Fetching
넥스트JS로 데이터 패칭하기
- OG 등록하기
오픈그래프 기본 정보
- React 자식 컴포넌트 props 타입 정의(element)
ReactNode, ReactElement, JSX.Element에 대해 알아보기
- 베푸는 방법과 비판을 받아들이는 방법
좋은 협업, 좋은 팀을 만들기 위해서 필요한 것들
- 프런트엔드 시점에서 바라본 web3
DApp (Decentralized Application)
- 스마트 콘트랙트(Smart Contract)
블록체인으로 꿈꾸는 세상, 새로운 시대를 맞이한다
- async/await의 동작원리를 살펴보자!
맨날 쓰는 async/await... 원리가 뭐지??
- VS Code extension 추천: Settings sync
visual studio code의 유용한 확장프로그램 Settings sync를 소개합니다.
- webpack 이란?
마스크팩 말고 웹팩이요!
- Passion
프로그래머, 열정을 말하다.
- React에서 다국어 적용하기
React에서 다국어를 적용해 보았습니다.
- React.FC에 대하여
React.FC에 대하여
- javscript Events
키보드와 마우스 이벤트 살펴보기
- Generator란 뭘까?
함수를 일시중지 할 수 있다고??
- Stylelint 적용하기
Stylelint를 사용해보자
- useContext 가 뭔지 간단히 살펴볼까요?
useContext 알아보기
- React Hooks란 무엇일까?
React Hooks 이해하기
- Screen Reader
스크린 리더로 테스트 하기
- SCSS @use module
@use & @forward 사용하기
- vscode 기능 활용해서 업무 속도 올리기
vscode 자동 완성 (사용자 코드 조각, snippets)
- Spread 문법(전개 구문) 알아보기
펼치다(Spread)의 개념 정리
- CSS CLIP
CSS3 CLIP.
- Github repository 미러링하기
Mirroring a repository in another location
- Cookie는 뭐지 먹는건가
Http 쿠키에 대하여
- 블록체인과 관련된 용어들
용어 정리
- 웹서버와 WAS(Web Application Server)
웹서버와 WAS에 대하여.
- 말의 품격
소프트스킬 실력을 키워보자
- http proxy 서버 설정해 보기
proxy 서버의 기능을 알아보고 같이 설정하는 시간을 가져 봅시다
- Emulator
에뮬레이터로 테스트 하기
- React 입문: 설치과정과 기본구조 살펴보기
React 시작의 가장 기초적인 내용들을 다룹니다
- WEB 3.0
web3가 뭐죠?
- gulp include 활용기
gulp include를 활용해 재사용 가능한 component 작업을 해봅시다.
- Babel로 ES6를 ES5로 컴파일하면 어떻게 될까?
서로 다른 스코프를 갖는 var 키워드와 let, const 키워드를 babel은 어떻게 컴파일해주는지 확인해봅니다.
- SCSS List 내장함수 활용
list:nth, index, lenght, append, join, zip 활용 방법
- 블로그 1년
xe Group 블로그 1년
- CSS Module
React CSS Module
- Babylonjs 다뤄보기
WebGL Frameworks 경험해보기
- Nodejs 맛보기
Nodejs 기본적인 사용법
- Rest Parameter 와 Spread Syntax
ES6 신기술을 통한 가독성 향상
- "생각정리스킬"을 읽고..
생각정리스킬
- 헬로 XAML #3
XAML을 알아봅시다.
- 지식 포트폴리오
우리의 가치를 떨어뜨리지 않기
- React 컴포넌트 내 DOM 접근하기
ref, forwardRef 사용법
- 깃랩으로 프로젝트 관리
프로젝트를 효과적으로 관리하는 깃랩.
- Emmet으로 빠르게 코딩하기
Emmet을 활용하여 쉽고 빠르게 html을 코딩해봅시다.
- Javascript 안티 패턴 #2
작업 경험에 따른 지양하는 코드에 관한 이야기
- svg로 간단한 차트 구현하기
라이브러리 사용 없이 라인/파이 차트 구현해 보기
- 리액트가 쉬워지는 상태 관리 라이브러리
Zustand for State Management
- CSR과 SSR의 차이점
CSR과 SSR 이란?
- 스토리북 맛보기 #2
스토리북에 대해 간단하게 알아보자
- 헬로 XAML #2
XAML을 알아봅시다.
- API 통신
API 통신시 헤더 활용하기
- scroll-snap
CSS로 FullPage.js 처럼 만들어보자
- 웹 접근성 검수 툴 추천
웹 접근성 검수에 도움을 받을 수 있는 툴 추천
- Javascript 안티 패턴 #1
작업 경험에 따른 지양하는 코드에 관한 이야기
- 마우스 없이 코딩하기
마우스를 사용하지 않고 키보드로만 코딩하기
- React Element 복제 & 변경하여 사용하기
cloneElement 함수 사용법
- 상황에 맞는 키패드를 보여주기
inputmode
- Vue3 #6 [제거된 기능들]
제거된 기능들을 간단하게 알아봅시다.
- 헬로 XAML #1
XAML을 알아봅시다.
- 스토리북 맛보기
스토리북에 대해 간단하게 알아보자
- API 통신
API 통신과 백엔드 작업에 대하여
- FLEX-box를 FLEX 했지 뭐야! #3
FLEX 속성에 대해 알아보자
- 유용한 확장 프로그램
VS Code Extensions
- [채용] XE그룹의 UX engineer 파헤치기!
XE그룹의 UX engineer 파헤치기
- SASS mixin 활용
자주 쓰이는 CSS @mixin으로 정의하기
- INI 이란?
INI 파일에 대해 알아보고 javascript로 활용하기
- Docker 적용기
pxd 홈페이지에 Docker 적용하기
- Vue3 #5 [새로운 기능 2 - Teleport와 Fragments]
Teleport와 Fragments의 간단한 소개.
- CSS Overview
Chrome 브라우저의 새로운 기능
- package-lock.json 과연 제대로 알고 있을까?
package-lock.json의 쓰임에 대해 자세히 알아보자
- pxd 홈페이지 웹 접근성 인증 마크 획득기
pxd 홈페이지 사용자 경험 개선
- 비동기 이해하기 #2
비동기에 대해서 이해해보는 글입니다.
- 피그마 맛보기 #2
피그마 간략 사용법
- FLEX-box를 FLEX 했지 뭐야! #2
FLEX 속성에 대해 알아보자
- GIT 에 대하여
GIT 에 대해 알아보자
- 반응형 웹에서의 vw
반응형 웹에서의 vw활용법을 알아보자
- 함수의 암시적 파라미터 - this #3
암시적 파라미터인 this에 대해서 알아봅니다.
- 프로젝트 들어가기 전 체크 리스트
PL이 처음이라면 도움이 될 만한 글
- 순서도 그리기
작업의 흐름을 그려보고 코드로 구현하기
- Nuxt Data fetching
asyncData와 fetch의 차이
- Cross Browsing
크로스 브라우징(Cross browsing)이란 무엇이고, 왜 필요할까요?
- 외부에서 로컬 개발 서버에 접근하기
localtunnel
- Vue3 #4 [새로운 기능 1 - Composition API]
컴포넌트를 구성하는 새로운 방법 Composition API.
- CSS 와 렌더링에 대하여 #2
CSS 의 작동방식과 렌더링에 대해 알아보자
- 비동기 이해하기 #1
비동기에 대해서 이해해보는 글입니다.
- FLEX-box를 FLEX 했지 뭐야!
FLEX 속성에 대해 알아보자
- 피그마 맛보기
피그마 간략 사용법
- 알아두면 언젠가는 쓸데있는 CSS
쓸데없어 보여도 한 번쯤 봐두면 좋은 (진짜..?)
- 함수의 암시적 파라미터 - this #2
암시적 파라미터인 this에 대해서 알아봅니다.
- Vue3 #3 [변경된 기능 3 - v-for와 v-if]
템플릿 디렉티브 v-for와 v-if의 변경된 사용법을 알아보겠습니다.
- Scroll Magic
자주 쓰이는 스크롤 이벤트 UI
- Object 이해하기
Object의 기본적인 사용법
- 웹 접근성을 준수하는 코드 작성하기 #5
Swiper.js 사용 시 웹접근성 준수 하기
- ‘FED’로 UX하기
eXperience Engineering Group
- Nuxt.js
Vue.js 프레임워크를 기반으로 한 라이브러리 Nuxt를 알아보자
- 웹 저장소 웹 스토리지와 쿠키에 대해서
로컬 스토리지, 세션 스토리지, 쿠키에 대해서 알아봅시다.
- Typescript 알아보기 #2
Typescript가 어떤 언어인지 알아봅시다.
- html5의 요소와 콘텐츠 모델에 대하여 #1
HTML5에 추가된 콘텐츠 모델이 무엇인지 와 요소들에 대해 알아보자
- Sass 맛보기 #2
예시를 통한 Sass의 사용법
- Code-Server
Remote Coding - Web Browser에서 코딩하기
- 함수의 암시적 파라미터 - this #1
암시적 파라미터인 this에 대해서 알아봅니다.
- Typescript 알아보기 #1
Typescript가 어떤 언어인지 알아봅시다.
- 반응형웹(Responsive Web Design) 에 대하여
반응형웹의 시작과 사용방법
- Javascript Mouseover Effect
자바스크립트를 활용하여 재미있는 마우스 오버 효과를 구현해보자
- Getter, Setter
접근자 프로퍼티 Getter/ Setter
- 웹 접근성을 준수하는 코드 작성하기 #4
Popup Script
- Vue3 #2 [변경된 기능 2 - v-model]
템플릿 디렉티브 v-model의 변경된 사용법을 알아보겠습니다.
- 접근성 있는 인터페이스를 위한 최소한의 설계
책 「인클루시브 디자인 패턴」
- Sass 맛보기 #1
예시를 통한 Sass의 사용법
- OKR 실천편
OKR의 기본과 시작
- 메타버스, 이미 시작된 미래
또 하나의 세상
- WAI-ARIA란?
정보 접근성과 상호 운용성을 위한 WAI-ARIA 소개
- 함수의 암시적 파라미터 - arguments
암시적 파라미터인 arguments에 대해서 알아봅니다.
- Swiper Library 스와이프 라이브러리를 사용해보자
swiper library 기초 사용법 부터 심화 과정까지 학습해보자
- 웹 접근성을 준수하는 코드 작성하기 #3
Accordion UI Script
- SEO 적용기 #하
react/ gatsby 환경에서 검색엔진 최적화를 적용한 내용을 정리하였습니다.
- Vue3 #1 [변경된 기능 1 - 전역 API]
Vue3에서 변경된 전역API에 대해서 간단하게 알아봅시다.
- 웹 접근성을 준수하는 코드 작성하기 #번외편
대체 텍스트(숨긴 텍스트) 적용기
- 논리 연산자를 사용한 단축 평가
단축 평가 논리 계산법
- 웹 접근성을 준수하는 코드 작성하기 #2
Tab UI Script
- 이벤트 버블링, 캡처링 - 2
버블링 이벤트 실무 예제와 이벤트 위임에 대해서 알아봅니다.
- SEO 적용기 #상
WWH SEO (What is/ Why use/ How to use)
- Vue3 #0 [Vue3를 만나다]
Vue3의 달라진 점과 새롭게 추가된 기능들을 살펴봅시다.
- ScrollMagic Plugin & TweenMax
ScrollMagic 플러그인과 TweenMax을 사용해서 인터랙션을 구현해보기
- CSS3 Grid 사용기
CSS3 grid를 사용해본 경험에 대해 간단히 이야기 해보겠습니다.
- 웹 접근성을 준수하는 코드 작성하기 #1
서론 : 웹 접근성 준수는 퍼블리싱 파트만의 일이 아니다.
- Vue.js 입문 <컴포넌트 통신 방법>
같은 컴포넌트 레벨 간의 통신 방법
- javascript replace 이용한 치환 정규식
정규식 한땀한땀 이해하기
- javascript 크롬 브라우저 디버깅
크롬 브라우저로 디버깅 활용하기
- 이벤트 버블링, 캡쳐링-1
기본적인 이벤트 캡쳐링, 버블링에 대해서 정리 해보았습니다.