전체 글 132

[PHP/XE] debug print 찍기

* background에서 실행하려면 '@'를 붙여서 사용 {@debugPrint($hello_world)} 터미널에서 해당하는 파일 경로에 들어가면 나의 경우 개발 서버에 alias로 예약어를 등록해 둠 ~./bashrc 경로에 alias로 예약어를 등록해두면 단축키처럼 사용할 수 있다. alias de='tail -f /home/user/_debug_message.php' (참고 : https://ojava.tistory.com/153) 디버그 프린팅 되는 변수 값들을 확인할 수 있다. * 일반 디버그 프린트 {debugPrint($hello_world)} https://ko.code-paper.com/php/examples-how-to-debug-printer-code-php

Backend/php(xe) 2022.08.12

[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