FE 18

[React] 무결성을 유지하면서 const 변수 값 수정하기

지금까지 나는 const 변수의 값은 어떠한 방법으로도 수정할 수 없는줄 알았는데 방법이 있긴 있었다...!! 일단 먼저 알아야할 불변 변수의 특징으로는 1. 값을 재할당 할 수 없다 2. 값의 변경은 가능하다 이게 무슨 소리야... push()나 splice()같은 JS 내장함수을 사용하면 const 변수의 값 변경이 가능하다 ...(중략)... const insa = ["hi"]; insa.push("hello"); return ( {insa} // hihello 출력 ); } 하지만 이런 방법은 무결성을 유지하지 못한다는 문제점이 있다 그렇다면 어떻게 무결성을 유지하면서 변수의 값을 바꿀 수 있을까? 원본값을 바로 수정하는게 아닌, 기존의 값을 이용해 만든 새로운 값을 새 변수에 할당하는 것!! 그..

FE/React 2021.08.31

[React] 틱택토 추가 기능 구현하기 (2)

잠깐!✋ 이 포스팅은 React 자습서를 따라해보고 복습을 목적으로 하는 포스팅입니다 틀린 부분이 있으면 정정 부탁드립니다! 리액트 자습서(틱택토 만들기) 링크: https://reactjs.org/tutorial/tutorial.html Tutorial: Intro to React – React A JavaScript library for building user interfaces reactjs.org 4. 오름차순이나 내림차순으로 이동을 정렬하도록 토글 버튼을 추가해주세요. (Add a toggle button that lets you sort the moves in either ascending or descending order.) 이게 제일 어려웠다 (내 기준🥲) 첫번째로 생각했던건 정렬 방식..

FE/React 2021.08.17

[React] 틱택토 추가 기능 구현하기 (1)

잠깐!✋ 이 포스팅은 React 자습서를 따라해보고 복습을 목적으로 하는 포스팅입니다 틀린 부분이 있으면 정정 부탁드립니다! 리액트 자습서(틱택토 만들기) 링크: https://reactjs.org/tutorial/tutorial.html Tutorial: Intro to React – React A JavaScript library for building user interfaces reactjs.org 리액트 자습서 마지막 부분을 보면 연습을 위해서 추가 기능을 제시해 놓았다 1. Display the location for each move in the format (col, row) in the move history list. (이동 기록 목록에서 특정 형식(행, 열)으로 각 이동의 위치를 표시..

FE/React 2021.07.29

[React] 틱택토 게임으로 알아보는 props와 state

잠깐!✋ 이 포스팅은 React 자습서를 따라해보고 복습을 목적으로 하는 포스팅입니다 틀린 부분이 있으면 정정 부탁드립니다! https://ko.reactjs.org/tutorial/tutorial.html#passing-data-through-props 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 오늘은 props와 state에 대해서 알아보도록 하겠습니다 먼저 둘의 특징을 요약하자면 props 1. 읽기 전용 데이터(수정 불가능) 2. 부모 컴포넌트에서 자식 컴포넌트로 전달하는 단방향 데이터 state 1. 컴포넌트가 가지는 동적인 값(변경 가능) 버튼 눌렸는지 여부...값이 몇인지 등등..

FE/React 2021.07.28

[Javascript] Exec 함수 / Match 함수 / MatchAll 함수 알아보기

1. RegExp.prototype.exec 인수로 전달받은 문자열에 대해 정규식과 일치하는지 탐색을 수행한 한 결과를 배열(없다면 null)로 반환한다. 2. String.prototype.match 자신을 호출한 문자열과 인수로 전달받은 정규 표현식과의 매칭 결과를 배열(없다면 null)로 반환한다. 일단 exec()의 형식은 정규식.exec(문자열) / match()의 형식은 문자열.match(정규식) 로 순서가 반대이다. 그럼 순서에서 차이점만 있는건가...? 했는데 그건 또 아니었음 🤔 차이점 1) 정규식에 g 플래그를 붙여서 함수를 실행하면 match는 문자열에서 해당하는 부분을 전부 배열에 넣어서 return 해주지만 exec는 처음 일치하는 부분 하나만 배열에 넣어서 return한다. co..

FE/Javascript 2021.07.03

[Javascript] Filter 함수 알아보기

Array.prototype.filter 자신을 호출한 배열의 요소들에 대해 인수로 전달받은 함수를 호출한다, 그리고 그 결과가 true인 요소들을 모아서 새로운 배열을 반환한다 원본 배열은 변경 X 구문 arr.filter(callback(element[, index[, array]])[, thisArg]) 매개변수 1. callback: 각 요소를 검사할 함수 - return값이 true면 유지 / false면 버림(다음 세 가지 인수를 가진다) 1) element: 처리할 현재 요소 2) index(optional): 처리할 현재 요소의 인덱스 3) array(optional): filter()을 호출한 배열 2. thisArg(optional): callback을 실행할 때 this로 사용되는 값..

FE/Javascript 2021.06.25

[Javascript] Map 함수 알아보기

Array.prototype.map 자신을 호출한 배열의 요소들에 대해 인수로 전달받은 함수를 호출한다, 그리고 그 결과를 모아서 새로운 배열을 반환한다 원본 배열은 변경 X 구문 arr.map(callback(currentValue[, index[, array]])[, thisArg]) 매개변수 1. callback: 새로운 배열 요소를 생성하는 함수(다음 세 가지 인수를 가진다) 1) currentValue: 처리할 현재 요소 2) index(optional): 처리할 현재 요소의 인덱스 3) array(optional): map()을 호출한 배열 2. thisArg(optional): callback을 실행할 때 this로 사용되는 값 const vege = ["가지", "호박", "시금치"]; c..

FE/Javascript 2021.06.24

[Android Studio] 안드로이드 스튜디오에서 모듈 import 하기

오늘은 꼭 안스 깔짝대보려고 팀원분 repo clone해왔다 근데 compileTaskApiDebugJavaWithJavac 라던가... mergeDebugAssets 같은 에러 발생...⁺◟( ᵒ̴̶̷̥́ ·̫ ᵒ̴̶̷̣̥̀ ) 열심히 구글링해서 솔루션도 찾았는데 해결이 안됐다ㅠㅡㅠ 근데 원인은 모듈 제대로 import 안해서였음 그치...import도 안했는데 종속성? 어림도 없지,,, ⬇️ 그런김에 정리하는 글🤗 1. File - New - Import Module 을 선택한다 2. 로컬에서 해당 모듈이 있는 폴더를 선택한다 모듈 이름은 :{하고싶은 이름}으로 한다 꼭 sdk 아니여도 됨...! 3. 모듈에 종속성 추가하기 내가 쓰려는 OpenCV 모듈은 종속성(dependencies)를 추가적으로..

FE/Android 2021.05.14 (2)

[Javascript] toString이 하는 일

내가 알고있던 toString은 단순히 string 값으로만 변환시켜주는 메소드였는데...아니였다!! const num = 13; const num2 = num.toString(); const num3 = num.toString(2); console.log("toString 안 쓰면 "+typeof num); console.log("toString 쓰면 "+typeof num2); console.log(num3+"의 타입은 "+typeof num3) 1) 매개변수로 받은 배열, 숫자 boolean값 등을 string 형식으로 변환 boolean값에 toString을 쓰면 string 값으로 바뀐다 const flag = new Boolean(true); console.log(flag); console.l..

FE/Javascript 2021.05.06