전체 글 (18) 썸네일형 리스트형 스킬트리 C# 사용 programmers.co.kr/learn/courses/30/lessons/49993#fnref1 코딩테스트 연습 - 스킬트리 programmers.co.kr 풀이 스킬을 습득하기 위해선 선행 스킬을 먼저 습득하고 다음 스킬을 습득해야 한다. 스킬의 습득순서는 skill 문자열에 담겨져 있고, 유저들이 만든 스킬트리는 skill_tree 배열에 담겨 있다. 유저들이 만든 스킬트리 중에서 skill에 있는 습득순서를 만족시키는 스킬트리의 갯수를 찾아야 한다. skill 문자열에 포함되지 않는 스킬에 대해서는 습득이 자유롭다. 예제를 보면 알 수 있지만 skill에 포함되어 있는 모든 스킬을 습득하지 않아도 된다. 주어진 skill이 "CBD"일 경우 C를 먼저 습득하고 B를 습득할 수 있고, .. Dependency Property(의존 프로퍼티) 1. 의존 프로퍼티/의존 속성 속성(property)에 WPF적인 요소를 추가한 속성이라 볼 수 있다. 의존 프로퍼티의 값이 변경되면 자동으로 그 값이 변화함에 따라 연관된 작업을 수행할 수 있게 해주는 특징을 가지고 있다. 예를 들어 메인 윈도우의 XAML 코드를 보면 Height = "450", Width = "800"이라는 값을 가지고 있다. 이 값의 변화함에 따라 메인 윈도우의 크기가 변한다는 사실을 알고 있다. 즉, Height와 Width 프로퍼티의 값이 변화하면 디자이너에 나타나는 메인 윈도우의 크기가 변화한 값에 따라 새롭게 렌더링 되게 된다. 이것이 의존 프로퍼티가 가지고 있는 중요한 특징이다. 실제로 Height와 Width의 메타 데이터를 확인하기 위해 F12를 눌러 내부 정의로 이동.. INotifyPropertyChanged 인터페이스 1. INotifyPropertyChanged 마이크로소프트의 홈페이지에는 '속성값이 변경되었음을 클라이언트에 알립니다.'라고 정말 간단하게 적혀있다. 실제로 INotifyPropertyChanged 인터페이스의 역할은 바인딩이 되어있는 요소들의 값이 변경될 때마다, 연관되어 있는 요소들의 값을 변환시키는 것이다. INotifyPropertyChanged 인터페이스에는 PropertyChanged라는 내장 메소드가 들어있다. 이 메소드는 속성값이 변할 때마다 발생하는 이벤트로 이를 이용해서 속성값이 변할 때마다 연관되어 있는 요소들의 값을 변경해줄 수 있는 것이다. 2. 실습 INotifyPropertyChanged 인터페이스를 이용해서 num1과 num2의 값이 변할 때마다 num1과 num2의 합을 .. CRA index.js의 기본 구성 npm start 명령어로 CRA(create-react-app)의 첫 화면까지 들어왔다. 이제 리액트가 어떻게 구성되었는지, 어떤 방식으로 작동하는지 알아보자. CLI를 이용해서 CRA로 만든 프로젝트가 있는 위치로 경로를 이동하고, 자신이 사용하는 텍스트 에디터를 실행하자. 비쥬얼 스튜디오 코드의 경우 간단하게 code .을 입력하면 된다. 그러면 아래와 같이 디폴트 세팅이 로딩된다.(App.css 파일 삭제한 상태) 리액트는 컴포넌트를 통해 virtual DOM을 관리하고, 이 virtual DOM이 실제 DOM을 관리하는 시스템으로 작동된다는 이야기를 했다. 코드의 첫 줄에 오는 import라는 명령어는 CRA를 설치하는 과정에서 생성된 다른 컴포넌트들을 index.js라는 파일 내부에서 사용하겠.. React 시작 React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 1. 리액트 리액트(React)는 페이스북에서 개발한 자바스크립트 라이브러리이다. 리액트는 컴포넌트라는 방식을 이용해 유저 인터페이스를 구축한다. 그래서 한 번 정의한 컴포넌트를 자유롭게 사용할 수 있다는 점에서 재활용성에 이점을 가지게 된다. 또 하나의 특징은 JSX라는 리액트 전용 문법을 사용해서 HTML과 비슷한 문법을 사용해 자바스크립트 내부에서 HTML을 관리할 수 있게 만들어준다. 웹을 만드는 과정에서 HTML이 뼈대를 만들고, CSS가 옷을 입히며, 자바스크립트가 동작을 구현한다는 컨셉에 위반된다는 생.. 자바스크립트 유용한 정보 1. 삼항 조건 연산자(ternary operator) 세 개의 피연산자를 취할 수 있는 방법이다. 자바스크립트에서는 한 번에 세 개의 피연산자를 취하는 유일한 방법이다. 사용방법도 어렵지 않다. var age = 29; var canDrinkAlcohol = (age > 19) ? "True, over 19" : "False, under 19"; console.log(canDrinkAlcohol); // "True, over 19" age라는 var 변수를 선언해주고, 그 값으로 29를 입력해준다. 그리고 나서 술을 마실 수 있는 나이인지 확인하는 함수를 만들고 age라는 변수가 19보다 클 때(true)에는 "True, over 19"을, age라는 변수가 19보다 작을 때(false)에는 "Fals.. Scope 스코프(범위, Scope)는 코드가 실행되고 있을 때, 어떤 변수에 접근할 수 있는지에 대한 답을 알려준다. 자바스크립트에서는 기본설정(default)으로 window 오브젝트에 있는 root scope 설정되어 있다. 예를 들어, 개발자 도구의 콘솔탭에서 콘솔창에 test를 출력하는 함수 aa를 정의한다. 그러면 window 객체의 내부에 함수 aa가 생긴 모습을 확인할 수 있다. 함수 aa가 정의되면서 window를 부모로 두기 때문에, root scope는 parent scope라고 부르기도 한다. 그렇다면 다음과 같은 상황에서는 어떻게 될까? 함수 bb가 있다. 내부에는 변수 a가 hello라는 문자열로 초기화되어 있다. 이 상황에서 콘솔창에 변수 a를 출력을 할 수 있을까? 출력을 할 수 없었다.. DOM을 이용해서 To Do List 만들기 자바스크립트와 DOM을 이용해서 레이아웃이나 다른 스타일의 추가 없이 간단하게 To Do List를 만들어보자. 먼저 다음과 같이 index.html 파일을 만들어주고, style.css 파일과 script.js 파일을 준비해주자. 아무런 기능이 없는 이 페이지에 다음과 같은 기능을 추가시킬 것이다. 1. 리스트 추가시키기 : 할 일을 입력하고 마우스로 입력 버튼을 클릭하거나 키보드의 엔터키를 입력하면 작성한 내용을 리스트의 마지막에 추가시키기. 2. 리스트 삭제하기 : 각 리스트 옆에 삭제 버튼을 만들어서 클릭하면 해당 리스트가 삭제되게 만들기. 3. 취소선 만들기 : 리스트를 마우스로 클릭하면 리스트의 내용에 취소선을 만들기. 1. 리스트 추가시키기 가장 먼저, HTML DOM을 이용해서 자바스크립트.. 이전 1 2 3 다음
