React 썸네일형 리스트형 [Python] Youtube Downloader #2 What to do? 유튜브 다운로더 프로젝트 발전시키기 이전에 flask(python 라이브러리)를 사용해 유튜브 다운로더를 만들어보았다. 이전에 만들었던 프르젝트를 조금 더 발전시켜보았다. [Python] Youtube Downloader #1 What to do? 유튜브 다운로더 만들기 구현 내용 Python 서버를 실행 terminal에 python app.py 입력 브라우져를 열고, localhost:5000 주소로 접속 주소를 입력하고 다운로드 버튼을 누름 다운로드 버튼disbaled 다 sddkarma.tistory.com Front-End 구현 Vanilla JavaScript와 Jinja Template을 사용 → React 적용 다운로드 목록 화면 이전에 다운로드한 목록들을 보여주고, .. 더보기 [Spring] 간단한 SNS 만들기 #10 What to do? 포스팅 수정/삭제 기능 뷰 작성하기 기존에 작성한 Back-End 코드를 일부 수정하고, Front-end(React)코드 작성 마이페이지에서 내가 작성한 포스팅들을 확인할 수 있고, 여기서 포스팅의 수정 및 삭제가 가능 오류수정 (Repository) 이전에 @Query에서 작성한 쿼리에서 오류가 발생해서 앱이 실행이 안되었다. navieQuery=True 옵션을 주면 앱을 실행시켰을 때 잘 되서 해결된 줄 알았는데, 실제로 뷰 삭제를 동작하는 과정에서 오류가 발생했다. 원인은 컬럼명의 대소문자 구분을 못해서 일어난 오류였다. 단순히 removed_at → removedAt 로 쿼리를 수정하는 것으로 문제를 해결했다. CommentRepository.java @Repository .. 더보기 [Spring] 간단한 SNS 만들기 #8 What to do? 좋아요 기능개발하기 기능구현한 모습 포스팅에 좋아요 누르면 포스팅은 다시 조회했을 때 좋아요가 표시됨 ⓐ 좋아요 누른 후, 좋아요 누름 → 좋아요 취소 ⓑ 좋아요 누른 후, 싫어요 누름 → 좋아요 취소 & 싫어요 감정표현 유형 EmotionType 없음 / 좋아요 / 싫어요 getOpposite : 반대되는 감정표현을 return @Getter @AllArgsConstructor public enum EmotionType { NONE("없음", 0L), LIKE("좋아요", 1L), HATE("싫어요", 2L); private final String description; private final Long seq; public EmotionType getOpposite(){ retu.. 더보기 [Spring] 간단한 SNS 만들기 #7 What to do? 포스팅 검색기능 만들기 제목, 본문, 해쉬태그, 글쓴이 검색기능 구현하기 검색기능 구현한 모습 검색유형 정의 검색유형 NONE : 검색사용 안함 → 전체 포스팅 조회 TITLE: 제목검색 HASHTAG : 단일 해쉬태그 (Exact Match) CONTENT : 본문 검색 NICKNAME : 닉네임 (Exact Match) SearchType.java @Getter @AllArgsConstructor public enum SearchType { NONE("검색사용 안함"), TITLE("포스팅 제목"), HASHTAG("단일 해쉬태그"), CONTENT("포스팅 본문"), NICKNAME("포스팅 작성자 닉네임"); private String description; } Reposit.. 더보기 [Spring] 간단한 SNS 만들기 #6 What to do? 해쉬태그 기능개발하기 구현한 사이트 모습 Entity, Dto → Hashtag 필드 추가하기 PostEntity.java Hashtags 컬럼을 String 타입으로 할지 Set 타입으로 할지 고민했다. 생각해보니 해쉬태그는 정확히 일치하는 경우만 조회하고 싶다(Exact Match)라고 생각한다면 Set이 맞는 것 같았다 @Setter @Getter @Entity @Table(name = "\"post\"") @SQLDelete(sql = "UPDATE \"post\" SET removed_at = NOW() WHERE id=?") @Where(clause = "removed_at is NULL") public class PostEntity extends AuditingField.. 더보기 [Spring] 간단한 SNS 만들기 #4 What to do? React로 Front-end 프로젝트 생성하기 ⓐ 네비게이션바 ⓑ 회원가입 ⓒ 로그인 ⓓ포스팅 List ⓔ 포스팅 작성 회원가입 로그인 및 포스팅 작성 세팅 프로젝트 생성 front-end라는 이름의 react 프로젝트 생성 npx create-react-app front-end 라이브러리 설치 recoil : 상태관리 react-router-dom : 라우팅 material ui : 디자인 npm install recoil npm install react-router-dom# 최신버전(v6) npm install @mui/material @emotion/react @emotion/styled npm install @mui/icons-material index.js App태그를 R.. 더보기 이전 1 다음
