보급형 개발자의 웹개발 노트

프론트엔드 성능 최적화 가이드 수강생 2천 명이 선택한 인프런 인기 강의 다년간의 컨설팅과 강의 노하우를 담았다! 4가지 실전 서비스로 배우는 웹 성능 최적화 기법 '웹 성능 최적화'는 프론트엔드 개발자라면 반드시 고민해야 하는 이슈다. 서비스 환경과 상황에 따라 필요한 최적화 포인트가 다르고, 기법도 매우 다양하기에 개발 중인 서비스 특성에 맞게 커스터마이징하는 능력이 중요하다. 저자는 수많은 기업의 웹 서비스 성능을 컨설팅하고, 삼성 SSAFY, 프로그래머스, 인프런, 스터디파이 등 강의 플랫폼에서 최적화 및 개발 강의를 진행한 경험을 책에 고스란히 녹여 냈다. '성능 최적화' 주제를 효과적으로 배우는 데 이론보다는 실습이 중요함을 강조하며 현장감 있게 구성했다. 이 책은 실생활에서 흔히 개발하는 4..

우연히 udemy.com 에서 web developer 과정을 인강으로 들은 뒤에 오...여기 괜찮네 싶어서 이것저것 다른 강의도 찾아보다가 알게 된 bootstrap 3에 대한 인강이다. 세일 기간에 $18.99로 구매한 강의인데 우리 돈으로 2만원도 채 안되는 돈으로 고품질의 강의를 들을 수 있다는건 꽤나 좋은 기회이다. https://www.udemy.com/code-responsive-website-twitter-bootstrap 이 강의에서는 bootstrap으로 반응형 웹사이트 하나를 만들어 가는 과정을 설명해 준다.설명도 단순하고 이해하기도 쉽다. 또 작은 폰 화면에서도 코드가 잘 보이도록 확대되어 나와서 잘 만든 강의구나 싶다.얼마 전 bootstrap에 대해서 알고 난 뒤 지금 만들고 있..

지나가는 길에 node.js란 것에 대해 듣고 그냥 자바스크립 라이브러리인가? 하는 생각이 들었는데 그건 아닌가 보다. 서버 측에서 돌아가는 자바스크립트인 모양이다. 여기 또 좋은 글이 있으니 시간날 때 읽어봐야겠다. http://blog.outsider.ne.kr/480위의 블로그에서는 아래 슬라이드쇼에 대한 설명을 구체적으로 잘 해주고 있다. http://www.scribd.com/fullscreen/23801896?access_key=key-897yuh5c3gx3plovytr&allow_share=true&escape=false&view_mode=slideshow

http://www.yes24.com/24/goods/1522512 평소에 웹표준에 대해 관심이 많았던 차에 우연히 이 책을 알게 되어 구입을 하게 되었는데, 정말 도움이 많이 되는 책이다. 초보를 위한 책이라기 보다는 뭐랄까...주먹구구식으로 써왔던 CSS에 대해 이론적으로 배우게 된다고 할까? 그 동안 아마추어로서 사이트 개발을 하면서 CSS를 써오면서도 제대로 배운 적도 없고 항상 목말라 있었는데 이 책을 읽으면서 그 중요성과 활용도, 가치, 웹 표준에 맞춰야 하는 당위성을 찾아가고 있다. 2008년 맥을 사용한 이후부터는 사이트를 만들면서 맥용 사파리나 파이어 폭스에서도 IE에서와 동일한 UI와 기능이 동작하도록 항상 신경을 쓰면서 만들었는데, 어찌보면 그 만큼 시간이 더 투자될 수도 있겠으나 사..

요즘 그누보드를 사용해서 사이트를 하나 만들고 있다. 처음엔 XE를 사용하려고 했는데 초보의 입장에서 질의응답이 활성화가 덜 되어 있고, 예전 제로보드에 비해 스킨 등의 개발이 안되어 있는 것 같아 포기했다. 하지만 초창기 XE를 썼을 때와는 많이 달라진 부분이 있었다. 초창기 버전에서는 도대체 어떻게 써야하는 것인지 개념 조차 잘 잡히지 않았고 뜻한대로 잘 만들어지지도 않았는데, XE도 여전히 좀 복잡한 듯 보이긴 하지만 한결 쓰기 편해졌다는 느낌이었고, 커뮤니티 기반의 간단한 사이트 하나는 금방 뚝딱 만들 수 있을 것 같았다. 어쨌거나, 그누보드가 스킨이나 여러 가지 면에서 아직은 활용도가 높은 것 같아 선택을 해서 사용 중인데, 여기 저기 소스를 고쳐가면서 할 수도 있고 타인으 스킨도 어느 정도 커..

예전 어느 블로거의 글을 보고 소스코드를 블로그에 넣을 수 있는 방법이 있다는 것을 알았는데, 그동안 잊고 지내다가 업그레이드를 해봤다. http://alexgorbatchev.com/wiki/SyntaxHighlighter 티스토리에는 스킨 -> HTML/CSS 편집 메뉴에서 images 폴더에 위의 하이라이터 자바스크립트와 CSS 파일 등을 모두 올려놓은 뒤 URL만 처럼 바꿔 주면 된다. 이전 버전을 쓰고 있었다면 호환성을 유지하는 방법도 적혀있는데 해보니 잘 안되네...쩝

여러 가지 방법이 있을 수 있겠지만 아래와 같이 해결했다. ... 닫기 부모창에서 새 창을 연 뒤 코드를 수행하고 마지막으로 새 창을 닫으면서 부모창을 새로 불러오는 것이다. 새 창에서 어떤 값들이 변경되고 DB에 저장이 된 후에 부모창에서 변경된 값을 반영해야 할 때 쓰면 유용하다. 아마 문제가 있다면 부모창에 검색결과가 나오고, 그 뒤에 새 창을 열었다면 아마 위의 코드로는 부모창의 검색결과가 보여지는 것이 아니라, 검색 전의 초기화면이 보여질 것이다. 이 때는 다른 방법을 찾아서...흠.

jQuery는 자바스크립트 라이브러리로 알고 있습니다. 여러 이미지 갤러리 등에서도 많이 사용하고 있더군요. 배워두면 상당히 유용할 것 같습니다만, 아래 예제도 jQuery를 이용해서 라운드 코너를 만드는 방법입니다. 위의 이미지는 기본적인 예제이고 아래 사이트에 들어가시면 다양한 적용방법이 나와 있습니다. http://www.atblabs.com/jquery.corners.html

2009/01/09 - [CSS/JavaScript] - 폼에 CSS 적용하기 앞서의 방법이 배경색 지정 등을 화려하다면, 이 방법은 깔끔한 처리로 이것도 괜챦습니다. http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html