안녕하세요, 강의를 보던 중 궁금한게 있어서 문의 드립니다. 라이브서버를 다운받고 'open with live surver' 를 눌렀는데 크롬에서 영상처럼 연동이 안되네요. 인터넷 찾아보면서 세팅설정도 바꿔보고 했는데도 안되네요. 뭐가 문제인지 알려주실 수 있으신가요?

빌드 폴더가 아닌 오리지널 폴더로 npm start로 확인했을 때에는 알맞게 사진이 불러와집니다. 하지만 빌드 후에 serve 명령으로 실행했을 때에 Diary.js , Edit.js에서 사진을 제대로 불러오고 있지 않습니다.  제가 콘솔로 확인했을 때에 이미지의 상대 주소는 잘 찍히고 있는 것 같은데, 어디에서 빌드 후에 문제가 생기는 건지 잘 모르겠습니다. 깃허브 주소 남깁니다.https://github.com/yminjuu/Emotion-Diary

debug toolbar는 위치 설정 값은 commandCenter, docked, floating, hidden 인데요. 이 설정값의 기본 값은 floating 입니다. 이 위치 상태 기본 값을 변경하기 위해서 다양한 선택지가 있지만 기본적으로 세팅할 수 있는 방법을 알려드립니다. 프로젝트 내 .vscode/settings.json이 있으신 분{ ..., "debug.toolBarLocation": "commandCenter" }작업영역 세팅을 바꾸는 방법command+shift+p 입력 후 Preferences: Open Workspace Settings 입력Debug: Tool Bar Location 입력드롭다운 메뉴에서 원하는 위치 설정

수업 내용 코드는function checkPhone(myphone) { if (myphone.length < 10 || myphone.length > 11) { console.log("에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!"); return false; } else { return true; } } function getToken() { let result = String(Math.floor(Math.random() * 100000)).padStart(6, "0"); console.log(result); return result; } function sendTokenToSMS(myphone, result) { console.log(myphone + "번호로 인증번호" + result + "를 전송합니다."); } function createTokenOfPhone(myphone) { const isValid = checkPhone(myphone); if (isValid === false) return; const mytoken = getToken(); sendTokenToSMS(myphone, mytoken); } createTokenOfPhone("01012345678"); // 01012345678: 인자(argument) 이렇게 되어있는데createTokenOfPhone 함수에서 isValid 상수를 꼭 선언해야하나요?? function checkPhone(myphone) { if (myphone.length < 10 || myphone.length > 11) { console.log("에러 발생!!! 핸드폰 번호를 제대로 입력해 주세요!!!"); return true; } } function getToken() { let result = String(Math.floor(Math.random() * 100000)).padStart(6, "0"); console.log(result); return result; } function sendTokenToSMS(myphone, result) { console.log(myphone + "번호로 인증번호" + result + "를 전송합니다."); } function createTokenOfPhone(myphone) { if (checkPhone(myphone)) return; const mytoken = getToken(); sendTokenToSMS(myphone, mytoken); } createTokenOfPhone("01012345678"); // 01012345678: 인자(argument) 이렇게 checkPhone()이 문제있을 때만 true를 반환하고,checkPhone()이 true일 경우 return 처리하면 코드가 더 짧아지기는 하는데수업에서 말씀하시는 협업의 가독성을 위해서 isValid라는 상수를 선언해줘야 하는지 아니면 제가 생각한 방식으로 코드를 줄여도 괜찮은건지 궁금합니다.

const textField = screen.getByPlaceholderText('텍스트를 입력해 주세요.'); expect(textField).toHaveClass('my-class');이부분에서 className이란 내부 props, state 값을 검증하는 게 아닌가 싶어서 질문을 드렸습니다. 물론, className에 따라 변경되는 DOM을 파악한다는 의미로도 해석이 될 수는 있을 것 같긴 하지만 더 정확한 문맥을 알고 싶어서 질문드렸습니다..!

LocalStorage 사용 강의의 16분 50초 부근 "삭제하기" 버튼 관련 질문입니다.처음에 혼자 구현을 하려고 할 때 originData.id 대신 id를 onRemove에 파라미터로 전달했을 때 작동이 안됐는데 originData.id로 해야 삭제되더라고요. 콘솔로 찍었을 때 둘 다 일기 데이터의 id로 같은 걸 가리키는 것으로 나오는데 제가 잘못 알고 있는 부분이 있을까요? 안되는 이유가 무엇인가요? const handleDelete = () => { if (window.confirm("정말 삭제하시겠습니까?")) { console.log(id); console.log(originData.id); onRemove(originData.id); navigate("/", { replace: true }); } }; 

 앞 강의 끝날때는 지연을 줄이기 위해 로컬스토리지에 저장하는걸 알아보자 하고 끝났는데,해당강의에서는 로컬스토리지 중복체크 내용을 다루고 계셔서 로컬스토리지에 저장하는 장점에 대한 궁금증이 생깁니다.강의 내용을 보면 로컬스토리지 저장된 데이터와 관련된거 먼저 보여주고, 통신 데이터가 로컬스토리지와 다르면 다른 데이터를 로컬에 저장하면서 관련된걸 보여주는식인것 같습니다.제 생각으론 같은 지역 같은 날씨, 그리고 자주 접속하거나 새로고침을 자주 한다면 좋은 방법같은데,다른 지역 이나 다른날씨 라면 처음 데이터가 오히려 잘못된걸 보여주고 늦게 바뀌는거라 그런면에서 보면 해당 기능이 장점인지가 궁금합니다.만약 큰 장점이 아니라면 로컬에 저장하고, 그 정보를 먼저보여주고, 다르다면 로컬정보 바꾸고, 해당 정보 보여주고 하는 과정의 기능이 필요한가 의문이 듭니다.아무래도 지연을 줄이기위해 로컬스토리지를 사용한다길래 무슨 방법이 있나 싶었다가 기대했던것과 다른방향이라 의문이 생겨 질문남겨봅니다.제가 잘못 이해했거나, 놓치고 있는 다른 이유가 있다면 알려주시면 감사하겠습니다.

안녕하세요.강의 잘 듣고 있습니다! TypeOrm으로 OneToMany relation을 추가하려고 하는데 before initialization 에러가 발생하고 있는데 해결이 안되고 있습니다ㅠ확인 부탁드려요!@Entity('new_users') export class UserModel { @PrimaryColumn() id: string; @Column() name: string; @DeleteDateColumn({ name: 'deleted_at' }) deletedAt: Date; @CreateDateColumn({ name: 'created_at' }) createdAt: Date; @UpdateDateColumn({ name: 'updated_at' }) updatedAt: Date; @OneToMany(() => UserSocialModel, (userSocial) => userSocial.user) userSocials: UserSocialModel[]; }@Entity('new_user_socials') export class UserSocialModel { @PrimaryColumn() id: string; @Index() @ManyToOne(() => UserModel, (user) => user.userSocials) user: UserModel; }

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. function solution(arr) { let answer = arr; for (let i = 0; i < arr.length; i++) { for (let j = 1; j < arr.length; j++) { if (arr[j - 1] > arr[j]) { [arr[j - 1], arr[j]] = [arr[j], arr[j - 1]]; } } } return answer; } // test case console.log(solution([11, 7, 5, 6, 10, 9]));

브라우저 개발자도구탭 열면 보이는 쿠키나, 로컬스토리지에 박혀있는 값들도 string인지 궁금합니다.제가 알고 있기로는, 프론트에서 서버로 값 전달할때 string으로 변환해서 보내야 하는것으로 알고있는데 반대로 서버에서 전달받은 값들도 전부 string인지 궁금합니다.

단순하게 값이 없는 변수를 먼저 선언 하는 이유가 궁금합니다.

lists라는 변수를 forEach를 사용하려면 Array로 재할당 한다음에 forEach 사용 할수 있는것을 알았습니다.그런데 사용하기 불편해서 테스트 하다가 알게 됐는데, 변수 지정할 때 querySelectorAll로 선택하니까 forEach 사용 할 수 있는 것을 알게됐어요.그렇다면 get으로 시작하는 메서들 보다 쿼리 선택자를 사용하는게 더 좋은??건가요?좋고 나쁘고의 개념이 아니라면, get메서드와 쿼리 선택자의 쓰임새가 상황에 따라 따로 있는지 궁금하니다.위 질문들은 간략하게 정리 해보면, 쿼리 선택자가 사용하기 더 편한데 업무에서 get 메서드 사용하는지 궁금합니다.

- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 웬만하면 정상적으로 돌아가는데 누르다보면 한번씩 스크롤이 끝까지 안올라가고 중간에 멈출때가 있는데, 해결 방법이 따로 있는지 궁금합니다 헤더 영역을 처음부터 나타나게 하지 않고, 어느정도 스크롤이 되고 나서 띄우는 사이트들이 많은데 이것 때문에 그렇게 처리하는건지 궁금합니다 

제 프로젝트강사님의 프로젝트 제 프로젝트는 스크롤이 무조건 안되고 일기장 화면이 꽉 찹니다.aspect-ratio도 둘 다 auto로 되어있고 개발자 도구로 확인해보았는데 해결되지 않아 질문 드립니다. 기본 설정에서 빼먹은 게 있을까요?

안녕하세요 자바 개발만 하다가 노드에 관심이 있어 공부하러 온 학생입니다.영상을 보다가 궁금한 점이 있어 질문 드리는데요.case 1 : function greeting(name){ console.log(`${name}님 안녕하세요.`);}case 2 : let greeting = function(name){ console.log(`${name}님 안녕하세요.`);}두 방법 동일하게 동작하는 것은 알겠는데case 1이 아닌 2번을 굳이 사용하는 이유를 잘 모르겠습니다.결국 선언된 함수의 호출은 동일하게 하는데let으로 함수를 선언하는 이유가 궁급합니다!!

안녕하세요.10분 30초 쯤에useEffect(() => { }, [originData, isEdit]);여기서 만약 dependency array에 빈 배열을 전달해주면 구체적으로 어떤 문제가 생기나요?home에서 일기 수정하기 버튼이나 새로 만들기 버튼을 누를 때마다 DiaryEditor가 mount 된다고 생각하여 빈 배열을 넣어줘도 된다고 생각했는데, 그게 아니라 리렌더가 되는 건가요?  

개요로그인 성공 후 인덱스 페이지로 넘어갑니다.인덱스 페이지에는 "테스트 버튼" 이라는 버튼을 클릭하면, test 로드하는 api 를 호출하도록 했습니다.그러나 api 요청만 진행되고, 페이지는 바뀌지 않습니다.개발자도구 메시지에 해당 페이지의 html 코드만 출력됩니다. 참고자료index.html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>인덱스 페이지</title> <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> </head> <body> <h1>환영합니다!</h1> <p>성공적으로 로그인하셨습니다.</p> <button id="logoutButton">로그아웃</button> <button id="testButton">테스트 버튼</button> <script> $(document).ready(function() { // 로그아웃 버튼 이벤트 $('#logoutButton').click(function() { // 로컬 스토리지에서 토큰 제거 localStorage.removeItem('accessToken'); // 로그인 페이지로 리다이렉션 window.location.href = '/login'; }); // 테스트 버튼 이벤트 $('#testButton').click(function() { // 로컬 스토리지에서 토큰 가져오기 const token = localStorage.getItem('accessToken'); if (token) { $.ajax({ url: '/api/test', // 요청할 서버의 URL type: 'GET', // HTTP 메서드 beforeSend: function(xhr) { // 요청 헤더에 토큰 추가 xhr.setRequestHeader('Authorization', token); }, success: function(data) { // 요청 성공 시 로직 console.log("테스트 요청 성공:", data); alert("테스트 요청 성공"); }, error: function(xhr, status, error) { // 요청 실패 시 로직 console.error("테스트 요청 실패:", xhr.responseText); alert("테스트 요청 실패"); } }); } else { alert("토큰이 없습니다. 다시 로그인해주세요."); } }); }); </script> </body> </html> 보이는 것처럼 로컬 스토리지에서 토큰을 가져온 후 요청 헤더에 다시 담아서 전송합니다.JwtAuthorizationFilter@Override protected void doFilterInternal(HttpServletRequest req, HttpServletResponse res, FilterChain filterChain) throws ServletException, IOException { // 헤더에서 토큰 추출 log.info("헤더에서 토큰 추출"); String tokenValue = jwtUtil.getJwtFromHeader(req); log.info("토큰 : " + tokenValue); if (StringUtils.hasText(tokenValue)) { // 토큰 유효성 검사 if (!jwtUtil.validateToken(tokenValue)) { log.info("Token Error"); return; } Claims info = jwtUtil.getUserInfoFromToken(tokenValue); try { setAuthentication(info.getSubject()); } catch (Exception e) { log.error(e.getMessage()); return; } } else { log.info("토큰이 없습니다."); } filterChain.doFilter(req, res); } // 인증 처리 public void setAuthentication(String loginId) { log.info("인증 성공"); SecurityContext context = SecurityContextHolder.createEmptyContext(); Authentication authentication = createAuthentication(loginId); context.setAuthentication(authentication); SecurityContextHolder.setContext(context); } // 인증 객체 생성 private Authentication createAuthentication(String loginId) { log.info("인증 객체 생성"); UserDetails userDetails = userDetailsService.loadUserByUsername(loginId); return new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities()); }이렇게 JwtAuthorizationFilter 가 있을 때 헤더에서 토큰이 추출되는 거까지 로그에 다 출력되고, 인증 객체까지 생성되는 걸 확인했습니다. Console2024-02-26T14:31:24.699+09:00 INFO 59767 --- [nio-8081-exec-3] JWT 검증 및 인가 : 토큰 : eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ0ZXN0NiIsImF1dGgiOiJPV05FUiIsImlhdCI6MTcwODkyNDY0NiwiZXhwIjoxNzA4OTI4MjQ2fQ.TLjHCc1_ZtTbzGb-2c0ueLmxgCyxQf1rUQs4DkqMv_c 2024-02-26T14:31:24.706+09:00 INFO 59767 --- [nio-8081-exec-3] JWT 검증 및 인가 : 인증 성공 2024-02-26T14:31:24.706+09:00 INFO 59767 --- [nio-8081-exec-3] JWT 검증 및 인가 : 인증 객체 생성 Hibernate: /* <criteria> */ select u1_0.id, u1_0.email, u1_0.login_id, u1_0.password, u1_0.role from users u1_0 where u1_0.login_id=? 2024-02-26T14:31:24.722+09:00 INFO 59767 --- [nio-8081-exec-3] TestController : test controller로그를 보면 test controller 를 호출하는 거까지 확인할 수 있었습니다.그러나 페이지는 로드되지 않고, 메시지에 html 코드만 출력이 됩니다. 자료 Test.html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> <title>Test Page</title> </head> <body> <h1>This is a test page.</h1> </body> </html> 정리로그인 성공 후 인덱스 페이지로 넘어감해당 인덱스 페이지에서 test 페이지로 넘어가고자 함인가 필터 모두 거치고, 토큰 값이 전달되는 거까지 확인했음test controller 까지 요청되지만, 정작 페이지는 불러와지지 않음 대체 제가 뭘 놓친 걸까요 ㅠㅠㅠㅠ 이거때문에 며칠 동안 머리 싸매고 있습니다,,, 제발 도와주세요,,, 

올려주신 소스코드 파일을 찾아봐도 못 찾겠어서요 ㅠㅠ 어디에 있을까요?

target[prop] = newValue; 를 하지 않고 render(newValue)를 해도 값이 바껴서 출력되는걸 확인할 수 있는데, target[prop]에 newValue 값을 넣어주는 이유가 있을까요?

미로 탐색에서 재귀에 진입하기 전 board에 표시를 할 때,boarr[nx][ny] = 1이 맞나요?해당 자리에 1로 표시를 해놓고 다음으로 넘어가는 개념이니까arr[x][y] = 1이렇게 하는게 맞지않나라는 생각이 드는데혹시 제가 잘못 이해를 한 걸까요?결과는 똑같이 나와서 의문이네요.// 강사님의 답 if(nx >= 0 && nx <= 6 && ny >= 0 && ny <= 6 && board[nx][ny] === 0){ board[x][y] = 1 DFS(nx,ny) board[x][y] = 0 } // 저의 답 if(nx >= 0 && nx <= 6 && ny >= 0 && ny <= 6 && board[nx][ny] === 0){ board[x][y] = 1 ★★★ DFS(nx,ny) board[x][y] = 0 ★★★ }