JS 데이터 실습
가져오기, 내보내기
자바스크립트에서 데이터를 내보낼때,
기본 통로와 이름을 지정하는 통로 두가지가 있음.
기본 통로의 경우 (default)
기본 통로 예시
export default function random() { return Math.floor(Math.random() * 10) // 여기에서 이름 (random) 이 없어도 됨 }import getType from './getType' // 여기에서 이름(getType)은 변경 가능! }
이름을 지정하는 통로
사용 예시
export function random() { return Math.floor(Math.random() * 10) // 이렇게 이름이 지정되어야 함 }imort {random} from './getRandom' // ❗️ 데이터를 중괄호로 묶어서 사용해야함!
📌 기본통로와 이름 지정 통로의 차이
기본 통로➡️ 한번에 하나의 데이터만 내보낼 수 있음
이름을 지정해서 내보내는 통로➡️ 이름만 지정하면 몇개든 내보낼 수 있음!
이름 지정 통로 예시)
이렇게 객체 데이터도 내보낼 수 있음
💡 이름을 바꾸고 싶을땐,
as를 사용함
💡 모든 요소들을 가져오고 싶을땐,
와일드 카드사용 !
Lodash 사용법
Lodash 란?
JavaScript의 인기있는 라이브러리 중 하나.
다양한 배열, 데이터 값들을 다루는데 편리함!
Lodash 홈페이지
그럼 유용한 메서드들을 소개하겠다!
_.uniqBy()
배열 중에서 중복 값을 없애줌
하나의 배열 데이터에서 특정한 속성의 이름으로 고유화를 시켜주는 메서드
➡️ 배열 데이터가 1개일때 사용
_.unionBy()
여러 배열들을 중복이 없는 상태로 합침
합치기 전에 여러개의 배열 데이터를 먼저 적어주고 맨 마지막에 배열 데이터를 합칠때,
고유화 작업을 시킬 속성 이름을 명시 해주면 고유화가 된 새로운 배열을 반환하는 메서드
➡️ 배열 데이터가 여러개일때 사용
_.find()
특정한 객체 데이터를 찾을때 쓰임
.find(배열 데이터, {객체 데이터})
_.findIndex()
특정한 객체 데이터의 인덱스를 찾을때 쓰임
.findIndex(배열 데이터, {객체 데이터})
_.remove()
특정한 객체 데이터를 제거할때 쓰임
.remove(배열 데이터, {객체 데이터})
JSON (JavaScript Object Notation)
JSON 이란?
📙 위키백과
JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍(attribute–value pairs), 배열 자료형(array data types) 또는 기타 모든 시리얼화 가능한 값(serializable value) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고 받을 때 그 자료를 표현하는 방법으로 알려져 있다. 자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는 데 적합하다.
즉, JSON이란, Javascript를 표현하는 하나의 데이터 포멧이다.
💡
JSON은 하나의 문자데이터이나import로 가져오게 되면 객체 데이터처럼 사용됨!
JSON.stringfy() -> 문자 데이터화 시킴
JSON.parse() -> 객체 데이터화 시킴
Storage
요렇게 씀
OMDB API
query string
axios 사용
요렇게 사용
✅ Hangman 만들기
팀원들과 함께 Hangman 만들기를 진행했다!
전체적인 구조 생각
일단 문자열을 입력받은 다음에 하나씩 배열에 저장 한다음,
그 배열의 길이만큼*을 생성하고, 플레이어가 단어를 하나씩 입력한다.
단어가 맞을 경우엔*이 해당 단어로 바뀌게끔 만들자!
실제 코드
import _ from "lodash" let word = prompt("단어를 입력하시오!").split('') // 문자열을 입력받아 쪼개서 word에 넣음 var findword = []; // 배열 생성 for(let i=0;i<word.length;i++) { findword.push("*") // findword += "+" 이라고 하니까 배열로 인식을 안함... } // 배열에 입력받은 word의 길이만큼 * 생성 var showword = findword.join('') // 보여주는 용도의 문자열 생성 var inputAl; var count = 5; var correct = word.length; var order = 0; while(count !=0) { inputAl = prompt(showword) // 플레이어에게 알파벳 하나를 입력받음 while((_.indexOf(word,inputAl,order)) != (-1)) { findword[_.indexOf(word,inputAl,order)] = inputAl; order = _.indexOf(word,inputAl,order) + 1; correct--; // .indexOf를 이용해서, 단어에 해당 알파벳이 있으면 그 값을 바꿈 // while문으로 똑같은 단어가 많을 경우, order를 이동해서 // 다시 검색해서 바꾸게 만듬. } order = 0 count--; showword = findword.join('') if(correct==0) break; alert("남은 count : "+count) } if(correct==0) alert(showword + " 승리!") else alert(showword + " 패배!")
🧑🏻💻 오늘의 회고
그래서 export default 를 여러개 하면 에러가 뜨는거였구나...
오늘은 팀원들이랑 hangman을 만들었는데 재밌었다!
어제 만들었던 야구 게임이랑 같이 코드를 올릴 계획이다.
만들면서 배운것은,배열 관련된 값 (검색, 수정) -> lodash
문자열 관련된 값 (검색, 수정) -> 정규 표현식이렇게 쓰인다는 것이다.
처음에 hangman을 만들때 c++에서 하던 것 처럼,
문자열을 받아서 string[0] 이런식으로 접근하려 했는데 오류가 났다!알고보니 자바스크립트에서는 문자열을 바꾸는 방식을 잘 안쓴다고 했다.
그래서 정규 표현식으로 만들어야 했던 것 같은데 아직 배우기 전이라서,
문자열을 배열로 변환한 다음에 수정을 했다.내일은 대망의 틱텍토 만들기를 하는 날이라서 기대가 된다!
