본문 바로가기

부스트코스40

정규표현식(Regular Expression) 정규표현식은 문자열의 특정 패턴을 찾을 수 있는 문법을 말한다. 정규표현식을 이용해 패턴에 맞는 문자열을 추출, 삭제, 치환 등 조작 할 수 있다. 보통 이메일, 주소, 전화번호 같은 일정한 규칙이 있는 데이터가 그 규칙에 맞는지 검증하고, textarea에 입력된 것 중 불필요한 입력값을 추출하고, 트랜스파일링, 개발 도구에서의 문자열 치환 등에 쓰인다. (트랜스파일링은 예전 버전의 브라우저를 지원하기 위해 해당 브라우저에 맞는 문법으로 변환시켜주는 것을 말한다. 개발 도구에서의 문자열 치환은 개발 도구에서 코드의 어떤 부분을 치환한다는 의미로 쓰여졌다.) 1. 정규표현식 기본 사용법 1) 숫자 하나 찾기 var result = "abc3zzz".match(/\d/)[0]; console.log(res.. 2019. 8. 22.
생성자 패턴 (new 키워드와 prototype 객체) 애플리케이션이 복잡해질수록 모듈화가 필요하다. 자바스크립트도 객체로 비슷한 속성과 행위를 묶어서 모듈화 할 수 있다. 이렇게 좀 더 객체지향적인 방법으로 표현하는 방법을 생성자(constructor) 패턴을 통해 이해해보자. 먼저, 자바스크립트의 객체는 객체 리터럴로 쉽게 표현할 수 있다. var healthObj = { name : "달리기", lastTime : "PM10:12", showHealth : function() { console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요"); } } 이러한 코드를 객체리터럴이라고 하는데, 이 healthObj의 형태를 가진 객체가 여러 개 필요할 때가 있다. name이 "개발자"이고, 운동을 한 시.. 2019. 8. 21.
웹이 동작하는 법 (HTTP 프로토콜의 이해) 보통 인터넷이라 하면 웹을 떠올린다. 하지만 인터넷이 웹인 것은 아니다. 컴퓨터 하나에는 여러 개의 서버가 존재하고, 각 서버는 다른 포트번호를 사용한다. 웹은 80번 포트를 이용하고 있고, 이메일은 25번, FTP는 21번을 사용하고 있다. 인터넷은 TCP/IP 기반의 네트워크가 전 세계적으로 확대되어 하나로 연결된 네트워크들의 네트워크, 즉, 수많은 네트워크의 결합체라고 할 수 있다. 웹은 인터넷 기반의 서비스 중 하나인 것이다. 웹에선 서로 통신하기 위해 어떤 규약이 필요한데, 이 규약이 바로 HTTP이다. 1. HTTP (Hypertext Transfer Protocol)란? 팀 버너스리(Tim Berners-Lee)와 그 팀은 CERN에서 HTML뿐만 아니라 웹 브라우저 및 웹 브라우저 관련 기.. 2019. 8. 20.
웹 프로그래밍을 위한 프로그래밍 언어 프로그램을 만들기 위한 프로그래밍 언어의 종류는 굉장히 다양하다. 10년 주기로 보통 40~50개의 프로그래밍 언어가 만들어지고 있다고 한다. 프로그래밍 언어의 종류와 웹 프로그래밍에 좀 더 최적화된 프로그래밍 언어의 장단점에 대해 알아보겠다. 먼저, 언어의 종류는 저급 언어, 고급 언어로 나눌 수 있다. 1. 저급 언어 저급 언어는 기계 중심의 언어를 말한다. 컴퓨터는 전기로 동작한다. 즉, 전기 신호인 1(on), 0(off) 두 가지 상태 값으로 동작한다. 0과 1로 표현되는 숫자를 2진수라고 한다. 2진수로만 작성하는 프로그래밍 언어를 기계어(Machine Language)라고 한다. 이렇게 숫자로만 이루어진 언어는 사용하기도 어렵고, 유지보수도 어렵다. 그래서 이 숫자로 된 문장과 1:1로 대응.. 2019. 8. 20.
jQuery 사용하지 않고 프로그래밍하기 (ft.Vanilla JS) 오늘 부스트코스 웹 프로그래밍 프로젝트 4-2 코드 리뷰를 받았다. (참고: [부스트코스] 웹 프로그래밍 프로젝트4-2 리뷰어님 덕에 요즘은 jQuery를 사용하기보단 순수 JavaScript를 사용하는 추세라는 걸 알게 됐다. 전에는 jQuery가 사용하기도 쉽고 키보드 치는 것도 짧아서 자주 썼는데, 지금은 순수 JavaScript 연습할 겸 jQuery 사용을 자제하고 있는 중이었다. 마침 또 jQuery 사용을 줄이는 추세라니 신기했다. jQuery가 확실히 간편하긴 하지만, 이젠 jQuery에서만 지원하던 메서드를 JavaScript로 구현이 가능하고, 브라우저 호환성도 많이 좋아지는(우리나라에선 아직이라고 한다) 등의 이유 때문이다. 자바스크립트 라이브러리 내용 중, 1. jQuery에 jQu.. 2019. 8. 19.
handlebar 중첩 데이터 바인딩, @데이터변수 지난번에 간단히 handlebar 라이브러리 사용법을 정리했었다. ▷ 자바스크립트 템플릿 라이브러리 - handlebars 이전 글에 이어 쓰기엔 너무 길어질 거 같아서 더 공부하게 된 것들(사용해본 것들)은 여기에 새로 정리하려고 한다. 1. 중첩된 데이터 가져오기 1) each 헬퍼 밖의 데이터 만약 템플릿에 바인딩할 데이터가 var data = { students: [ { name: "enai", age: "10" }, { name: "tistory", age: "20" } ], title: "Hello" } 이렇고, Hello enai(10) Hello tistory(20) 이런 결과를 나타내고 싶다. students가 배열이므로 each 헬퍼를 사용하여 템플릿을 다음과 같이 만든다. {{#eac.. 2019. 8. 19.
이클립스에서 코드 들여 쓰기 탭 확인하기 (+ 코드 스타일 적용까지) edwith 부스트코스 웹 프로그래밍 강의를 듣고 있다. 부스트코스는 강의 챕터가 끝날 때마다 프로젝트가 주어지고, 프로젝트를 제출하여 현업 개발자분들에게 리뷰를 받아볼 수 있는 서비스가 있다. 그런데, 최근 제출한 프로젝트 코드 리뷰에서 코드 들여 쓰기 기준이 일정치 않다는 피드백이 왔다. (참고: [부스트코스] 웹 프로그래밍 프로젝트4-1) 이건 전에도 받아본 적 있던 거라 좀 민망했다. 들여 쓰기 잘해야 된다고 알고는 있었는데, 처음 지적받았던 그 리뷰 덕에 회사마다 코드 포맷 표준이 달라 tab 크기가 달라질 수 있다는 것도 알게 되었다. 그런데 똑같은 실수를 하다니ㅜㅜ (사진 속 코드에서 ······ 이 스페이스, →이 탭이다.) 항상 탭으로 들여 쓰기를 하지만, 다른 데서 코드를 짜 보고 복사.. 2019. 8. 18.
컴퓨터뿐만 아니라 사람도 이해할 수 있는 클린 코드 클린 코드란 가독성 좋은 코드를 말한다. 기능이 복잡할수록 코드도 복잡해지고 지저분해지기 쉽다. 동시에 기능이 복잡한 프로그램은 여러 명의 개발자가 함께 개발해야 하거나 여러 기능을 지속적으로 수정하고 추가해야 할 상황이 많다. 그래서 코드는 최대한 사람들도 이해하기 쉽도록 만들어야 한다. 1. 코딩 컨벤션(coding convention) 따르기 함수나 변수 등의 이름을 짓는 규칙을 말한다. 함수의 이름은 목적에 맞게 지어져 있어야 한다. 함수에 있는 내용이 이름과 어울리도록 하나의 로직을 담고 있어야 한다. 함수는 동사+명사로 이루어져 있어야 한다. 함수의 이름은 카멜 표기법 또는 _를 중간에 사용하여지어야 한다. (보통은 카멜 표기법을 많이 사용한다) 변수는 명사이며 의미 있는 이름으로 지어야 한다.. 2019. 8. 9.
자바스크립트 템플릿 라이브러리 - handlebars 템플릿으로 HTML을 변경하는 작업을 할 때 도와주는 handlebars 라이브러리가 있다. replace 메서드로 템플릿을 적용했던 기존 방법으론 템플릿 내용이 복잡하거나 길어질 수록 가독성도 떨어지고 코딩하기도 힘들다. template using handlebar class가 show인 section 안에 게시글 목록을 만들 것이다. section 태그 안에 템플릿을 만들어뒀다. {{ }} 안의 내용과 매칭되는 데이터가 파싱될 것이다. 1. handlebars 설치 먼저 라이브러리를 사용하기 위해 설치를 해줘야 한다. 1) 구글에 handlebars cdn을 검색한다. cdn은 content delivery network라는 뜻으로, 직접 다운로드 받지 않아도 가장 가까운 캐시 서버에서 컨텐츠를 가져.. 2019. 8. 9.
자바스크립트 라이브러리 자바스크립트에도 개발을 쉽게 할 수 있도록 도와주는 라이브러리가 있다. 그중, jQuery와 Framework에 대해 정리해보겠다. 1. jQuery edwith의 웹 프로그래밍 강의를 들으며 2018년 기준, jQuery는 지난 10년간 가장 인기 있는 라이브러리라는 것을 알게 됐다. 나도 웹 프로그래밍 공부를 시작하면서 JavaScript를 공부하면서 제일 처음 접한 라이브러리가 jQuery였다. 그만큼 유명하고 많이들 사용하고 있구나 생각이 든다. (참고로 jQuery는 w3schools 에서 공부했다.) 그동안 jQuery의 인기의 이유는 다음과 같다. IE6, 7, 8를 포함해서 다양한 웹 브라우저의 API 간의 차이로 인해, 브라우저에 따라 코드 동작이 잘 안 되는 경우가 많이 있었다. jQu.. 2019. 8. 8.

티스토리툴바