HTML5에서의 시맨틱 웹과 시맨틱 태그(Semantic Web, Semantic tag)

시맨틱 웹이란?

구글에 검색했을때 위키백과에 나오는 내용을 그대로 적어보면 아래와 같다.

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,

현재의 인터넷과 같은 분산환경에서 리소스에 대한 정보와 자원 사이의 관계의미 정보를 기계가 처리할 수 있는 온톨로지 형태로 표현하고,

이를 컴퓨터가 처리하도록 하는 프레임워크이자 기술이다.

웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.

쉽게 생각하면 첫 줄만 읽으면 된다.

의미론적인 웹은 말 그대로 컴퓨터가 웹사이트를 단순한 코드의 구성이 아닌 의미를 가진 사이트라는걸 알 수 있게 만드는 것이다.

시맨틱 웹의 이상향은, 인터넷에 방대한 양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하는 결과값을 정확히 주는 것이다.

여기까지 읽었을 땐 단순히 검색엔진 성능 향상에만 유용하게 쓰일 것 같지만, 찾아보니 암 치료 증진에도 기여할 수 있고, 석유가스 산업에도 응용될 수 있으며, 이외에도 많은 기업에서 사용할 수도 있다고 한다.(어떻게 이런 결과가 도출된건지는 잘모르겠다ㅋㅋ)

크게 생각 했을때 데이터들을 관리하고 통합하는 것이기 때문에 위와 같은 기대를 하는 것 같다.

HTML5에서의 시맨틱 웹

HTML5 이전까지는 시맨틱 태그라는 것이 없었다.

그 때의 대부분의 태그는 <div>로 감싸져 있었을텐데,

개발자의 입장에서는 코드로 사이트 전체 구조를 한눈에 파악하기 힘들었을 것이고, 검색 엔진은 사이트의 의미를 정확히 파악하지 못해 검색 결과값의 정확도가 떨어졌을 것이다.

그래서 나온 대안이 시맨틱 웹이고, 그에 따라서 HTML5에서 시맨틱 태그(Semantic tag)라는 것이 나온 것이다.

예를 들어 설명하면

기존에는 <div class="header">헤더입니다</div> 이렇게 썼던걸,

<header>헤더입니다</header> 이런식으로 쓰는 것이다.

<div>태그, <header>태그 둘 다 구역을 나눌 때 쓰는 껍데기 태그인데 둘의 차이는 의미를 가지고 있는지의 차이이다.

태그 이름 그대로 헤더부분을 <header>태그로 감싸는 것이다.

위와같이 div를 대체할 수 있는 태그로 header, nav, article, section, aside, footer가 나왔고, 각각 의미에 맞게 사용하면 된다.

위 태그들은 HTML5 이전에 div태그에서 클래스 명으로 많이 쓰던 것들을 토대로 만들었다고 한다.

결론

안써도 겉으로 보이기엔 똑같지만 검색 엔진 최적화(SEO)에서 중요한 역할을 하기 때문에 검색결과에서 상단을 차지하고 싶다면, 쓰는것을 습관화 하는 것이 좋다.

끝!

2/159

React??

앞으로 쓰게될 React.js에 대해 아주 늦게 첫 발을 디뎠다

새로운 스택을 익히려 하는데 아무리 글을봐도 이해가 안되는 나의 머리를 탓하며 아주 쉽게 정리해보려 함

혹시라도 이 글을 보시게 된다면, 틀린부분이 있을 수 있으니 한번쯤 의심하면서 보시고

틀린부분은 바로바로 지적해주시면 감사하겠습니다

정리하는 글이기에 반말로 적겠습니다.

리액트란?

페이스북에서 만든 사용자 인터페이스 라이브러리

절대적으로 View단을 구성하기 위한 라이브러리이다.

리액트를 만든 이유?

기존 MVC패턴은 확장이 어렵고 거대한 시스템에 어울리지 않는다는 생각을 하게된 페이스북은 새로운 대안으로 Flux라는 데이터 흐름이 단방향인 시스템 아키텍쳐를 만들었다.

이 Flux는 “새로운 패턴이 아니라 MVC의 새로운 이름일 뿐이다” 라는 논란도 일었지만,

둘의 가장 큰 차이는 데이터 흐름이 단방향이라 더욱 직관적이고, 관리하기가 쉽다는 점이다.

리액트의 특징

1.JSX

템플릿을 사용하지 않고 고유의 XML확장 문법인 JSX를 사용한다.

쉽게 이해해 자바스크립트에서 HTML코드를 쓸 수 있게하는 문법이다.

이렇게 작성한 코드는 Babel을 통해 별도의 컴파일 없이 사용 가능하다.

2.Virtual DOM

기존에 DOM을 직접 핸들링하는 제이쿼리는 페이지를 새로고침하면 페이지의 모든 요소를 새로 렌더링하는 반면에,

리액트는 Virtual DOM(가상돔)을 사용해 변화가 있는 부분을 비교해 최소한의 요소만 다시 렌더링하게되어,

보다 빠른 속도로 화면을 보여줄 수 있다.

3.One Way Data Flow

데이터는 위에서 아래로만 흐르기 때문에 구조가 커졌을 때 양방향 바인딩에 비해 데이터의 흐름을 파악하기가 쉽다.

4.Server Side Rendering

클라이언트에서만 렌더링을 하면 HTML, JavaScript, Data, View 순으로 진행하는 시간 소요로 초기구동 속도가 느리고,

자바스크립트를 실행못하는 검색 엔진 봇들은 처음 렌더링 된 빈 HTML만 수집하기 때문에 콘텐츠가 없다고 판단되어 SEO에 취약하므로, 서버 렌더링을 지원한다.

개발 좋은 글 모음

프로그래밍

Developer-roadmap - kamranahmedse 님

[입문]초보 개발자로의 입문 / 개발이라는 세계에 첫 발 내딛기 - _Jbee 님

[번역]당신의 코딩 학습 방식을 바꿀 사진 - Captain Pangyo 님

[번역]좋은 코딩을 위한 13가지 간단한 규칙 - mingrammer 님

훌륭한 프로그래머와 코드 품질 - 이즈군 님

프로그래밍 재미있게 공부하기 - 조인석 님

소프트웨어 개발자가 되기까지 - 조인석 님

비 개발자를 위한 웹 개발 기초 - Gihyo Joshua Jang 님

[웹개발자 기준]비전공자 신입으로서 전공자한테 안밀리고 살아남는법 - OKKY 은하수 님

[번역]성공적인 웹 개발자가 되기 위한 21단계 - 나무 숲 님

왜 일을 하는가? 일을하는 6가지 기본 동기가 성과를 좌우한다 - 솔개 님

이상한 나라의 웹 - 조은 님

코딩의 함정 - 조은 님

개발자는 디자인을 배워야 하는가? - 서한교 님

Progressive Web App Roadshow 2017 Korea

Front-end

당신이 2017년에 배워야 할 언어, 프레임워크, 툴에 대하여 - 한장현 님

2017 프론트엔드 트렌드&인사이트 - 네이버 FE플랫폼 김태훈 님

흔한 2017년의 Front-end 기술 스택 - Seokjun Kim 님

프론트엔드 개발자 면접 질문 - Songhun 님

신입 프론트엔드 개발자를 위한 면접 조언 - 코드쓰는사람 님

[번역]탁월한 프론트엔드 엔지니어가 되는 법 - HyunSeob 님

웹 프론트엔드 개발자, 어떻게 준비해야 할까? - 윤지수 님

자바스크립트 컨벤션 - rwaldron 님

나는 어떻게 일하는가: Yahoo! 더글라스 크록포드의 Javascript - tebica 님

마크업 개발 레벨 테스트 질문 - Toby Yun 님

더 나은 코딩을 위한 CSS 테크닉 28가지 - nanati 님

Back-end

10년 만에 시장을 뒤집다. AWS가 뒤흔든 10가지 - cio

초보 서버 개발자의 AWS 회고 - mingrammer 님

GraphQL 이란? - vomvoru 님

Node.js 란? - exobud 님

기타

[번역]다국어 상황을 고려한 UI 디자인 - 강수영 님

모션으로 사용성 만들기 : 모션 선언문의 UX - 강운봉 님

AI 그까이거 - 임도형 님

쉽게 풀어쓴 딥러닝의 거의 모든 것 - Terry TaeWoong Um 님

마크다운 작성법 - ihoneymon 님

스타트업

반 년간의 스타트업 개발자 회고 - 박은환 님

스타트업에서 쓰기 좋은 도구들 - 정혜윤 님

스타트업 개발 인턴 면접 vs 대기업 개발 인턴 면접 - _Jbee 님

자기계발

일하면서 자기계발하는 8가지 방법 - Anna 님

성공하는 사람들의 12가지 주말습관 - 그녀생각 님

장점을 키울 것인가 단점을 보완할 것인가 - 장영학 님

총균쇠와 사피엔스를 읽고 - 유영만 님

‘노력’에 대하여 - 김재성 님

대학생들이 읽으면 좋을 책들 - 임현규 님

고무오리 문제 해결법 - 위키북스

‘깔끔한 글’ 쓰기 - 세상에서가장빠른인디언 님

완벽한 공부법(책) - 히재 님

공시생을 위한 ‘학습전략’ 총정리 - 그녀생각 님

기타

한국 오픈소스 개발자 커뮤니티 및 랭킹

세계적으로 성공한 유명 CEO들의 책상(작업공간) 베스트 20 - HowieMoney 님

스물아홉. 나의 일상에 나를 담기 - AllLim 님

미국에서 한국인으로 살아가기 - Jin Young Kim 님

W3C 첫 한국인 HTML 에디터, 문상환 - 이희욱 님

알면 놀라는 마이크로소프트의 25가지 혁신기술 - 최광민 님

인생을 망치는 6가지 실수 - 머니맨 님

좋은 습관 만들기를 시작하는 방법 - 머니맨 님

피곤할때, 졸릴때 잠 깨는법 16가지 초간단 팁! - 컥군 님

‘10초’만 안마해줘도 ‘피로’ 확 풀리는 숨은 부위 8곳 - 김소영 님

가장 큰 정사각형 찾기 (Level 4)

문제

어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다.

A를 3만큼 밀면 D가 되고 z를 1만큼 밀면 a가 됩니다. 공백은 수정하지 않습니다.

보낼 문자열 s와 얼마나 밀지 알려주는 n을 입력받아 암호문을 만드는 ceasar 함수를 완성해 보세요.

• “a B z”,4를 입력받았다면 “e F d”를 리턴합니다.

풀이

function findLargestSquare(board) {
  let max = 0;
    for ( let i = 0; i < board[0].length; i++) {
      for ( let j = 0; j < board.length; j++ ) {
        board[i][j] = board[i][j] == "O" ? 1 : 0
      }
  }
  for ( let x = 1; x < board[0].length; x++ ) {
    for ( let y = 1; y < board.length; y++ ) {
      if ( board[x][y] !=0 ) {
        board[x][y] = 1 + Math.min(board[x-1][y], board[x][y-1], board[x-1][y-1])
      }
      if ( max < board[x][y] ) {
        max = board[x][y]
      }
    }
  }
  return Math.pow(max, 2)
}

//아래 코드는 테스트를 위한 출력 코드 입니다.
var testBoard = [['X','O','O','O','X'],['X','O','O','O','O'],['X','X','O','O','O'],['X','X','O','O','O'],['X','X','X','X','X']];
console.log(findLargestSquare(testBoard));

문제보고 주변 컴공인들에게 물어보니 그냥 DP로 풀면 되네! 라고 들어서 엄청 찾아봤는데도 접근도 어려운데다가 막상 써놓고 나서도 너무 복잡하다 생각들었는데, 다른사람들 코드가 더길어서 흐뭇했다(ㅋㅋ~)

BOJ 1915번과도 동일한 문제이다.

우선 첫 번째 for문에서는 O 표시를 1 X 표시를 0으로 바꿔준다.

두 번째 for문에서는 원소가 0이 아닌것에 대해서 왼쪽,위쪽, 왼쪽위쪽 세개 값중 최솟값에 1을 더해 만들수 있는 최대 변의 길이를 적어주고, 그 값이 max보다 크다면 max에 대입하는 식으로 해서, 최대 정사각형 변의 길이를 구한 후에 제곱해 리턴!

다른 사람의 풀이

더 좋은코드가 있을수도 있겠지만, 이것보다 더 긴 코드는 읽고싶지 않다..

시저 암호 (Level 3)

문제

어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다.

A를 3만큼 밀면 D가 되고 z를 1만큼 밀면 a가 됩니다. 공백은 수정하지 않습니다.

보낼 문자열 s와 얼마나 밀지 알려주는 n을 입력받아 암호문을 만드는 ceasar 함수를 완성해 보세요.

• “a B z”,4를 입력받았다면 “e F d”를 리턴합니다.

풀이

function caesar(s, n) {
  let arr = [];
  n = n % 26
  for ( let i = 0; i < s.length; i++ ) {
    const word = s.charCodeAt(i)
      if ( word == 32 ) {
      arr.push(" ")
    }
    else if ( word >= 65  && word <= 90 ) {
        if ( word+n > 90 ) {
          arr.push(String.fromCharCode(word+n-26))
      } else {
        arr.push(String.fromCharCode(word+n))
      }
    }
    else if ( word >= 90 && word <= 122 ) {
        if ( word+n > 122 ) {
          arr.push(String.fromCharCode(word+n-26))
      } else {
          arr.push(String.fromCharCode(word+n))
      }
    }
  }
  return arr.join("")
}

// 실행을 위한 테스트코드입니다.
console.log(caesar("abcdef", 25));

좀 오래걸린듯하다. 배열로 처리했음

다른 사람의 풀이

function caesar(s, n) {
    var result = "";
    // 함수를 완성하세요.
  var car = ""
  for (var i=0; i<s.length;i++)
  {        
    if ( s[i] == ' ' )
      result += ' '
    else 
        result += String.fromCharCode( (s.charCodeAt(i)>90)?
      (s.charCodeAt(i)+n-97)%26+97 : (s.charCodeAt(i)+n-65)%26+65 )     
  }
    return result;
}
// 실행을 위한 테스트코드입니다.
console.log('s는 "a B z", n은 4인 경우: ' + caesar("a B z", 4));

원리는 비슷하나 문자열로 조금더 간결한 코드

야근지수 (Level 3)

문제

야근 지수

회사원인 수민이는 많은 일이 쌓여 있습니다.

수민이는 야근을 최소화하기 위해 남은 일의 작업량을 숫자로 메기고, 일에 대한 야근 지수를 줄이기로 결정했습니다.

야근 지수는 남은 일의 작업량을 제곱하여 더한 값을 의미합니다.

수민이는 1시간 동안 남은 일 중 하나를 골라 작업량 1만큼 처리할 수 있습니다.

수민이의 퇴근까지 남은 N 시간과 각 일에 대한 작업량이 있을 때, noOvertime 함수를 제작하여 수민이의 야근 지수를 최소화 한 결과를 출력해 주세요.

예를 들어, N=4 일 때, 남은 일의 작업량이 [4, 3, 3] 이라면 야근 지수를 최소화하기 위해 일을 한 결과는 [2, 2, 2]가 되고 야근 지수는 22 + 22 + 22 = 12가 되어 12를 반환해 줍니다.

풀이

function noOvertime(no, works) {
  let arr =works.replace(/\[/,'').replace(/\]/,'').split(",")
  for ( let i = 0; i < arr.length; i++ ) {
      arr[i] = +arr[i]
  }
  for ( let j = 0; j < no; j++ ) {
      arr.sort((a,b) => { return b-a });
    arr[0] = arr[0] - 1
  }
    return arr.map((x) => { return x*x }).reduce((a,b) => { return a+b})
}
console.log(noOvertime(4,"[4,3,3]"))

function noOvertime(no, works) {
  let k = 0;
  let arr =works.replace(/\[/,'').replace(/\]/,'').split(",")
  for ( let i = 0; i < arr.length; i++ ) {
      arr[i] = +arr[i]
  }
  arr.sort((a,b) => { return b-a });
   while ( k < no ) {
    for ( let j = 0; j < arr.length-1; j++ ) {
        if ( arr[j] > arr[j+1] ) {
          k += arr[j]-arr[j+1]
        let l = arr[j] - arr[j+1]
        arr[j] = arr[j] - l
      }
    }
    return arr.map((x) => { return x*x }).reduce((a,b) => { return a+b})
  }
}

console.log(noOvertime(4,"[4,3,3]"))

내가 잘모르는건지 애초에 문제가 이상한건지..

완전 하드스트레스

다른 사람의 풀이

통과못함

N개의 최소공배수 (Level 3)

문제

두 수의 최소공배수(Least Common Multiple)란 입력된 두 수의 배수 중 공통이 되는 가장 작은 숫자를 의미합니다.

예를 들어 2와 7의 최소공배수는 14가 됩니다.

정의를 확장해서, n개의 수의 최소공배수는 n 개의 수들의 배수 중 공통이 되는 가장 작은 숫자가 됩니다.

nlcm 함수를 통해 n개의 숫자가 입력되었을 때, 최소공배수를 반환해 주세요.

예를들어 [2,6,8,14] 가 입력된다면 168을 반환해 주면 됩니다.

풀이

function nlcm(num) {
    let res = [num[0]];
  for ( let i = 1; i < num.length; i++ ) {
    let max = 1;
    for ( let j = 2; j <= Math.min(res[i-1], num[i]); j++ ) {
          if (( res[i-1] % j == 0 ) && ( num[i] % j == 0 )) {
        if ( max < j ) { max = j } 
        }
    }
    res[i] = res[i-1]*num[i]/max
  }
  return res[res.length-1]
}

// 아래는 테스트로 출력해 보기 위한 코드입니다.
console.log(nlcm([2,6,8,14]));

꽤 오래 걸린 것 같음.. 생각하고서 쓰질않고 쓰고나서 생각해버리니까 아예 방향을 잘못잡아서 고생함.

res라는 배열에 num배열에서 순차적으로 두 수의 최대공배수를 계산해 삽입.

res[0] = num[0]

res[0],num[1] => res[1]

res[1],num[2] => res[2]

…

res[num.length-2],num[num.length-1] => 결과

이런식으로 계산을 했다.

썩 마음에 드는 코드는 아닌 것 같다.

다른 사람의 풀이

function nlcm(num) {
  return num.sort((a, b) => a - b).reduce(lcm);
}
function lcm(num1, num2){
  return (num1 * num2) / gcd(num1, num2);
}
function gcd(num1, num2){
  if(num2 == 0) return num1;
  return gcd(num2, num1%num2);
}

// 아래는 테스트로 출력해 보기 위한 코드입니다.
console.log(nlcm([2,6,8,14]));

이런식으로 풀어보려 했는데, 머리가 너무 복잡해져서 떠올리지 못해버렸다..

으렵다