TIL 33

인텔리제이 명령어로 실행

1. Window(윈도우) (1) 환경변수 등록 윈도우 + R - sysdm.cpl 입력 후 확인 탭 메뉴 - [고급] - [환경변수] 사용자 변수 - [편집] 환경변수 지정 - 로컬에 인텔리제이 설치 경로 확인 경로 참고) C:\Program Files\JetBrains\Intellij IDEA 버전\bin (2) 터미널에서 idea 또는 idea64(64bit인 경우) 명령어 입력하여 실행 idea . 또는 idea64 . 2. MacOS(맥) [Tools] - [Create Command-line Launcher]

TIL 2022.08.31

[React] fetch 함수를 이용한 API 통신

Using Fetch fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); 네트워크를 통해 json 파일을 호출해서 콘솔에 data를 찍어보는 과정이다. fetch( )함수는 url, 즉 API 주소를 첫번째 인자로 옵션 객체를 두번재 인자로 받고, Promise 타입의 객체를 반환한다. 두번째 then에서는 data를 응답 받은 후의 로직을 작성한다. API 호출 성공시 응답(response) 객체를 resolve, 실패했을 경우에는 예외(error) 객체를 reject한다. options 객체에는 HTTP방식(method), HTTP..

TIL 2022.07.31

[React] 제품 상세페이지 컴포넌트 제작하기

필수구현 사항 구매 수량 버튼을 눌렀을 때 수량에 따른 가격 변동 탭 메뉴 클릭 시 스타일 변경 및 스크롤 위치 이동 새로고침시 scrollTop 구현 Mock Data 활용해서 리뷰창 구현하기 → 추후 API 통신 state를 활용하여 구매 수량에 따른 가격 변동 버튼 만들기 constructor(props) { super(props); this.state = { quantity: 1, }; } countUpQunatity = () => { const { quantity } = this.state; this.setState({ quantity: quantity + 1, }); }; countDownQuantity = () => { const { quantity } = this.state; this.se..

TIL 2022.07.31

[React] Default Export & Named Export

*Default Export *: 하나의 파일에서 단 하나의 변수 또는 클래스 등으로만 export 한다. const MyComponents = ( ) => { ... } export default MyComponents import 할 때는 아무 이름으로나 import 할 수 있다. 참고* : var, let,const`를 바로 default 할 수 없다. Named Export : 한 파일 내에서 여러 변수 또는 클래스 등으로 export 할 수 있다. Named export 방식 사용시 중괄호로 감싸야 한다. 여러 값을 내보낼 때 유용하다. export 시 import한 이름과 동일한 이름을 사용해야 한다. 따라서 식별자 충돌을 피하기 위해서 export시 이름을 바꿔줄 수도 있다. (단, as를 ..

TIL 2022.07.31

[React] 공통 컴포넌트인 네비게이션(navigation bar) 만들기

전체 UI화면에 공통사항으로 적용될 Navigation 컴포넌트 작성하기 필수구현사항 대메뉴에 마우스 Enter시 메뉴 slide-down, 메뉴에서 마우스 Leave 시 메뉴 slide-up 반복되는 내용은 컴포넌트로 분리, Array.map( ) 활용 state와 props 적절하게 활용할 것 ** Refactoring Review** 1. import 순서 가독성을 위해 import 순서를 변경해주는 것이 좋다. React → Library(Package) → Component → 변수 / 이미지 → css 파일(scss 파일) 변경 전 import React, { Component } from 'react'; import { Link } from 'react-router-do..

TIL 2022.07.31

[Javascript] Promise(프라미스)

Promise 객체란 무엇인가 Promise : 시간이 얼마나 걸리든 상관없이 약속한 결과를 만들어 내는 '제작 코드(producing code)가 준비되었을 때, 함수가 결과를 사용할 수 있도록 해주는 역할. 비동기 처리를 하기 위한 자바스크립트의 방식 중 하나로 콜백 패턴이 가진 단점을 보완한다. let promise = new Promise(function(resolve, reject){ //executor(실행자, 실행함수) }); new Promise 에 전달되는 함수는 executor(실행자, 실행함수)이다. executor는 new Promise 가 만들어질 때 자동으로 실행됨. 결과를 최종적으로 만들어내는 제작 코드를 포함한다. executor executor는 보통 시간이 걸리는 일을 수..

TIL 2022.07.31

[MySQL] MySQL Basic Summary

1. 접속, host 확인, port 확인 mysql 접속하기 mysql -uroot -p :: password 입력 하면, mysal 정보가 나온다. 내 host 정보 확인하기 select user(); mysql 포트 번호 확인하기 SHOW VARIABLES WHERE Variable_name='port'; ❗️계정 오류 시 : Access denied for user '' @ ''(using password: YES) create user '계정명'@'localhost' identified by 'password'; grant all privileges on *.* to '계정명'@'localhost'; flush privileges; (모든 호스트에 대해 권한 부여하고자 할 때는 localhost..

TIL 2022.07.30