SR 피드백 팔로우업

SR이 끝났다싶었는데 담당 크루분의 피드백이 있었다.
생각보다 고칠 부분이 많았다.
첫번째로 받은 지적은 역시나 API였다.
API가 restful하지 않다는 지적이었다.
생각 해보니 우리팀의 API는 get, post 요청뿐이었다.
이는 적절히 retful하게 수정하였으나 좀더 지켜봐야 될듯하다.

버전 맞추기

코딩에 들어가기 앞서 팀원과의 개발 환경 버전을 맞췄다.
이렇게 맞춰놔야 원인모를 에러가 발생하지 않을것이라고 생각했다.
이 과정에서 벌써 삽질을 시작했다..
nvm을 이용한 node 버전 설치가 되질 않았다.
nvm command not found에러가 발생하여 이 부분에서 지체되었다.
정확한 이유는 모르겠으나 이는 환경적인 문제였던거 같다.
(윤근님께 물어보기)

nvm alias default v14.17.5
bash권한
이후에도 npm버전 통일을 진행했다.

드디어 코딩 시작 (Front)

우선은 나는 login page를 맡았다.
섹션3에서부터 ha3까지 login페이지 구현은 주구장창 해왔기에 수월했다.
login page를 구현하면서 두가지 문제점이 있었다.

image태그의 src가 작동하질않음

이유는 모르겠으나 이미지파일의 경로를 img태그의 src 값으로 경로를 입력하면 엑스박스가 떳다.
구글링을 해보니 src에 직접 경로를 입력하면 제대로 불러와지지 않는다고 한다.
정보를 얻은대로 이미지를 변수에 import하여 진행해봤으나 여전히 불러와지지 않았다.

import logo from "../../image/LOGO.png"

결론적으로는 이미지 파일이 리액트의 src폴더 내부에 있어야 import가 잘 이루어졌다.
이게 명확한 원인인지 내가 실수한것인지는 모르겠다. 이는 좀더 알아볼 예정이다.

버튼을 누를때마다 새로고침이 됨

이 부분은 html의 버튼 자체의 속성이었다.
a태그나 submit 태그는 고유의 동작으로 페이지를 이동시키거나,
form 안에 input등을 전송하는 동작이 있는데
e.preventDefault();는 이를 무효화 시키는 작업이다.
버튼을 눌렀을때 작동하는 핸들러 함수에 맨 첫줄에 삽입하여 해결했다.

form태그 legend태그

form태그는 폼(form)의 범위를 표시한다.
폼은 사용자 입력을 위한 다양한 형식의 컨트롤(W3C는 입력필드, 버튼 등 폼을 구성하는 입력 요소를 컨트롤이라고 부름)로 구성되는 영역이며, 이 영역의 시작과 종료 지점은 form 요소에 의해 정의된다.
action: 실행 애플리케이션을 지정한다. (서버 또는 프로그램)
accept-charset: 승인된 문자 인코딩값을 지정한다. ex)utf-8
enctype: 세가지 값이 있다.

• enctype="application/x-www-form-urlencoded" : 서버에 보내기전에 모든 문자를 인코딩하는 방식이며 폼에 텍스트 데이터를 포함했을 때 지정한다(기본값).
• enctype="multipart/form-data" : 파일 업로드 컨트롤처럼 문자가 아닌 파일을 전송할 때 사용된다.
• enctype="text/plain" : 일반 텍스트로 인코딩된다.

legend 태그는 fieldset 태그의 제목을 표시한다.
filedset을 이용해 여러개의 컨트롤들을 묶었으면 이 묶음이 어떤 성격 또는 용도인지 알려줄 필요가 있으며, 이때 legend 태그를 사용한다.

참고사이트

https://velog.io/@choiiis/HTMLCSS-form-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC
https://webdir.tistory.com/318
https://studyingych.tistory.com/27
https://devlog.jwgo.kr/2018/11/29/img-src-not-loaded-in-react/
https://penguingoon.tistory.com/263