172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
BigQuery(SQL) 활용편(퍼널 분석, 리텐션 분석)
노션에 작성하였습니다. https://apple-baroness-590.notion.site/5-140acf7d68f68092ade2ce06dd76c781
미해결
실전! Querydsl
JPAQueryFactory queryFactory = new JPAQueryFactory(em); 부분에서 Cannot resolve constructor 'JPAQueryFactory(EntityManager)' 오류가 생기는데 원인을 모르겠어요 아래는 현재 설정입니다. 스프링 생성 build.gradle 소스 plugins { id 'java' id 'org.springframework.boot' version '3.3.5' id 'io.spring.dependency-management' version '1.1.6' //querydsl 추가 id "com.ewerk.gradle.plugins.querydsl" version "1.0.10" } group = 'study' version = '0.0.1-SNAPSHOT' java { toolchain { languageVersion = JavaLanguageVersion.of(17) } } configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' //querydsl 추가 implementation 'com.querydsl:querydsl-jpa' annotationProcessor 'com.querydsl:querydsl-apt:5.0.0:jpa' implementation 'mysql:mysql-connector-java:8.0.33' // MySQL 드라이버 최신 버전 사용 implementation 'com.github.gavlyukovskiy:p6spy-spring-boot-starter:1.9.0' // 쿼리 파라미터 로그 표시 (성능에 영향을 줄 수 있음) // runtimeOnly 'com.mysql:mysql-connector-j' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' testRuntimeOnly 'org.junit.platform:junit-platform-launcher' } tasks.named('test') { useJUnitPlatform() } //querydsl 추가 시작 def querydslDir = "$buildDir/generated/querydsl" querydsl { jpa = true querydslSourcesDir = querydslDir } sourceSets { main.java.srcDir querydslDir } configurations { querydsl.extendsFrom compileClasspath } compileQuerydsl { options.annotationProcessorPath = configurations.querydsl } //querydsl 추가 끝 테스트코드 package study.querydsl; import com.querydsl.jpa.impl.JPAQueryFactory; import jakarta.persistence.EntityManager; import org.junit.jupiter.api.Test; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.springframework.transaction.annotation.Transactional; import study.querydsl.entity.Hello; @SpringBootTest @Transactional class QuerydslApplicationTests { @Autowired EntityManager em; @Test void contextLoads() { Hello hello = new Hello(); em.persist(hello); JPAQueryFactory queryFactory = new JPAQueryFactory(em); // QueryDSL 쿼리 테스트 } }
해결됨
BigQuery(SQL) 활용편(퍼널 분석, 리텐션 분석)
노션링크: https://polite-vinyl-a61.notion.site/4-Foodie-Express-1404994b207d80e5ab10f2e96cc0e82e?pvs=74
해결됨
BigQuery(SQL) 활용편(퍼널 분석, 리텐션 분석)
내용이 많아 notion에 대신 작성했습니다. [Foodie Express 분석 보고서]( https://www.notion.so/claire1125/Foodie-Express-14110fb577ad8074b8d5ce0c58609bc2?pvs=4 )
해결됨
BigQuery(SQL) 활용편(퍼널 분석, 리텐션 분석)
제품 자체는 앱의 기본 flow만 갖춰진 상태다. 앱 스플래시 - 로그인 - 홈 진입 후 검색 / 즐겨찾기 / 주문내역 / 카테고리 페이지를 볼 수 있고 restaurant -> food_detail -> cart -> payment -> order_success로 이어지는 funnel을 갖고있다. WITH login_data AS ( SELECT DISTINCT user_pseudo_id, FORMAT_DATE('%Y-%m-01', event_date) AS login_month FROM advanced.app_logs WHERE event_date BETWEEN '2022-03-01' AND '2023-01-31' ) SELECT login_month, COUNT(DISTINCT user_pseudo_id) FROM login_data GROUP BY login_month ORDER BY login_month MAU를 계산해보면, 7,500에서 시작하여 23,373까지 성장했다. 23년 1월 데이터는 절반 정도까지만 있으므로, 지속적인 성장세를 보여주고 있다고 판단할 수는 있겠다. 하지만 런칭 후 +2달 이후로는 계속 진전 없는 모습을 보여준다. 배달 앱이기 때문에, 평일-주말에는 다른 접속률을 보여줄 것이다. 그러므로 weekly retention 지표를 활용한다. WITH base AS( SELECT DISTINCT user_id, event_name, DATETIME(TIMESTAMP_MICROS(event_timestamp), 'Asia/Seoul') AS event_datetime, DATE(TIMESTAMP_MICROS(event_timestamp), 'Asia/Seoul') AS event_date, user_pseudo_id FROM advanced.app_logs WHERE event_date BETWEEN '2022-08-01' AND '2022-11-03' AND event_name = 'click_payment' ) , dates AS( SELECT DISTINCT user_pseudo_id, DATE_TRUNC(MIN(event_date) OVER (PARTITION BY user_pseudo_id), WEEK(MONDAY)) AS first_week, DATE_TRUNC(event_date, WEEK(MONDAY)) AS event_week FROM base ) , first_week_and_diff AS ( SELECT *, DATE_DIFF(event_week, first_week, week) AS diff_of_week FROM dates ) , user_counts AS ( SELECT diff_of_week, COUNT(DISTINCT user_pseudo_id) AS user_cnt FROM first_week_and_diff GROUP BY diff_of_week ORDER BY diff_of_week ) , first_week_user_count AS ( SELECT diff_of_week, user_cnt, FIRST_VALUE(user_cnt) OVER(ORDER BY diff_of_week) AS first_week_user_cnt FROM user_counts ) SELECT *, SAFE_DIVIDE(user_cnt, first_week_user_cnt) AS retain_rate FROM first_week_user_count weekly retention으로 살펴보면, 첫 주에 1%의 고객이 남고 그 후로는 어느정도 플래튜가 형성되는 모습이다. 따라서 아직은 PMF를 찾지 못했다고 할 수 있다. 그렇다면 재접속을 하는 유저는 그렇지 않은 유저와 어떻게 다를까? 총 기간동안의 퍼널 이벤트 수는 아래와 같다. WITH base AS ( SELECT event_date , event_timestamp , event_name , user_id , user_pseudo_id , platform , MAX(IF(event_param.key = 'firebase_screen', event_param.value.string_value, NULL)) AS firebase_screen , MAX(IF(event_param.key = 'session_id', event_param.value.string_value, NULL)) AS session_id FROM `advanced.app_logs` CROSS JOIN UNNEST(event_params) AS event_param WHERE event_date BETWEEN '2022-08-01' AND '2023-01-31' GROUP BY ALL ) , filter_event_and_concat_event_and_screen AS ( SELECT * EXCEPT(event_name, firebase_screen, event_timestamp) , DATETIME(TIMESTAMP_MICROS(event_timestamp), 'Asia/Seoul') AS event_datetime , CONCAT(event_name, '-', firebase_screen) AS event_name_with_screen FROM base WHERE event_name IN ('screen_view', 'click_payment') ) SELECT event_name_with_screen , CASE WHEN event_name_with_screen = 'screen_view-welcome' THEN 1 WHEN event_name_with_screen = 'screen_view-home' THEN 2 WHEN event_name_with_screen = 'screen_view-food_category' THEN 3 WHEN event_name_with_screen = 'screen_view-restaurant' THEN 4 WHEN event_name_with_screen = 'screen_view-cart' THEN 5 WHEN event_name_with_screen = 'click_payment-cart' THEN 6 ELSE NULL END AS STEP_NUMBER , COUNT(DISTINCT user_pseudo_id) AS cnt FROM filter_event_and_concat_event_and_screen GROUP BY ALL HAVING step_number IS NOT NULL ORDER BY step_number 홈에서 food category를 선택하는 유저의 비율은 65% 카테고리에서 식당을 고르는 유저의 비율은 91% 식당에서 장바구니에 담는 유저의 비율은 58% 장바구니로부터 결제하는 유저의 비율은 67% 정도이다. 일단 탐색을 시작하면 카테고리, 식당에 대해 잘 찾아보는 편이고, 장바구니에 담아 결제까지 하는 것에 대해서는 event 수가 급감한다. 재접속을 하는 유저들의 퍼널을 페이지 기준으로 나눠보았다. WITH base AS( SELECT DISTINCT user_id, event_name, DATETIME(TIMESTAMP_MICROS(event_timestamp), 'Asia/Seoul') AS event_datetime, DATE(TIMESTAMP_MICROS(event_timestamp), 'Asia/Seoul') AS event_date, user_pseudo_id FROM advanced.app_logs WHERE event_date BETWEEN '2022-08-01' AND '2023-01-31' ) , dates AS( SELECT DISTINCT user_pseudo_id, DATE_TRUNC(MIN(event_date) OVER (PARTITION BY user_pseudo_id), WEEK(MONDAY)) AS first_week, DATE_TRUNC(event_date, WEEK(MONDAY)) AS event_week FROM base ) , first_week_and_diff AS ( SELECT *, DATE_DIFF(event_week, first_week, week) AS diff_of_week FROM dates ) , retain_user AS ( SELECT DISTINCT user_pseudo_id FROM first_week_and_diff WHERE diff_of_week >= 1 ) , base2 AS ( SELECT event_date , event_timestamp , event_name , user_id , user_pseudo_id , platform , MAX(IF(event_param.key = 'firebase_screen', event_param.value.string_value, NULL)) AS firebase_screen , MAX(IF(event_param.key = 'session_id', event_param.value.string_value, NULL)) AS session_id FROM `advanced.app_logs` CROSS JOIN UNNEST(event_params) AS event_param WHERE event_date BETWEEN '2022-08-01' AND '2023-01-31' AND user_pseudo_id IN ( SELECT user_pseudo_id FROM retain_user ) GROUP BY ALL ) , filter_event_and_concat_event_and_screen AS ( SELECT * EXCEPT(event_name, firebase_screen, event_timestamp) , DATETIME(TIMESTAMP_MICROS(event_timestamp), 'Asia/Seoul') AS event_datetime , CONCAT(event_name, '-', firebase_screen) AS event_name_with_screen FROM base2 WHERE event_name IN ('screen_view', 'click_payment') ) SELECT event_name_with_screen , CASE WHEN event_name_with_screen = 'screen_view-welcome' THEN 1 WHEN event_name_with_screen = 'screen_view-home' THEN 2 WHEN event_name_with_screen = 'screen_view-food_category' THEN 3 WHEN event_name_with_screen = 'screen_view-restaurant' THEN 4 WHEN event_name_with_screen = 'screen_view-cart' THEN 5 WHEN event_name_with_screen = 'click_payment-cart' THEN 6 ELSE NULL END AS STEP_NUMBER , COUNT(DISTINCT user_pseudo_id) AS cnt FROM filter_event_and_concat_event_and_screen GROUP BY ALL HAVING step_number IS NOT NULL ORDER BY STEP_NUMBER 한번이라도 재접속한 사람들은 웰컴 -> 홈을 넘어가는 비율이 거의 100%에 가깝다. 아무래도 login이란 허들때문일 것이다. 그렇다면, login 허들을 좀 더 잘 넘기 위해 제품 온보딩을 잘 해줘야하지 않을까? 확실히 프로덕트에 대한 차별점 설명이 부족하므로, 이 부분을 강화하여 '어떤 core value를 가진 배달앱'인지를 어필할 필요가 있겠다. 그리고 홈에서 카테고리로 넘어가는 비율이 73%, 카테고리에서 식당 페이지로 92%, 식당 페이지에서 장바구니로는 55% 장바구니로부터 결제까지 이어지는 비율은 67%이다. 재접속한 유저들은 홈에서 food category를 선택하는 데에 좀 더 높은 전환율을 보였다. 그렇다면 이들이 다른 유저들 대비하여 추가적으로 느낀 이점은 무엇일지 고민할 필요가 있을 것이다. 재접속 기준만으로는 차이가 별로 없어서 click payment 경험이 있고 재접속을 한 유저들의 퍼널을 구해봤다. 비교적 매우 높은 전환율을 보여준다. 특히 카테고리를 굳이 선택하지 않고 바로 식당을 선택하는데, 카테고리가 비교적 메리트있게 설계되지 않아서 그런 것인지? 라는 생각이 든다. 이벤트 데이터가 더 있었다면, 식당으로 전환되는 페이지들의 비율을 살펴보면서 홈의 비중이 높지 않을까 하고 보겠지만, 지금은 그냥 그렇지 않을까 하고 추측해본다. 확실히 구매를 했고, 2번 이상 접속한 유저들의 퍼널 전환율은 매우 좋다. 해당 제품이 직접 보기에는 배달 주문에 필수적인 기능들만 있지만, 해당 1만 4천명 정도의 유저들이 느끼는 분명한 메리트가 있을 것이다. 그 메리트로부터 core value를 찾고, 고객들이 좋아하는 기능 중심으로 발전시켜 나가야할 것이다.
해결됨
BigQuery(SQL) 활용편(퍼널 분석, 리텐션 분석)
과제 관련 노션 링크 첨부합니다! https://www.notion.so/4-6-1-1419f4b04d5380308bbdf4a19394e924?pvs=4
해결됨
BigQuery(SQL) 활용편(퍼널 분석, 리텐션 분석)
4주차 최종과제 노션 링크입니다:) https://salt-baron-5c5.notion.site/4-Foodie-Express-13ea734e64b8801595f8c8c3467d9bc5?pvs=4
미해결
손에 익는 Next.js - 블로그 만들기
우선 강의 잘 봤습니다. nextjs와 관련된 질문들이 있습니다. SSR,CRS,SSG,PPR,ISR 등은 만약 실무에서 투입한다면 개발자들이 렌더링이 어떻게 되어야한다는 도메인 지식이 있는하에 결정하는건가요? 그리고 블로그성 개발 관련 질문입니다. 이 블로그라는게 어떻게 개발하고 만드냐는 여러가지 방법이 있겠지만 현 강의 처럼 mdx 파일에 직접 포스트를 기재를 하고 빌드해서 배포하고 올린다? 가 있고, CRUD를 구현해 블로그성 홈페이지를 만드는 방법이 있겠는데 보통 개발자분들은 어떤 방법으로 블로그를 만드는지 궁금합니다. (개인적인 의견으로 답변주심 감사하겠습니다(_ _). 그리고 만약 mdx파일로 한다고 하면, md파일을 직접 작성해서 올리는것 말고 티스토리와 일반 블로그같은 UI를 생성해서 mdx파일로 올릴수있는지?도 궁금합니다.
해결됨
기초 탄탄! 독하게 시작하는 Java - Part 1 : 절차적 프로그래밍
토스페이먼츠의 어떤 프로젝트에서 일부 변수명은 한글로 작성하는 컨벤션이 존재하는거로 알고있습니다 물론 모든 변수를 한글로 하는건 지양하고 영어로 풀어내기 어려운 경우 한글을 사용하는걸로 컨벤션을 작성해놓은거같은데 해당 프로젝트가 자바스크립트의 컨벤션이어서 자바랑은 다른건지 궁금합니다~
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
강의를 보면서 cmd 실행후 helloC:\Users\Desktop\Study\hello-spring\hello-spring> 에서 gradlew build를 실행하면 해당 에러가 계속 뜨네요. 처음엔 다른문제가 뜨길레 윈도우 계정이름도 변경하고, 버전도 확인하고 cmd관리자 권한으로도 실행해봤는데도 계속 이래요. 공부가 하고 싶습니다 좀 도와주세요 너무 답답합니다 ㅠㅠ
해결됨
BigQuery(SQL) 활용편(퍼널 분석, 리텐션 분석)
Notion 링크로 대체합니다. https://colney4844.notion.site/4-13e59b98d5db80d6937fc8fbd6e207e6?pvs=4
해결됨
초보자를 위한 BigQuery(SQL) 입문
강의자료 업로드 상태 확인 및 전달 부탁드립니다. 커리큘럼 목차에서 강의자료 다운로드 한 이후 zip 안에 파일이 없는 것으로 나와 강의자료 확인할 수가 없습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 리액트를 공부하기 위해 어제 처음 등록을 했서 잘 듣고 있습니다. 강의에 대한 질문은 아니지만 수업준비관련해서 비주얼스튜디오 부분에 대해 질문이 있는데 제가 현재 맥북으로 사용하고 외장하드를 연결해서 이 외장하드에 폴더를 만들어 사용하고 있는데 어느순간 파일을 만들거나 리액트를 설치할때 파일명앞에 이미지처럼 ._ 이런식으로 붙더라구요. 삭제하면 또 생겨서 구글링을 통해 찾아봤지만 해결이 되지 않았습니다. 혹시 방법이 없을까요?
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요, 테스트가 정상적으로 실행되었으며 @Rollback 어노테이션을 붙였음에도 불구하고 왜 데이터가 insert 되지 않는지 궁금합니다. 관련 사진은 다음과 같습니다. 코드는 다음과 같습니다. package jpabook.jpashop; import org.assertj.core.api.Assertions; import org.junit.jupiter.api.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.springframework.test.annotation.Rollback; import org.springframework.test.context.junit4.SpringRunner; import org.springframework.transaction.annotation.Transactional; import static org.junit.jupiter.api.Assertions.*; @RunWith(SpringRunner.class) @SpringBootTest class MemberRepositoryTest { @Autowired MemberRepository memberRepository; @Test @Transactional @Rollback(false) public void testMember() throws Exception { // given Member member = new Member(); member.setUsername("memberA"); // when Long saveId = memberRepository.save(member); Member findMember = memberRepository.find(saveId); // then Assertions.assertThat(findMember.getId()).isEqualTo(member.getId()); Assertions.assertThat(findMember.getUsername()).isEqualTo(member.getUsername()); } } spring: datasource: url: jdbc:h2:tcp://localhost/~/jpashop username: sa password: driver-class-name: org.h2.Driver jpa: hibernate: ddl-auto: update properties: hibernate: #show_sql: true format_sql: true logging.level: org.hibernate.SQL: debug #org.hibernate.type: trace 감사합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
강의를 들어보니 React Query와 꽤 비슷한 부분이 많다고 생각되서 혹시 대체할 수 있을까 생각이 들었는데요. 정환님은 어떤 생각을 가지고 계신지 궁금하여 질문 드립니다. 만약 App Router로 새로운 프로젝트를 구축해야 한다고 하면 React Query를 사용하실건가요?
미해결
김영한의 실전 자바 - 기본편
인터페이스가 추상 클래스보다 더 제약이 있다고 강의 내용에서 배웠습니다. 그러나 구성에는 인터페이스가 더 많은 것을 포함하고 있는 것 같아 궁금합니다! 강의 내용에서는 interface에 일반 메서드가 올 수 없다고 배웠던 것 같습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
postgres 주소는 오프라인 강의 시에만 제공하고 온라인은 제공을 하지 않는다고 이해했는데요. 해당 부분으로 대체 가능한 방법과 postgres 없이 graphql만 실행하여 강의를 따라가도 지장이 없는지 궁금합니다. 이후 강의에는 데이터 처리하는 부분이 포함되어있는 것 같은데요. 해당부분 확인 바랍니다!
해결됨
떠먹여주는 객체지향 디자인 패턴 - by 얄코
2분대에 나오는 PizzaBuilder static내부 클래스에 기본 생성자가 없으면 뒤에 나오는 main문에서 new Pizza.PizzaBuilder()가 가능한가요??
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
3.3)Node.js 사용하기 강의 3분10초입니다. npm init 을 터미널에 입력하면 사진과 같은 오류가 납니다.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
로그인 페이지에서 로그인을 하면 500, 커뮤니티 생성 페이지에서 생성을 하면 401 AxiosError가 뜹니다. <login.tsx> import axios from 'axios'; import InputGroup from '../components/InputGroup' import Link from 'next/link' import { useRouter } from 'next/router'; import React,{ FormEvent, useState } from 'react' import { useAuthDispatch } from '../context/auth'; axios.defaults.withCredentials = true; const Login = () => { let router = useRouter(); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [errors, setErrors] = useState<any>({}); const dispatch = useAuthDispatch(); const handleSubmit = async (event: FormEvent) => { event.preventDefault(); try{ const res = await axios.post("/auth/login", {password, username}, {headers: {'Access-Control-Allow-Origin': 'http://localhost:3000'}}) dispatch("LOGIN", res.data?.user); } catch(error: any){ //console.log(error); setErrors(error.response?.data || {}) } } return ( <div className='bg-white'> <div className='flex flex-col items-center justify-center h-screen p-6'> <div className='w-10/12 mx-auto md:w-96'> <h1 className='mb-2 text-lg font-medium'>로그인</h1> <form onSubmit={handleSubmit}> <InputGroup placeholder='Username' value={username} setValue={setUsername} error={errors.username} /> <InputGroup placeholder='Password' value={password} setValue={setPassword} error={errors.password} /> <button className='w-full py-2 mb-1 text-xs font-bold text-white uppercase bg-gray-400 border border-gray-400 rounded'> 로그인 </button> </form> <small> 아직 아이디가 없으신가요? <Link href="/register" legacyBehavior> <a className='ml-1 text-blue-500 uppercase'>회원가입</a> </Link> </small> </div> </div> </div> ) } export default Login <create.tsx> import axios from "axios"; import { GetServerSideProps } from "next"; import InputGroup from "../../components/InputGroup" import {useState, FormEvent} from "react"; import {useRouter} from "next/router" axios.defaults.withCredentials = true; const SubCreate = () => { const [name, setName] = useState(""); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [errors, setErrors] = useState<any>({}); let router = useRouter(); const handleSubmit = async (event: FormEvent) => { event.preventDefault(); try { const res = await axios.post("/subs", {name, title, description}, {headers: {'Access-Control-Allow-Origin': 'http://localhost:3000'}}) router.push(`/r/${res.data.name}`); } catch (error: any) { // console.log(error); setErrors(error.response?.data || {}); } } return ( <div className="flex flex-col justify-center pt-16"> <div className="w-10/12 mx-auto md:w-96"> <h1 className="mb-2 text-lg font-medium"> 그룹 만들기 </h1> <hr /> <form onSubmit={handleSubmit}> <div className="my-6"> <p className="font-medium">Name</p> <p className="mb-2 text-xs text-gray-400"> 그룹 이름은 변경할 수 없습니다. </p> <InputGroup placeholder="이름" value={name} setValue={setName} error={errors.name} /> </div> <div className="my-6"> <p className="font-medium">Title</p> <p className="mb-2 text-xs text-gray-400"> 주제를 입력해 주세요. </p> <InputGroup placeholder="주제" value={title} setValue={setTitle} error={errors.title} /> </div> <div className="my-6"> <p className="font-medium">Description</p> <p className="mb-2 text-xs text-gray-400"> 그룹에 대한 설명을 입력해주세요. </p> <InputGroup placeholder="설명" value={description} setValue={setDescription} error={errors.description} /> </div> <div className="flex jstify-end"> <button className="px-4 py-1 text-sm font-semibold rounded text-white bg-gray-400 border" > 그룹 만들기 </button> </div> </form> </div> </div> ) } export default SubCreate <subs.ts> import {Router, Request, Response} from "express"; import jwt from "jsonwebtoken" import { User } from "../entities/User"; import userMiddleware from "../middlewares/user" import authMiddleware from "../middlewares/auth" import { AppDataSource } from "../data-source"; import Sub from "../entities/Sub"; import { isEmpty } from "class-validator"; const createSub = async (req: Request, res: Response, next) => { const {name, title, description} = req.body; try { let errors: any = {}; if (isEmpty(name)) errors.name = "이름은 비워둘 수 없습니다."; if (isEmpty(title)) errors.title = "제목은 비워둘 수 없습니다."; const sub = await AppDataSource.getRepository(Sub) .createQueryBuilder("sub") .where("lower(sub.name) = :name", { name: name.toLowerCase() }) .getOne(); if (sub) errors.name = "서브가 이미 존재합니다."; if (Object.keys(errors).length > 0) { throw errors; } } catch (error) { console.log(error); return res.status(500).json({ error: "문제가 발생했습니다." }); } try { const user: User = res.locals.user; const sub = new Sub(); sub.name = name; sub.description = description; sub.title = title; sub.user = user; await sub.save(); return res.json(sub); } catch (error) { console.log(error); return res.status(500).json({ error: "문제가 발생했습니다." }); } }; const router = Router(); router.post("/", userMiddleware,authMiddleware, createSub); export default router; <server.ts> import express, { response } from "express"; import morgan from "morgan"; import { AppDataSource } from "./data-source"; import authRoutes from './routes/auth' import subRoutes from './routes/subs' import cors from 'cors'; import dotenv from 'dotenv'; import cookieParser from "cookie-parser"; const app = express(); const origin = process.env.ORIGIN; const corsOption = { origin: "http://localhost:3000", credentials: true } app.use(cors(corsOption)) app.use(express.json()); app.use(morgan('dev')); app.use(cookieParser()); dotenv.config(); app.get("/", (_, res) => {res.send("running")}); app.use("/api/auth", authRoutes) app.use("/api/subs", subRoutes) console.log(process.env.ORIGIN) let port = 4000; app.listen(port, async () => { console.log('server running at http://localhost:${port}'); AppDataSource.initialize().then(async () =>{ console.log("database initialized") }).catch(error => console.log(error)) })
