Code Playground

< h1 > Code Playground </ h1 >

[문제] Given an arbitrary input string, return the first nonrepeated character in the string. For example: firstNonRepeatedCharacter('ABA'); // => 'B' firstNonRepeatedCharacter('AABCABD'); // => 'C' 가장 처음으로 중복이 없는 문자를 리턴하는 문제이다. 내가 푼 방법은 다음과 같다. 체크한 문자는 checked라는 객체에 담고, 위 객체에 없다면 indexOf()를 사용하여 중복 문자가 없는지 loop을 돌며 검사한다. 중복 문자가 없는 문자를 발견하면 해당 문자를 리턴한다. var checked = {}; var strArr = string.split(..

[문제] Write a function that takes as its input a string and returns an array of arrays as shown below sorted in descending order by frequency and then by ascending order by character. [Example] characterFrequency('mississippi') === [['i', 4], ['s', 4], ['p', 2], ['m', 1]] characterFrequency('miaaiaaippi') === [['a', 4], ['i', 4], ['p', 2], ['m', 1]] 영어 문장을 파라미터로 받아서 각 알파벳의 개수를 카운트하고 위 예시와 같은 2차 배..

자료 구조는 코딩과는 별로 상관없는 것처럼 보일 수도 있겠지만 사실 프로그래밍에 있어서 매우 중요한 부분을 차지한다. 내가 어떠한 프로그램을 구현할 때, 혹은 어떤 알고리즘 문제를 해결하거나 새로운 로직을 만들어야할 때 데이터들을 어떤 구조로 저장하느냐에 따라서 프로그램의 효율성이나 성능 면에서 차이가 날 수 있기 때문이다. 따라서 오늘은 자료 구조 중에서 가장 기본적인 3가지를 간단하게 정리해보려고 한다. Stack (스택) Stack은 자료를 한 줄로 블록을 쌓듯이 추가하는 형태의 자료 구조이다. Stack의 맨 위에 자료를 추가하는 것을 우리는 push라고 하고 반대로 맨 위의 자료를 하나씩 제거하는 것을 우리는 pop이라고 한다. 위 그림처럼 스택은 어느 한 곳에 블록처럼 자료가 쌓이기 때문에 스..

바닐라코딩 부트캠프 프렙 과정을 끝마치고 본과정으로 들어가기 전 일주일 동안의 휴식 기간이 있었는데, 정말 최선을 다해(!) 열심히(!) 놀았다. ㅋㅋㅋ 이제 다음주 월요일에 부트캠프 시작하고 열심히 달려야하니까 오늘부터 슬슬 그동안 공부했던거 읽어보면서 기억을 되살려보려고 한다... 오늘은 프렙 과정에서 배웠던 내용들 중에서 아직 정리를 못한 Rest Parameter, Spread Operator와 Destructuring에 대해서 정리를 해보려고 한다. 1. Rest Parameter (나머지 인자들) Rest Parameter는 나머지 인자들, 혹은 여분의 인자들이라는 뜻이다. 함수를 정의할 때 마지막 인자 앞에 ...을 붙이면 해당 인자 다음에 오는 모든 나머지 인자들을 배열로 만든다. func..

며칠 전에 거의 일주일을 고생하며 구현한 지뢰찾기 게임이다. 오늘은 지뢰찾기 구현할 때 가장 핵심이 되는 알고리즘 2가지를 정리해보려고 한다. 1. 임의의 칸에 지뢰 배분하기 먼저 9X9 사이즈의 칸에 10개의 지뢰를 배분한다고 해보자. 우리는 먼저 아래와 같이 생긴 9X9의 빈 방을 만들어야할 것이다. 이 것을 2차 배열로 만들어준다. [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0..

오늘은 바닐라 자바스크립트로 캘린더 구현하는 방법을 포스팅해보려고 한다. 캘린더 모양은 대충 이렇게 생겼고, 오늘 날짜는 노란색 동그라미로 표시된다. 그리고 특정 날짜를 클릭하면 해당 날짜가 다른 색깔로 표시되고 왼쪽 사각형에 있는 날짜와 요일이 클릭한 날짜로 바뀌어야 한다. See the Pen calendar by juyeonH (@JY712) on CodePen. 해당 기능을 구현한 코드는 위에 codepen으로 올렸고, 몇 가지 코드만 어떻게 구현했는지 적으려고 한다. const init = { monList: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'Novem..

-해당 문제는 codewars사이트의 level6 문제입니다. (1~8단계 중 8단계가 가장 쉬운 레벨)- [문제] Given a string representation of a 2d map, return the number of islands in the map. Land spaces are denoted by a zero. Water is denoted by a dot. Rows are denoted by newlines ('\n'). Two land spaces are considered connected if they are adjacent (horizontal or vertical, but not diagonal). Too easy? Try solving it without recursion....

자바스크립트의 이벤트 루프(Event Loop)에 대해서 공부를 해보려다가 정말 좋은 영상을 발견했다. JSconf EU에서 Philip Roberts라는 사람이 이벤트 루프에 대해서 발표한 스피치 영상인데, 오늘은 이 동영상 내용을 정리해보려고 한다. 자바스크립트는 기본적으로 싱글 스레드 프로그래밍 언어(Single threaded programming language)이다. 여기서 싱글 스레드라는 것은 한 번에 하나의 작업만 할 수 있다는 뜻이다. one thread == one call stack == one thing at a time 여기서 호출 스택(call stack)이라는 것은 지난번에 재귀함수에 대해서 정리하면서 언급했었다. call stack은 프로그램 상에서 우리가 어떤 순서로 작업을..

오늘은 DOM에서 이벤트를 처리하는 방법에 대해서 포스팅해보려고 한다. 1. HTML 태그 안에서 이벤트 처리기 연결 (Inline Event Handlers) 이 방법은 이벤트를 발생시킬 HTML 태그 안에 직접 이벤트 핸들러를 추가하는 방법이다. 이 방법을 사용하면 HTML 태그와 자바스크립트 소스가 섞이기 때문에 중간에 이벤트 수정하거나 연결 함수를 바꾸려면 HTML 코드를 수정해야 한다. function logMessage (msg) { alert(msg || 'logging'); } 1번 2번 3번 4번 5번 태그에 직접 연결해야하기 때문에 이벤트 함수가 전역 공간에 미리 선언되어 있어야 한다. 이 방법은 요즘엔 거의 사용하지 않는 방법이고, HTML 코드와 JS 코드가 뒤섞이기 때문에 사용을 ..

오늘은 자바스크립트로 DOM을 동적 생성하는 방법에 대해서 정리해보려고 한다. 정리를 위해서 간단한(...간단하지만 나름 깔끔하게 만들려고 오랜 시간 고군분투했다.히히) 영화 정보를 출력하는 웹 페이지를 만들어보기로 했다. 영화 정보를 가져오기 위해서 인터넷을 뒤져서 146개의 영화 정보를 담고 있는 JSON 파일을 다운 받았다. JSON 파일을 연결하는 방법은 아직 모르니까 일단은 js 파일에 MOVIES라는 이름의 객체로 만들어 html파일에 연결시켜주었다. const MOVIES = [{ "id": 1, "title": "Beetlejuice", "year": "1988", "runtime": "92", "genres": [ "Comedy", "Fantasy" ], "director": "Tim B..