전체 글 (62) 썸네일형 리스트형 구름톤 풀스택 트레이닝 25주차 회고 회고.. 라기보단 이젠 거의 뭐 일기? 있었던 일 메모? 가 되어버린 것 같다. 주차로 표기하기보단 있었던 일들로 나열해본다.. 프론트냐 백이냐 정하여라네 정했습니다.저는 프론트입니다. 그동안 주로 프론트 쪽 작업을 해왔고, 무엇보다 눈에 보이는 결과물을 만드는 게 나와 잘 맞다고 느꼈다.현재 커리큘럼 상 백엔드 강의를 진행해야하지만나는 그 시간에 개인 공부를 하며 프론트에 집중하기로 했다. 쇼핑몰 프로젝트지난 12월에 원티드에서 들은 프론트엔드 강의에서 강사님의 공통 UI 컴포넌트 설계를 보고 깊은 감명을 받았다나도 이걸 쇼핑몰 프로젝트에 적용해봐야겠다고 결심했다. iOS개발할 때도 비슷한 경험이 있었기에 이번에도 금방 할 수 있을거라 생각했지만..일정 계산을 완전히 잘못했다.결국 예상보다 시간이 훨씬.. [vscode] ESLint, Prettier 적용하기 예전 팀 프로젝트인 Web IDE 만들기 프로젝트에서 prettier를 개인적으로 적용한 상태라저장 한 번에 전체 파일 포맷이 바뀌는 상황이 많았고,내가 작업하지 않는 파일도 git diff에 떠서 많은 스트레스를 받았다. 그래서 이번에는 Prettier + Lint를 명확하게 설정하여 vscode에서도 자동 적용 되도록 환경을 만들어해당 이슈가 재발하지 않도록 해야겠다는 결심을 했다. 다른 팀원분께는 위 작업을 위해 내가 이번에 구조 작업을 맡겠다고 제안드렸고 흔쾌히 ok하심 Prettier 설정하기(.prettierrc){ "singleQuote": false, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", .. Next.js + SockJS + STOMP로 실시간 채팅 구현하기 구름에서 진행한 Web IDE 프로젝트에서 실시간 채팅 구현을 맡게 되었고,해당 기능을 SockJS + STOMP 조합으로 구현했다.나름 고생했던지라.. 작업 내용과 트러블 슈팅을 기록으로 남기려한다.실시간 채팅 구현하기사용 기술 스택- Next.js- TypeScript- Zustand(v 5.0.3) - 상태 관리- sockjs-client(v 1.6.1) - WebSocket 연결- @stomp/stompjs(v 7.1.1) - 메시징 프로토콜 타입 스크립트에서 STOMP 사용을 위한 declarestompjs와 sockjs-client는 브라우저 전용으로 작성되어 있어, TypeScript 환경에선 타입 에러가 발생한다.`declare module "sockjs-client";`이렇게 declar.. 구름톤 풀스택 트레이닝 12회차 11주차 회고 24년에 마지막으로 작성하고 영 작성을 잊어버린..방학 + 설 다녀왔더니 두 달이 지나버렸네 ㅎㅎ.. 7주차에는 아침 9시부터 실시간 강의를 진행했다.첫날에는 아침 10시부터 시작한다고해서 늑장부렸는데 출석은 9시까지였다? 9시 11분에 출석해서 하루 지각 되어버림..실시간 강의로는 협업과 API 문서화, 깃에 대한 것들을 들었다.오후 시간엔 타입스크립트 강의를 들었다(커리큘럼에는 없음) 8주-9주차에는 팀원들과 TMDB를 활용한 넷플릭스 클론코딩을 진행했다.파트는 자발적으로 가져가기였는데, 나는 상세 정보 모달을 가져왔다.리액트 강의 들으며 넷플릭스 비스무리하게 클론하며 팝업 띄우는 부분을 잘 이해하지 못했는데 이번 프로젝트를 통해 여러모로 공부할 수 있었다. 일정을 짜며 간과했던게 저번 프로젝트까진 .. [Spring Boot] @RestController와 @Controller의 차이점 스프링 입문 실습 후 과제를 진행하기 위해 문항을 봤다. "기본 웹 페이지를 설정하고 @RestController를 사용하여 간단한 REST API 엔드포인트를 구현합니다.예를 들어, “Hello, World” 메시지를 반환하는 API를 만듭니다.엔드포인트 실행 결과 스크린샷 및 코드를 결과물로 제출합니다." 수업들었던 것 참고하려는데 수업에서는 @Controller를 사용했는데 과제는 @RestController?무슨 차이지 하면서 찾아보게 되었다. @RestController란?@RestController는 Spring MVC에서 RESTful 웹 서비스를 개발하기 위한 어노테이션이다.Spring은 반환 값을 JSON 또는 XML로 변환해 클라이언트에 전달하고, @Controller와 @Respon.. [React] Router를 활용하여 모달띄우기 들어가기 전에React 수업을 들은 후, 팀 과제로 TMDB를 활용한 넷플릭스 클론 프로젝트를 진행하게 되었다.프로젝트에서 각자 맡을 역할을 나누는 과정에서, 나는 자발적으로 모달 화면 구현을 담당했다. 사실 React 수업에서도 넷플릭스와 유사한 형식을 따라 개발했지만, 당시에는 개념적으로 헷갈리는 부분이 많았다.그래서 이번 프로젝트를 통해 부족했던 부분을 더 깊이 이해하고자 했다. Modal 화면을 구현하면서 수업에서 배웠던 방식(setModalOpen이라는 플래그를 사용해 모달을 띄우는 방식)을 떠올렸다.그러나 넷플릭스의 실제 페이지를 살펴보니, 모달이 뜰 때 URL이 변경되는 것을 발견했다.이와 같은 동작을 구현해보고 싶어 검색을 시작했고, React Router를 사용하면 모달을 URL 변경과 .. [JavaScript] ES모듈로 동적 로드와 버튼 액션 구현하기 인스타그램 클론 팀 프로젝트를 진행하던 중동적으로 로드한 sidebar.js 내부함수를 호출했는데 무반응. 디버깅해보니 discovery(호출하는 곳)에는 버튼에 해당하는 html을 못찾아서 발생된 문제. 처음에 전역으로 선언했지만 메모리를 낭비할 수도 있겠단 생각에 다른 방식을 찾아봄(작은 프로젝트지만 확장성 고려) 검색하다 ES모듈이라는 것을 찾아서 적용하게 됨.함수 내보내기// sidebar.jsexport function configButtonAction() { const menuButton = document.querySelector(".menuButton"); menuButton.addEventListener("click", (e) => { // button Action }}함수 가져오기/.. 구름톤 풀스택 트레이닝 12회차 5주차 회고 시작드디어 24년의 마지막 수업 끝!다음 주부터 2주간 방학!팀별로 회고를 진행했는데우리 팀이 관리자 평가, 교육생 평가 종합 1위로 우수팀에 선정되었다🎊🎊🎊사실 다른 팀들은 진행하면서 개인 프로젝트도 진행했던데,우리 팀은 딱 커리큘럼에만 집중해서 솔직히 이게 맞나? 했는데퍼실님들이 칭찬과 응원을 해주셔서 머쓱 + 뿌듯외식 상품권 2만원 준다고 해서 기대 중 ㅎㅎ 과제인스타그램 UI 클론을 마무리했다.exp미션에 과제가 잘못 전달되어 일정에 화면을 추가하느라 마무리가 좀 빠듯했지만다들 일단 완성에 박수를 치자며 하하..다크모드 설정이 안된다고 하셔서 왤까 했는데 알고보니 초반에 내가 다크모드 세팅한답시고 해둔게테마를 커스텀하는게 아닌 os의 테마를 따라가는 거였다..! 검색 더 해볼걸!!그거라도 설.. 이전 1 2 3 4 ··· 8 다음
