기존에는 공통 피드백과 함께 개인별로 피드백을 전달해드릴까 했는데, 각자 분량의 차이가 너무 크기도 하고 피드백 내용을 다같이 공유하면 좋을 듯하여 내용이 조금 길어질지라도 한번에 전달해드리려 해요!
미션 공통
.gitignore
깃허브를 확인해보면 node_modules 폴더가 그대로 올라가있거나, .gitignore 파일이 올라와있지 않은 경우가 있어요. .gitignore는 깃허브에 올리지 않을 파일들을 미리 적어놓는 문서로, node_modules처럼 무겁고 다시 설치 가능한 파일들을 올리지 않기 위해 존재해요.
node_modules가 올라가지 않는 대신 깃허브에서 레포지토리를 끌고 와서 처음 실행할 때마다 아래 명령어를 입력하여 package.json에 있는 라이브러리들을 설치하는 과정이 필요해요.
pnpm i // 또는 pnpm install
Markdown
복사
ChatGPT 이용
요즘 시대에 GPT를 이용하는 건 당연한 일이라고 생각이 들면서도, 다들 어느정도 두려움은 있으실거라 생각해요. GPT로만 공부하다가 실력이 늘지 않으면 어떡하지라는 생각과 함께 AI를 활용하는 능력도 동시에 키워야한다는 점에서, GPT 사용에 대한 간단한 가이드라인을 드리려 해요.
(1) GPT를 이용하여 코드 작성을 맡기지 않는다.
AI가 짜주는 코드를 이해하는 과정과, 본인이 직접 작성하는 과정은 매우 다르다고 생각해요. 어려운 코드라면 모르겠지만 현재 수준에서는 GPT 없이도 충분히 작성 가능하기에 [코드 작성]의 용도로는 사용하지 않으면 좋을거 같아요.
(2) 새로운 지식을 이용해야 하는 경우에는 제한적으로 이용한다.
프론트엔드는 특히 새로운 라이브러리들을 마주할 일들이 많아요. 그리고 그런 문서들의 공식 문서는 영어로 되어 있거나, 방대한 분량을 가지고 있는 경우가 많아요. 하나하나 다 살펴보면 좋겠지만 현실적으로 시간이 부족하기도 하고, 프로젝트 하나만을 위해서 공부하기에는 시간이 아까울 수도 있어요.
처음보는 라이브러리가 있을 경우, 그 라이브러리에 대한 개념을 정리하고 활용법만 알아보는 정도로 이용하여 코드는 본인이 직접 짜는 것을 권장드려요.
(3) 에러가 발생한 경우에는 GPT를 적극적으로 활용한다.
아주 단순한 에러라면 에러 메시지만 보고도 바로 해결이 가능하겠지만, 가끔은 원인 모를 에러들이 등장하기도 해요. 이럴 때 주변에 물어봐서 해결하거나 구글링으로 해결할 수도 있지만, 에러는 개인화된 부분이 많아 도움을 주기 어려울 수도 있어요.
직접 찾아보면서 GPT를 이용하며 해결해본다면 에러를 빠르게 해결할 수도 있고, 에러를 해결하며 공부되는 부분이 있을 거예요. 만약 GPT로도 해결이 안된다면 팀원이나 디스코드를 통해서 질문하여 해결해봐도 괜찮아요.
(4) GPT를 사용했다는 티가 나지 않도록 주의한다.
가끔 코드에서 GPT를 사용했다는 티가 나는 경우가 있어요. 특히 최상단에 주석으로 파일명이 표기된 경우는 자주 보이는데, 퀄리티 높은 코드를 작성하기 위해서는 코드들을 점검하며 GPT 사용 흔적을 없애는 것도 중요해요.
폰트 관련
실제로 디자인한 결과물을 코드화하다보면, 폰트의 차이로 인해 달라지는 부분이 생길수도 있어요. 아직은 폰트를 적용해볼 일이 없었지만, 폰트를 어떻게 적용할 수 있는지에 대한 공부는 선행되면 좋을거 같아요.
디자인하면서 주로 쓰는 한글 폰트는 “프리텐다드”예요. 요새는 “SUIT”라는 폰트도 자주 보여요. 이 두 폰트는 적용해보는 연습을 해보면 좋을 거 같아요.
메타데이터 관련
index.html을 보면 여러 내용들이 적혀있긴 하지만, 각각이 어떤 걸 뜻하는지 알기는 어려워요. 실제로 프로젝트를 실행해서 웹에서 볼 때 상단에 적혀있는 정보에 대한 조작이 가능해요.
1주차 미션 관련
img 태그, form 태그
img 태그를 활용할 때 alt 속성을 작성하는 게 유리해요.
비록 지금 단계에서 필수적인 내용은 아니지만, img 태그에 있는 alt 속성은 최대한 작성하는 습관을 들여놓으면 좋아요. SEO와 관련하여 간단하게 알아보면, 나중에 실사용자가 있을 서비스에서의 필요성을 알 수 있어요. 다음 링크를 통해 alt에 대해 알아봐요.
form 태그를 이용하는 미션에서, 모두 각자의 방법으로 input과 button을 다루는 양상을 볼 수 있었어요. 이중에서 가장 괜찮았던 방법과, 조금더 이용해봤으면 좋을 방법에 대해 소개하려 해요.
•
별도의 함수를 분리하여, button의 onClick 속성에 삽입함.
•
addEventListener를 통해 노드의 submit 이벤트를 확인하여 함수를 실행함.
대부분 두 방식 중 하나로 이용하셨어요. 개인적으로 저는 2번째 방법을 추천드리고, 아래와 같이 작성하는게 가장 깔끔한 코드가 아닐까 생각했습니다. 가장 결정적으로 생각한 부분은 “코드의 재사용성”이에요.
const handleSubmit = (event) => {
event.preventDefault();
const value = document.getElementById("검색값").value;
console.log(value);
}
const form = document.getElementById("아이디")
form.addEventListener("submit", handleSubmit)
Markdown
복사
추가적으로, 제출 이후에 input 태그에 입력값이 그대로 남아있는 경우가 많았어요. form.reset()이라는 기능을 이용해봐도 좋을 거 같지만, React에서는 useState를 이용하여 입력값을 관리하는 경우가 많기 때문에 setState(””) 등으로 설정할 수도 있어요.
이후 미션 관련
axios 라이브러리
axios를 이용할 때 아래처럼 바로 호출할 수 있지만, 따로 axios 인스턴스를 하나 만들어서 진행할 수도 있어요. 이렇게 할 경우 baseUrl을 설정하여 url을 반복해서 적는 작업을 줄일 수도 있고, 헤더에 함께 보낼 정보도 미리 설정할 수 있어요.
axios.get("/")
axios.create(...)
Markdown
복사
axios의 create 메소드를 이용하여 인스턴스를 생성하면, 반복적인 작업을 줄일 수 있어요. 자세한 내용은 아래 링크를 통해 참고해주세요!
특히 API 호출하는 코드는 대부분의 경우 큰 차이가 없어서, API를 어떻게 구성해야 할지에 대한 고민에 시간을 많이 투자하는게 좋을 거 같아요.
axios를 통해 응답받은 데이터를 처리할 때는 then을 통해 데이터를 이용하고, catch를 통해 에러 처리가 가능해요. 에러 처리에 대한 케이스도 고려해서 제대로된 응답을 받지 못했을 때에 대한 고려가 들어가면 좋을거 같아요.
tailwindcss 라이브러리
tailwind를 이용할 때, 반복되는 표현으로 인해 길어지는 경우가 많아요. tailwind의 핵심 문법을 미리 알아두면 조금더 유용하게 이용할 수 있어요.