![]()
없는 숫자 더하기 문제 설명 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 ,..
![]()
웹 페이지 빌드 과정(CRP) 브라우저가 HTML, CSS, Javascdript를 화면에 픽셀로 변환하는 일련의 단계 브라우저가 서버에서 응답을 받아 하나의 화면을 그려내는 것 서버에서 응답으로 받은 HTML 데이터를 파싱 HTML을 파싱한 결과로 DOM Tree(Document Object Model) 생성 파싱하는 중 CSS 파일 링크를 만나면 CSS 파일을 요청해서 받음 CSS 파일을 읽어서 CSSOM(CSS Object Model) 생성 DOM Tree와 CSSOM이 모두 만들어지면 이 둘을 사용해 Render Tree 생성 Render Tree에 있는 각각의 노드들이 화면의 어디에 어떻게 위치할 지를 계산 화면에 실제 픽셀을 Paint 1. DOM Tree(Document Object Mode..
![]()
컴포넌트 재사용이 가능한 각각의 독립된 모듈(UI) 코드 조각 이미 만들어진 컴포넌트들을 조합하여 화면을 구성 가능 컴포넌트 특징 구현 소스코드가 아닌 실행코드 기반으로 재사용할 수 있도록 이미 구현이 완료되어야 함 명세화 교체 가능한 컴포넌트를 개발하기 위해서는 표준을 준수하여 개발 해당 컴포넌트의 용도, 유형, 기술 표준과 인터페이스 등에 대한 정보들에 대해서 명세화 패키지화 컴포넌트가 개발되어 배포될 때 관련 문서와 코드들이 독립적인 단위로 패키지화 배포 사용자가 필요한 기능만을 패키지한 컴포넌트를 재사용 할 수 있도록 독립적으로 배포 가능 하나 이상의 클래스 들로 구성 하나 이상의 컴포넌트를 개발하기 위해서는 하나 이상의 클래스들을 바탕으로 개발 컴포넌트가 되기 위해서는 반드시 클래스나 객체로 만..
![]()
프레임 워크 뼈대나 기반구조 프로그램을 개발하기 위해 사용되는 틀을 제공하는 프로그램 프레임워크의 특징 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의 컴포넌트들은 재사용이 가능 높은 수준에서 패턴들을 조작화 가능 라이브러리(Library) 소프트웨어를 개발할 때 프로그래밍 사용하는 비휘발성 자원의 모임, 공통으로 사용될 수 있는 특정한 기능들을 모듈화 리액트는 프레임워크가 아닌 라이브러리 라이브러리 종류 react: 리액트를 사용하기 위한 라이브러리 react-dom: react와 DOM 사이에 연결 react-scripts: 리액트 프로젝트 초기 셋업 도움 babel-cli: 바벨을 터미널에서 사용하기 위해 필요 babe..
![]()
카운트 다운 문제 설명 정수 start_num와 end_num가 주어질 때, start_num에서 end_num까지 1씩 감소하는 수들을 차례로 담은 리스트를 return하도록 solution 함수를 완성해주세요. 제한사항 0 ≤ end_num ≤ start_num ≤ 50 입출력 예 start_num end_num result 10 3 [10, 9, 8, 7, 6, 5, 4, 3] 입출력 예 설명 입출력 예 #1 10부터 3까지 1씩 감소하는 수를 담은 리스트는 [10, 9, 8, 7, 6, 5, 4, 3]입니다. 코드 class Solution { public int[] solution(int start, int end_num) { int[] answer = {}; return answer; } } ..
