v10
★ PART · REST

자잘한 비동기 + 첨부파일

REST API와 마무리 — 읽기 자료

📍 지금 어디를 만지고 있나요?
브라우저
REST API와 마무리
DB

핵심 용어

MultipartFileSpring 의 업로드 파일 인터페이스.
FormData브라우저의 multipart 폼 데이터 객체.
ALTER TABLE기존 테이블에 컬럼을 추가/변경. DEFAULT 와 NULL 옵션이 핵심.

1. 문제

전 차시까지의 답답함

인기글을 보여주려면 조회수가 필요하고, 글에 사진을 첨부하려면 컬럼이 필요. 그런데 myboard 에는 둘 다 없음.

2. 새 도구

ALTER ADD COLUMN — 두 번

기존 myboard 테이블에 view_count(DEFAULT 0) 와 photo(NULL) 두 컬럼을 더한다. 동적 SQL 첫 등장.

3. 코드

-- ① 조회수 컬럼 (DEFAULT 0 — 기존 글도 0 부터)
ALTER TABLE myboard ADD COLUMN view_count INT DEFAULT 0;

-- ② 사진 컬럼 (NULL 허용 — 기존 글은 NULL)
ALTER TABLE myboard ADD COLUMN photo VARCHAR(200) NULL;

// 도메인 (com.smhrd.domain.Board) — 두 줄 추가
private int viewCount;
private String photo;

<!-- BoardMapper.xml — 동적 SQL -->
<update id="update" parameterType="com.smhrd.domain.Board">
    UPDATE myboard
    SET title = #{title}, content = #{content}
    <if test="photo != null">, photo = #{photo}</if>
    WHERE num = #{num}
</update>

<update id="incrementViewCount" parameterType="int">
    UPDATE myboard SET view_count = view_count + 1 WHERE num = #{num}
</update>

// Controller — 조회수 +1 (com.smhrd.controller)
@PostMapping("/api/boards/{num}/view")
public Map<String, Integer> incrementView(@PathVariable int num) {
    int newCount = service.incrementViewCount(num);
    return Map.of("viewCount", newCount);
}

// Controller — 첨부파일
@PostMapping("/api/boards/upload")
public Map<String, String> upload(@RequestParam("file") MultipartFile file)
        throws IOException {
    String original = file.getOriginalFilename();
    String saved = UUID.randomUUID() + "_" + original;
    file.transferTo(new File("/uploads/" + saved));
    return Map.of("filename", saved);
}

// 클라이언트 — FormData
const formData = new FormData();
formData.append('file', fileInput.files[0]);
fetch('/api/boards/upload', {method: 'POST', body: formData});

<!-- root-context.xml -->
<bean id="multipartResolver"
      class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="10485760"/>
</bean>

4. 정리

5. Before / After

전 차시 끝

myboard 4 컬럼 + created_at. 조회수·사진 없음.

이번 차시 끝

myboard 에 view_count·photo 두 컬럼이 ALTER 로 추가. v10.