![]()
전국 대회 선발 고사 문제 설명 0번부터 n - 1번까지 n명의 학생 중 3명을 선발하는 전국 대회 선발 고사를 보았습니다. 등수가 높은 3명을 선발해야 하지만, 개인 사정으로 전국 대회에 참여하지 못하는 학생들이 있어 참여가 가능한 학생 중 등수가 높은 3명을 선발하기로 했습니다. 각 학생들의 선발 고사 등수를 담은 정수 배열 rank와 전국 대회 참여 가능 여부가 담긴 boolean 배열 attendance가 매개변수로 주어집니다. 전국 대회에 선발된 학생 번호들을 등수가 높은 순서대로 각각 a, b, c번이라고 할 때 10000 × a + 100 × b + c를 return 하는 solution 함수를 작성해 주세요. 목표 선발된 학생들의 번호 (a, b, c)를 사용하여 계산된 특정 수식의 결과를..
![]()
언어의 종류 절차지향 프로그래밍 반복문 작성 후 함수 또는 메소드를 사용해서 해야할 일들을 정의 범위가 더 넓어질경우 반복문, 함수 또는 메서드로만 코드를 간편하게 정의하는데 한계가 있음 프로세스가 함수 단위 순서대로 진행된다. 객체지향 프로그래밍 각각의 대상에게 클래스로 정의한 아이템과 동작들을 할당하여 데이터와 기능을 클래스로 캡슐화 객체지향이란? 프로그래밍을 더 쉽게 할 수 있도록 만들어진 프로그래밍 방식, 패러다임 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고 그 객체들 간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법 객체지향의 구성 객체지향 프로그래밍(OOP) 에서는 모든게 객체로 구성. 먼저 서로 관계가 있는 속성과 기능들을 묶어 클래스로 정의하고, ..
![]()
크기 단위 백분율 단위(%) : 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기 배수 단위(em) : 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기 픽셀 단위(px) : 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기 크기 조절 height / width HTML 요소의 높이와 너비 기본 설정값은 auto -> 웹 브라우저가 각 HTML 요소에 맞게 자동으로 높이와 너비를 설정 설정된 너비 이하로 브라우저의 크기가 줄어들 때 해당 요소에 스크롤 바를 생성 태그등 inline 요소는 적용 되지 않음 #box{ width: 100px; height: 60px } max-width HTML 요소가 가질 수 있는 최대 너비 기본 설정값은 none 해당 HTML 요..
![]()
CSS 텍스트 color 텍스트의 색상을 설정 웹 페이지에서 텍스트의 기본 색상은 검정색 태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용 만약 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 태그에 명시된 속성값보다 우선 적용 direction 텍스트가 써지는 방향을 설정 웹 페이지에서 텍스트는 기본적으로 왼쪽에서 오른쪽 방향 left-to-right(ltr)일 때는 기본 설정처럼 텍스트가 왼쪽에서 오른쪽 방향 right-to-left(rtl)일 때는 텍스트가 반대 방향인 오른쪽에서 왼쪽 방향 letter-spacing 텍스트 내에서 글자 사이의 간격을 설정 word-spacing 텍스트 내에서 단어 사이의 간격을 설정 문자 간의 간격이 아닌 단어 간의 간격..
![]()
없는 숫자 더하기 문제 설명 0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ numbers의 길이 ≤ 9 0 ≤ numbers의 모든 원소 ≤ 9 numbers의 모든 원소는 서로 다릅니다. 입출력 예 numbers result [1,2,3,4,6,7,8,0] 14 [5,8,4,0,6,7,9] 6 입출력 예 설명 입출력 예 #1 5, 9가 numbers에 없으므로, 5 + 9 = 14를 return 해야 합니다. 입출력 예 #2 1, 2, 3이 numbers에 없으므로, 1 + 2 + 3 = 6을 return 해야..
![]()
핸드폰 번호 가리기 문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한사항 phone_number는 길이 4 이상, 20이하인 문자열입니다. 입출력 예 phone_number return "01033334444" "*****4444" "027778888" "*****8888" 코드 class Solution { public String solution(String phone_number) { String answer = ""; return answer; } } 풀이 c..
![]()
웹팩 https://webpack.js.org/ 오픈 소스 자바스크립트 모듈 번들러 여러 개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리 의존성을 분석해 모듈을 번들화 프로젝트를 개발하다보면 수 많은 라이브러리들을 사용하게 되는데 빌드(build) 과정을 통해 하나의 파일로 만듬 모듈 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위 모듈 번들링 웹 애플리케이션을 구성하는 몇십, 몇 백개의 자원들을 하나의 파일로 병합 및 압축 해주는 동작 웹팩 장점 파일 단위의 자바스크립트 모듈 관리의 필요성 자바스크립트의 변수 유효 범위 (스코프)는 기본적으로 전역 범위를 기본으로 가져 어디에서든 변수에 접근 가능 따라서 파일 단위로 자바스크립트 코드를 관리할 때 모듈화 하지 ..
![]()
가까운 수 문제 설명 정수 배열 array와 정수 n이 매개변수로 주어질 때, array에 들어있는 정수 중 n과 가장 가까운 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ array의 길이 ≤ 100 1 ≤ array의 원소 ≤ 100 1 ≤ n ≤ 100 가장 가까운 수가 여러 개일 경우 더 작은 수를 return 합니다. 입출력 예 array n result [ 3, 10, 28] 20 28 [10, 11, 12] 13 12 입출력 예 설명 입출력 예 #1 3, 10, 28 중 20과 가장 가까운 수는 28입니다. 입출력 예 #2 10, 11, 12 중 13과 가장 가까운 수는 12입니다. 코드 class Solution { public int solution(int..
![]()
리액트 구조 node_modules 폴더 npm을 통해 설치된 패키지 매니저(Package manager)들이 모여 있는 디렉토리 리액트 프로젝트를 실행할 때 사용되는 dependency 모듈들이 모두 모여있는 폴더 설치되어있는 모듈들은 package.json 파일의 dependencies 부분 기제 프로젝트를 깃에 올릴 때 용량이 큰 node_modules은 보통 지우고 올림 이 디렉터리를 지우면 프로젝트는 실행되지 않지만, package.json의 dependencies 부분에 기록되어 있다면 npm install을 이용해 다시 설치 가능 public 폴더 이곳의 파일은 public/index.html 에만 쓰임 html 파일들과 이미지 파일 저장소 정적인 성격 favicon.icon 웹사이트의 상단..
![]()
대문자와 소문자 문제 설명 문자열 my_string이 매개변수로 주어질 때, 대문자는 소문자로 소문자는 대문자로 변환한 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 1,000 my_string은 영어 대문자와 소문자로만 구성되어 있습니다. 입출력 예 my_string result "cccCCC" "CCCccc" "abCdEfghIJ" "ABcDeFGHij" 입출력 예 설명 입출력 예 #1 소문자는 대문자로 대문자는 소문자로 바꾼 "CCCccc"를 return합니다. 입출력 예 #2 소문자는 대문자로 대문자는 소문자로 바꾼 "ABcDeFGHij"를 return합니다. 코드 class Solution { public String solution..
![]()
가상돔 실제 돔에 접근하여 조작하는 대신, 이것을 추상화시킨 자바스크립트 객체를 이용해서 조작 (실제 DOM의 가벼운 사본) 실제DOM의 구조를 분석하여, 아래와 같은 형태로 메모리에 저장하고 관리하는 객체 속도적인 부분과 많은 일을 수행하다 버그가 발생하거나 브라우저가 죽는 일 등등의 일을 개선 HTML객체에 기반한 자바스크립트 객체로 표현 가능 가상돔 트리는 실제 렌더링이 되지 않기 때문에 연산비용이 적어 실제 DOM 리렌더링에 비해서 효율적 재조정 뷰(HTML)에 변화가 있을 때, 구 가상돔과 새 가상돔을 비교하여 변경된 내용만 DOM에 적용 참고사이트 https://ko.legacy.reactjs.org/docs/reconciliation.html
![]()
DOM(문서 객체 모델) 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 스타일 요소를 구조화 시켜 표현 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 인터페이스 HTML또는 XML을 스크립팅언어(자바스크립트)와 서로 이어주는 역할 트리 자료 구조로 구축 현재 웹 브라우저에서 DOM을 조작하는 언어는 자바스크립트 뿐 트리자료 구조 노드들의 계층 구조 계층 구조로 이루어져 부모-자식 관계, 형제관계를 표현하는 비선형 자료구조 document node (문서 노드) DOM Tree에서 최상위 루트 노드이며 document 객체를 나타냄 HTML 문서 전체를 나타내는 노드 window 객체의 document 프로퍼티로 바인딩 되어 있어 window.document ,..
