본문 바로가기

☁️ 구름 X kakao DeepDive45

실시간 채팅구현(2) - 1mm도 어긋나는걸 싫어하는 사람의 채팅창 UI 제작하기 계획크게 UI 화면 잡아서 만들고 -> 쪼개서 재 사용 가능하게 만들기 우선 채팅창을 어떻게 구현할것이냐? 에 대해 생각을 해보았다.우선 보이는 화면부터 만들어야할 것이라 생각했다. 그래서 계획을 굉장히 세분화해서 이슈를 작성했다. 우선 필요한것이 채팅창 컴포넌트 (채팅 로그창과 입력창)날짜를 표시할 수있는 날짜 분리 라인과 날짜 텍스트나, 상대, 그리고 챗봇의 말풍선이었다.이걸 바탕으로 이슈를 나눠서 작성하기 시작했다. 이슈를 작성할때는 나 스스로 스프린트 기간동안의 구간을 잡고 분리해서 작성하였다. STOMP, SockJs 의존성 추가: 채팅 위한 도구전체 채팅 페이지 구조 잡기 : 메세지 영역 / 입력 영역 구분, 반응형그라데이션 말풍선 구현하기 : 배경 투명 / 그라데이션메세지 영역 : 날짜 /.. 2025. 4. 19.
실시간 채팅구현(1) - 서버에 따른 통신 도구 설정 이번 WEB IDE 프로젝트에서 실시간 채팅 구현! 을 맡게되었다.예전부터 구현해보고싶었던 기능인데 좋은 기회🎶 즐겁다. 우선, 어떻게 구현 해야할지 감이 안와서 검색을 해보았다. 보통 사람들이 사용하는것을 보면 socket.io, stomp, websoket 등등.. 이 있던데대체 뭐가 다른건지, 프론트는 뭘 해야하는건지.. 뭘 사용해야 적합한지 알아보다 마침내 결론내렸다. 백엔드를 무엇으로 구현하였냐!에 따라 달라지는것같다.우선, 채팅은 소켓을 기반으로 실시간 통신을 한다.이걸 어떤 방식으로 구현을 할지는 서버가 Node.js냐,Spring이냐에 따라 적합한 도구가 달라진다. 실시간 통신은 WebSoket이 담당하고, STOMP, Socket.io, Sockjs가 도와주는 방식이다. 여기서 Soke.. 2025. 4. 12.
Vite + React + TypeScript, ESLint + Prettier 프로젝트 세팅 이번에는 내가 프론트 프로젝트 베이스 세팅을 하게 되었다.이번 프로젝트는 Vite, React, TypeScript, ESLint, Prettier를 사용할 예정이다.create-react-app이 공식적으로 지원이 끝난것도 있고, 조금 더 빠른 개발을 위해 Vite를 채택했다.그리고 코드의 일관성 관리를 위해 ESLint, Prettier도 도입했다.리액트 테스트도 사용할까 해보았는데, 실질적으로 개발 기간이 2주이고,빨리 개발해야하는 프로젝트 + 아직 MVP 단계인 상태에서 수정 가능성이 많을 경우에는테스트를 도입했을 경우 개발 속도가 느려질 수 도있고, 굉장히 번거로워 질 것이라 하여 테스트는 빼기로 하였다.이건 최종 프로젝트에서 사용하기로! 아무튼, 처음 세팅을 해본거라 배운 점도 많기도 해서.... 2025. 4. 11.
[프로그래모] 2025년 3월 31일 회의와 커피를 쏴버린 나 3월 31일 팀별 2차 회고와 발표가 있고 나서 팀 재정비를 했다.4월에 있을 프로젝트를 위해서는 약간의 "강제성"이 필요하다 생각했고팀 규칙을 새로 새웠다. 그리고 노션 페이지도 새로 정비했다.프로필이랑 헤더 5분만에 급하게 후다닥 만들어봤는데 꽤 그럴듯하다.위에서 보았듯이, 출석체크 제도를 새로 도입했다. 이렇게 디스코드 출석체크 방에 책상에 앉은 사진과 함께 출석 글을 올리면 된다. 9시까지 출석이며, 9시 10분까지는 출석 인정이 된다. 그러나..이 제도를 시작하기로 한 4월 1일 늦잠을 자버린 나. 그렇게 제가 첫 커피를 사게 되었습니다.. 어느새 디코 스티커까지 만든 팀원들..ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그렇습니다.. 그렇게 제가 커피를 쏘게 되었습니다..다음에는 지각하지 않을거에요 2025. 4. 1.
[프로그래모] 퍼실리테이터님 피드백, 조언 정리 (프론트) 다음 프로젝트는 Vite 추천드립니다 https://ko.vite.dev/guide/ Vite, 프런트엔드 개발의 새로운 기준시작하기js보다 jsx확장자로 하는게 권장됨 ts는 tsx디버깅용코드 올리지마세용 (consol.log)    uselocalstorageaxios 인스턴스 관리https://axios-http.com/kr/docs/config_defaults렌더링하는거랑 안하는거 분리하세염    엔드포인트들도 js 파일에 몰아넣지말고 따로 관리. 2025. 3. 8.
[Java] 접근제어자 접근 제어자(access modifier)변수나 메서드의 사용 권한을 설정할 때 사용예시와 함께 알아보기패키지 ex01.SmartPhone, Main 이렇게 SmartPhone이라는 클래스를 만들고,  메인에서 사용을 하려면 cpu는 접근이 불가능하다는 것을 알 수 있다. 이는 cpu에 private가 붙어서 그런것이다.그 외에 public이나 아무것도 붙어있지 않은 것은 사용이 가능하다.그렇다면 다른 패키지에 Main을 만들어보면 어떨까? 아래는 패키지 ex02.Main에서 동일한 코드를 작성한 모습이다. public이 붙어있는 sd카드를 제외하고 powerButton은 사용이 불가능한 모습을 볼 수 있다.public이 안붙어있으므로 사용이 불가능하다.접근 제어자는 private  순으로 접근 허용이 .. 2025. 1. 28.

티스토리툴바