노랑꼬리의 개발 블로그

※ 구현 목표 점프 누른 시간에 비례한 점프 구현하기 1. 사전 준비 1) 점프 할 캐릭터와 발판 준비 2) 애니메이션 연결하기 점프 실행 가능 여부를 애니메이션 파라미터 ("isJump")를 기준으로 정할 것이기 때문에 미리 애니메이션 프로토타입을 제작한다. 2-1) 애니메이션 생성하기 가장 간단하게 애니메이션을 생성하는 방법은 이미지 파일 여러개를 한번에 Scene에 드래그 앤 드랍 해주면 된다. 이를 저장해주면 anim 파일과 controller 파일이 생성된다. anim : 애니메이션 프레임 구성, 간격, 프로퍼티 추가 등의 작업을 할 수 있다. controller : 애니메이션의 전환을 정렬하고 관리할 수 있다. 하나의 controller에 두 anim를 불러오고 isJump라는 Bool 값 파..

문제링크 : https://www.acmicpc.net/problem/15649 15649번: N과 M (1) 한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다. 수열은 사전 순으로 증가하는 순서로 출력해 www.acmicpc.net 작성코드 풀이 1. 백트래킹 알고리즘 일종의 트리 탐색 알고리즘이다. 현재 상태에서 모든 경로를 따라 뻗어나가다가 가능성이 없다 판단되면 되돌아가서 다시 해를 찾아간다. 알고리즘 구현 방식은 기본 DFS(깊이 우선 탐색) 방식과 동일하게 재귀 호출을 사용하여 노드를 찾는다. ※ DFS 방식 구현 (모든 경로를 탐색한다) 2. 구현 1) 숫자 범위 N과 수열 길이 M을 입력받는다, 탐..

문제 링크 : https://www.acmicpc.net/problem/2563 2563번: 색종이 첫째 줄에 색종이의 수가 주어진다. 이어 둘째 줄부터 한 줄에 하나씩 색종이를 붙인 위치가 주어진다. 색종이를 붙인 위치는 두 개의 자연수로 주어지는데 첫 번째 자연수는 색종이의 왼쪽 변 www.acmicpc.net 작성코드 풀이 1. 기본 설계 1) 검은색 영역의 크기를 세려면 색종이의 겹친 부분을 제외한 검은색 영역을 찾아야한다. 2) 색칠된 영역을 좌표값으로 저장하여 중복된 부분을 제거한다. 2. 구현 1) 색종이의 갯수을 담아둘 N과 검은색 영역 좌표를 담아둘 black 배열을 생성한다. 2) 영역 좌표값을 black에 넣어준다. ※ 색종이 하나의 크기는 10*10 이므로 for 반복문으로 x,y ..

문제 링크 : https://www.acmicpc.net/problem/2566 2566번: 최댓값 첫째 줄에 최댓값을 출력하고, 둘째 줄에 최댓값이 위치한 행 번호와 열 번호를 빈칸을 사이에 두고 차례로 출력한다. 최댓값이 두 개 이상인 경우 그 중 한 곳의 위치를 출력한다. www.acmicpc.net 작성코드 풀이 1) 최댓값을 저장해둘 Max 변수를 초기화 해준다. 2) 9개 줄을 입력받아 배열에 넣어준다. 3) Max에 현재 들어있는 Max 값보다 해당 줄에서 가장 큰 값이 클 경우 Max를 교체하고 인덱스 값을 받아오는 조건문을 작성한다 4) for 문이 모두 완료되면 print로 Max 값과 Max의 인덱스 값에서 + 1을 해준 값 (인덱스는 0부터 시작하므로 행렬 수 표현 을 위해)을 출력..

문제 링크 : https://www.acmicpc.net/problem/2738 2738번: 행렬 덧셈 첫째 줄에 행렬의 크기 N 과 M이 주어진다. 둘째 줄부터 N개의 줄에 행렬 A의 원소 M개가 차례대로 주어진다. 이어서 N개의 줄에 행렬 B의 원소 M개가 차례대로 주어진다. N과 M은 100보다 작거나 같 www.acmicpc.net 작성 코드 풀이 1) 행렬의 크기를 지정해줄 N, M을 map 함수로 한 줄에서 입력받아준다. N*M의 행렬 값을 넣어줄 배열 A,B를 선언해준다. 2) A와 B 배열에 각각 N개의 리스트를 map함수로 받아 넣어준다. 3) 행렬 A, B의 원소들의 값을 합하여 출력한다. 행렬의 각 원소를 공백으로 구분하라는 조건이 있으니 end=' '로 처리해주었다. 한 행의 출력이..

#2 게시판의 내용을 담아둘 배열을 만들고 렌더링 해본다. 1. 렌더링이란? 1) 기본적인 뜻 Render는 html로 입력받아 해석해서 표준 출력 장치(모니터)로 출력한다. 이 작업을 Rendering이라 한다. 2) React에서 rendering data를 html로 변환해서 renderer에게 전달하는 작업을 뜻한다. 2. 구현 구현은 두가지 함수로 작성한다. 1) PostList : 내용을 담아둘 배열 구현 2) Post : 배열의 내용을 key 값에 따라 조회해가며 렌더링하는 작업 구현 map 메서드는 배열 내 요소 하나하나를 콜백 함수로 가공하여 새로운 배열에 저장한다. 즉, 위의 return를 해석하자면 posts 배열의 요소 하나하나를 post 라는 새로운 배열에 저장하고 함수 Post를..

#0 최종 목표 : React로 게시판 구현하기 #1 React의 useState를 사용하여 입력 기능의 프로토타입을 구현한다. 1. useState란? 배열을 리턴해주는 함수 state라는 변수를 변경하므로서 컴포넌트에 작업요청을 진행한다. == 화면을 다시 그려준다. state : 컴포넌트 랜더링(컴포넌트에 작업요청)을 할 수 있는 변수 setState : state를 변경시키는 함수 value : state의 초기값 2. 기본 구현 구현 목표는 input 칸 두개에서 입력을 받고 화면에 바로 보여주는 것과 초기화 버튼이다. 우선 useState로 2개의 입력할 변수를 선언해둔다. useState의 setState함수가 불러와지는 경우 state는 변경된다. Title와 Contents의 입력, Re..

※ 예시에 활용될 배열은 문자열로 입력 받은 뒤 split 을 통해 배열로 변환해주었다. 1. 원소 추가 및 제거 push() : 배열 끝에 원소를 추가한다. pop() : 배열 끝의 원소를 제거한다. ※ unshift()와 shift() 는 배열의 앞에서 부터 모든 항목들을 뒤로 밀어야하므로 작동이 느리다. unshift() :배열 앞에 원소를 추가한다. shift() : 배열 앞의 원소를 제거한다. splice(startIndex, deleteCount) : 배열 내 원하는 인덱스의 값을 삭제하거나 삭제 후 그 자리에 추가할 수 있다. ★ 원본 배열을 수정한다. slice(startIndex, endIndex) : startIndex부터 endIndex까지 (endIndex는 불포함) 잘라서 새로운 ..

1. 배열이란? 배열(array)은 여러 개의 값을 순서대로 나열한 객체이다. 배열 내에 다양한 종류의 데이터 유형을 넣을 수 있으나 동일한 유형의 데이터를 넣는 것을 권장한다. 2. 배열 선언 변수에 배열을 선언할 수 있으며 대괄호 ([ ])나 new Array() 를 사용하여 선언한다. 3. 배열 항목의 접근과 수정 배열에서 위치를 나타내는 수를 인덱스라 한다. 컴퓨터는 숫자를 셀 때 0부터 시작하므로 인덱스 값도 0부터 시작된다. 단일 배열 항목에 새 값을 제공하여, 배열의 항목을 수정할 수 있다. 배열명.length로 배열의 갯수를 알아낼 수 있다.

1. 즉시 실행 함수(IIFE, Immediately Invoked Function Expression) 정의되자마자 즉시 호출되는 함수 단 한번만 호출되며 다시 호출할 수 없다. ※ 만약 return 값이 없는 함수라면 undefined 값이 나온다. 2. 즉시 실행함수를 사용하는 이유 초기화 코드에서 주로 사용된다. 즉시 실행함수를 사용하게 되면 지역 스코프를 지니기 때문에 기존에 있던 전역 변수나 함수의 충돌을 방지할 수 있다. 그러면서도 특정 값은 반환 할 수 있어 초기화 코드로 즉시 실행함수를 사용한다.