uncaught syntaxerror: missing ) after argument list 오류

update.jsp파일의 user이름을 뿌려주기위해 'EL표현식'으로 감싸주어 '변수'로 처리해주었고 문법에 이상이 없었으나 '프로필페이지'로 넘어가는 과정에서 JavaScript의 문법이 오류라고 계속 뜸.

@RequiredArgsConstructor
@Service
public class UserService {

    private final UserRepository userRepository;

    private final BCryptPasswordEncoder bCryptPasswordEncoder;

    public User 회원프로필(int userId) {

        //SELECT * FROM image WHERE userId = :userId;
        User userEntity = userRepository.findById(userId).orElseThrow(() -> { //쿼리가 이닌 JPA로
           throw new CustomException("해당 프로필 페이지는 없는 페이지입니다.");
        });

        return userEntity;
    }

-> UserService의 CustomException에 걸려 "해당 프로필 페이지는 없는 페이지입니다" 가 VSCODE에 계속해서 나타나는 상황.

그리고 id가 1인 user가 DB에 없다고 뜸.

그리고 application.yml에 create로 바꾸고 실행을 시켜도 DB가 날라가지 않는 상황이 발생함. -> 일일히 DB의 테이블들을 지워주는 작업을 진행하였다.

                <li class="navi-item">
<%--                  <a href="/user/1"> /user/1로 '하드코딩'이 되어있는 상황 --%>
               <li class="navi-item"><a href="/user/${principal.user.id}">
                     <i class="far fa-user">

 

header.jsp에  <a href = "/user/1"> 이라고 '하드코딩'으로 id가 지정이 되있는 상황이었다. -> EL표현식으로 '변수'로 바꾸어주는 작업을 하였다.

update.jsp 파일에는 문법적인 오류가 없었다.

 

update.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>

<%@ include file="../layout/header.jsp"%>

<!--프로필셋팅 메인-->
<main class="main">
   <!-- 프로필셋팅 섹션 -->
   <section class="setting-container">
      <!-- 프로필셋팅 아티클 -->
      <article class="setting__content">

         <!--프로필셋팅 아이디영역-->
         <div class="content-item__01">
            <div class="item__img">
               <img src="#" onerror="this.src='/images/person.jpeg'" />
            </div>
            <div class="item__username">
               <h2>${principal.user.username}</h2>
            </div>
         </div>
         <!--프로필셋팅 아이디영역end-->

         <!--프로필 수정-->
         <form id="profileUpdate" onsubmit="update(${principal.user.id}, event)">
            <div class="content-item__02">
               <div class="item__title">이름</div>
               <div class="item__input">
                  <input type="text" name="name" placeholder="이름"
                     value="${principal.user.name}" required = "required"/>
               </div>
            </div>
            <div class="content-item__03">
               <div class="item__title">유저네임</div>
               <div class="item__input">
                  <input type="text" name="username" placeholder="유저네임"
                     value="${principal.user.name}" readonly="readonly" />
               </div>
            </div>
            <div class="content-item__04">
               <div class="item__title">패스워드</div>
               <div class="item__input">
                  <input type="password" name="password" placeholder="패스워드" required = "required" />
               </div>
            </div>
            <div class="content-item__05">
               <div class="item__title">웹사이트</div>
               <div class="item__input">
                  <input type="text" name="website" placeholder="웹 사이트"
                     value="${principal.user.website}" />
               </div>
            </div>
            <div class="content-item__06">
               <div class="item__title">소개</div>
               <div class="item__input">
                  <textarea name="bio" id="" rows="3">${principal.user.bio}</textarea>
               </div>
            </div>
            <div class="content-item__07">
               <div class="item__title"></div>
               <div class="item__input">
                  <span><b>개인정보</b></span> <span>비즈니스나 반려동물 등에 사용된 계정인 경우에도
                     회원님의 개인 정보를 입력하세요. 공개 프로필에는 포함되지 않습니다.</span>
               </div>
            </div>
            <div class="content-item__08">
               <div class="item__title">이메일</div>
               <div class="item__input">
                  <input type="text" name="email" placeholder="이메일"
                     value="${principal.user.email}" readonly="readonly" />
               </div>
            </div>
            <div class="content-item__09">
               <div class="item__title">전회번호</div>
               <div class="item__input">
                  <input type="text" name="phone" placeholder="전화번호"
                     value="${principal.user.phone}" />
               </div>
            </div>
            <div class="content-item__10">
               <div class="item__title">성별</div>
               <div class="item__input">
                  <input type="text" name="gender" value="${principal.user.gender}" />
               </div>
            </div>

            <!--제출버튼-->
            <div class="content-item__11">
               <div class="item__title"></div>
               <div class="item__input">
                  <button>제출</button>
               </div>
            </div>
            <!--제출버튼end-->

         </form>
         <!--프로필수정 form end-->
      </article>
   </section>
</main>

<script src="/js/update.js"></script>

<%@ include file="../layout/footer.jsp"%>

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>


<sec:authorize access="isAuthenticated()">
   <sec:authentication property="principal" var="principal"/>
</sec:authorize>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photogram</title>

   <!-- 제이쿼리 -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   
   <!-- Style -->
   <link rel="stylesheet" href="/css/style.css">
   <link rel="stylesheet" href="/css/story.css">
   <link rel="stylesheet" href="/css/popular.css">
   <link rel="stylesheet" href="/css/profile.css">
   <link rel="stylesheet" href="/css/upload.css">
   <link rel="stylesheet" href="/css/update.css">
   <link rel="shortcut icon" href="/images/insta.svg">
   
   <!-- Fontawesome -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
   <!-- Fonts -->
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>

<body>
   
   <header class="header">
      <div class="container">
         <a href="/" class="logo">
            <img src="/images/logo.jpg" alt="">
         </a>
         <nav class="navi">
            <ul class="navi-list">
               <li class="navi-item"><a href="/">
                     <i class="fas fa-home"></i>
                  </a>
               </li>
               <li class="navi-item">
                  <a href="/image/popular">
                     <i class="far fa-compass"></i>
                  </a>
               </li>
               <li class="navi-item">
<%--                  <a href="/user/1"> /user/1로 '하드코딩'이 되어있는 상황 --%>
               <li class="navi-item"><a href="/user/${principal.user.id}">
                     <i class="far fa-user">

                     </i>
                  </a>
               </li>
            </ul>
         </nav>
      </div>
   </header>