13:00 에 만드는 apply가 deprecated 됐다고 나오는데 어떻게 해야하나요?
미해결
PZM기반 실무중심 백엔드 부트캠프(프리트레이닝)
이렇게 뜹니다.
- java
- spring
- spring-boot
- jpa
- backend
김재원
댓글 1
좋아요 0
조회수 279
묻고 답해요
172만명의 커뮤니티!! 함께 토론해봐요.
인텔리제이 String 오류?
미해결
김영한의 실전 자바 - 기본편
가끔 String 쓰면 실행은 되는데 이렇게 오류나거나, 실행도 안 되고 오류가 뜰 때가 있는데 왜 그런건 가요? 같은 프로젝트 파일에서도 될 때가 있고 갑자기 안 될 때가 있습니다
- java
- 객체지향
wk
댓글 1
좋아요 0
조회수 232
섹션4 01-02-emotion 에러가 나는데 못찾겠습니다ㅜ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
설치가 잘못된 걸까요.. yarn dev하니 오류가 납니다ㅜ
- react
- node.js
- seo
- graphql
- next.js
leeyunje96
댓글 1
좋아요 1
조회수 218
main 함수 실행이 안되요
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. spring-io에서 만들어서 intellj에서 실행했는데 실행이 되지가 않습니다 뭐가 문제일까요 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요.
- java
- spring
- mvc
- spring-boot
밀라이
댓글 2
좋아요 0
조회수 917
상속 구조 내에서 Querydsl로 특정 타입의 엔티티에만 조인
해결됨
실전! Querydsl
안녕하세요, 질문이 있어서 글 남기게 되었습니다. 이런식으로 지점(branch)명에 맞는 공간(space)중 미팅룸 리스트를 보여주고 해당 미팅룸의 해당 날짜의 예약들도 보여주는 기능을 구현하고자 @Override public List<Reservation> findReservationListByDateAndBranchName(LocalDateTime startDatetime, LocalDateTime endDateTime, String branchName) { return queryFactory .select(reservation) .from(reservation) .join(reservation.space, space).fetchJoin() .join(space.branch, branch) .where(branch.branchName.eq(branchName), reservation.reservationStartDateTime.between(startDatetime, endDateTime), space.dtype.eq("MeetingRoom") ) .fetch(); } 이런 코드를 작성하였는데 아래와 같은 연관관계 때문에 Reservation Entity @Getter @Entity @NoArgsConstructor(access = AccessLevel.PROTECTED) @Table(name = "reservation") public class Reservation extends BaseEntity { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "reservation_id") private Long reservationId; @Column(name = "reservation_start_date_time") private LocalDateTime reservationStartDateTime; @Column(name = "reservation_end_date_time") private LocalDateTime reservationEndDateTime; @OneToMany(mappedBy = "reservation") private List<MemberReservation> memberReservations = new ArrayList<>(); @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "space_id") private Space space; } Space Entity @Getter @Entity @NoArgsConstructor(access = AccessLevel.PROTECTED) @Inheritance(strategy = InheritanceType.JOINED) @Table(name = "space") @DiscriminatorColumn public abstract class Space { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "space_id") private Long spaceId; @NotNull @Column(name = "space_name") private String spaceName; @NotNull @Column(name = "space_floor") private int spaceFloor; @ManyToOne(fetch = FetchType.LAZY) @JoinColumn(name = "branch_id") private Branch branch; @OneToMany(mappedBy = "space") private List<Reservation> reservations = new ArrayList<>(); @NotNull @Column(name = "dtype", insertable = false, updatable = false) private String dtype; } Space를 상속받는 FocusDesk, MeetingRoom, RechargingRoom @Getter @Entity @NoArgsConstructor(access = AccessLevel.PROTECTED) @Table(name = "focus_desk") public class FocusDesk extends Space { //추후에 해당 엔티티에 맞는 필드들 추가 } @Getter @Entity @NoArgsConstructor(access = AccessLevel.PROTECTED) @Table(name = "meeting_room") public class MeetingRoom extends Space { @Column(name = "meeting_room_capacity") @Positive private int meetingRoomCapacity; } @Getter @Entity @NoArgsConstructor(access = AccessLevel.PROTECTED) @Table(name = "recharging_room") public class RechargingRoom extends Space { //추후에 해당 엔티티에 맞는 필드들 추가 } select r1_0.reservation_id, r1_0.created_date, r1_0.last_modified_date, r1_0.reservation_end_date_time, r1_0.reservation_start_date_time, s1_0.space_id, s1_0.dtype, s1_0.branch_id, s1_0.space_floor, s1_0.space_name, s1_2.meeting_room_capacity from reservation r1_0 join (space s1_0 left join focus_desk s1_1 on s1_0.space_id=s1_1.space_id left join meeting_room s1_2 on s1_0.space_id=s1_2.space_id left join recharging_room s1_3 on s1_0.space_id=s1_3.space_id) on s1_0.space_id=r1_0.space_id join branch b1_0 on b1_0.branch_id=s1_0.branch_id where b1_0.branch_name=? and r1_0.reservation_start_date_time between ? and ? and s1_0.dtype=? 이런 쿼리가 나가게 됩니다. 처음에는 dtype 없이 MeetingRoom 만 join 하고 싶었지만 reservation.meetingRoom 이불가능하여(reservation은 space랑 매핑 되어있으니까) 불가능하여 이방법 밖에는 떠오르지 않았습니다. 문제는 위의 쿼리처럼 쓸모없는 테이블들을 강제로 조인한 후에 다시 where절의 dtype으로 구분을 해야한다는 것입니다. @Query("SELECT new com.example.sabujak.reservation.dto.ReservationQueryDto(r.reservationStartDateTime, r.reservationEndDateTime, s.spaceId, s.spaceFloor, s.spaceName, m.meetingRoomCapacity) " + "FROM Reservation r " + "JOIN r.space s " + "JOIN MeetingRoom m ON m.spaceId = s.spaceId " + "JOIN s.branch b " + "WHERE b.branchName = :branchName " + "AND r.reservationStartDateTime BETWEEN :startDateTime AND :endDateTime") 이런식의 jpql로는 해결이 가능하지만 추후에 정렬조건을 동적으로 받아야 하기에 querydsl을 사용해서 최대한 좋은 방향으로 사용하고 싶은데 어떻게 해야할지 잘 모르겠습니다
- java
- jpa
말차
댓글 2
좋아요 0
조회수 477
섹션6 날짜와 시간 - 문제와 풀이2 질문.
해결됨
김영한의 실전 자바 - 중급 1편
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. 섹션6 날짜와 시간 문제풀이2번째에서 막혀서 질문을 드립니다. 현재 저의 코드 상태가 그림으로 보시는 봐와 같이 이런 상태이고, 지금 이 상태 에서, 월요일이 첫 시작 일 때(2024년 1월 1일기준), 월요일에서 날짜를 넣는 방법을 모르겠더라고요. 이럴 때 에는 문제와 풀이2 해석을 보는게 나은지? 아니면 검색을 해서 라도 푸는게 나은지 알고 싶습니다. 답변 부탁 드립니다. 참조한 클래스는 TestLoopPlus, TestAdjusters 이 두개를 참조 했습니다.(클래스 이름 +import는 pdf에서 봄)
- java
- 객체지향
생각하는자
댓글 2
좋아요 1
조회수 409
갑자기 개념이 혼동됩니다..ㅠ
미해결
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
@RestController JSON형식으로 응답본문에 나오는것도 알겠고 @RequesyBody은 요청본문은 자바객체로 매핑하는것도 알고있습니다.근데 @Controller로 진행하면서 모델에담고 return을 뷰로 전달하는 형식으로하다가 갑자기 REST API?형식으로 진행하게되서 뭔가 갑자기 햇갈려졌는데..이유를모르겠습니다
- java
- spring
- spring-boot
- jpa
임다정
댓글 2
좋아요 0
조회수 247
LinkedHashSet 구조에 관해 질문이 있습니다
미해결
김영한의 실전 자바 - 중급 2편
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] LinkedHashSet은 HashSet과 같은데 Node를 추가해서 입력 순서를 유지한다 들었습니다.그럼 만약에 HashIndex가 같은 경우(해시 충돌) Node도 HashSet과 같이 List 형식으로 저장이 되는게 맞을까요?
- java
- 객체지향
- 코딩-테스트
- 알고리즘
쏭깡
댓글 1
좋아요 0
조회수 301
mongoDB 데이터 확인하는 법
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
강사님께서 mongoDB Clusters 카테고리 들어가면 데이터 확인하실 수 있는데, 저는 따로 뜨는게 없고 이런 화면이 나오네요. 어디서 볼 수 있나요?
- react
- node.js
Kwon
댓글 1
좋아요 0
조회수 438
로그인후 replace가 안되는 이유?
미해결
Next + React Query로 SNS 서비스 만들기
지금 로그인 후 핸들러에서 값을 잘 주는것을 확인했고 auth.ts의 콘솔 부분에 값이 잘 나오는것을 확인했습니다 여기서 result에서도 성공했다고 나오는데 replace가 안되네요 이유가 뭘까요
- react
- next.js
- react-query
- next-auth
- msw
성민석
댓글 2
좋아요 0
조회수 414
Pessimitic Lock 과 Optimitic Lock 질문
미해결
재고시스템으로 알아보는 동시성이슈 해결방법
안녕하세요, 강의를 듣다가 몇가지 질문이 생겼습니다. 1. Pessimitic Lock와 Optimitic Lock 는 select 구문(@Query("select ...) 나 find 쿼리메서드)에서만 @Lock을 적용하는거라고 이해하면 될까요? 2. Pessimitic Lock 과 Optimitic Lock 의 벌크 수정 쿼리는 어떻게 처리가 되는건가요? 2-1. Pessimitic Lock 은 select 절로 데이터를 가져오지 않는다면 어떻게 벌크 수정이 되는건가요? 2-2. Optimitic Lock 은 벌크 연산에서 직접 버전을 수정하는게 맞을까요? 좋은 강의 감사합니다.
- java
- spring
- 동시성
- 벌크연산
lch9502
댓글 2
좋아요 0
조회수 369
다운로드
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
자바중급편끝내고 스프링 다운 받으려고 하는데 주의 사항보고 다운받고있는데 다운받기전에 패키지 이름 바꿔야한다는 소리인가요?? 혹시 주의 사항 더 알려주실만한게 있나요 ? 환경구축하는게 어렵네요 ㅠ
- java
- spring
- mvc
- spring-boot
김병곤
댓글 2
좋아요 0
조회수 229
QueryDsl의 ON절에 대해 질문드립니다.
미해결
실전! Querydsl
SQL의 ON절과 QueryDsl의 ON절 간에 차이가 있어보여 질문드립니다. SQL의 ON절에서는 테이블과 테이블 간에 어떤 컬럼을 기준으로 조인될 것인가를 명시하는 기능을 하는데 비해, QueryDsl에서는 join메서드가 그 기능을 포함하고 on메서드가 마치 sql의 where절의 역할을 하는 것(그렇기 때문에 QueryDsl에서는 SQL과 달리 on 메서드와 where 메서드를 함께 사용할 수 없음)으로 보이는데 맞을까요?
- java
- jpa
Jaesang Yoon
댓글 1
좋아요 0
조회수 262
postman 에러
미해결
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
안녕하세요. 현재 7강 듣고 있는데요, node.js run하고 postman에 이름, 이메일, 패스워드 넣어서 요청하면 에러 뜨고 종료가 됩니다... 이유가 뭔가요?
- react
- node.js
Kwon
댓글 1
좋아요 0
조회수 306
entity manager와 스프링 빈
미해결
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? ( 예 /아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? ( 예 /아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? ( 예 /아니오) [질문 내용] @Repository public class MemberRepository { @PersistenceContext private EntityManager em; .... } 위 코드에서 질문이 하나 있는데요, EntityManagerFactory가 스프링 빈으로 디폴트로 등록이 되고 위 em에다가 entitymanager를 만들어서 주입을 해 주는 것인지, 아니면 EntityManager가 스프링 빈으로 아예 등록이 되고 저 위에다가 주입이 되는 것인지(아닐 것 같기는 합니다!)궁금합니다
- java
- spring
- 웹앱
- spring-boot
- jpa
blackjack_96
댓글 1
좋아요 0
조회수 210
코드 오류?
미해결
나도코딩의 자바 기본편 - 풀코스 (20시간)
안녕하세요 게터 세터를 다 작성하고 런타임을 돌려보니 밑의 사진처럼 113,117행에 ; 가 없고 117에는 식의 개시가 올바르지 않다고 확인이 됩니다.. 써주신 코드랑 비교해도 틀린게 없는것으로 보이는데 뭐가 잘못된것일까요?
- java
- 객체지향
whydoubleon
댓글 3
좋아요 0
조회수 291
세션5 상품 목록 컴포넌트 처리
미해결
코드로 배우는 React 19 with 스프링부트 API서버
import axios from "axios" import { API_SERVER_HOST } from "./todoApi" // api server host const host = `${API_SERVER_HOST}/api/products` // 외부 보낼것 만들기 비동기 통신 export const postAdd = async (product) => { // 객체지정 const header = {headers: {'Content-Type':'multipart/form-data'}} // product와 header 같이 보내기 const res = await axios.post(`${host}/`, product, header) return res.data } export const getList = async (pageParam) => { try{ const {page, size} = pageParam const res = await axios.get(`${host}/list`, {params: {page:page, size:size}}) return res.data } catch (error) { console.error('Error in getList:', error); throw error; } } productsApi.js 위 코드이고 import React, { useState, useEffect } from 'react'; import useCustomMove from '../../hooks/useCustomMove'; import { API_SERVER_HOST } from '../../api/todoApi'; import { getList } from '../../api/productsApi'; const initState = { dtoList: [], pageNumList: [], pageRequestDTO: null, prev: false, next: false, prevPage: 0, nextPage: 0, current: 0 } // 서버에 주소가 바뀌면 상수값만 바꿔줄려고 선언한것 const host = API_SERVER_HOST function ListComponent(props) { // 커스텀 훅 사용해서 이동 refresh: 갱신 const {moveToList, moveToRead, page, size, refresh} = useCustomMove() // 목록 데이터 가져오기 const [serverData, setServerData] = useState(initState) // 데이터 가져오기 const [fetching, setFetching] = useState(false) useEffect(() => { setFetching(true) // 데이터 가져오는 중 자동으로 처리되기 때문에 // 서버데이터가 처리가 되면 getList({page,size}).then(data => { console.log("data>>>>>>>", data); setFetching(false) setServerData(data) }) }, [page,size,refresh]); return ( <div className="border-2 border-blue-100 mt-10 mr-2 ml-2"> {/* fetching일때는 FetchingModal 호출하고 그렇지 않으면 아무것도 안보여준다. */} {fetching? <FetchingModal/> :<></>} <div className="flex flex-wrap mx-auto p-6"> {serverData.dtoList.map(product => <div key= {product.pno} className="w-1/2 p-1 rounded shadow-md border-2" onClick={() => moveToRead(product.pno)} /* 링크 만들어주고 썸네일 이미지 만들어서 보여주는 기능 */ > <div className="flex flex-col h-full"> <div className="font-extrabold text-2xl p-2 w-full ">{product.pno}</div> <div className="text-1xl m-1 p-2 w-full flex flex-col"> <div className="w-full overflow-hidden "> <img alt="product" className="m-auto rounded-md w-60" src={`${host}/api/products/view/s_${product.uploadFileNames[0]}`} /> </div> <div className="bottom-0 font-extrabold bg-white"> <div className="text-center p-1"> 이름: {product.pname} </div> <div className="text-center p-1"> 가격: {product.price} </div> </div> </div> </div> </div> )} </div> </div> ); } export default ListComponent; ListComponent.js 파일인데 import React from 'react'; import ListComponent from '../../components/products/ListComponent'; function ListPage(props) { return ( <div className="p-4 w-full bg-white"> <div className="text-3xl font-extrabold"> Products List Page </div> <ListComponent/> </div> ); } export default ListPage; ListPage.js 파일입니다 터미널에 에러도 뜨지 않고 서버에서 데이터를 못가져오는데 postman으로 서버 테스트를 했을때는 잘 되는데요 서버에서 클라이언트로 연동되는 부분에서 문제가 생긴건지 list를 가져오지를 못하고 있습니다 ㅠ 왜 그런건지 알 수 있을까요 ㅠ 오타도 아닌거 같고..
- react
- spring-boot
- jpa
- jwt
- redux-toolkit
jkshin
댓글 3
좋아요 0
조회수 317
DI 와 전반적인 구조 질문
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 네 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 네 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 네 [질문 내용] 1. 회원 서비스를 테스트할 때, DI를 하는 이유를 저는 아래처럼 이해했는데 이것이 맞는 이해인지 궁금합니다. MemberService() 를 실행하는 순간 MemoryMemberRepository 가 new로 생성되고, 그 다음줄에서 MemoryMemberRepository 를 새롭개 new로 생성한다. 현재의 코드에서는 Store 가 static 하게 선언되었으므로 그런 문제가 발생하지 않겠지만, 그렇지 않다면 MemberService 와 MemoryMemberRepository 가 서로 다른 레포지토리 인스턴스를 가지게된다. 위 내용이 맞다면, 모듈 테스트를 하지 않는다는 가정하에 해당 부분 뒤에 나오는 스프링 통합 테스트를 할 때는 이미 스프링 컨테이너에 레포지토리가 등록되어 있으므로 생성자를 활용한 의존성 주입이 필요없는 것이 맞나요? 아래 그림은 최종적으로 제가 구조를 이해한 것을 구조화 한 것인데 혹시 틀린 부분이 있는지 궁금합니다.
- java
- spring
- mvc
- spring-boot
손 훈서
댓글 1
좋아요 0
조회수 369
이번 final 과제 피드백 부탁드립니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요! 강의 잘 듣고 있습니다! 이번 과제 코드 피드백 부탁드립니다! 고맙습니다. <화면> <html> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>SignUp</title> <link rel="stylesheet" href="./final.css"> <script defer src="./final.js"></script> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <span id="header__title">코드캠프 회원가입</span> </div> <div class="wrapper__body"> <div class="wrapper__text"> <input type="text" id="email" placeholder="이메일을 입력해 주세요."> <span class="errorMsg email">이메일이 올바르지 않습니다.</span> <input type="text" id="name" placeholder="이름을 입력해 주세요."> <span class="errorMsg name">이름이 올바르지 않습니다.</span> <input type="text" id="pw1" placeholder="비밀번호를 입력해 주세요."> <span class="errorMsg pw1">비밀번호를 입력해주세요.</span> <input type="text" id="pw2" placeholder="비밀번호를 다시 입력해 주세요."> <span class="errorMsg pw2">비밀번호를 입력해주세요.</span> </div> <div class="wrapper__phone" oninput="phone()"> <input type="text" id="num1" maxlength="3"> - <input type="text" id="num2" maxlength="4"> - <input type="text" id="num3" maxlength="4"> </div> <div class="wrapper__certification"> <div class="cert__number"> <span id="certNum">000000</span> <button class="chkBtn" disabled="true">인증번호 전송</button> </div> <div class="cert__time"> <span id="certTimer">3:00</span> <button class="chkBtn" disabled="true">인증완료</button> </div> </div> <div class="wrapper__select"> <div class="select__locale"> <select id="locale"> <option selected disabled>지역을 선택하세요</option> <option value="서울">서울</option> <option value="경기">경기</option> <option value="인천">인천</option> </select> <span class="errorMsg locale">지역을 선택해주세요.</span> </div> <div class="select__gender"> <label for="woman"> <input type="radio" name="gender" id="woman"> 여성 </label> <label for="man"> <input type="radio" name="gender" id="man"> 남성 </label> </div> <span class="errorMsg gender">성별을 선택해주세요.</span> </div> </div> <div class="divideLine"></div> <div class="wrapper__check"> <!-- <button class="submit" disabled="true">가입하기</button> --> <button class="submit">가입하기</button> </div> </div> </body> </html> <css> *{ box-sizing: border-box; margin: 0; } html, body{ width: 540px; } .chkBtn{ width: 120px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; font-size: 16px; font-weight: 400; color: #0068FF; background-color: #FFF; cursor: pointer; } .chkBtn.active { width: 120px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; font-size: 16px; font-weight: 400; background-color: #0068FF; color: #FFF; cursor: pointer; } .errorMsg{ width: 100%; color: red; font-size: 10px; display: flex; flex-direction: column; align-items: center; visibility: hidden; } .wrapper{ width: 100%; height: 100%; padding: 60px 80px; border: 1px solid #AACDFF; border-radius: 20px; box-shadow: 7px 7px 39px rgba(0, 104, 255, .25); } .wrapper__header{ width: 100%; font-size: 32px; font-weight: 700; color: #0068FF; padding-bottom: 60px; } .wrapper__body{ width: 100%; } .wrapper__text > input{ width: 100%; height: 60px; margin-top: 20px; font-size: 16px; font-weight: 400; border: 1px solid #D2D2D2; border-radius: 7px; padding: 18px; } .wrapper__phone{ width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; } .wrapper__phone > input{ width: 100px; height: 40px; border: 1px solid #D2D2D2; border-radius: 7px; } .wrapper__certification { width: 100%; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; } #certNum, #certTimer{ color: #0068FF; font-size: 18px; padding-right: 20px; } .cert__time{ padding: 20px 0; } .wrapper__select{ width: 100%; display: flex; flex-direction: column; align-items: center; } .select__locale{ width: 100%; display: flex; flex-direction: column; justify-content: center; } #locale{ width: 100%; height: 60px; border: 1px solid #D2D2D2; border-radius: 7px; color: #797979; font-size: 16px; font-weight: 400; padding: 18px; } .select__gender{ width: 140px; display: flex; justify-content: space-between; padding-top: 30px; } .divideLine{ width: 100%; border: 1px solid #E6E6E6; margin: 20px 0; } .wrapper__check{ width: 100%; display: flex; justify-content: center; } .submit { width: 100%; height: 60px; font-size: 18px; font-weight: 400; color: #0068FF; background-color: #FFF; border: 1px solid #0068FF; border-radius: 7px; } <js> const submit = document.querySelector('.submit'); // 가입하기 const numberChk = document.querySelector('.cert__number .chkBtn'); // 인증번호 전송 const timeChk = document.querySelector('.cert__time .chkBtn'); // 인증완료 let time = 180; // 180초, 인증 시간 let isStarted = false; // email const emailChk = () => { let email = document.getElementById('email').value; if(email.includes('@') === true){ let isEmail = email.split('@')[1].includes('.'); if(isEmail === false){ document.querySelector('.errorMsg.email').style.visibility = 'visible'; document.querySelector('.errorMsg.email').value = ''; return false; } else { document.querySelector('.errorMsg.email').style.visibility = 'hidden'; return true; } } else { document.querySelector('.errorMsg.email').style.visibility = 'visible'; document.getElementById('email').value = ''; return false; } } // name const nameChk = () => { let name = document.getElementById('name').value; if(name.length === 0){ document.querySelector('.errorMsg.name').style.visibility = 'visible'; return false; } else { document.querySelector('.errorMsg.name').style.visibility = 'hidden'; return true; } } // pw const pwChk = () => { let pw1 = document.getElementById('pw1').value; let pw2 = document.getElementById('pw2').value; if(pw1 && pw2){ if(pw1 === pw2){ document.querySelector('.errorMsg.pw1').style.visibility = 'hidden'; document.querySelector('.errorMsg.pw2').style.visibility = 'hidden'; return true; } else { document.querySelector('.errorMsg.pw1').style.visibility = 'visible'; document.querySelector('.errorMsg.pw2').style.visibility = 'visible'; document.querySelector('.errorMsg.pw1').innerHTML = '비밀번호가 일치하지 않습니다.' document.querySelector('.errorMsg.pw2').innerHTML = '비밀번호가 일치하지 않습니다.' return false; } } else { document.querySelector('.errorMsg.pw1').style.visibility = 'visible'; document.querySelector('.errorMsg.pw2').style.visibility = 'visible'; return false; } } // phone const phone = () => { let num1 = document.getElementById('num1').value; let num2 = document.getElementById('num2').value; let num3 = document.getElementById('num3').value; if(num1.length === 3) { document.getElementById('num2').focus(); if(num2.length === 4) { document.getElementById('num3').focus(); } } if(num1.length === 3 && num2.length === 4 && num3.length === 4){ numberChk.classList.add('active'); certification(); } } const certification = () => { // 인증번호 numberChk.disabled = false; numberChk.addEventListener('click', e => { let randomNumber = String(Math.trunc(Math.random() * 1000000)).padStart(6, '0') document.getElementById('certNum').innerText = randomNumber; // 타이머 if(isStarted === false){ isStarted = true; timeChk.disabled = false; let timer = setInterval(() => { if(time >= 0){ let min = Math.trunc(time / 60); let sec = String(time % 60).padStart(2,'0'); document.getElementById('certTimer').innerText = `${min}:${sec}`; time--; } else { clearTime(timer); } }, 100) timeChk.addEventListener('click', e => { if(time >= 0){ alert('인증이 완료 되었습니다.'); clearTime(timer); submit.disabled = false; } }) } }) } const clearTime = (timer) => { timeChk.classList.remove('active'); numberChk.classList.remove('active'); document.getElementById('certNum').innerText = '000000'; document.getElementById('certTimer').innerText = '0:00'; timeChk.disabled = true; numberChk.disabled = true; isStarted = false; clearInterval(timer); } const checkValidation = () => { emailChk(); nameChk(); pwChk(); if(emailChk() && nameChk() && pwChk()) { return true; } else { return false; } } // 검증 submit.addEventListener('click', e => { checkValidation(); if(checkValidation()){ alert('코드캠프 가입을 축하합니다.'); } });
- react
- node.js
- seo
- graphql
- next.js
개발하는 알파카
댓글 1
좋아요 0
조회수 219
더 큰 숫자 찾기 문제 질문입니다
미해결
김영한의 자바 입문 - 코드로 시작하는 자바 첫걸음
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 더 큰 숫자 찾기문제에 int max = (a > b) ? a : b;가 아닌 String status = (a > b) ? "10" : "20";는 틀린 답인가요? 이유도 궁금합니다
- java
- 객체지향
cye7066
댓글 1
좋아요 0
조회수 257
인기 태그
인프런 TOP Writers
- 닉네임 5
- 정현섭 5
- eggmun(문성진) 4
- 박영준 4
- 김보노 3
- Brandon Kim 3
- limjn7 3
주간 인기글
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS