1. html 생성 아래 배열을 사용하여 html을 생성하는 함수를 작성하라. const todos = [ { id: 3, content: 'HTML', completed: false }, { id: 2, content: 'CSS', completed: true }, { id: 1, content: 'Javascript', completed: false }, ]; function render() { let html = ''; todos.forEach(todo => { html += `

1.3 선택 정렬 선택 정렬(selection sort)은 배열의 최소값을 검색하여 배열의 왼쪽부터 순차적으로 정렬을 반복하는 정렬 알고리즘입니다. 배열이 미정렬 상태이므로 최솟값 검색에는 이진 검색이 아닌 선형 검색 알고리즘을 사용합니다. 선택 정렬은 버블 정렬보다 빠릅니다. 시간 복잡도: O(n^2) 문제 선택 정렬을 통해 주어진 배열(array)을 정렬하는 함수를 구현하라. 단, 어떠한 빌트인 함수도 사용하지 않고 for 문을 사용하여 구현하여야 한다. function selectionSort(array) { for (let i = 0; i < array.length - 1; i++) { let minIdx = i; for (let j = i + 1; j < array.length; j++) { i..

1. 1 ~ 10,000의 숫자 중 8이 등장하는 횟수 구하기 (Google) 1부터 10,000까지 8이라는 숫자가 총 몇 번 나오는가? 이를 구하는 함수를 완성하라. 단, 8이 포함되어 있는 숫자의 갯수를 카운팅 하는 것이 아니라 8이라는 숫자를 모두 카운팅 해야 한다. 예를 들어 8808은 3, 8888은 4로 카운팅 해야 한다. (hint) 문자열 중 n번째에 있는 문자 : str.charAt(n) or str[n] function getCount8() { let str = ''; let result = 0; for (let i = 1; i

word-break와 word-wrap은 줄바꿈을 위해 사용합니다. 구체적으로 들어가면 word-word 속성이 비아시아 언어의 줄바꿈을 결정하고, word-break는 아시아 언어, 즉 CJK언어의 줄바꿈을 결정합니다. word-break 속성값으로 normal(기본값), break-all, keep-all를 갖습니다. normal 속성값은 기본값입니다. 브라우저의 기본값에 따라 줄바꿈이 일어납니다. break-all 속성값은 문자를 강제로 줄바꿈 할 수 있습니다. CJK언어에서 사용할 때는 normal처럼 작동하며 비아시아 언어에 사용할 때는 임의대로 줄바꿈을 할 수 있습니다. keep-all 속성값은 단어 단위로 줄바꿈이 일어납니다. 비아시아 언어에 사용될 때는 normal처럼 작동합니다. word..

1. 변수 x가 10보다 크고 20보다 작을 때 변수 x를 출력하는 조건식을 완성하라 const x = 15; if (x > 10 && x < 20) { console.log(x); } 2. for문을 사용하여 0부터 10 미만의 정수 중에서 짝수만을 작은 수부터 출력하시오. for (let i = 0; i < 9; i++) { if (i % 2 === 0) console.log(i); } 3. for문을 사용하여 0부터 10 미만의 정수 중에서 짝수만을 작은 수부터 문자열로 출력하시오. let result = ''; for (let i = 0; i < 9; i++) { if (i % 2 === 0) result += i; } console.log(result); 4. for문을 사용하여 0부터 10 미..

var num = 11; var result; if (num === 0) { res = '영'; } else if (x % 2 === 0) { res = '짝수'; } else { res = '홀수'; } 위 예제는 if문과 else if문, else문으로 구성되어있습니다. 위 예제를 삼항 조건 연산자로 바꾸면 아래와 같습니다. var num = 0; var isZero = num === 0; var isEven = num % 2 === 0; var result = isZero ? '영' : isEven ? '짝수' : '홀수'; 삼항 조건 연산자로 바꿨을 때 첫 예제인 if문 보다 보기 힘들다는 느낌이 들었습니다. 이에 조건문을 따로 변수에 할당하여 개발자에게 좀 더 가독성이 높아지도록 바꿔봤습니다.

같이 공부하는 동기가 W3C 레퍼런스를 공부하다가 해석이 난해한 부분이 있어서, 같이 자료를 찾아보게 됐습니다. 레퍼런스 내용은 다음과 같습니다. If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block. -W3C Reference 위 예제에서 clearance라는 단어가 나오는데, clear 속성이 none이 아닐 때 생기는 요소간의 간격을 말합니다. ..

HTML과 CSS를 공부하면서 웹 접근성에 대해서 관심이 생겼습니다. 웹 개발을 할 때 마크업 순서와 웹 접근성에 대한 생각 없이 무작정 div 태그를 사용하면서 개발을 했었습니다. 그리고 이번 공부를 계기로 웹 표준과 접근성의 중요성을 깨닫게 됐습니다. 위 책은 개발자들 사이에서도 유명한 기업인 NHN의 개발자들이 어떻게 웹 접근성을 지키며 웹 개발을 하고 있는지 설명해주고 있습니다. HTML과 CSS를 갓 배운 사람들도 이해하기 쉽게 설명을 해주고 있으며, 특히 그림을 예시로 설명을 해주고 있어서 금방 이해할 수 있습니다. 처음엔 웹 접근성에 대해서 이론적으로 설명을 해주고 중반부에는 웹 접근성을 지키는데 어디까지 지켜야되는지에 대해서 설명을 해주어서 궁금한 점을 해결해줍니다. 그리고 후반부에는 스크..

1. 문자 자료는 디지털로 어떻게 표현될까? 시용자가 컴퓨터에 입력을 하면 컴퓨터에서 그 입력을 바로 받아들이고 출력해주지 않습니다. 컴퓨터는 2진수로 처리된 입력값을 받을 수 있습니다. 그래서 중간에 입력값을 2진수로 바꿔주는 처리과정이 필요합니다. 즉, '입력 - 처리 - 출력'의 과정을 거칩니다. 다시 생각해보면 각 문자들은 정해저 있는 2진수 값이 있다고 볼 수 있습니다. 이렇게 각 문자를 구분하기 위해 각각 약속된 이진수의 값을 정해놓은 코드를 문자 코드라고 합니다. 문자 정보에는 0~9, A~Z, a~z, 특수문자 등과 같은 문자와 공백이며, enter 키를 누르는 것도 문자로 취급됩니다. 이 문자 코드에는 종류가 여러가지가 있는데 이번 포스팅에서는 아스키코드와 유니코드에 대해서 알아보겠습니다..

github를 이용해서 팀 프로젝트를 진행하는 시간을 가졌습니다. 혼자서 git과 github를 사용해서 프로젝트를 진행하는 것보다 생각할게 많고 막히는 부분이 상당히 많았습니다. 이번 시간을 기회로 삼아 블로그 포스팅으로 정리를 해보겠습니다. 1. 팀장이 github에서 팀 프로젝트를 진행할 repository를 만듭니다. 팀장이 repository를 만들고 팀원들이 개발을 해나갈 환경을 세팅해줍니다. 저희 같은 경우 volvo-cars 홈페이지를 클론 코딩하는 것을 목표로 팀 프로젝트를 진행했습니다. 기본 index.html과 reset.css, style.css를 만들어 간단하게 진행했습니다. 2. 팀원들은 팀장의 repository를 fork 하고 clone 하여 개발을 진행합니다. 팀장이 rep..