- [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
기본적인 이벤트 캡쳐링, 버블링에 대해서 정리 해보았습니다.