코딩정비소 코딩정비소

Semantic 프로그래밍에서, 시멘틱(Semantic)은 코드 조각의 의미를 나타낸다. 이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가? 이 JS 라인을 실행하는 것은 어떤 효과가 있는가? HTML Semantic HTML에는 Semantic 요소와 Non-Semantic 요소로 구분된다. Semantic 요소는 목적이나 역할이 존재한다. ( 내용에 대해 알려준다 ) Non-Semantic 요소는 특별한 목적이나 역할이 존재하지 않는다. ( 내용에 대해 아무것도 알려주지 않는다) Semantic 요소에는 100여개 종류가 있다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element HTML elements reference - HTML: Hyper..

문제 이해하기 당신은 각 학생들이 받은 점수의 평균을 구하여, 기준에 따라 학점을 부여하려고 합니다. 만약, 학생들이 자기 자신을 평가한 점수가 유일한 최고점 또는 유일한 최저점이라면 그 점수는 제외하고 평균을 구합니다. 데이터 추상화 인풋 데이터는 각 학생이 평가한 결과 배열을 받는다. 정리하면 행은 학생이 다른 학생을 평가한 값이며, 열은 다른 학생이 평가한 값이다. 우리는 학생들로 부터 평가받은 값을 사용해야 한다. 즉 열의 값을 순회해야 한다. 열의 값을 순회하여 계산하기란 쉽지 않다. 각 학생들의 받은 값이 행으로 올 수 있도록 행과 열을 바꿔주자. 행 과열을 바꾸는 알고리즘은 ( https://workshop-code.tistory.com/54?category=747867 )에서 확인이 가능하..

배열의 행과 열 바꾸기 배열을 다루는 여러 가지 방식 중 행과 열 바꾸는 방식에 대해 알아보자. 일반적인 방법 원본이 변경되지 않기 위해 임시 배열을 만든다. 배열을 횡으로 순환하면서 값을 넣어준다. let matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; // 첫번째 방법 반복문을 돌면서 바꿔준다 let ansMatrix = []; // 1. 배열의 행 길이만큼 반복한다 for( let i = 0; i tmp.push(row[i])); // 3. 추출한 값을 저장 ansMatrix.push(tm..

HTML Hyper Text Markup language(HTML)은 웹페이지의 구조와 내용을 담당하는 마크업 언어이다. HTML 기본 문법 Hello World HTML은 첫 줄에 문서 형식을 지정해줘야 한다. 브라우저가 받은 파일을 읽을 때 어떤 형식인지 알아야 제대로 읽을 수 있기 때문이다. 중국인한테 프랑스어 읽으라고 주는 거랑 같은 맥락이다. html 요소는 최상위 레벨에 위치하고 있다. doctype은 예외이다. head 요소 안에는 title, meta데이터, 외부파일참조가 있으며, 브라우저에 노출되지 않는다. body 요소는 실질적으로 웹브라우저에 노출된다. html 모든 요소들은 대소문자를 구분하지 않지만, 통상 소문자를 사용한다. 가독성을 위해 소문자를 사용하자 :) HTML 요소 He..

목표 MySql 테이블 타입 생성 시 괄호에 있는 숫자 의미 ZEROFILL 배경 사내에서 MySql을 사용하고 있는데 DB를 생성해야 할 일이 생겼다. 이때 ON/OFF, 0 ~ 100의 범위를 가지는 용도의 칼럼을 선언할 때 `use_animation` tinyint(4) unsigned DEFAULT 0 COMMENT '애니메이션 사용 여부', `sound_volume` tinyint(4) unsigned DEFAULT 0 COMMENT '소리 크기', 위와 같은 방식으로 형태를 사용하는데, 팀원 중 한 명이 `tinyint(4)`의 숫자 4의 의미가 뭔지 물어보셨다. 길이가 4인 데이터라고 말씀은 드렸는데, 돌아오는 질문은 다음과 같았다. 그러면 sound_volume에 길이가 4인 9999 값이..

목표 가우스 덧셈에 대해 알아보자 가우스 덧셈을 이용한 문제 풀이 가우스 덧셈 등장 배경 천재적인 수학자 독일의 가우스는 어려서부터 수학에 재능을 보였다. 가우스가 초등학교 3학년 때 수학 선생님이 1 ~ 100 숫자를 모두 합하면 얼마가 되느냐는 문제를 냈다. 가우스는 시작하지 얼마 되지 않아서 손을 번쩍 들었습니다. 오래 걸릴 줄 알았던 선생님은 가우스에게 정답을 물어봤고, 가우스는 정답을 말씀드렸다. 정답을 맞힌 가우스에게 어떻게 문제를 해결했는지, 풀이해보라고 요청했고, 가우스는 기꺼이 자신이 계산한 방법을 선생님께 말씀드린다. 가우스 덧셈 이란 가우스가 선생님께 가져온 계산법은 이러했다. 첫 숫자 1과 끝 숫자 100을 더하면 101 이 된다 두 번째 숫자 2와 끝 숫자 99를 더하면 101 이..

문제 이해하기 제공되는 데이터는 이용료, 현재 금액, 놀이기구 타고싶은 횟수를 가지고 원하는 만큼 놀이기구를 탈때 금액이 얼마가 모자르는지 출력해야한다. 놀이기구는 N번째 이용한다면, 원래 이용료의 N배를 받기로 한다. (처음 100 -> 200 -> 300) 데이터 추상화 인풋 데이터는 이용료, 현재 금액, 타고 싶은 횟수로 정수로 제공 된다. 아웃풋 즉 결과는 모자른 금액을 제공 하므로 정수를 리턴하면 된다. 알고리즘 일반적인 풀이 놀이기구를 N번 이용하고, 이용료가 P라면 식은 다음과 같다 - P * N + P * ( N - 1 ) + ... + P * ( N - N) - 이용료에서 N을 곱한 값부터, N이 0이 될때까지 더해준다 . - 이후 현재 금액을 뺀 나머지 값이 결과 값이다. functio..

목표 Factory Method의 등장 배경, 필요성 이해하기 Factory Method의 구조를 이해하기 Factory Method를 직접 구현해보기 Factory Method의 필요성 물류관리 앱을 만들고 있다고 상상해보자, 최초의 소스는 `TRUCK`안에 대부분 있을 것이다. 후에 물류관리 앱이 꽤 유명해져서, 해상 물류도 앱에 통합해야 되는 상황이 된다면, 모든 로직에 분기 처리가 들어가야 할 것이다. 아주 좋지 못한 코드가 될 것이다. 기존과 유사한 기능이 추가되는데 조금 다를 때, Factory pattern이 유용하게 사용된다. Factory Method? 객체 지향 디자인 패턴중 하나이다. Factory Method는 부모 클래스에서 객체를 생성하기 위한 인터페이스를 제공하지만, 서브 클래..