코드 유인원

분류 전체보기 검색 결과

해당 글 251건

leetcode. ZigZag Conversion

문제 요약 문자열과 정수가 주어지면 그에 맞는 지그재그 문자열로 변환 후 반환하는 함수를 작성하라 이건 설명보단 예시를 보면 이해가 쉽다 풀이 예시를 보면 입력된 정수의 크기와 열의 길이가 똑같은 것을 알 수 있다 0 : P A H N 1 : A P L S I I G 2 : Y I R 그럼 정수 크기만큼 배열을 선언한 뒤 문자를 각각 배열에 넣어주면 될거라는 생각이 들었고 곧 P A H N A P L S I I G Y I R 0 1 2 1 0 1 2 1 0 1 2 1 0 1 이런 반복적인 패턴을 알 수 있어서 이제 차례대로 배열에 넣기만 하면되겠다는 생각을 했는데... 01210..을 어떻게 반복시킬까 고민하던 중 그냥 패턴을 배열화 시켜서 패턴만 따로 돌리자는 아이디어가 떠올랐다 /** * @param..

Algorithm/문제 2021. 1. 18. 02:19

6. 컴포넌트 반복

6-1. 데이터 배열을 컴포넌트로 변환하기 배열을 컴포넌트에서 출력하려면 어떻게 해야할까? 우선 컴포넌트에서 렌더링하려면 JSX가 필요하기 때문에(꼭 그런 건 아니지만) 우리가 가진 배열의 데이터를 JSX로 가공해야할 필요가 있다 이는 자바스크립트 Array의 내장 함수인 map으로 쉽게 구현이 가능하다 const IterationSample = ()=>{ const names = ['눈사람','얼음','눈','바람']; const forRender = names.map((v,i)=>{v}); return( {forRender} ) } 6-1-2. 리스트의 키 list, key list, key 다수의 컴포넌트 렌더링 const numbers = [ 1111 , 2222 ]; 엘리먼트들이 담긴 리스트를 ..

React/리액트를 다루는 기술 2021. 1. 17. 16:49

leetcode. Longest Substring Without Repeating Characters

문제 요약 문자열 s가 주어지면, s내에서 가장 긴 회문을 출력하라 풀이 /** * @param {string} s * @return {string} */ var longestPalindrome = function(s) { for(let i=s.length; i>0;i--){ for(let j=0;j+i

Algorithm/문제 2021. 1. 16. 15:28

5. ref: DOM에 이름 달기

HTML에서 특정 요소에 접근하려면 어떻게 해야할까? 이런식으로 div요소에 id값을 달아줘서 이후에 css나 자바스크립트에서 id값을 이용해서 div 요소에 접근, 작업을 진행할 수 있다 리액트 프로젝트 내부에서도 이런식으로 DOM에 이름을 다는 방법이 있는데 바로 ref(reference)다 5-1. ref 사용하기 ref는 어떤 상황에서 사용해야할까? 구현하려는 기능이 state만으로는 해결할 수 없을 때 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때 애니메이션을 직접적으로 실행시킬 때 '모두 DOM을 직접적으로 건드려야 할 때' 로 귀결된다 예제 코드 import React, { Component } from 'react'; import './Val..

React/리액트를 다루는 기술 2021. 1. 15. 12:22

leetcode. Add Two Numbers

문제 요약 비어있지 않은 두개의 링크드 리스트를 준다. 이 링크드 리스트는 음수가 아닌 정수로 이루어져있고 역순으로 저장돼있다 두 리스트를 더해서 링크드 리스트로 반환하라 제공되는 Linked List는 다음과 같다 function ListNode(val, next) { this.val = (val===undefined ? 0 : val) this.next = (next===undefined ? null : next) }example 주어지는 정수가 243 과 564 라면 3-> 4-> 2 리스트와 4-> 6-> 5 리스트가 주어진다 이 둘을 더해서 7-> 0-> 8의 리스트를 반환하는 함수를 작성하면 되는 것 풀이 function ListNode(val, next) { this.val = (val ==..

Algorithm/문제 2021. 1. 14. 18:37

자바스크립트의 유니코드

유니코드 유니코드는 문자나 기호, 숫자에 대응되는 코드로 이루어진 데이터베이스라고 생각할 수 있다 유니코드로 U+0041 는 A를 U+00A9 는 ©를 U+2603 는 ☃를 U+1F4A9 는 💩를 각각 가르킨다 이 유니코드들은 앞에 U+라는 것을 붙여서 유니코드 기호라는 것을 나타내고 뒤에 16진수 최소 4자리를 붙여서 표현한다 최소 4자리가 의미하는 바는 위의 4가지 코드들을 보고 눈치챘을지 모르겠지만 앞의 3개는 4자리로 뒤의 똥은 5자리로 표현되고 있는데 자주 쓰이는 4자리로 이루어진 코드들은 다국어 기본 평면(Basic Multilingual Plane) 또는 BMP이라고 불리고 그 범위 밖에 있는 것들은 아스트랄 평면들(astral planes)이라고 불린다 자바스크립트의 유니코드 자바스크립트에..

JavaScript 2021. 1. 13. 16:09

4. 이벤트 핸들링

4-1. 리액트의 이벤트 시스템 이벤트 이름은 카멜 표기법으로 작성한다 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다 DOM 요소에만 이벤트를 설정할 수 있다 컴포넌트에는 이벤트를 붙일 수 없다 4-1-1. 이벤트 핸들러의 this 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다 // in Class EventPractice // 렌더링 부분 render() { return ( 이벤트 연습 button ) } // 메소드 부분 constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.handleClick = this.handl..

React/리액트를 다루는 기술 2021. 1. 12. 23:35

leetcode. Two Sum

문제 요약 정수 배열 nums 와 하나의 정수 target이 주어진다 nums의 수 중 두 개를 뽑아 더해서 target을 만들 수 있는 조합의 인덱스를 리턴하는 함수를 작성하라 하나의 답만 존재하며, 같은 인덱스의 수를 두번 사용하는 것은 불가능하다 풀이 var twoSum = function(nums, target) { for(let i=0; i

Algorithm/문제 2021. 1. 11. 18:13

algospot. PICNIC (미해결)

코드 const pros = input.slice(1,input.length).map(v=>v.split(' ').map(v=>Number(v))); for(let i=0; i

Algorithm/문제 2021. 1. 10. 02:06

3. 컴포넌트

3-1. 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지이다 함수형 컴포넌트 클래스형 컴포넌트 위의 두 컴포넌트 모두 동일한 결과를 나타낸다 클래스형 vs 함수형 리액트의 버전이 올라가면서 현재는 둘의 차이점이 없다고 봐도 된다 아래는 리액트 공식 메뉴얼이다 결정적으로, Hook은 존재하는 코드와 함께 나란히 작동함으로써 점진적으로 적용할 수 있습니다. 그냥 함수형을 쓰자 3-3. props props는 properties의 줄임말로 컴포넌트의 속성값이다 //in index.js import React from 'react'; import ReactDOM from "react-dom"; const Test = ({name})=> { return ( {name} ); } ReactDOM.render(..

React/리액트를 다루는 기술 2021. 1. 9. 01:55