혼자 적어보는 노트

선택정렬(Selection Sort) 현재위치에 들어갈 값을 찾아서 정렬하는 방식 1. 정렬되지 않은 배열중에 가장 작은 값을 찾아서 첫번째 (현재) index값과 바꾸어준다. 2. 그리고 나머지 요소들을 비교한 후 가장 작은 값을 두번째 (현재) index 값과 바꾸어준다. 3. 세번째, 네번째 … 위를 반복하면 앞에서부터 순차적으로 정렬이 된다. for(let i=0; i

배열의 요소들에 대해서 순서를 바꿔야 할 때가 있다. 간단한 es6문법으로 변경하다가 또 다른 방법이 무엇이 있는지 정리 해 보았다. let arr = ['black', 'red', 'blue', 'white']; 위의 배열에서 black과 blue의 위치를 바꾸어보자. 1. splice 사용 [배열명].splice([삭제위치], [삭제갯수], [추가할 항목]) splice의 return값은 삭제한 요소들의 array이다. let arr = ['black', 'red', 'blue', 'white']; let item = arr.splice(2, 1, arr[0]); arr.splice(0, 1, item[0]) console.log(arr) //['blue', 'red', 'black', 'white'..

한 파일에 코드가 길어지면 가독성은 물론 코드관리에 어려움이 있다. 필수적으로 파일을 나누어 주어야 하는데, export와 import를 이용하여 다른 파일에 저장해 둔 변수나 함수나 자료형을 불러올 수 있다. 예를들어 한 개의 파일에 변수가 하나 있다, 한 개의 변수를 다른 곳에서 쓰고 싶다면? - export default const foodDate = ["orange", "meal", "jelly"] export default foodDate; 해당 파일에 변수 선언과 하단에 export default [변수명] 을 해주면 다른 파일에서 import하여 사용할 수 있다. export default ["orange", "meal", "jelly"] * 이렇게 변수명 없이 직접 array를 보낼 수도 ..

React의 component에서 input을 다뤄보자. input을 사용 할 때는 input에 적은 값을 데이터로 받아서 적용하는 방식을 사용 하는데 React에서는 useState를 활용하여 input에 입력한 값을 저장해서 받아 쓴다. let [inputVal, setInputVal] = useState(''); 일단 저장할 state를 만들어주고 기본 설정은 빈 값으로 설정을 해준다. setInputVal(e.target.value) }/> 이벤트 함수는 보통 이벤트 객체 e 를 파라미터로 받아서 사용 할 수 있는데 onChange의 e.target.value를 통해 input에 텍스트가 적혀질 때마다 inputVal 값을 변경해주게 만든다. 이 부분을 조금 응용해 보자. 버튼 클릭 시 input..

React에서 component안에서 함수를 사용하려면 {}중괄호를 이용하여 사용하면 되는데 component의 return()안에서 if문 사용 시 if else를 적으면 적용이 안되고 삼항연산자를 사용해야 한다. { 1 == 1 ? "정답" : null } // [조건] ? [조건이 true일 때] : [조건이 false일 때] 위와 같이 조건에 따라 내용을 노출 시킬 수 있으며 여기서 null은 빈 html을 의미한다. { 1 == 1 ? : null } // { 1 == 1 ? 정답 : null } 텍스트 뿐만 아니라 이런식으로의 노출도 가능하다. &&연산자의 사용 { 1 == 1 && 정답 } 위 코드는 삼항연산자와 동일한 역할을 한다. 왼쪽 조건식이 true면 오른쪽의 JSX가 남는다. if문..

vimeo영상을 종종 삽입할 때가 있는데 iframe으로 감싸져있어서 컨트롤하기가 어려운 부분이 있다. 또한 고정된 width와 height를 사용하기에는 반응형 웹에서는 적합하지가 않다. CSS를 이용하여 반응형으로 컨트롤 하는 법을 알아보자. 코드를 복사해 오면 width값과 height값이 포함되어 있는데 이것을 지워준다. 그리고 iframe을 감싸는 div를 만들어준다. 그리고 CSS를 아래와 같이 설정한다. #vimeoWrap{ position: relative; padding-bottom: 56.25%; /* 16/9 ratio */ padding-top: 30px; /* IE6 workaround*/ height: 0; overflow: hidden; margin: 0; } #vimeoWra..

useState() class를 기반으로 한 class component를 이용하여 state를 관리 하는 방법도 있지만 복잡한 class component가 아닌 함수형 component에서도 state관리를 할 수 있게 만들어주는 useState()의 사용법을 정리해보려 한다. class함수 안에서 state를 사용하는 것과 마찬가지로 state는 react의 변수 대신 쓰는 데이터의 저장 공간이다. state는 변경되면 HTML이 새로고침 없이 리렌더링이 된다. import React, { useState } from 'react'; useState는 기본적으로 상단에 react와 함께 Import하여 사용할 수 있다. [name, setName] = useState('Jay'); 'Jay'라는 데..

Link component를 구성 할 때 a태그에서 href를 사용하면 홈페이지를 새로고침하여 페이지를 로드하게 된다. 하지만 아래의 react-router-dom의 Link를 사용하면 페이지 새로고침 없이 로드할 수 있다. import { Link } from "react-router-dom"; Home 해당 기록이 history스택에 저장된다. * Link태그는 ReactDOM에 의해 a태그로 변환된다 css를 꾸미고싶다면 a태그로 css를 꾸미면 된다. 해당 이미지 클릭 시 페이지 변경과 함께 데이터를 전달하고 싶다면? function Home({id, name, age, img}){ return( ) } 이런식으로 Link to 의 pathname property로 이동될 경로를 설정해주고 sta..