프론트엔드
-
Mocking 진행중일기/Tech 2022. 12. 20. 01:52
오늘은 request list 부분을 거의 마무리하고 request detail 부분 작성으로 넘어갔다. 프론트엔드를 하다보니 백엔드에서 올바른 API가 넘어오지 않는 상황을 겪는 경험을 하였고, 그동안 내가 백엔드에서 불량 API 제공을 많이 해왔던 것 같아 미안했다 :( 풀스택을 하니까 공감능력이 상승하네.. 좌우지간 detail 부분은 아직 백단에서 API 개발을 제대로 시작하기 전이라 mocking을 처음 시도해본다. mocking은 서버가 아직 구축되어있지 않을 때, 임시 데이터를 통한 서버처럼 작동하는 것을 만들어 프론트 개발을 원활히 하도록 하는 것이다. 도구는 Postman의 Mock Servers를 이용할 예정. https://way-be-developer.tistory.com/239 이..
-
Pagination & SearchBar UI 작업중일기/Tech 2022. 12. 12. 17:09
요즘은 ReactJS를 바탕으로 한 관리자 패널의 프론트엔드 부분을 담당하고 있다. 새 기능을 구현하기 위해 기존의 메뉴에 새로운 탭을 .svg 아이콘과 함께 추가했다. 이 기능은 곧 유저가 보낸 특정 요청을 관리하는 것이다. 백엔드로부터 API를 받아오기 위한 통로를 구성, 이를 통해 받아온 요청의 리스트, 특정 요청에 대한 처리를 위한 버튼과 체크박스, 이 리스트에 대한 Pagination 구현을 완료했다. 여기에 더해 특정 요청을 찾기 위한 SearchBar는 UI 부분을 모두 구현했지만 기능은 아직 진행중이다. 이 기회를 통해 내가 그동안 개발해온 백엔드 API가 프론트에서 어떻게 사용되어지는지 본격적으로 알게 되었고, 역시 백엔드 하나만 알 때보다 시야가 넓어지는 느낌이다.. 프론트부터 시작했으..
-
바닐라 자바스크립트에서의 CORS 이슈개발/프론트엔드 2022. 12. 11. 22:57
바닐라 자바스크립트 환경에서 공공데이터포털로부터 API를 받아와서 활용하는 프로그램을 작성하고 있다. CORS 규칙을 어겼다고 나와 이를 해결하고자 구글링하던 중.. 바닐라 자바스크립트 관련 문서화가 너무나 잘 되어있는 곳이 있길래 공유한다. https://ko.javascript.info/fetch-crossorigin CORS ko.javascript.info CORS뿐만 아니라 모든 내용이 굉장히 디테일하게 설명되어 있다. 대충 요약하여 설명하자면.. 먼저 CORS, Cross-Origin Resource Sharing 은 인터넷 보안을 위한 규칙 중 하나이다. 원칙적으로 서로 다른 도메인, 서브도메인, 프로토콜, 포트끼리는 리소스를 공유할 수 없다는 규칙이다. 필요에 의한 예외를 두었을 때만 이를..
-
프론트엔드 시작개발/프론트엔드 2022. 12. 4. 19:01
CTO께서 이제 백엔드는 어느정도 알았으니 (물론 잘 안다고 하기엔 너무 까마득하지만) 프론트엔드도 경험해보는게 좋겠다 해서 얼마전부터 프론트엔드 파트 또한 프로젝트를 맡기 시작했다. 아직 거의 아무것도 모른다고 봐도 무방한 정도 ㅠㅠ 처음에는 무작정 프론트쪽 회사 코드부터 탐구하였으나 배경지식이 없으니 이해가 안되는 부분이 너무 많았다. 때문에 일단 기본기를 다지기 위해 지난 며칠동안 Frontend crash courses 영상 정주행하는중.. 해당 영상들은 다음과 같다. - HTML Crash Course https://www.youtube.com/watch?v=UB1O30fR-EE - CSS Crash Course https://www.youtube.com/watch?v=yfoY53QXEnI - ..