프론트엔드로 참여
예전에 가볍게 프론트로 혼자 공부하고 만든 경험을 살려 이번 ToDo 클론코딩 프로젝트에서 프론트엔드로 참여하게 되었다.
개발 환경 💻
Front-End
코드 편집기: Visual Studio Code
협업 도구: Git hub
Back-End
코드 편집기: Intellij
협업 도구: Git hub
모임 후기
모임을 가지기 전에 프론트로 제작하면서 어려움을 겪었던 점, 그걸 해결한 방법들을 업로드하면서 진행할려했지만, 아직 미숙하다보니 이것 저것 검색해보며 짜집기 식으로 코드를 짰고, 시간이 촉박했어서 올리지 못했다는 것이 아쉬웠다 😞 😞 .
이번 모임으로 로그인창을 각각 제작해온 코드인 프론트와 백엔드 합치는 일을 했다. 근데 이 일이 내 예상보다 훨씬 복잡했다... 일단 가볍게 토이 프로젝트로 진행하기 때문에 서버나 클라우드를 구입하지 않고 로컬호스트로 구현했기 때문에 파일 경로를 일일이 바꿔줘야하는 점, 백엔드는 intellij로 개발하고 나는 vscode로 개발했기 때문에 깃으로 코드를 받는다고 해도 호환이 되질 않았다는 점을 예상하지 못했다.
🚩 해결 방법
여러 글을 보고 생각한 결과, 웹 프로젝트를 진행할 때는 백엔드에서 API를 개발하여 프론트가 원하는 데이터를 서버로부터 쉽게 받는 방법이 서로 협업할 때 필요한 것 같았다.
앞으로의 계획
프론트는 우선 로그인했을 때 띄울 창 구현을 한다. 최대한 프론트에서 처리할 수 있는 데이터는 JS를 이용해서 깔끔하게 처리하고 최소한의 데이터만 서버가 관리할 수 있도록 생각해보는 것이 중요하다 생각한다.
서버로 데이터를 보내는 방법과 데이터를 서버로부터 받아서 프론트에 보내는 방법은 백엔드에서 공부해오기로했다. API를 마스터해서 구현한다면 좋겠지만, 백엔드를 이제 막 시작한 점을 고려했을 때 다른 좀 더 쉬운 해결방법이 있다면 대체할 생각이다.
ToDo 로그인창 프론트엔드 Git 주소 🐳
https://github.com/Anak-2/mogakso.git
메인페이지를 러프하게 끝내놓고 시간이 된다면, 로그인창을 구현하면서 겪었던 문제들과 해결방법을 올릴 것이다 (코드에서 생기는 whitespace 문제, 애니메이션 효과를 줄 때 예상과 다른 움직임, display: flex 를 이용해야하는 이유 등...)
로그인창 구현 모습
