토리로그

지난 1탄에서는 content-type이 `application/json` 일때 문서 작성하는 법에 대해 다뤄보았다. 이번에는 `x-www-form-urlencoded` 형식의 api 일때 작성하는 법에 대해 다뤄보자.

기본적인 환경설정은 동일하기 때문에 패스하고

- 테스트 코드 작성시 사용하는 메소드

- index.adoc 설정법

만 다르기 때문에 이것만 다루도록 하겠다.

[1] 테스트코드 작성하기

1. 테스트 대상 코드

x-www-form-urlencoded 방식으로 전달 시 메소드는 POST 로 전달된다. 아래와 같이 테스트할 api를 작성해 준다.

@PostMapping("/tmp2")
fun tmp2(requestDto: TmpRequestDto): TmpResponseDto {
    val recommendEmail = requestDto.name + "@gmail.com"
    val responseDto =
        TmpResponseDto(
            code = 200,
            email = recommendEmail,
            message = "hello, ${requestDto.nickname ?: "guest"}",
        )
    return responseDto
}

2. 테스트코드 : params

application/json 타입일때에는 요청 파라미터를 정의할때 requestFields 메소드를 사용하였다. 하지만 x-www-form-urlencoded일때에는 params를 사용해야 한다.

// given
val requestDto =
    HealthcheckController.TmpRequestDto(
        userId = 1,
        name = "tester2",
        nickname = "banana",
        age = 25,
        productName = "잘팔리는노트",
        hobby = mutableListOf("클라이밍", "뜨개질"),
        address =
            HealthcheckController.TmpAddress(
                city = "세종특별시 아름동",
                street = "654-321",
                zipcode = 897,
            ),
    )

val xxxRequest =
    LinkedMultiValueMap(
        mapOf(
            "userId" to listOf(requestDto.userId.toString()),
            "name" to listOf(requestDto.name),
            "nickname" to listOf(requestDto.nickname),
            "age" to listOf(requestDto.age.toString()),
            "productName" to listOf(requestDto.productName),
            "hobby" to listOf(requestDto.hobby.joinToString(",")),
            "address.city" to listOf(requestDto.address.city),
            "address.street" to listOf(requestDto.address.street),
            "address.zipcode" to listOf(requestDto.address.zipcode.toString()),
        ),
    )

+) Map<String!, String!>

params의 value 타입에 맞춰 작성해 주어야 한다. 이때 문제가 될만한 것으로는 list 타입의 hobby이다.

콤마 (,) 로 구분하여 string으로 변환하는 작업을 해준 뒤 params의 값으로 작성해야 한다.

// when
val result =
    this.mockMvc.perform(
        RestDocumentationRequestBuilders
            .post("$domain/tmp2")
            .contentType(MediaType.APPLICATION_FORM_URLENCODED)
            .params(xxxRequest)
            .accept(MediaType.APPLICATION_JSON),
    )

이제 요청 준비는 다 되었고 결과값을 받아 문서로 만들 코드를 작성한다.

// then
result
    .andExpect(MockMvcResultMatchers.status().isOk)
    .andDo(
        document(
            "docs_xxxform",
            documentRequest,
            documentResponse,
            formParameters(
                parameterWithName("userId").description("유저Id").attributes(Attributes.key("type").value("integer")),
                parameterWithName("name").description("이름").attributes(Attributes.key("type").value("string")),
                parameterWithName("nickname").description("닉네임").attributes(Attributes.key("type").value("string")),
                parameterWithName("age").description("나이").attributes(Attributes.key("type").value("integer")),
                parameterWithName("productName").description("상품명").attributes(Attributes.key("type").value("string")),
                parameterWithName("hobby").description("취미").attributes(Attributes.key("type").value("array")),
                parameterWithName("address.city").description("도시").attributes(Attributes.key("type").value("string")),
                parameterWithName("address.street").description("도로명").attributes(Attributes.key("type").value("string")),
                parameterWithName("address.zipcode").description("우편번호").attributes(Attributes.key("type").value("integer")),
            ),
            responseFields(
                fieldWithPath("code").description("code").optional(),
                fieldWithPath("email").description("이메일").optional(),
                fieldWithPath("message").description("메시지").optional(),
            ),
        ),
    )

+) formParameters

요청파라미터를 정의하는 메소드로 `formParameters`를 사용한다. 객체안의 키는 application/json 형식때와 같이 마침표로 구분하여 작성한다.

[2] 문서 생성하기

1. 테스트 실행 : adoc 파일 생성

테스트를 실행하여 `docs_xxxform` 에 대한 adoc 파일들이 생성되는걸 확인해보자

이전에 생성된 `docs_json` 과 함께 테스트 성공으로 `docs-xxxform` 폴더가 생성되었다.

2. rest docs 포맷 설정 : index.adoc

`x-www-form-urlencoded` 형식에 맞춰 Index.adoc 폼도 수정해 주어야 한다.

application/json과 x-www-form-urlencdoed의 차이점!

- `request-fields.adoc` 은 application/json 에만 있다

- urlencoded에는 `form-parameters.adoc` 이 있다.

위 두가지가 요청 필드에 대한 명세서가 되므로 이에 유의하여 index.adoc파일을 작성해 준다.

# REST API

## [1] REST DOCS EXAMPLE : application/json
### [http : 요청]
include::{snippets}/docs_json/http-request.adoc[]
#### [요청 필드]
include::{snippets}/docs_json/request-fields.adoc[]
### [http : 응답]
include::{snippets}/docs_json/http-response.adoc[]
#### [응답 필드]
include::{snippets}/docs_json/response-fields.adoc[]

## [2] REST DOCS EXAMPLE : x-www-form-urlendcoded
### [http : 요청]
include::{snippets}/docs_xxxform/http-request.adoc[]
#### [요청 필드]
include::{snippets}/docs_xxxform/form-parameters.adoc[]
### [http : 응답]
include::{snippets}/docs_xxxform/http-response.adoc[]
#### [응답 필드]
include::{snippets}/docs_xxxform/response-fields.adoc[]

이제 build를 하고 `docs/index.html` 경로로 만들어진 문서를 확인해보자

3. /docs/index.html 로 발행된 문서 확인

참고로! 테스트 실행을 하고나서 build 하지 않고, build 시 테스트코드가 자동으로 실행되는 설정이라면 바로 build만 해도된다.

또 로컬환경에서 실행중일때 어라?! 빌드 됐는데 왜 문서 안바뀌지?! 하지 말고 서버도 재실행 해주는걸 잊지말자 🙂

한 페이지에 작성되다 보니 너무 길어서 창 두개에 띄움!

이렇게 content-type이 `x-www-form-urlencoded` 일때에 spring rest docs 작성도 완성했다! 다음은 이 문서를 보기좋게 커스텀 하는 방법에 대해 다뤄보고자 한다.

[1] 공식문서

https://docs.spring.io/spring-restdocs/docs/current/reference/htmlsingle/#introduction

[2] 세팅하기

[build.gradle.kts]

plugins {
	id("org.asciidoctor.jvm.convert") version "3.3.2" // 1번
}

dependencies {
    asciidoctorExt("org.springframework.restdocs:spring-restdocs-asciidoctor:2.0.5.RELEASE") // 2번

    testImplementation("org.springframework.restdocs:spring-restdocs-mockmvc") // 3번
    testImplementation("org.springframework.restdocs:spring-restdocs-asciidoctor") // 4번
}

tasks {
    val snippetsDir by extra { file("build/generated-snippets") } // 5번

    test { // 6번 : test Task 의 output 디렉토리 설정
        outputs.dir(snippetsDir)
        useJUnitPlatform()
    }

    asciidoctor { // asciidoctor Task 생성
        configurations(asciidoctorExt.name)
        inputs.dir(snippetsDir) // 7번 : asciidoctor Task 의 input 디렉토리 설정

        dependsOn(test)
        doLast { // 8번
            copy {
                from("build/docs/asciidoc")
                into("src/main/resources/static/docs")
            }
        }
    }

- 1번 : 플러그인 추가

- 2번 : asciidoctor 의존성 추가

- 3번 : spring rest docs 의존성 추가 (mockMvc)

- 4번 : spring rest docs 의존성 추가 (asciidoctor)

- 5번 : snippets 경로 설정

- 6번 : test Task의 output 디렉토리 설정

- 7번 : asciidoctor Task의 input 디렉토리 설정

- 8번 : 테스트 코드 실행 종료 후 파일 복붙하는 설정 (from 하위 파일을 into 폴더 하위로 복제한다)

[3] 테스트코드 작성하기

1. abstract class 작성

우아한 형제들 블로그를 참고하여 작성하였다.

package io.my.project

import com.fasterxml.jackson.databind.ObjectMapper
import org.springframework.beans.factory.annotation.Autowired
import org.springframework.boot.test.autoconfigure.restdocs.AutoConfigureRestDocs
import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc
import org.springframework.boot.test.context.SpringBootTest
import org.springframework.context.annotation.ComponentScan
import org.springframework.test.web.servlet.MockMvc

@SpringBootTest
@AutoConfigureRestDocs // REST Docs 설정
@AutoConfigureMockMvc
@ComponentScan(basePackages = ["io.gbike.hwikgo"]) // 컴포넌트 스캔 범위 지정
abstract class ApiDocumentationTest : BaseMockData() {
    @Autowired
    protected lateinit var mockMvc: MockMvc

    @Autowired
    protected lateinit var objectMapper: ObjectMapper
}

? SpringBootTest

여기서 `SpringBootTest` 대신 `WebMvcTest` 를 사용하여 빌드속도를 좀더 빠르게 할 수 있지만 테스트하려는 Controller 에 연결되어있는 많은 Service들과 Service에서 또 참고하는 유틸성 컴포넌트 등 일일이 주입해주어야 할 의존성이 너무 많은듯 하여 일단 SpringBootTest 어노테이션을 사용하였다.

### : MockMvc

spring REST Docs 문서화를 위해선 MockMvc 의 perform을 수행해야 한다. 동일하게 사용되는 객체이므로 abstract에서 생성했다.

2. 테스트 코드 작성

먼저 테스트 코드 작성을 위해 controller에 테스트 대상 코드를 작성해 주었다.

@RestController
class HealthcheckController() {
    @GetMapping("/tmp")
    fun tmp(requestDto: TmpRequestDto): TmpResponseDto {
        val recommendEmail = requestDto.name + "@gmail.com"
        val responseDto =
            TmpResponseDto(
                code = 200,
                email = recommendEmail,
                message = "hello, ${requestDto.nickname ?: "guest"}",
            )
        return responseDto
    }

    data class TmpRequestDto(
        val userId: Int = 1,
        val name: String = "",
        val nickname: String = "",
        val age: Int = 1,
        val productName: String = "",
        val hobby: MutableList<String> = mutableListOf(),
        val address: TmpAddress = TmpAddress(city = "", street = "", zipcode = 0),
    )

    data class TmpAddress(
        val city: String,
        val street: String,
        val zipcode: Int,
    )

    data class TmpResponseDto(
        val code: Int,
        val email: String,
        val message: String = "",
    )
}

그리고 나서 해당 controller 를 호출할 테스트 코드를 작성해 주었다. 이때 호출당시의 content-type 에 따라 사용하는 메소드가 달라진다.

- content-type : x-www-form-urlencoded

요청을 보내는 쪽에서 body가 `x-www-form-urlencoded` 타입일 경우 formParameters 를 사용한다.

해당 방식은 다음 글에서 다루도록 하겠다.

- content-type : application/json

요청을 보내는 쪽에서 body가 `application/json` 타입일 경우 requestFields 를 사용한다.

package io.myproject.controller

import io.myproject.ApiDocumentUtils.Companion.documentRequest
import io.myproject.ApiDocumentUtils.Companion.documentResponse
import io.myproject.ApiDocumentationTest
import org.junit.jupiter.api.Test
import org.springframework.http.MediaType
import org.springframework.restdocs.mockmvc.MockMvcRestDocumentation.document
import org.springframework.restdocs.mockmvc.RestDocumentationRequestBuilders
import org.springframework.restdocs.payload.PayloadDocumentation.*
import org.springframework.test.web.servlet.result.MockMvcResultMatchers

class HealthcheckControllerTest : ApiDocumentationTest() {
    @Test
    fun tmpTest() {
        // given
        val re =
            HealthcheckController.TmpRequestDto(
                userId = 1,
                name = "tester1",
                nickname = "apple",
                age = 30,
                productName = "잘팔리는필통",
                hobby = mutableListOf("수영", "독서"),
                address =
                    HealthcheckController.TmpAddress(
                        city = "서울시 강남구 역삼동",
                        street = "123-456",
                        zipcode = 123,
                    ),
            )

        // when
        val res =
            this.mockMvc.perform(
                RestDocumentationRequestBuilders
                    .get("$domain/tmp")
                    .contentType(MediaType.APPLICATION_JSON)
                    .content(objectMapper.writeValueAsString(re))
                    .accept(MediaType.APPLICATION_JSON),
            )

        res
            .andExpect(MockMvcResultMatchers.status().isOk)
            .andDo(
                document(
                    "docs_json",
                    documentRequest,
                    documentResponse,
                    requestFields(
                        fieldWithPath("userId").description("유저Id").optional(),
                        fieldWithPath("name").description("이름").optional(),
                        fieldWithPath("nickname").description("닉네임").optional(),
                        fieldWithPath("age").description("나이").optional(),
                        fieldWithPath("productName").description("상품명").optional(),
                        fieldWithPath("hobby").description("취미").optional(),
                        fieldWithPath("address").description("주소").optional(),
                        fieldWithPath("address.city").description("도시").optional(),
                        fieldWithPath("address.street").description("도로명").optional(),
                        fieldWithPath("address.zipcode").description("우편번호").optional(),
                    ),
                    responseFields(
                        fieldWithPath("code").description("code").optional(),
                        fieldWithPath("email").description("이메일").optional(),
                        fieldWithPath("message").description("메시지").optional(),
                    ),
                ),
            )
    }
}

[4] 문서 생성하기

1. 테스트 실행 : adoc 파일 생성

먼저 작성한 테스트코드가 올바르게 실행되는지 확인한다. 테스트가 성공했다면 `build/generated-snippets` 에 테스트코드에서 지정한 documentdml identifier 이름의 폴더가 있고 그 아래에 사진과 같은 adoc 파일이 생성되어 있을 것이다.

- curl-request.adoc : curl 요청 형식으로 작성된 파일

- form-parameters : 본인의 테스트 코드 request body가 form-data 형식이어서 `formParameters`를 사용했기에 생성된 파일

- http-request : http 요청 파일

- http-response : http 응답 파일

- httpie-request : http client 요청 파일

- response-fields : 본인 테스트 코드 `responseFields`에 의해 생성된 파일

2. rest docs 포맷 설정 : index.adoc

테스트코드 실행으로 생성된 여러가지 adoc 파일을 활용해 rest docs를 구성해야 한다.

`src/docs/asciidoc/index.adoc`을 다음과 같이 작성하였다.

# REST API

## REST DOCS EXAMPLE

### [http : 요청]
include::{snippets}/docs_json/http-request.adoc[]

#### [요청 필드]
include::{snippets}/docs_json/request-fields.adoc[]

### [http : 응답]
include::{snippets}/docs_json/http-response.adoc[]

#### [응답 필드]
include::{snippets}/docs_json/response-fields.adoc[]

플러그인을 설치하면 다음와 같이 작성했을때 어떻게 보여지는지 바로 확인할 수 있다.

3. html 문서 확인

이제 프로젝트를 빌드하면 위의 adoc 파일의 내용이 index.adoc의 형식으로 index.html 파일로 변환된다. 또한  build.gradle.kts 에 작성했던 아래 설정으로 인해 `build/docs/asciidoc` 에 있는 파일이 `src/main/resources/static/docs` 로 복제 된다.

tasks {
    ... (생략) ...
    asciidoctor {
    	... (생략) ...
        dependsOn(test)
        doLast {
            copy {
                from("build/docs/asciidoc")
                into("src/main/resources/static/docs")
            }
        }
    }

해당 resources 하위에 존재해야지만 url path로 접근 할 수 있는데 이때 application 파일에 아래의 항목이 true 로 되어있어야 스프링 어플리케이션의 기본 정적 리소스 매핑을 사용할 수 있다.

spring:
    web:
        resources:
            add-mappings: true # 정적 리소스 매핑 활성화

4. /docs/index.html 로 발행된 문서 확인

정적 리소스 매핑으로 도메인 뒤에 `/docs/index.html` 를 입력하면 `main/resources/static/docs/index.html` 에 접근 할 수 있다.

참고로 build 로 html문서 생선 전에 `localhost:8080/docs/index.html` 로 접속하면 그러한 리소스는 없다는 오류가 뜬다.

테스트코드가 성공했다고 하여도 전체적인 build가 성공해야지만 docs가 생성된다는것!!

BUILD SUCCESSFUL in 24s

문서 생성 확인 완료!!

다음 2탄은 content-type 이 x-www-form-urlencoded 일때 문서 생성하는 방법에 대해 다뤄보도록 하겠다.

문제

kopring 프로젝트를 작성하던 중 POST method에서 body가 x-www-form-urlencoded 형태로 들어오는 요청을 처리하는 로직을 작성하고 있었다.

간단한 return을 만들고 통신 확인을 해보니 다음과 같은 오류가 발생하였다.

💣 spring boot 콘솔 에러

2024-07-31T09:44:19.505+09:00  WARN 48404 --- [gbike-tagride-api-server] [nio-8080-exec-1] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content-Type 'application/x-www-form-urlencoded;charset=UTF-8' is not supported]

💣 postman 응답 에러

{
    "timestamp": "2024-07-31T00:44:19.509+00:00",
    "status": 415,
    "error": "Unsupported Media Type",
    "path": "/v2/vehicle/unlock"
}

그리고 내가 작성했던 controller는 아래와 같다.

@PostMapping(UNLOCK)
fun unlock(
    @RequestBody unlockRequestDto: UnlockRequestDto,
): String {
    return "unlock"
}

문제 해결 시도

1. 컨버터 추가

Spring MVC 설정에 FormHttpMessageConverter를 추가하여 application/x-www-form-urlencoded 타입을 처리할 수 있도록 한다.

@Configuration
class WebConfig : WebMvcConfigurer {
    override fun configureMessageConverters(converters: MutableList<HttpMessageConverter<*>>) {
        converters.add(FormHttpMessageConverter())
    }
}

결과 : 안됨!! 동일한 오류 발생

2. PostMapping에 consume 속성을 추가하여 type을 처리할수 있도록 명시해주기

컨트롤러 메서드에 @RequestMapping 또는 @PostMapping 어노테이션에 consumes 속성을 추가하여 application/x-www-form-urlencoded 타입을 지원하도록 설정한다.

@PostMapping(UNLOCK, consumes = ["application/x-www-form-urlencoded"])
fun unlock(
    @RequestBody unlockRequestDto: UnlockRequestDto,
): String {
    return "unlock"
}

결과 : 안됨 !! 동일한 오류 발생

3. @RequestParam을 사용한다.

(안될거 알았다.. 애초에 넘기는게 body 였다.)

@PostMapping(UNLOCK)
fun unlock(
    @RequestParam unlockRequestDto: UnlockRequestDto,
): String {
    return "unlock"
}

결과 : 안됨 !! 새로운 오류 발생

💣 spring boot 콘솔 에러

2024-07-31T09:56:06.532+09:00  WARN 49097 --- [gbike-tagride-api-server] [nio-8080-exec-1] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.bind.MissingServletRequestParameterException: Required request parameter 'unlockRequestDto' for method parameter type UnlockRequestDto is not present]

💣 postman 응답 에러

{
    "timestamp": "2024-07-31T00:56:06.535+00:00",
    "status": 400,
    "error": "Bad Request",
    "path": "/v2/vehicle/unlock"
}

google 선생님의 도움으로 이것저것 검색해 보니 다음과 같은 답을 찾아냈다.

@RequestBody는 body로 받은 JSON을 jackson을 통해 Object로 변경하는데 form은 Content-Type: application/x-www-form-urlencoded 으로 전송하기 때문에 타입이 맞이 않아 에러가 발생한다.

문제 해결

따라서 RequestBody를 제거해 주면 된다!

@PostMapping(UNLOCK)
fun unlock(unlockRequestDto: UnlockRequestDto): String
{
    return "unlock"
}

결과 : 성공!

unlock

라라벨을 공부하면서 참고하는 서적이 있는데 해당 서적에서는 sail 을 통해 프로젝트 실행환경 구축을 권장한다.

라라벨 공식문서에도 sail을 통한 프로젝트 생성 방법이 안내되어 있는데 아래의 명령어로 실행된다. (macOS기준)

curl -s "https://laravel.build/example-app" | bash

하지만 `larave.build` 커맨드는 "항상 최신버전의 laravel" 을 사용하도록 되어있다. 파라미터로 버전값을 명시해 주어도 최신 버전의 라라벨이 설치된다.

특정 버전으로 라라벨을 실행하고 싶다면 sail이 아닌 composer를 통해 프로젝트를 생성해야 한다.

전체적인 흐름은 이전 글에서 설명해 두었다.

1. composer 로 프로젝트 생성하기

composer가 이미 설치되어있다는 가정하에 진행된다. composer로 라라벨 프로젝트를 생성해 준다.

composer create-project --prefer-dist laravel/laravel example-app "8.6.11"

`create-project` : 프로젝트 생성 명령어

`--prefer-dist` :  프로젝트 생성 옵션

2. laravel sail 을 설치하고 실행하기

도커환경에서의 실행을 위해 sail 을 설치해준다.

cd example-app
composer require laravel/sail --dev
php artisan sail:install

3. sail 을 통해 도커 실행하기

설치된 sail을 통해 도커를 실행하여 서버가 구동되는것을 확인한다.

./vendor/bin/sail up

책에서는 버전을 명시한 설치방법이 없어서 곤란했지만 방법을 찾아서 다행이다!

php를 사용한 웹 어플리케이션을 만드는데에는 먼저 환경세팅이 필요하다.

이때 php를 사용할 환경을 구성하는 방법으론 크게 세가지가 있다.

1. xampp를 사용해 apach 웹 서버와 mysql까지 한번에 다운로드 받는 방법

2. brew를 통해 php와 mysql, composer를 다운로드 받는 방법 + php 내장 웹서버 사용

1번을 이용해 간단한 laravel 따라하기 프로젝트를 진행해 봤으므로 이번에는 로컬환경에서 다운로드 하여 환경을 구성해 보고자 한다. 참고로 xampp 방법으로 진행 할 경우 아래 팁 확인!

+) m1칩 기준 xampp 다운로드

xampp를 검색해서 바로 다운로드 하면 설치되지 않는다.. 바로 휴지통으로 이동된다. 그 원인을 알순 없지만 아마도 xampp 에서 기본으로 최신 기기에 맞는 버전만 다운로드 되도록 되어있기 때문이 아닌가 싶다. 그래서 아래 링크로 이동하여 다운로드를 진행해준다.

https://sourceforge.net/projects/xampp/files/XAMPP%20Mac%20OS%20X/7.2.34/

설치를 한 후로는 apach 웹 서버를 실행시킬 수 있고, 해당 서버가 실행중이어야 php 서버를 정상적으로 이용 가능하다.

그 이유는 클라이언트로부터 html이 아닌 php 파일요청이 들어올 경우 apach에서 php 서버로 호출해주기 때문이다.

1. brew 설치

php와 mysql, 그리고 composer는 모두 brew 환경에서 설치해 줄 것이므로 먼저 brew를 설치해 준다.

https://brew.sh/ko/

참고로 램 8gb 기준.. 한시간 정도 걸리고 팬 소음도 매우 컸다 ㅎㅎ..

2. php, mysql, composer 설치

어차피 세개 다 설치해줄꺼기 때문에 한번에 명령어를 날려준다.

brew install php mysql composer

이때 이전 프로젝트 따라하기로 이미 mariadb가 설치되어 있었어서 mysql 설치과정에서 다음과 같은 에러가 발생했다.

당황하지않고.. mariadb를 사용할 일이 더이상 없기 때문에 안내된대로 unlink + 삭제 해주고 mysql을 설치해 준다.

brew unlink mariadb
brew install mysql

3. composer를 활용해 laravel 프로젝트 설치하기

python과 django를 이용해본 경험이 있다면 흐름을 이해하는건 큰 어려움이 없을것이라 생각한다.

php의 의존성 관리도구인 composer를 통해 쉽게 laravel 어플리케이션을 생성할 수 있는데 설치하고자 하는 위치에서 아래의 명령어를 입력해준다.

composer create-product larave/laravel {프로젝트명}

나의경의 개발 home directory의 MyProjects 라는 폴더 안에서 개인용 프로젝트를 모아두고 관리하고 있기 때문에 MyProjects 위치에서 위의 명령어를 실행해 주었다.

수많은.. 패키지들이 자동으로 주입되고 프로젝트가 생성된다.

+) 특정 버전의 laravel 로 프로젝트 생성하기 

만약 생성하고자 하는 프로젝트의 버전을 명시하고 싶다면 위에서 프로젝트 생성 명령어를 다음과 같이 해준다

composer create-project laravel/laravel=8.* {프로젝트명} --prefer-dist

이때 주의할 것은 정확한 laravel 버전을 입력해 주어야 한다는 것이다. 대충 검색해서 8버전때 아무거나 사용했다!

+) 여러개 php 버전 사용하기 feat. brew

laravel은 버전에 따라 지원하는 php 버전이 다르다. 각 상황에 맞게 php 버전도 관리해 주어야 하는데 내가 사용하고자 하는 laravel 버전 8의 경우 php 7.3 ~ 8.1 까지 지원한다고 한다. 현재 내 컴퓨터에는 8.2와 8.3이 설치되어 있으므로 추가로 8.1버전을 설치해 준다

brew install php@8.1

이때 패키지들을 brew 설치하면 좋은점이 나타난다.. 이제 brew list 로 설치된 php 목록을 보면 다음과 같다

php  # 8.3.7
php@8.1
php@8.2

참고로 첫번째꺼는 버전명시 없이 설치했더니 이름에서 버전이 안적혀있다~

php@8.2를 제일 처음에 설치하고 이후 최신버전인 8.3.7을 설치해서 사용중이었으나 8.1버전을 다시 설치하였고, 앞으로 사용할 php의 버전을 8.1버전으로 하기 위해 brew 설정을 바꿔주었다.

brew unlink php
brew link php@8.1

먼저 unlink하면 뭔가를 해제했다고 뜬다.

그러면 환경변수에서도 설정을 변경해 주라는 안내문구가 나오고, 그대로 입력하면 된다.

이후 아까와 같이 현재 설정된 php 버전을 확인하면 변경된 것을 볼 수 있다!

+) artisan ?

docker를 이용한 프로젝트 실습에서 명령어를 날릴때 아래와 같이 입력했었다

vendor/bin/sail artisan {명령어}

라라벨 공식문에서에서는 artisan (아티즌) 이 라라벨에 포함된 커맨드라인 인터페이스(CLI)의 이름 이라고 알려준다!

4.php 내장 웹 서버로 서버 연결하기 : php artisan

프로젝트의 홈 디렉토리에서 아래의 명령어를 통해 서버와 연결해 준다.

php artisan serve

그럼 localhost 환경에서 서버가 실행된다.

해당 주소로 접속하면 빈 페이지가 뜰줄 알았지만 생각외로 멀쩡한 페이지가 노출된다!

이는 laravel 프로젝트를 설치하면서 다양한 view 도 생성되었기 때문이다.

laravel 프로젝트에서 route가 기록되는 routes > web.php 파일을 보면 아래와 같은 코드가 작성되어 있다.

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

하위 경로 없이 호출하게되면 welcome view를 return 한다는 것! welcome view는 resources > views > welcome.blade.php 에 작성되어 있다.

이를 통해 view의 경로가 resources > views 로 자동 매핑되는것을 알아차릴 수 있었다.

5. docker-compose 로 프로젝트 실행하기 : sail

4번에서 처럼 php 명령어로도 서버를 실행할수 있음에도 왜 docker로 해야할까? 그 이유는 php/laravel 프로젝트를 전체적으로 실행시키기 위해선 db연결도 필요하고, 이 전체적인 서버 연결을 보다 편리하게 하기 위해서이다

docker를 통해 php서버와 mysql 서버를 동시에 띄우고, 내리고 하면 편리하겠다! docker-compose를 통해 웹서버와 db서버를 동시에 띄울것이므로 docker-compose를 사용한다고 한다.

1) docker-desktop

먼저 docker-compose를 사용하기 위해서는 docker-desktop 어플리케이션 다운로드가 필요하다. 인터넷에서 검색 후 다운로드 해 주고, 아이콘을 클릭하여 running 모드로 해준다!

이후 laravel 프로젝트 내에서 docker 실행을 진행해 준다.

2) sail 의존성 추가해주기

Laravel의 기본 Docker 개발 환경과 상호 작용하기 위한 간단한 명령줄 인터페이스이다. 이를 프로젝트에서 사용하려면 먼저 composer 로 의존성을 추가해 주어야 한다.

composer require laravel/sail --dev

그러면 몇가지 폴더가 생성되는걸 확인할 수 있다.

이후로 sail 을 설치해 주는데 이때 어떤 db를 사용할 것인지 선택지가 뜬다. mysql을 사용하도록 결정!

영상과 캡쳐본에서도 보다싶이 적용되는데 몇초 걸린다.. 이건아마도 컴퓨터 사양탓인듯 하다 ㅎㅎ

설치가 완료되면 명령어를 통해 실행해보라고 안내가 나오면서, 선택한 db를 실행해보라고도 뜬다!

3) docker로 프로젝트 실행하기

먼저 docker로 프로젝트를 실행해보도록 한다. 그 전에 언제 `./vendor/bin/sail` 을 다 치랴.. 진작에 alias로 해당 단어들을 sail 로 저장해 두었다 ㅎㅎ 그리고 도커 실행!

# 단축키 저장
vi ~/.zshrc
alias sail="./vendor/bin/sail"
# 변경된 환경변수 바로 적용
source ~/.zshrc

# docker 로컬에서 실행
sail up

# docker 백그라운드에서 실행
sail up -d

그러면 80포트로 서버가 실행되었다고 확인된다. 하지만 주의할 것은 아직 db세팅을 안해주었다는것! 실제로 해당 서버페이지를 접속하면 서버 연결을 확인할 수 있다.

오른쪽 아래에 사용중인 php와 laravel 버전을 확인할 수 있다.

+) laravel 11 버전 docker compose 실행시 db 오류

laravel 11버전이었을 때 sail 설치해주고 바로 실행했을때 다음과 같은 에러 페이지가 노출된다.

일단 서버가 실행되는것은 확인했고, 정상적인 실행을 위해 db migration을 적용해 테이블이 생성되도록 해준다.

그럼 laravel 프로젝트 설치 중 기본으로 추가된 패키지들에서 지원하는 세가지 테이블이 생성된다.

그리고 나서 다시 `localhost:80` 으로 접속하면 아래와 같이 정상적인 페이지를 확인할 수 있다. 아래 페이지는 아까 `php artisan serve` 로 실행했을때 확인한 페이지와 동일하다.

즉, `php artisan serve`를 통해 서버를 실행하게 되면 db 연결 없이 프로젝트를 실행하게 되는것이고, sail을 통해 실행하게 되면 db연결이 추가된다는 것을 알 수 있다. laravel 8버전에서는 안이랬는데 버전이 달라지면서 지원하는 것이 달라졌나보다!

이제 여러가지 기능을 추가하면서 view를 만들어 혼자서 하는 웹페이지 개발을 시작해보자!