안심심한 아샤

리액트가 만들어진 이유 인터렉션이 자주 발생하고 이에따라 동적으로 UI를 표현해야 된다면 규칙이 너무 많아지고 관리도 힘들어진다. DOM을 직접 건드리며 작업하면 코드가 난잡해지기 쉽다. -> 그래서 나온 Ember, Backbone, AngularJS 등의 프레임워크 작동 방식을 쉽게 설명하자면 특정 js 값이 바뀌면 특정 dom 이 바뀌게 연결, 업데이트(작업 간소화) 리액트는 어떤 상태가 바뀔 때 DOM을 업데이트 하는게 아니라 아예 날리고 새로 만들어서 보여주면 어떨까 라는 아이디어로 시작 -> 어떻게 업데이트할지 고민X 하지만 실제로 다 날리고 새로 만들면 속도가 엄청 느려질 것 ->> 이걸 가능하게 해주는 Virtual DOM 말그대로 가상 DOM, 브라우저에 실제로 보여지는 게 아닌 메모리에..

객체 선언 방식 중 ES6부터 추가되어 권장되고 있는 class 방식! (OOP) 객체 리터럴과 클래스 모두 익혀두는 것이 좋다. 클래스가 권장되긴 하지만 익숙하다는 이유 등으로 리터럴 방식도 많이 사용하기 때문! 참고 - 객체선언방식 1. 리터럴 방식 2. 클래스 방식 3. 생성자 방식 new Object()

덧셈 +, 곱셈 *, 뺄셈 - 연산자와 자바스크립트에서만 제공하는 연산자에 대해 용어: 단항, 이항, 피연산자 - 피연산자(operand) 연산자가 연산을 수행하는 대상, 5*2면 피연산자가 두 개(5, 2) 피연산자는 인수(argument)로 불리기도 한다. - 단항(unary) 피연산자를 하나만 받는 연사자를 단항 연산자 라고 부른다. 피연산자의 부호를 뒤집는 단항 마이너스 연산자 - 는 단항 연산자의 대표적인 예 let x = 1; x = -x; alert( x ); // -1, 단항 마이너스 연산자는 부호를 뒤집는다. - 이항(binary) 두 개의 피연산자를 받는 연산자를 이항 연산자 라고 부른다. 마이너스 연산자도 이항 연산자로 쓸 수 있다. let x = 1, y = 3; alert( y -..

형 변환 (type conversion) 함수와 연산자에 전달되는 값이 적절한 자료형으로 변환되는 과정 (대부분 변환된다.) 대표적인 예시 alert가 받은 값의 자료형과 관계없이 문자열로 자동 변환하여 보여주는 경우 수학 관련 연산자가 전달받은 값을 숫자로 변환하는 경우 (객체의 형 변환은 나중에 나온다.) 문자형으로 변환 - 문자형의 값이 필요할 때 일어난다. alert 메서드는 매개변수로 문자형을 받기 때문에 alet(value)에서 value는 문자형이어야 한다. 만약 다른 형의 값을 받으면 자동으로 문자형으로 변환된다. (String(value) 함수를 호출해 전달받은 값을 문자열로 변환 할 수도 있다.) let value = true; alert(typeof value); // boolean ..

문제 설명 1부터 6까지 숫자가 적힌 주사위가 네 개 있습니다. 네 주사위를 굴렸을 때 나온 숫자에 따라 다음과 같은 점수를 얻습니다. 네 주사위에서 나온 숫자가 모두 p로 같다면 1111 × p점을 얻습니다. 세 주사위에서 나온 숫자가 p로 같고 나머지 다른 주사위에서 나온 숫자가 q(p ≠ q)라면 (10 × p + q)2 점을 얻습니다. 주사위가 두 개씩 같은 값이 나오고, 나온 숫자를 각각 p, q(p ≠ q)라고 한다면 (p + q) × |p - q|점을 얻습니다. 어느 두 주사위에서 나온 숫자가 p로 같고 나머지 두 주사위에서 나온 숫자가 각각 p와 다른 q, r(q ≠ r)이라면 q × r점을 얻습니다. 네 주사위에 적힌 숫자가 모두 다르다면 나온 숫자 중 가장 작은 숫자 만큼의 점수를 얻습..

브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능 1. alert - 함수가 실행되면 사용자가 확인 버튼을 누를 때까지 메시지를 보여주는 창이 떠있다. alert('Hello') 모달 창(modal window) - 메시지가 있는 작은 창 모달이란 단어에 페이지의 나머지 부분과 상호 작용이 불가능 하다는 의미가 내포되어 있다. - 사용자는 모달 창 바깥의 버튼을 누른다던가 하는 행동을 할 수 없다. 확인 버튼을 누르기 전까진 2. prompt 브라우저에서 제공하는 함수인 promp는 두 개의 인수를 받는다. prompt(title, [default]) 실행되면 텍스트 메시지와 입력 필드(input field), 확인 및 취소 버튼이 있는 모달 창을 띄워준다. title 사용자에게 보여줄 문자열 ..

js에서 값은 문자열이나 숫자형 같은 특정한 자료형에 속한다. 자바스크립트에는 여덟 가지의 기본 자료형이 있다. 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. 변수는 어떤 순간엔 문자열, 어떤 순간엔 숫자가 될 수도 있다. // no error let message = "hello"; message = 123456; 이처럼 자료의 타입은 있지만 변수에 저장되는 값은 언제든 바뀔 수 있는 언어를 ‘동적 타입(dynamically typed)’ 언어라고 부른다. 1. 숫자형 let n = 123; n = 12.345; - 숫자형(number type) 정수 및 부동소수점 숫자(floating point number)를 나타낸다. - 곱셉 * , 나눗셈 / , 덧셈 + , 뺄셈 - 등 다양한..

자바스크립트는 대부분 사용자나 서버로부터 입력받은 정보를 처리하는 방식으로 동작한다. 변수는 이러한 정보를 저장하는 용도로 사용된다. 변수(variable) - 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소' - js에선 let 키워드를 사용해 변수를 생성한다. let message message 라는 이름의 변수를 생성(선언)했다. let message message = 'Hello' 할당 연산자 = 을 사용해 변수 안에 데이터를 저장 문자열이 변수와 연결된 메모리 영역에 저장되었기 때문에, 변수명을 이용해 문자열에 접근할 수 있게 되었다. let msg msg = 'Hello' alert(msg) 변수에 저장된 값을 보여준다. 한 줄에 작성도 가능하다. let msg = 'Hello' alert(m..

급한 것, 아픈 것들이 많이 지나가서 다시 시작하는 모던 자바스크립트~_~ 넘나 좋다 엄격 모드(strict mode) 그동안 자바스크립트는 기존 기능의 변경 없이 새로운 기능이 추가되어 오랫동안 호환성 이슈 없이 발전해왔다. - 기존의 코드가 망가지지 않음 - 창시자들의 실수나 불완전함이 언어 안에 박제되어 있음 위의 현상이 2009년까지 지속되었다. ES5에서 드디어 새로운 기능 추가와 함께 기존 기능 일부가 변경되었다. > 기존 기능의 변경으로 호환성 문제가 생김 >> 이를 위해 기본 모드에서는 활성화 되지 않게 설계 >>> use strict 라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화 할 수 있음 리액트와 특히 next.js를 사용하다 많이 봤던 use strict!!..

시간 제한 메모리 제한 제출 정답 맞힌 사람 정답 비율 2 초 128 MB 11195 4312 3631 40.520% 문제 영식이는 직사각형 모양의 성을 가지고 있다. 성의 1층은 몇 명의 경비원에 의해서 보호되고 있다. 영식이는 모든 행과 모든 열에 한 명 이상의 경비원이 있으면 좋겠다고 생각했다. 성의 크기와 경비원이 어디있는지 주어졌을 때, 몇 명의 경비원을 최소로 추가해야 영식이를 만족시키는지 구하는 프로그램을 작성하시오. 입력 첫째 줄에 성의 세로 크기 N과 가로 크기 M이 주어진다. N과 M은 50보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에는 성의 상태가 주어진다. 성의 상태는 .은 빈칸, X는 경비원이 있는 칸이다. 출력 첫째 줄에 추가해야 하는 경비원의 최솟값을 출력한다. 예제 ..