문제영어 대소문자와 공백으로 이루어진 문자열이 주어진다. 이 문자열에는 몇 개의 단어가 있을까? 이를 구하는 프로그램을 작성하시오. 단, 한 단어가 여러 번 등장하면 등장한 횟수만큼 모두 세어야 한다.import java.util.*;public class Main { public static void main(String[] args) { Scanner sc = new Scanner(System.in); String str = sc.nextLine().trim(); String[] arr = str.split(" "); System.out.println(arr.length); }}풀이과정trim() 활용하여 앞뒤 공백 없애기split() 활용..
Parameter(파라미터, 매개변수)함수를 정의할 때 사용하는 변수function calc(num1, num2) { ... }여기서 num1과 num2이 parameter(파라미터, 매개변수) 💡 Rest Parameter(가변 파라미터)여러 개의 파라미터 값을 배열로 받을 수 있도록 하는 것function calc(...num) { ... }calc(10, 20, 30)을 호출 후 출력하면 배열 형태 [ 10, 20, 30 ]이 보여진다! Argument(아규먼트, 인수/인자)함수가 호출될 때 넘기는 변수값calc(10, 20);여기서 10과 20이 argument(아규먼트, 인수/인자) 💡 parameter(매개변수)는 메서드 선언의 변수 목록을 말합니다. argument(인수)는 메서드가 호출..
let개념데이터를 저장할 때 사용하는 선언 방법블록 수준의 유효 범위를 지원값 변경 가능중복 선언은 불가! 💡 즉, 이미 선언한 변수를 참조할 때는 let 없이 변수명만 사용하면 되고 값을 변경하고 싶을 때는 let 없이 변수명에 값을 대입해주면 됨. 예시 코드let msg = 'GLOBAL';function outer() { let msg = 'OUTER'; console.log(msg); if (true) { let msg = 'BLOCK'; console.log(msg); }}outer();결과OUTERBLOCK값 변경이 가능한 변수 (상수 x)블록 수준의 유효 범위 지원 let msg = '하이!';let msg = '안녕';console.log(msg);결과SyntaxErro..
Node.js 설치https://nodejs.org/ko/download Node.js — Node.js® 다운로드Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org Node.js 버전 확인node -v npm 버전 확인npm -v npm 이란?Node Package Manager (NPM)Node.js 기반 패키지(모듈)들을 모아둔 곳쉽게 말해서, 다양한 기능들의 설치를 수월하게 도와주는 녀석이다! npm 설정하기npm init패키지 이름부터 version, description 등을 정할 수 있다.필수는 아니므로 나는 그냥 엔터 치고 넘어갔다! 위와 같은 초기 설정 질문들 없이 바로 생성하려면 npm in..
Vue.js란?자바스크립트 프레임워크웹 화면 작성에 최적화 Vue.js의 특징SPA(Single Page Application)html 한 개로 어플리케이션을 구성section 영역의 내용만 바뀜(ex) React.js, Vue.js, Svelte MVVM 패턴Model: 순수 데이터 View: 화면ViewModel: 순수한 데이터를 화면에 출력하기 편하게끔 가공한 형태(변수, 함수 반환 ...) event drivendata driven - 데이터 수정을 감지가상 DOM(Virtual DOM) 브라우저 메모리에서 관리하는 DOM에 대한 추상 객체 빠른 UI 렌더링 성능을 제공 브라우저 DOM 목적: 화면에 직접 그리는 작업을 수행 가상 DOM 목적: 변경된 부분을 탐지하는 것 ..
브라우저 엔진 렌더링 과정[ 중요 렌더링 경로, Critical Rendering Path ] = 렌더링 엔진이 거치는 전체 프로세스 HTML 파싱CSS 파싱 및 스타일 계산레이아웃(리플로우) ⭐⭐⭐브라우저는 요소의 크기와 위치를 계산하여 화면에 배치 → 이 과정을 리플로우 또는 레이아웃!레이아웃은 요소의 스타일, 크기, 위치 등을 고려하여 화면에 어떻게 표시될지를 결정+ (아직 화면에 나타나지 않음. 그냥 계산만 해놓는 것!)렌더링 트리 구축DOM과 CSSOM(스타일 객체 모델)을 결합하여 렌더링 트리를 생성렌더링 트리는 화면에 표시될 요소의 구조를 나타내는데, 시각적으로 표현되는 요소만 포함렌더링렌더링 트리를 기반으로 브라우저는 화면에 실제로 픽셀을 그리고 색상과 텍스처를 적용하여 최종적인 렌더링을 ..