본문 바로가기

IT 관련/javascript & jquery

javascript 동등 연산자 javascript 동등 연산자는 자바스크립트에서 사용할 때 타입 강제 변환이 일어나 다루기 까다롭습니다. 타입 강제 변환이란 연산을 수행할 때 특정 타입이 다른 타입으로 자동으로 변환되는 것인데 이 때문에 예상치 못한 결과가 나타나기도 합니다. 주로 ==와 != 연산자를 사용할 때 타입 강제 변환이 일어납니다. 이 두 연산자는 서로 다른 데이터 타입을 비교할 때 타입을 강제로 변환하고 같은 데이터 타입을 비교할 때는 타입을 변환하지 않습니다. 우리가 작성하는 코드에는 수많은 인스턴스가 존재하기에 동등 연산자 사용 시 우리가 예상하는 대로 흘러가지 않을 수도 있습니다. 숫자와 문자열을 비교할 때는 먼저 문자열이 숫자로 변환되고 그 후 비교 연산이 수행됩니다. // 숫자 5와 문자열 5 console.lo.. 더보기
javascript 변수, 함수, 연산자 - 함수선언 지난 글에 이어서 함수를 선언하고 바로 호출하기에 대해서 알아보겠습니다. 자바스크립트에서는 함수 이름이 없는 익명 함수를 선언할 수 있고 다음 예제처럼 선언한 익명 함수를 변수나 프로퍼티에 대입할 수도 있습니다. 3. 함수 선언하고 바로 호출하기 var doSomething = function() { // 함수 본문 } 이러한 익명 함수는 선언과 동시에 호출할 수 있고 또 그 반환 값을 변수에 할당하는 것도 가능합니다. 익명 함수 선언문 끝에 괄호를 열고 닫으면 바로 호출할 수 있습니다. // 나쁜 예 var value = function() { // 함수 본문 return { message:"Hi" } }(); 이 예제에서는 함수가 선언과 동시에 호출되었기 때문에 변수 value에는 함수가 아닌 객체가.. 더보기
[java] APM 프로파일링 툴 프로그램을 만들고 성능이 느리다고 할 때 가장 먼저 해야 하는 작업은 병목 지점을 파악하는 것입니다. 자바 기반의 시스템에 대하여 응답 속도나 각종 데이터를 측정하는 프로그램은 많이 있습니다. 애플리케이션의 속도에 문제가 있을 때 분석하기 위한 툴로는 프로파일링 툴이나 APM 툴 등이 있습니다. 이 툴을 사용하면 병목 지점을 쉽게 파악할 수 있습니다. 하지만 대부분의 프로젝트나 운영 사이트에서 예산상의 이유로 사용하지 않습니다. 안타까운 현실입니다. 프로젝트에서는 프로파일링 툴을 사용하여 튜닝을 진행합니다. 물론 APM 툴도 사용합니다. APM 툴을 프로파일링 툴과 비교하면 프로파일링 툴은 개발자용 툴이고 APM 툴은 운영 환경용 툴이라고 할 수 있습니다. 각각의 장단점이 있기 때문에 뭐가 더 낫다고 말.. 더보기
[javascript] 기본 디렉터리 구조 다음과 같이 3개의 주요 자바스크립트 디렉터리가 포함된 구조가 가장 많이 쓰입니다. build 최종 빌드 파일을 위한 디렉터리로, 형상 관리 서버에는 이 디렉터리를 저장하지 않습니다. src 소스 파일을 위한 디렉터리로, 관련된 파일끼리 모아놓은 하위 디렉터리를 포함합니다. test 또는 tests 테스트 파일을 위한 디렉터리로, 주로 src 디렉터리 구조와 디렉터리 구조가 같습니다. 제가 관리하는 css 프로젝트는 기본 디렉터리 구조를 조금 변경해서 사용합니다. CSS는 build 디렉터를 형상 관리 서버에 저장하지 않지만, release 디렉터리는 항상 안정된 최신 버전의 빌드 파일을 저장합니다. src 디렉터리는 하위 디렉터리가 여러개 있고 이 하위 디렉터리에는 비슷한 기능끼리 모아두었습니다. te.. 더보기
javascript 자동화 나는 10초면 할 수 있는 일을 자동화하려고 온종일 프로그래밍하는 건 좋아하지 않는다. 2000년도 이전가지는 형상 관리 서버에 저장한 자바스크립트 파일을 주석까지 포함해서 그대로 배포하는 일이 많았습니다. 마치 미러링처럼 로컬에 10개 파일이 있으면 서버에도 똑같이 10개의 파일이 있었습니다. 따라서 로컬 파일과 서버 파일이 완벽히 같아서 변경사항을 빠르게 적용할 수 있었습니다. 이렇게 파일이 서버에 그대로 배포되어 있다 보니 이른바 '소스보기' 시대가 열리게 되었고 많은 웹 개발자가 웹사이트에 접속해 웹 페이지의 소스를 보며 공부하는 시기이기도 했습니다. 당시 자바스크립트는 요즘과 비교해서 용량이 굉장히 작았습니다. 오늘날 최신 웹 어프리케이션은 자바스크립트 코드가 수천 줄에 달하고 코드를 작성하는 .. 더보기
[javascript] 파일과 디렉토리 구조 빌드 시스템을 갖추기 전에 첫 번째로 정해야 할 것은 파일과 디렉토리 구조를 구성하는 방법입니다. 구조는 프로젝트 성격에 아주 큰 영향을 받습니다. 예를 들면 자바스크립트 라이브러리만 단독으로 개발하는 프로젝트와 웹 사이트에 필요한 모든 파일을 관리해야 하는 프로젝트는 구조가 다를 수밖에 없습니다. 1. 좋은습관 다음은 프로젝트 성격과 관계없이 자바스크립트 파일과 디렉토리 구조를 프로젝트에 적용할 때 추천하는 방법입니다. 파일당 객체 하나 각 자바스크립트 파일에 객체 하나만 정의해야 합니다. 이러한 규칙은 다른 프로그래밍 언어에서도 쉽게 찾아볼 수 있으며 일반적으로 유지보수가 더 쉬워집니다. 파일에 하나의 객체만 정의하면 자연스레 파일 수가 많아지는데 이렇게 파일이 많아지면 같은 파일에 여러 명이 동시에.. 더보기
코드에서 구성 데이터 분리하기 코드는 컴퓨터가 실행하는 명령어 집할일 뿐 그 이상도 그 이하도 아닙니다. 데이터는 명령어에 의해 전달되기도 하고 수정되기도 하지만 궁극적으로는 데이터를 이용해 결과물을 만듭니다. 문제는 데이터를 수정할 때 생깁니다. 소스 코드는 수정할 때마다 에러가 발생할 위험이 있는데, 데이터 값을 변경하려고 코드를 바꾸면 다른 명령어에 영향을 미쳐 필요치 않은 위험을 초래합니다. 잘 디자인된 애플리케이션에서는 주요 데이터를 소스 코드밖에 두어 에러가 발생할 걱정 없이 데이터를 수정할 수 있습니다. 1. 구성 데이터란? 구성 데이터는 애플리케이션 코드에 직접 입력된 값입니다. 다음 예제를 통해 살펴보겠습니다. // 코드에 삽입된 설정 데이터 function validate(valeu){ if(!value){ aler.. 더보기
javascript 브라우저 탐지 브라우저 탐지 방법은 웹 개발에서 항상 뜨거운 쟁점입니다. 이 논쟁은 특히 과거에 가장 인기 있었던 넷스케이프 내비게이터의 등장으로 더 일찌감치 시작되었습니다. 당시 넷스케이프 2.0은 다른 웹 브라우저보다 훨씬 발달하여 웹사이트가 사용자에게 정보를 보내기 전에 사용자 에이전트 문자열을 확인하는 것도 가능했습니다. 이 때문에 많은 브라우저 공급사, 특히 마이크로소프트에서는 어쩔 수 없이 당시 쓰였던 브라우저 탐지 방법에 맞춰 사용자 에이전트 문자열을 넣게 되었습니다. 1. 사용자 에이전트 탐지 요즘에는 클라이언트에서 브라우저를 주로 탐지하지만, 쵝에는 서버에서 사용자 에이전트 문자열을 이용하여 브라우저를 탐지했습니다. 당시에는 단지 사용자 에이전트 문자열을 기준으로 서버에서 특정 브라우저의 접속을 막아 .. 더보기