실용적인 프론트엔드 테스트프론트엔드 테스트에 대한 고민과 어려움을 다룬 글입니다. 클린 아키텍처에서 설명하는 테스트의 이유와 프론트엔드에서 테스트할 내용, 시각적 요소의 검증 방법, 기능적 테스트 방법, 그리고 Jest와 Cypress의 사용에 대한 내용이 담겨있습니다. 테스트는 비용이며, 시각적 테스트와 기능적 테스트를 분리하고 전문 도구를 고려하는 것이 좋습니다.2022년 05월 11일 · 4 min read프론트엔드테스트
GitHub Action으로 Yew.rs 배포하는 방법YewYew는 React와 유사한 구조를 Rust 기반으로 개발한 프론트엔드 프레임워크로, WASM으로 배포됩니다. Rust 개발환경에서 WASM 빌드 시 필수적으로 실행해야하는 rustup target add wasm32-unknown-unknown 명령어와 GitHub Action을 이용한 자동화 방법에 대해 설명하고 있습니다.2022년 03월 02일 · 2 min read프론트엔드러스트깃허브
[JavaScript] badland의 상태 관리필자는 프론트엔드 어플리케이션의 전역 상태 관리를 위해서 badland라는 라이브러리를 활용하고 있다. 이 글은 후에 면접에서 "상태관리 어떻게 하셨어요?"라고 묻는 질문에 답하기 위해서 작성하는 글이다. badland· GitHub @baealex # 우선 널리 알려진 상태 관리 라이브러리를 사용하지 않은 이유는 Redux의 상태관리가 지나치게 복잡해 보였기 때문이었고, Recoil은 간단했으나 (그 당시) IE에서 비정상적인 동작을 …2022년 01월 21일 · 11 min read자바스크립트프론트엔드
Python으로 웹 프론트엔드 개발하기Brython은 자바스크립트 대신 파이썬3를 이용하여 웹 클라이언트 사이드 개발을 할 수 있도록 지원하는 프로젝트이다. 이 글에서는 Brython의 사용법과 간단한 예제 코드를 소개하며, 자바스크립트와의 차이점도 다룬다. Brython은 파이썬 문법과 브라우저 API를 모두 사용할 수 있으며, 자바스크립트에서 사용하는 getElementById와 querySelector 메서드도 제공한다. 또한, 타이머 함수인 set_timeout과 set_interval도 지원하고 있다.2021년 12월 25일 · 18 min read파이썬프론트엔드
장고에 TypeScript와 SCSS 도입하기프론트엔드 개발에서 ES6 문법과 TypeScript, SCSS를 도입하면서 코드의 가독성과 유지보수성이 높아졌다. 이를 위해 Node.js를 사용하여 자동으로 트랜스파일링하는 코드를 작성하였다. Python으로도 시도하였지만 Node.js가 더 효율적이었다.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프로그래밍자바스크립트리액트프론트엔드