Definition of Seon

실시간 채팅 시스템에는 클라이언트와 서버 간의 빠르고 안정적인 메시지 전송이 필요합니다.이번 프로젝트에서는 WebSocket, Redis, STOMP 기술을 사용해 채팅 기능을 구현하였습니다. 서버 측 구현1. WebSocket 설정WebSocket은 클라이언트와 서버 간의 양방향 실시간 통신을 제공하는 프로토콜로,실시간 채팅 기능 구현에서 매우 중요한 역할을 합니다.Spring에서 WebSocket을 활성화하려면 @EnableWebSocketMessageBroker 어노테이션을 사용하여STOMP 프로토콜을 통해 메시지를 주고받을 수 있도록 설정합니다. @Configuration@EnableWebSocketMessageBroker@RequiredArgsConstructorpublic class WebSo..

작년에 토스 면접을 준비하며 Redis를 처음 접했습니다.프로젝트에 적용해보고 싶었지만 소규모인데다 시간이 부족해 적용하지 못했던 Redis를 이번 프로젝트에 적용해보게 되었습니다.어떤 기술을 프로젝트에 사용할 때는 그 기술을 사용하는 당위성이 필요하다고 생각합니다.왜 많은 기술 중 Redis를 고르게 되었는지, 왜 프로젝트에 이 기술을 적용해야 하는지 정리해보려 합니다.01 Redis란?Redis(Remote Dictionary Server)는 고성능 키-값 저장소로, 오픈 소스 기반의 NoSQL 데이터베이스입니다.데이터의 빠른 처리를 위해 메모리에 데이터를 저장하고, 필요에 따라 디스크에 데이터를 지속적으로 저장하여 데이터 손실을 방지합니다.다양한 데이터 타입을 지원하며, 캐싱, 세션 관리, 메시지 ..

오늘 도전한 과제는 FAQ 아코디언 페이지다.질문 옆에 있는 + 버튼을 누르면 자세한 내용이 나온다. 시맨틱한 Html를 작성하기 위해 아이콘 부분은 img가 아닌 div로 태그를 정했다.백그라운드 이미지로만 해당 아이콘들을 넣었다. 자바스크립트 코드를 추가하여 플러스 버튼을 누르면 hidden을 사라지게 하여아코디언을 구현할 수 있었다. 이번에 새롭게 다루어본 css는 배경이미지와 배경색을 한 번에 넣는 것.먼저 배경이미지를 넣고 그 뒤에 no-repeat, 색상 이름을 쓰면 끝!그럼 배경이미지의 크기를 넘어가는 부분은 해당 색상이 보인다. 이번에도 모바일과 데스크톱이냐에 따라 다른 ui를 적용하여반응형디자인으로 개발을 완료했다.다 만들고보니 글씨가 조금 작은 것 같기도...? 지금 연달아 3개는 오직..

약 1시간 걸린 작업.소셜 링크 프로필을 만들었다!  이번에는 반응형은 아니다.지난번에는 가이드라인을 뒤늦게 발견해서 바로 적용을 못했는데이번에는 스타일 가이드라인을 따라서 스타일링을 했더니보다 빠르게 작업을 완료할 수 있었다. https://seon318.github.io/frontend-mentor-challenges/social-links-profile-main/ Social links profileJessica Randall London, United Kingdom "Front-end developer and avid reader." Github Frontend Mentor LinkedIn Twitter Instagramseon318.github.io 지난번 프로젝트와 달리 오늘 추가해본 것은,:..

레시피 페이지 메인 오늘 반응형 디자인까지 추가한 레시피 페이지 메인 완성!깃허브 페이지로 볼 수 있게 해두었다. https://seon318.github.io/frontend-mentor-challenges/recipe-page-main/ Recipe pageSimple Omelette Recipe An easy and quick dish, perfect for any meal. This classic omelette combines beaten eggs cooked to perfection, optionally filled with your choice of cheese, vegetables, or meats.seon318.github.io @media (max-width: 560px) {} 560픽..

Recipe Page Main HTML과 CSS를 잘 활용하고 싶어서 어떤 프로젝트를 해볼까 찾다가Frontend Mentor라는 사이트에서 도전과제를 제공한다는 사실을 알았다.바로 가입하고 리포지토리 만들어서 첫 프로젝트를 해보았다.앞으로 이 사이트에서 여러 도전과제들을 수행하며 순수한 HTML, CSS에 더 익숙해져야지. 코드는 깃허브에 정리중.이번 프로젝트에서는 깃모지를 써보려고 한다. https://github.com/seon318/frontend-mentor-challenges GitHub - seon318/frontend-mentor-challenges: Challenges from Frontend MentorChallenges from Frontend Mentor. Contribute to ..

2024. 01. 15 ~ 2024. 04. 28까지 3달 넘게 진행한 프로젝트가 끝났다.4월 5일에 배포를 하고 그 뒤에 서비스를 운영하며 유지보수 기간도 가졌다.긴 프로젝트 기간 동안 어떤 일들이 있었는지 그때마다 기록했으면 좋았겠지만 아쉽게도 그러지 못했다.이게 첫 프로젝트라 그래서일까 기록의 중요성을 너무나 늦게 알아버렸다.그 당시에 기록은 못했지만 사후기록이라도 남겨봐야지. 첫 프로젝트를 시작한다고 의욕 넘치던 초반에 썼던 글...이때부터 계속 기록을 남겼어야했는데! https://jemarque.tistory.com/entry/%EC%B2%AB-%ED%8C%80-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%8C%80-%ED%94%84%EB%A1%9C%EC%A0%9D..

오늘의 작업 디자인을 마치고 메인과 문답 시작 페이지를 완성했다. 원래 pc에 적합한 ui로 디자인했었으나 아무래도 서비스 특성상 모바일 기기로의 공유가 빠를 것 같다는 생각이 들었다. 나 이거 해봤는데 너도 해봐 하면서 공유하는 그런 느낌의 서비스. 인스타 같은 곳에 올리기에도 모바일에 최적화되는 편이 나을 것 같아서 디자인을 수정했다. 핸드폰 화면에 들어갈 정도의 좁은 영역을 사용하는 방향으로 바꾸었다. 어려웠던 점 1. tailwind가 아직 익숙하지 않다. css보다 분명 쉬운 부분도 있지만 문법을 정확히 몰라 계속 문서를 찾아보며 헤맸다. 특히 너비와 높이를 설정함에 있어서 어려움을 많이 겪었다. header와 footer를 포함해서 스크롤바가 생기지 않게 길이를 딱 맞추고 싶은데 그게 아무리 ..

프로젝트 시작 계기 개인 프로젝트를 뭘할까 고민하면서 보내고 있던 요즘이었는데, 대부분 백엔드와 협업하지 않으면 진행하기 어려운 아이디어여서 보류 중이었다. 파이썬이나 노드를 이용하여 백엔드를 구현할까도 잠시 고민했으나, Next.js와 타입스크립트를 배우기 전 리액트를 정리할 겸 시작하는 개인 프로젝트여서 백엔드보다는 프론트의 비중이 훨씬 중요했다. 오늘 아침 차를 타고 가면서 음악을 듣다가 갑자기 아이디어가 머리를 스쳤다. mbti 테스트와 같은 무언가를 만들어보자는 생각에서 시작하여 취향에 맞는 음악을 추천해주자는 생각이 들었다. 음악 앱 중에는 알고리즘으로 음악을 추천해주는 서비스가 있지만, 나는 문답에 참여하면 그 결과로서 음악을 추천해주는 서비스를 만들어보려고 한다. 그냥 음악으로 하면 너무 ..

팀프로젝트의 첫 단계, ui 설계를 위해 피그마를 배우기로 했다. udemy의 웹디자인 강의를 결제해두었는데 이제 정말 들을 때가 되었다. 기초 기능을 다루는 방법을 정리하며 강의를 들어야겠다. 1. 프레임 (단축키 f) - 화면 크기 정하기 (아이폰, 데스크탑 등등, 또는 개인설정 가능) - 프레임 안에 2개 이상의 도형을 하나의 그룹으로 만들기 위해서는 command+g 또는 shift 누르고 클릭 - 그룹을 해제하기 위해서는 shift+command+g - 프레임 안 오브젝트에 제약조건을 추가할 경우 프레임의 변화와 관계 없이 그대로 있음 2. 기본 도형 - 직사각형(R), 라인(L), 화살표(shift+L), 원(o), 다각형, 별, 펜툴(p) - shift를 누를 경우 정사각형, 8방향의 라인,..