정코딩

동의대학교 컴퓨터공학과 SSAFY 6기

공부/FrontEnd

프로젝트를 진행하던 중 특정 페이지에서 헤더, 풋터를 비활성화해주기 위해 알아본 내용을 정리하고자 한다. 사용법은 심플하다. v-if= "$route.name !== '라우터명'" 해당 코드만 잘 활용하면 된다. Ex) 위와 같이 심플하게 사용하면 되며, 주의할 점은 router이 아닌 route다. r이 빠져야 하는데 습관처럼 router을 붙여서 적용이 안돼 시간을 소요하였다 ㅠ 라우터 명의 경우 실제 router 파일에 선언한 name을 그대로 사용하면 된다. 당시 구글링 중 아래와 같은 내용을 확인했으며 name 뿐만 아니라 path로도 적용 가능하지 않을까라고 생각해본다.

2022. 4. 17.

공부/프로젝트

[공통 프로젝트] 프로젝트명 : EMOTION PLANET 기간 : 2022.01.10 ~ 2022.02.18 소개 : 감정 공유 SNS (테스트를 통해 감정을 알고, 감정에 따라 서비스를 추천받고, 감정을 공유하는 SNS) 사용 기술 스택 : Vue, Spring boot, My baits, My SQL, JWT, Web Socket 등 내용 : - Spotify, KMDB API를 이용하여 데이터를 받아와 감정에 따라 장르별 음악, 영화, 활동 정보를 추천 - 기본적인 SNS 기능 개발 (글쓰기, 댓글, 좋아요, 팔로우) - 간단한 감정 테스트 알고리즘 개발 - JWT를 이용한 사용자 인증 개발 - OAuth를 이용한 소셜 로그인(구글, 카카오톡) 개발 - Web Socket를 이용한 실시간 알림 처..

2022. 3. 20.

공부/FrontEnd

Spring Boot Web Socket 실시간 알림 프로젝트로 SNS를 개발하던 도중 실시간 알림 기능이 필요하게 되어 구글링을 통해 알아보던 중 좋은 블로그를 접하게 되었고 해당 블로그를 참고하여 개발을 성공할 수 있었다. 먼저 웹은 HTT soonil.tistory.com 해당 포스팅에 이어 이번에는 Vue 코드도 설명과 함께 포스팅하도록 하겠다. 참고 블로그 : https://velog.io/@skyepodium/vue-spring-boot-stomp-%EC%9B%B9%EC%86%8C%EC%BC%93 먼저 코드 설명 전에 npm을 통해 라이브러리를 설치해주어야 한다. npm i webstomp-client sockjs-client 프로젝트 주제가 SNS였기 때문에 팔로우 신청을 예시로 코드를 보여..

2022. 2. 21.

공부/BackEnd

프로젝트로 SNS를 개발하던 도중 실시간 알림 기능이 필요하게 되어 구글링을 통해 알아보던 중 좋은 블로그를 접하게 되었고 해당 블로그를 참고하여 개발을 성공할 수 있었다. 먼저 웹은 HTTP/HTTPS 방식으로 동작하기 때문에 2가지의 특성을 가지고 있는데 첫 번째는 Stateless이고, 두 번째는 Connectionless이다. Stateless는 클라이언트와 서버가 통신이 끝나면 상태 정보를 유지하지 않는다는 특징이 있고, Connectionless는 클라이언트와 서버가 요청 응답을 종료하면 접속을 끊는다는 특징이 있다. 그래서 실시간으로 통신하기는 제한이 있었고 이를 WebSocket을 이용해 해결했으며, WebSocket은 클라이언트와 서버가 지속적으로 연결된 TCP라인을 통해 실시간으로 데이..

2022. 2. 21.

공부/프로젝트

[팀 프로젝트] 프로젝트명 : 아파트 매물 검색 프로젝트 기간 : 2021.11.19 ~ 2021.11.25 기능 : 로그인, 로그아웃, 회원가입, 인기 매물 정보, 공지사항, 게시판, 파일 업다운로드, 나의 관심 매물, 친구 관심 매물, 아파트 실거래가 정보 및 위치, 주변 상권 정보 등 사용 기술 스택 : HTML, CSS, JS, Node.js, Mysql, Vue, Vuex, Vue-Router BootStrap, Spring, Sprint boot, My Batis 내용 : BootStrap5 무료 템플릿을 이용해서 원하는 디자인을 선택하여 Vue로 변환시켜 Frount를 구현하였으며, Router를 이용해 페이지 이동을 구현하고, Vuex를 이용해 데이터를 한 곳에 관리하는 방식으로 구현했다...

2021. 12. 8.