baealex's 프론트엔드

배진오

@baealex

·

창작을 좋아하는 개발자입니다.

카테고리

실용적인 프론트엔드 테스트

최근에 프론트엔드 테스트에 대해서 고민이 많다. 그 동안 한번도 프론트엔드에서 테스트와 관련된 작업을 하지 않았던게 컸고, 막상 하려니 도대체 뭘 테스트 해야하지? 라는 생각이 들었기 때문이다. 이것저것 테스트 코드를 작성해보니 정말 이게 맞을까? 라는 의문도 커졌다. 다양한 자료를 찾아보다 아래 영상을 보게됐는데... 오! 나름의 방향을 찾은 것 같은 느낌이 들었다. …

2022년 05월 11일 · 4 min read

프론트엔드

GitHub Action으로 Yew.rs 배포하는 방법

YewYew는 React와 같은 구조를 Rust 기반으로 개발하여 WASM으로 배포하는 프론트엔드 프레임워크다. Yew를 써봐야지 익혀봐야지 하면서도 미뤄두고 있다가 최근에서야 해보게 되었다. 개발 환경을 오래전에 만들어서 배포하는 워크플로우를 만들다가 계속 실패해서 난감했다. rustup target add wasm32-unknown-unknown 위 명령어를 필수로 실행해야 WASM 빌드가 정상적으로 진행됐다. 아마 예전에 해뒀는데 시간지나서 까먹은 것 같다. 나중되면 …

2022년 03월 02일 · 2 min read

프론트엔드

[JavaScript] badland의 상태 관리

필자는 프론트엔드 어플리케이션의 전역 상태 관리를 위해서 badland라는 라이브러리를 활용하고 있다. 이 글은 후에 면접에서 "상태관리 어떻게 하셨어요?"라고 묻는 질문에 답하기 위해서 작성하는 글이다. badland· GitHub @baealex # 우선 널리 알려진 상태 관리 라이브러리를 사용하지 않은 이유는 Redux의 상태관리가 지나치게 복잡해 보였기 때문이었고, Recoil은 간단했으나 (그 당시) IE에서 비정상적인 동작을 …

2022년 01월 21일 · 11 min read

자바스크립트

프론트엔드

Python으로 웹 프론트엔드 개발하기

예전에 장난삼아 훗날엔 파이썬으로 프론트 개발하는 날이 올거라서 자바스크립트를 깊게 하지 않겠다고 말했던 적이 있었다. 파이썬을 사랑하는 마음에 던진 말이었는데 정말 그런날이 올지도 모른다는 생각이 들었다. Brython이라는 존재가 그러한 확신을 심어주었다. Brython은 사실 꽤나 오래전부터 존재한 것으로 보여지나 필자는 2021년 7월 즈음 처음 존재를 알게 되었다. 이 글에는 Brython을 사용하면서 …

2021년 12월 25일 · 18 min read

프론트엔드

장고에 TypeScript와 SCSS 도입하기

결론부터 말하면 스태틱 파일이 포함된 디렉터리를 순회하며 자동으로 ts는 js로 scss는 css로 트랜스파일을 해주는 코드를 작성하였다. 왜 도입하게 되었나 블렉스에서 프론트엔드 기술은 순도 100% JS와 CSS다. JS의 경우 최대한 하위호환을 유지하기 위해서 ES5 문법으로 코딩하고 있었는데 최근에서야 백틱이 ES6에 추가된 문법이라는 것을 알게 되었다. 🤔 var number = 5; var …

2020년 06월 09일 · 8 min read

프론트엔드

타입스크립트

Electron 시작하기 (With React)

일렉트론은 Web Stack을 이용하여 데스크톱 어플리케이션을 개발할 수 있는 도구이다. GitHub에서 Atom을 제작하기 위해서 만들었으며 일렉트론을 사용하여 만들어진 어플리케이션은 Slack, VS Code, Discord가 있다. 기본적으로 크로미움을 내장하고 있는 것으로 보인다. 프레임워크 구성 main.js 메인 프로세스 데스크톱 앱의 백엔드 역할을 수행 앱 자체의 총괄적인 부분(Node.js와 거의 동일) 업데이트 제어 OS GUI …

2020년 04월 24일 · 17 min read

자바스크립트

프론트엔드

React로 Hello World 출력

Hello, React React로 Hello World를 출력해보자. 기본적인 설치 방법과 사용 방법을 기록하기 위해서 작성한다. How to install npm install -g create-react-app How to make application create-react-app hello-world 위 명령어를 이용하여 애플리케이션을 생성할 수 있다. 생성된 디렉터리 아래 src 내부의 모든 파일을 지운 뒤 index.js와 index.css를 생성하고 index.js에 아래와 같은 내용을 …

2020년 01월 05일 · 2 min read

프로그래밍

자바스크립트

프론트엔드