감성 개발자

이 블로그를 오래 보신 분이라면 알겠지만, 나는 제이쿼리로 DOM을 주무르던 시절부터 웹을 만들어온 사람이다. 그 시절엔 뭐만 하려고 하면 자바스크립트였다. 아코디언 메뉴도 JS, 툴팁도 JS, 부모 요소 스타일 바꾸는 것도 JS. "CSS는 못 하니까"가 당연한 전제였다.그런데 요 몇 년 사이에 그 전제가 꽤 많이 무너졌다. 최근에 사내 프로젝트 프론트 코드를 정리하다가, 예전에 자바스크립트로 짜놓은 UI 로직 중 상당수가 이제 CSS 몇 줄로 끝난다는 걸 새삼 확인했다. 실제로 걷어낸 코드가 몇백 줄이다. 오늘은 그 과정에서 실무에 바로 써먹은 모던 CSS 기능들을 정리해본다. 이론 나열이 아니라, "원래 JS로 이렇게 짰는데 지금은 이렇게 바꿨다"는 관점으로 쓴다.사진: Unsplash, Flori..

학교 급식이나 학사일정 API를 만들려면 먼저 학교 코드가 필요하다. 그런데 기존에 학교 코드를 가져오는 주소가 리뉴얼되면서 공인인증서를 요구하고 있다.그래서 많은 학교 급식 API들이 기존 DB를 사용하거나, Excel 혹은 노가다(?)로 학교 코드를 가져오고 있다. 그러던 중 유일하게 아직 안 막힌 곳을 찾아 파싱했다.다운받아 쓰거나 수정하여 자기한테 맞게 쓰셔도 된다. 이왕이면 코드를 같이 발전시켜나갔으면 좋겠다.깃허브: https://github.com/yousung/neis-school-listNPM: https://www.npmjs.com/package/neis-api사용 방법const neisApi = require("neis-api");/** * 학교명을 입력하면 학교 리스트를 반환 */n..

자바스크립트의 만능키(?) 그만큼 위험 부담도 큰 것이 eval이다. 사용을 자제하라는 게 일반적인 평이다.그럼 어떻게 eval을 대응 혹은 대신할 것인지 알아보자.왜 쓰면 안 되나막연히 "위험하다"가 아니라 이유가 명확하다.보안 — 문자열에 사용자 입력이 섞이면 임의 코드 실행(XSS)이 된다. 서버라면 더 심각하다성능 — JS 엔진은 코드를 미리 최적화(JIT)하는데, eval은 런타임에 코드가 생기므로 최적화를 포기한다. 주변 스코프 최적화까지 무효화된다디버깅 — 스택 트레이스가 eval 내부로 찍혀서 어디가 문제인지 찾기 어렵다번들러 — 정적 분석이 불가능해서 트리 셰이킹이나 minify가 제대로 동작하지 않는다CSP — Content-Security-Policy를 적용하면 eval은 기본적으로 ..

jQuery를 CDN으로 불러올 때 쓰던 주소들을 정리해뒀던 글이다. 그런데 지금 기준으로는 절반이 더 이상 유효하지 않다. 당시 기록과 현재 권장 방식을 나눠서 정리한다.당시 정리했던 것최신 버전<script src="//code.jquery.com/jquery-latest.min.js"></script>3.2.1 버전<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>1.11.1 버전 (Google CDN)<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>지금은 latest를 쓰면 안 된다jq..