개발 기록

async/await를 이해하고 1개의 async 아래 2개 await 선언을 이해한다. 아래 예제는 uber eats 프로젝트에서 add-restaurant Component의 submit 함수다. 동작 플로우 정리 이미지 처리 시에 비동기처리로 s3에 업로드되어있는 이미지를 불러오는 엔드포인트로 요청을 보낸다. 응답하는 함수의 return 값은 이미지 url을 return하게 된다. return된 이미지 url에 json()함수를 비동기적으로 받기위해 await를 선언해준다. 결과적으로 coverImg 변수에는 json형식의 key는 "url", value는 "http://....com"이 된다. const onSubmit = async() => { try { setUploading(true); co..

React 라이브러리를 공부하면서 Hook 이란 개념을 자연스럽게 알게되었다. 이번 글에서는 React 기본제공 함수와 Hook의 차이에 대해 알아본다. React 공식 문서를 따라 각색을 더해 따라 적어보며 개념 정리해보았다. useEffect useEffect 란? useEffect는 어떤 Effect를 발생시키고 싶을 때 사용한다. useEffect는 렌더링 결과가 실제 돔에 반영된 뒤에 호출된다. useEffect의 지연타이밍 리액트 공식문서 : timing of effect 글 componentDidMount와 componentDidUpdate와는 다르게, useEffect로 전달된 함수는 지연 이벤트 동안에 레이아웃 배치와 그리기를 완료한 후 발생합니다. 그렇지만, 모든 effect가 지연될 ..

Javascript에서 변수 선언 방식은 3가지가 존재한다. var, let, const 각 방식의 특징을 알아보자. 1. 변수 선언 방식의 차이 var human = 'white' console.log(human) // white var human = 'black' console.log(human) // black 위의 예시와 같이 이미 선언된 변수라도 다시 재선언 할 수 있다. 이러한 점이 "재선언하는게 왜 문제지?"라고 할 수 있다. 맞다. 몇줄 안되는 애플리케이션에서는 문제가 되지 않을 수 있다. 변수의 이름이 헤깔릴 일이 적기 때문. 그런데 애플리케이션이 커질수록 문제가 발생한다. 애플리케이션이 커지면 커질수록 변수 선언의 양이 자연스레 늘면서 어제 내가 어떤 이름의 변수를 선언했는지도 까먹게 ..

이 글은 Eloquent ORM에 대해 정리한 글입니다. Eloquent ORM 정의 Eloquent ORM 은 라라벨에서 제공하는 가볍고 사용하기 쉬운 ORM(Object-relational mapping) 으로 MVC 아키텍처에서 Model 을 담당하고 있습니다. ORM 정의와 특징 ORM(Object-relatinal mapping)이란 객체(클래스)와 관계(관계형 데이터 베이스)와의 설정을 의미 합니다. 객체 지향 프로그래밍은 클래스를 사용하고 관계형 데이터 베이스는 테이블을 사용합니다. 여기서 객체 모델과 관계형 모델간에 불일치가 존재 하는데 이 객체간의 관계를 바탕으로 SQL을 자동 생성하여 불일치를 해결 하는 것이 ORM입니다. Object DB데이터 에서 매핑의 역할을 하는 것이 ORM이라..

이 글은 뷰의 블레이드 템플릿 개념을 이해하고 사용하기 위해 작성됐습니다. 뷰는 resources/views에서 파일을 관리한다. 라라벨에서는 blade template을 사용하며 index.blade.php와 같이 blade확장자를 붙여 사용 가능합니다. // index.blade.php 또한 , {{}} 안에 php변수 사용하면 출력이 가능하다. // index.blade.php {{ $data="테스트" }} {{ $data }} 레이아웃(layouts) @extends : 특정 파일의 레이아웃을 상속받는다. @section : 상속받은 파일의 @yield 부분에 입력될 내용을 지정한다. ex)@yield('title')에 들어갈 내용은 @section('title') 안에 작성하고 @stop으로 ..

이 글은 Laravel의 라우팅과 미들웨어의 개념과 사용법에 대해 알아보고자 작성됐습니다. 라우팅(Routing) 공식문서의 정의 가장 기본적인 라라벨 라우트는 URI와 클로저를 전달 받아, 라우팅을 정의하는 간단하고 쉽게 이해할 수 있는 방법을 제공합니다. 라라벨은 보통 get과 post를 이용하여 RUI와 클로저를 전달 받아 라우팅을 정의합니다. Route::get("get-test", function (){ return "get-test" }); Route::post("post-test", function (){ return "post-test" }); 한번더 말하자면, Route는 전 포스팅에서 공부한 내용인 프로바이더와 파사드를 이용하여 Route를 정적 메서드로써 사용할 수 있습니다. put,..

이 글은 서비스 프로바이더와 파사드의 개념 이해를 위해 작성됐습니다. 서비스 프로바이더(Service Provider) 공식문서의 서비스 프로바이더 정의 서비스 프로바이더는 라라벨 애플리케이션의 부팅(부트스트래핑)의 가장 핵심이라고 할 수 있습니다. 여러분의 애플리케이션과 마찬가지로 라라벨의 모든 코어 서비스는 서비스 프로바이더를 통해서 부트스트래핑 됩니다. 그런데 "부트스트래핑" 이란 과연 무엇을 의미하는 것일까요? 일반적으로는 서비스 컨테이너에 바인딩을 등록하는 것을 포함해서 이벤트 리스너, 미들웨어 그리고 라우트등을 등록 하는 것을 의미합니다.(Laravel을 이해하고 쓰자(시작/서비스 컨테이너)에 부트스트래핑 설명을 기재해두었다) 서비스 프로바이더는 애플리케이션 구성의 핵심입니다. 라라벨에 포함되..

이 글의 목적은 Laravel을 사용하기 전 Laravel이 어떠한 방식으로 동작하는지 알기 위해 작성되었고 Laravel 5.7버전의 한글 공식문서를 기반으로 작성했습니다. Laravel 시작 Laravel 애플리케이션 안 모든 요청의 시작점은 public/index.php로 부터 시작합니다. 그리고 해당 파일은 많은 코드를 가지고 있지 않습니다. 하지만 해당 파일은 프레임워크의 나머지 부분을 로딩할 시작점이 됨으로 중요한 역할을 수행한다. HTTP/Console 커널(Kernel) 다음으로 애플리케이션이 시작된 유형에 따라 전송된 요청을 HTTP 커널이나 콘솔 커널 둘 중 하나로 보냅니다. 이 두가지의 커널은 모든 요청의 흐름 중심에서 작동하게 되고 여기에서는 app/Http/Kernel.php 에있..