Frontend66 [React] 기본 플러그인 개념 및 설정 방법 ESlint : 내부적으로 스타일을 규정하는 것 $ npm i eslint -D // 다운로드 $ npx eslint --init //설정파일 생성 $ npx eslint index.js // index.js파일의 코딩 스타일 검사 Prettier : 예쁜 코드 만들어주는 코드 포매터 $ npm i perttier -D//설치 $ npx prettier index.js//index.js 코드 예쁘게 /// -> console.log('hello')-> console.log("hello"); // 따옴표는 ' ' 만 사용하고 세미콜론은 false로 설정했다. $ npx prettier index.js --write // js파일이 바뀜 /// default format => prettier// settin.. 2021. 11. 3. [React] React 프로젝트 생성 Create-React-App, CRA $ npm init -y CRA 사용해서 $ npx create-react-app [프로젝트이름] 개발모드 실행 $ npm start 프로덕션 모드 실행 $ npm run build $ npx sesrve -s build 테스트 모드 $ npm test eject : CRA 를 제거하는것, 되돌릴수 없음. CRA만으로 해결이 안될 때 제거 $ npm eject 2021. 11. 3. [Javascript] axios의 개념, 기본 예제 aixos란 Nodejs 혹은 브라우저를 위한 프로미스 기반의 HTTP 비동기 통신 라이브러리이다. 즉 HTTP 요청을 처리할 수 있는 기능이다. jQuery의 ajax랑 유사한 개념인듯하다. axios 설치 npm -> npm install axios aixos의 간단 예제를 테스트하려면 영화 검색 사이트를 만들기에 좋은 데이터베이스를 제공해주는 OMDb API에서 API KEY 인증이 필요하다. >> http://www.omdbapi.com/ // aixos 를 사용하기 위해 import import axios from 'axios' // 영화정보를 가져오는 함수 작성 function getMovieInfo(){ const APi_KEY = '비공개' axios .get(`https://www.omd.. 2021. 10. 29. [Javascript] 인터넷 브라우저의 LocalStorage, SessionStorage 인터넷 브라우저를 사용하면서 우클릭 - 검사를 누르거나 키보드의 F12를 누르면 개발 툴을 확인할 수 있다. 위의 여러 가지 탭 중에서 애플리케이션을 선택하면 위 사진과 같이 로컬 스토리지, 세션 스토리지가 있는 걸 알 수 있다. 로컬 스토리지(Local Storage)란 ?? 데이터가 만료되지 않음 (크롬의 시크릿 창인 경우 지워짐) 세션 스토리지(Session Storage)란 ?? 페이지를 닫으면 사라짐 스토리지에 저장하는 값들은 key value 형태로 구성되어 있다. 아직 로컬 스토리지와 세션 스토리지의 사용처(?)는 학습하지 않았지만 로컬 스토리지와 세션 스토리지에 값을 추가하고, 읽고, 수정하고, 삭제하는 방법에 대해 배웠다. 어려운 내용이 아니므로 코드 블럭으로 작성하기로 한다. // .s.. 2021. 10. 29. [Javascript] JSON 객체화 방법, 문자열화 방법 JSON은 이미 다양한 곳에서 사용되고 있기 때문에 사용방법은 생략한다. 자세한 내용은 Wiki(한글) 참조 : https://ko.wikipedia.org/wiki/JSON JSON - 위키백과, 우리 모두의 백과사전 JSON(제이슨[1], JavaScript Object Notation)은 속성-값 쌍( attribute–value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있 ko.wikipedia.org JSON은 "문자열"로 이루어져있지만 브라우저에서 읽을 때는 객체로 사용이 된다. 그래서 JSON 형식의 데이터는 코드를 짤때 문자열로 변환하는 방법.. 2021. 10. 29. [Javascript] lodash의 설명과 예제, 자주 쓰는 함수 이전 포스팅에서도 lodash 코드를 간략하게 올린 적이 있다. - 공식 문서 : https://lodash.com/docs/4.17.15 - 참조 URL : https://solyi.kr/215 [Javascript] 구조 분해 할당(배열,객체) / 전개 연산자 / 데이터 불변성 / 얕은복사와 깊은 복사 (lodas 구조 분해 할당 - 객체 / 배열의 구조 분해 할당 console.group('@ 객체의 구조 분해 할당') // 구조분해해서 원하는 데이터만 사용할 수 있음 const { name: me, age, email, address = 'Korea' } = user console.. solyi.kr lodash는 기능적 프로그래밍 패러다임을 사용하여 일반적인 프로그래밍 작업을 위한 유틸리티 기능.. 2021. 10. 29. [Javascript] Named Export / export default js파일에서 데이터나 함수를 외부파일에서 사용할때 export 로 내보내줘야한다. export 와 export default 로 작성 되어있는 샘플을 흔히 볼 수 있는데 그 차이를 알아보려고 한다. export default : 기본 export 내보내는 JS파일에서 function 이름은 생략이 가능하다. 한가지 함수만 작성할 수 있다. 가져오는 JS파일에서 import 함수명 부분은 다른 이름으로 변경해도 상관없다. // getRandom.js export default function () { return Math.floor(Math.random() * 10) } // main.js import getRandom from './getRandom' export : named export 내보내는 JS.. 2021. 10. 29. [Javascript] 구조 분해 할당(배열,객체) / 전개 연산자 / 데이터 불변성 / 얕은복사와 깊은 복사 (lodash deepClone) 구조 분해 할당 - 객체 / 배열의 구조 분해 할당 console.group('@ 객체의 구조 분해 할당') // 구조분해해서 원하는 데이터만 사용할 수 있음 const { name: me, age, email, address = 'Korea' } = user console.log(`이름은 ${name}입니다.`) console.log(`${me}의 이름은 ${age}살이며`) //me라는 이름으로 대체해서 가져올 수 있다. 그럼 name이란 변수는 사용할수없음! console.log(`${address} 에 거주중입니다.`) //구조분해할당시 default 값 지정할 수 있다 ! console.log(`문의사항이 있다면 -> ${email}`) console.log(user.name === `${nam.. 2021. 10. 27. [Javasciprt] 객체 Object 객체 Object 참조 URL :https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object Object - JavaScript | MDN Object 생성자는 객체 래퍼(wrapper)를 생성합니다. developer.mozilla.org assign keys values // Object.prototype... prototype안붙어 있으면 정적 메서드 // [].reverse() 는 가능하지만 {}.assign()은 불가능하다. const userAge = { name: 'solyi', age: 31 } const userEmail = { name: 'solyi', email: 'solyi@solyi.kr' .. 2021. 10. 27. [Javascript] 배열 Array 배열 Array 참조 URL :https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array - JavaScript | MDN JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다. developer.mozilla.org 용어 설명 index - 배열 내의 특정 위치 indexing - 인덱스 위치 조회 element / item - 각 요소들을 의미 console에서 수월하게 보기위해서 console.group('제목')으로 제목을 달았고 console.groupEnd() 로 닫아주었다. 코드에선 보기 불편해도 콘솔확인은 편함! length find conc.. 2021. 10. 27. [Javascript] 문자열 / 숫자와 수학 String 참조 URL : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String String - JavaScript | MDN String 전역 객체는 문자열(문자의 나열)의 생성자입니다. developer.mozilla.org 문자열 length indexOf slice replace match trim // length const str1 = '0123' console.log(str1.length) // indexOf(이값이 몇번째에 있니) console.log('@ indexOf(이값이 몇번째에 있니) ') const str2 = 'Hello World' console.log(str2.indexOf(.. 2021. 10. 27. [JavaScript] 생성자 함수 / this / es6 class / 상속 / 확장 생성자 함수 - 일반적으로 사용하는 function이 내용이 같을 땐 효율이 좋지 않으므로 생성자 함수를 만들어서 작성한다. const solyi = { firstName: 'Solyi', lastName: 'Choi', getFullName: function (){ return `${this.firstName} ${this.lastName}` } } console.log(solyi.getFullName()) // 위가 일반적으로 사용하는 함수 // 아래가 생성자 함수 function User(first, last) {//생성자 함수는 첫글자를 대문자로 작성하는 암묵적인 룰! this.firstName = first this.lastName = last } const person1 = new user('.. 2021. 10. 26. [JavaScript] 함수 기초, 화살표 함수, 즉시실행함수(IIFE), 호이스팅, 타이머 함수 성능에 영향을 끼칠수있으므로 함수 호출 회수는 줄이는 게 좋다. 반복적으로 사용 될때는 변수에 담아서 사용하고, 단일로만 사용될 땐 함수를 직접 호출하는 방법이 있다. 함수표현 : 변수에 담아서 사용하는 함수 익명함수 : 이름이 없는 함수 기명함수 : 이름이 있는 함수 함수 내에서 return 문을 만나면 종료된다. arguments : 인수를 지정하지 않아도 함수 내에서 활용할 수있다. 인수가 너무 많은 경우에 사용 function sum(){ console.log(arguments) return arguments[0] + arguments[1] + arguments[2] } const z = sum(1,2,3) console.log(z) 화살표 함수 : 일반 함수의 축약형 매개 변수가 하나라면 소괄호.. 2021. 10. 26. 이전 1 2 3 4 5 6 다음 반응형
