ReactJS 태그 글

React에서 dialog 만들기

React에서 dialog 만들기

바쁘다는 핑계로 너무 오랜만에 글을 올리는 것 같네요. 😥 1일 1커밋 그거 뭐 별일인가 하는 생각으로 살고는 있지만, 그것관 별개로 770일간 쌓아 올린 탑이 무너지는 건 슬픈 일이라 일하면서도 꾸준히 contribute은 진행하고 있습니다.그러다 보니 퇴근하고 코드 좀 치면 산책(매일 한 시간 이상은 뒷산을 걷습니다) 나갈 시간이라 블로그에 통 신경을 못 쓰고 있었네요. ua에 내장된 window.confirm,

ReactJSTypeScript
React 테스트 환경 구축하기

React 테스트 환경 구축하기

create react app으로 react 애플리케이션을 생성하면 이런 문제에 관해 크게 고민할 일이 없으나, 전 cra에서 snowpack을 거쳐 요즘은 vite를 쓰고 있기에, 테스트 환경을 알아서 구축해줘야 합니다. 참고로 vite는 Vue.js를 만든 Evan You가 제작한 빌드 도구로, Esbuild를 사용해 제작되었습니다.Webpack 등으로 개발 서버를 시작해 HMR을 사용해도, 코드 양이 늘어나기 시작하면 병목이 나타나기 마련입니다. Vite는 ES Modules, Esbuild를

ReactJSJest
React, Node.js를 이용한 영어 단어 공부 앱 제작기

React, Node.js를 이용한 영어 단어 공부 앱 제작기

🏁 시작 어쩌다 보니 팔자에 없던 영어 과외를 진행하게 되었습니다. 자연스럽게 단어 시험을 쳐야 했고, 아무래도 웹앱 형태로 진행하는 게 편하지 않을까 싶은 제 판단(과 같이 수업하시는 분의 당당한 요청)에 의해 단어 공부 및 시험을 위한 웹앱을 제작했습니다. 살인적인 1주일이란 마감일과 함께요. 어디가서 코딩한다고 말해봤자 얻는 건 학부생의 "혹시 xx 언어도 다룰 줄 아세요?"라는 질문과

Node.jsReactJSTypeScript제작일지
브라우저에서 GIF / MP4 변환하기

브라우저에서 GIF / MP4 변환하기

GithubLive Demo 웹 어셈블리를 통해 브라우저에서 Javascript뿐 아니라 C, C++ 등의 언어로 작성된 프로그램도 돌릴 수 있는 시대가 도래한 지도 꽤 되었습니다.고로, 서버에 파일 업로드 => 파일 변환 => 변환된 파일 다운로드라는 번거로운 과정을 거쳤던 파일 변환을 FFmpeg을 통해 클라이언트 혼자서 해낼 수 있게 되었습니다. 앱 생성 snowpack으로 typescript를 이용한 react 앱 템플릿을 생성해줍니다. 물론

ReactJSTypeScriptFFmpegWebAssemblygifmp4
About IU

About IU

소개 React.js와 친해지기 프로젝트 일환으로, 앞서 html, css, javascript로 제작한 트와이스 팬 페이지의 디자인을 기반으로 React로 아이유 팬 페이지를 제작했습니다.팬 페이지 만들 대상을 고민하다, 로고를 중심으로 Home, About / Discography, Filmography로 두 개씩 대칭을 맞출 수 있는 아이유를 선택했습니다. 앨범 데이터 JSON으로 작업하면서 양이 워낙 많아 괜히 했나 생각도 잠깐

ReactJS아이유
구구단 문제 리메이크 - React

구구단 문제 리메이크 - React

깃허브도전해보기 React랑 조금 친하게 지내보려고 예전에 만들어둔 것들을 React로 다시 짜보고 있습니다.로또 추첨기가 첫 번째, 구구단 문제가 두 번째, 다음으론 가사집을 생각하고 있습니다. 사용자가 종료하기 전까지 문제가 계속되고, 난도도 계속 상승하던 예전관 달리 난이도와 문제 수를 고를 수 있게 해뒀습니다.보통을 2 ~ 20, 어려움을 11 ~ 20, 아주 어려움을 11 ~ 30으로 해뒀다가, "보통"이란 난이도에서

ReactJS구구단제작일지