Tools

다양한 기기에서 돌아가는 FE 어플리케이션을 개발하고 있다면, 사파리, 삼성 인터넷, 모바일 기기에서만 발생한다는 버그에 고통받아본 적이 반드시 있을 것이다. 브라우저의 사용 범위는 점점 넓어지고, 유저들은 더욱 다양한 브라우저와 기종으로 내가 만드는 웹 사이트에 접속한다. 심지어 글로벌 서비스라면 말할 것도 없다. 그런데 내 개발환경은 오직 최신 업데이트된 크롬 뿐이라면? 유저들이 모두 PC 환경의 최신 크롬을 쓸 것이라고 기대해선 당연히 안 된다. 특히 모바일의 시대가 도래하면서 PC와는 다르게 동작하는 모바일 브라우저에 대한 테스트는 필수가 되었다. 따라서 이번에는 웹 개발자들이 놓치기 쉽지만 매우 중요한, 모바일 디바이스 환경의 브라우저 디버깅 방법을 간단히 소개하고자 한다. 아이폰 Safari ..

프론트엔드 환경에서 API 동작을 모킹하는 것은 여러 가지 이유로 필요해진다. 프론트엔드의 동작은 필연적으로 백엔드 API와 강한 의존성을 가지게 되기 때문이다. 그런데 우리는 생산성을 높이기 위해 백엔드와 독립적인 환경에서 개발을 하고 싶다. 만약 서버 요청이 들어가는 페이지의 e2e 테스트를 짜고 싶다면? 백엔드 개발이 완료되기 전에 프론트엔드 개발에 착수한다면? 개발 서버의 특정 API에서 에러가 나고 있어 프론트엔드 개발이 블로킹된 상황이라면? 위와 같은 케이스는 API단을 모킹하는 수고를 들일 만한 충분한 이유가 될 것이다. 특히 두 번째 이유는 꽤나 자주 일어나는 일인데, 보통 프로젝트를 시작할 때 프론트엔드와 백엔드가 동시에 개발에 착수하곤 하기 때문이다. 서비스 런칭 데드라인은 가까워질 터..

터미널을 자주 사용한다면 한번쯤 생각해봤을 것이다. 커멘드라인으로 터미널에서 직접 IDE를 실행할 수 있다면 정말 편할 텐데! 그래서 써보는 아주 간단한 웹스톰 커멘드라인 적용법. 웹스톰 커멘드라인 실행환경 만들기 1. 우선 웹스톰을 실행한다. 2. Tools > Create Command-line Launcher 3. 환경변수에 웹스톰 경로를 설정하라는 팝업을 확인할 수 있다. 4. 설정 파일에 들어가서 다음과 같이 PATH 환경 변수에 Webstorm 실행 파일의 경로를 추가해준다. # zsh을 사용한다면 vim ~/.zshrc # bash를 사용한다면 vim ~/.bash_profile export PATH="/Applications/WebStorm.app/Contents/MacOS:$PATH" 5..