173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
강의에 나온대로 require()로 따라하던 중 import가 더 최신방식이라는 이야기를 듣게 되었습니다. 구글링을 해보니 require()를 쓰는 쪽은 CommonJS(CJS)이고 import 쓰는 쪽이 ESM이라는 걸 알게되었습니다 Es6(2015)부터 import를 쓸 수 있던거 같은데 그 이후에 나온 강의가 require를 쓰게된 이유가 있을까요? 사용되는 패키지의 호환성 이슈인지 다른 이유인지 궁금합니다
미해결
스프링부트 시큐리티 & JWT 강의
안녕하세요 늘 좋은 강의 올려주셔서 감사합니다. authenticationManager 파라미터 전달 부분에서 문제가 있어 이렇게 게시글 남깁니다! 새로 올려주신 소스코드를 보며 새로 업데이트된 시큐리티에서 사용하기위해 authenticationManager 를 파라미터로 전달하는 부분을 적용하였습니다 그런데 Authentication authentication = authenticationManager.authenticate(authenticationToken); 부분에서 loadbyUsername() 함수를 호출하지 못하고 있습니다... JwtAuthenticationFilter // 유저네임 패스워드 토큰 생성 UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken( loginUser.getUsername(), loginUser.getPassword() ); System.out.println("JwtAuthenticationToken : 토큰생성완료"); // authenticate() 함수가 호출 되면 인증 프로바이더가 유저 디테일 서비스의 // loadUserByUsername(토큰의 첫번째 파라메터) 를 호출하고 // UserDetails를 리턴받아서 토큰의 두번째 파라메터(credential)과 // UserDetails(DB값)의 getPassword()함수로 비교해서 동일하면 // Authentication 객체를 만들어서 필터체인으로 리턴해준다. // Tip: 인증 프로바이더의 디폴트 서비스는 UserDetailsService 타입 // Tip: 인증 프로바이더의 디폴트 암호화 방식은 BCryptPasswordEncoder // 결론은 인증 프로바이더에게 알려줄 필요가 없음. Authentication authentication = authenticationManager.authenticate(authenticationToken); System.out.println("authentication : authentication 생성 완료"); PrincipalDetails principalDetails = (PrincipalDetails) authentication.getPrincipal(); System.out.println("Authentication : " + principalDetails.getUser().getUsername()); return authentication; SecurityConfig @Configuration @EnableWebSecurity @RequiredArgsConstructor public class SecurityConfig { private final CosConfig cosConfig; @Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { AuthenticationManager authenticationManager = http.getSharedObject(AuthenticationManager.class); http.csrf(csrf -> csrf.disable()); http.sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS)); http.addFilter(cosConfig.corsFilter()); // cors 허용 설정 http.addFilterBefore(new MyFilter3(), SecurityContextPersistenceFilter.class); http.formLogin(login -> login.disable()); http.httpBasic(basic -> basic.disable()); http.addFilter(new JwtAuthenticationFilter(authenticationManager)); http.authorizeHttpRequests(request -> request.requestMatchers("/api/v1/user/**") .hasAnyRole("USER", "MANAGER", "ADMIN") .requestMatchers("/api/v1/manager/**") .hasAnyRole("MANAGER", "ADMIN") .requestMatchers("/api/v1/admin/**") .hasRole("ADMIN") .anyRequest().permitAll() ); return http.getOrBuild(); } 와 같이 SecurityConfig를 업데이트된 Spring Security 독스를 보고 선생님께서 강의해주신 내용대로 만들어보았습니다. 터미널에서는 JwtAuthentication Filter : 로그인 시도중 JwtAuthenticationFilter : UserEntity(id=0, email=null, password=qwer1234, username=ssar, role=null, createDate=null) JwtAuthenticationToken : 토큰생성완료 와 같이 JwtAuthenticationToken : 토큰생성완료 까지는 정상적으로 되는걸 확인하였습니다. 이후 loadByUsername() 부분에 따로 출력을 찍어 확인한결과 호출이 안되는걸 확인했습니다. @Override public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException { UserEntity userEntity = this.userDao.findByUsername(username); System.out.println("================ loadUserByUsername ================"); System.out.println(userEntity); System.out.println("---------------- loadUserByUsername -----------------"); return new PrincipalDetails(userEntity); } 어떤 부분이 잘못되어서 그런건지 찾지 못하여 게시글 남깁니다! 늘 좋은강의 감사합니다! 개인적으로 문제점이 된다고 생각한 부분 AuthenticationManager authenticationManager = http.getSharedObject(AuthenticationManager.class); 에서 authenticationManager를 받는 부분이 제대로 안되는것 같습니다... 추가로 SecurityConfig 에서 authenticationManager 부분을 로그로 찍어본 결과 null 출력되는걸 확인했습니다... authenticationManager부분이 생성이 안되는걸까요?
미해결
스프링부트 시큐리티 & JWT 강의
@Configuration public class BCryptConfig { @Bean public PasswordEncoder passwordEncoder() { return new BCryptPasswordEncoder(); } } 위와 같이 Config class에 PasswordEncoder 빈을 생성했는데도 Description: Parameter 1 of constructor in domain.Member.service.MemberService required a bean of type 'org.springframework.security.crypto.password.PasswordEncoder' that could not be found. Action: Consider defining a bean of type 'org.springframework.security.crypto.password.PasswordEncoder' in your configuration. Process finished with exit code 1 와 같이 에러가 발생하면 어떻게 해야할까요?
미해결
지금 당장 NodeJS 백엔드 개발 [사주 만세력]
settings.json 에서 3번 위치에 formatOnSave 를 true 로 변경합니다. 위에서부터 진행을 못하고 있습니다. Docker도 연결 에러고..... ㅠㅠ 원격으로 도와주실수 없을까요?
미해결
지금 당장 NodeJS 백엔드 개발 [사주 만세력]
아래 화면이 나와서 True로 변경할 수가 없습니다. 도와 주세요........
미해결
지금 당장 NodeJS 백엔드 개발 [사주 만세력]
위 화면과 같지 않고 아래 화면으로 나타납니다. 도와 주세요.
미해결
지금 당장 NodeJS 백엔드 개발 [사주 만세력]
위 화면이 아니고 아래 화면이 나와서 True로 변경할 수가 없습니다. 도와주세요.
미해결
지금 당장 NodeJS 백엔드 개발 [사주 만세력]
(사진)
미해결
스프링부트 시큐리티 & JWT 강의
당연히 웹앱이 API에 요청을 할때도 올바른 대상이 요청하는게 맞는지 별도의 검증이 필요하지만 우선 그건 무시하고 순수히 웹앱의 유저 인증만 생각했을때의 이야기입니다.. 프론트 역할을 하는 html, css, (바닐라js or jQuery) + spring boot(thymeleaf, spring security) 웹어플리케이션 프로젝트가 있고 회원이 있는지 조회할 수 있는 API 서버(DB와 연결된 spring boot)가 별도로 존재했을때 어떤 프로젝트에 어떤 식으로 시큐리티 및 토큰생성 세팅을 해야할지 감이 잘 오지 않습니다.. 제가 구현하고자 하는건 회원/비회원에 따라 페이지를 동적으로 바꾸거나 (로그인이 로그아웃으로 바뀐다든지) 페이지에 접근을 못하게 하려고 합니다 (마이페이지) 제 생각에는 구현내용 둘 다 API를 굳이 갈 필요가 없기 때문에 웹앱단에서 검증이 이루어져야 할 것 같은데 맞을까요..? API는 회원 유무를 조회한 뒤, 존재하는 경우 단순히 유저정보(or 아예 토큰을 만들어서 넘긴다..?)를 웹앱에 넘겨주는 것까지가 역할이고, 따라서 Spring Security는 여기서 필요하지 않다 웹앱 프로젝트에 스프링 시큐리티 설정을 한 뒤, 스프링부트단에서 API로부터 전달받은 토큰, 혹은 유저정보를 가지고 인증을 처리한다 (하지만 어떻게..?) 이런 흐름이 맞는지 모르겠습니다..
해결됨
스프링부트 시큐리티 & JWT 강의
안녕하세요 수업중 막히는 부분이 있어서 질문 남깁니다. 현재 spring 3, security 6.2버전으로 진행중입니다. 구글링해서 강의 버전에 따른 오류 부분은 고쳤는데요.. ' 문제는 로그인 처리해서 PrincipalDetails에 db에 있는 유저 값을 잘 담기는 했는데.. security config에서 설정한 권한별 경로로 접근하는순간 302로 다시 로그인 홈페이지로 리다이렉트 돼서 수업 진행이 안됩니다.. 뭐가 문제인걸까요? ㅜㅜ @Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http .csrf(AbstractHttpConfigurer::disable) .cors(AbstractHttpConfigurer::disable) .sessionManagement(s -> s.sessionCreationPolicy(SessionCreationPolicy.STATELESS)); http .authorizeHttpRequests(au -> au.requestMatchers("/", "/join", "/login").permitAll() .requestMatchers("/user/**").authenticated() .requestMatchers("/manager/**").hasAnyRole("ADMIN", "MANAGER") .requestMatchers("/admin/**").hasRole("ADMIN") .anyRequest().authenticated() ); http.formLogin(f -> f.loginPage("/loginForm") .loginProcessingUrl("/login") .usernameParameter("userName") .passwordParameter("password") .defaultSuccessUrl("/") .permitAll()) .httpBasic(h -> h.disable()); // logout http.logout(logout -> logout. logoutRequestMatcher(new AntPathRequestMatcher("/logout")) .logoutSuccessUrl("/loginForm")); return http.build(); }
미해결
지금 당장 NodeJS 백엔드 개발 [사주 만세력]
docker 설치를 했는데, containers를 보면 failed to connect라고 나옵니다.
미해결
지금 당장 NodeJS 백엔드 개발 [사주 만세력]
아래 팝업 화면으로 계속 에러가 나고 있습니다. Failed to connect to MySQL at 127.0.0.1:3309 with user root unable to connect to 127.0.0.1:3309
미해결
스프링부트 시큐리티 & JWT 강의
강의를 토대로 로그인 페이지를 구현하고, 이를 이용해서 로그인 과정을 거치는 로직을 구현하는 도중에 문제가 발생했습니다. 커스텀 필터를 만들어서 각각 JWTAuthenticationFilter와 JWTAuthorizationFilter를 거치게끔 해놓고, JWTAuthenticationFilter까지는 잘 마무리 지었습니다만, successfulAuthentication 메소드에 response를 설정하고 JWTAuthorizationFilter로 넘길 때 request에 Token을 받아들이지 못합니다.(포스트맨으로 넘길 때는 잘 나오는데 왜그러는지 모르겠네요,,) @Override protected void successfulAuthentication(HttpServletRequest request, HttpServletResponse response, FilterChain chain, Authentication authResult) throws IOException, ServletException { System.out.println("========================================="); System.out.println("Authentication이 실행됨 : 인증이 완료되었다는 뜻임"); PrincipalDetails principalDetails=(PrincipalDetails)authResult.getPrincipal(); //RSA방식이 아닌, Hash암호방식 String jwtToken = JWT.create() .withSubject(principalDetails.getUsername()) // token 별명 느낌? .withExpiresAt(new Date(System.currentTimeMillis()+JWTProperties.EXPIRATION_TIME)) // Token 만료 시간 -> 현재시간 + 만료시간 .withClaim("id", principalDetails.getMember().getMemberID()) // 비공개 Claim -> 넣고싶은거 아무거나 넣으면 됨 .withClaim("username", principalDetails.getMember().getMemberName()) // 비공개 Claim .sign(Algorithm.HMAC512(JWTProperties.SECRET)); // HMAC512는 SECRET KEY를 필요로 함 //String jwtToken =TokenUtils.generateJwtToken(principalDetails.getMember()); response.addHeader(JWTProperties.HEADER_STRING, JWTProperties.TOKEN_PREFIX+jwtToken); response.setHeader(JWTProperties.HEADER_STRING, JWTProperties.TOKEN_PREFIX+jwtToken); response.setHeader(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_JSON_VALUE); System.out.println("response : "+response); System.out.println("JWTAuthenticationFilter에서의 response.getHeader('Authorization')) : "+response.getHeader(JWTProperties.HEADER_STRING)); [ JWTAuthorizationFilter.java ] @Log4j2 public class JWTAuthorizationFilter extends BasicAuthenticationFilter { private final MemberRepository memberRepository; public JWTAuthorizationFilter(AuthenticationManager authenticationManager, MemberRepository memberRepository){ super(authenticationManager); System.out.println("JWTAuthorizationFilter : 인증이나 권한이 필요한 주소가 요청됨"); System.out.println("========================================="); this.memberRepository=memberRepository; } // 인증이나 권한이 필요한 주소 요청이 있을 때 해당 필터를 타게 됨 @Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain) throws IOException, ServletException { //String header=request.getHeader("Authorization"); System.out.println("request : "+request); System.out.println("Authorization : "+request.getHeader(JWTProperties.HEADER_STRING)); String header=request.getHeader(JWTProperties.HEADER_STRING); System.out.println("JWTAuthorizationFilter에서의 JWTHeader : "+header); // JWT Token // Enumeration<String> headerNames = request.getHeaderNames(); // while (headerNames.hasMoreElements()) { // String headerName = headerNames.nextElement(); // System.out.println("Header: " + headerName + ", Value: " + request.getHeader(headerName)); // } // header가 있는지(유효한지) 확인 // 토큰이 잘못될 경우 다음 filter로 흘려 보낸다. if(header==null||!header.startsWith(JWTProperties.TOKEN_PREFIX)){ System.out.println("Not Allowed User"); chain.doFilter(request,response); return; } // JWT Token을 검증해서 정상적인 사용자인지 확인 String token = request.getHeader(JWTProperties.HEADER_STRING).replace(JWTProperties.TOKEN_PREFIX, ""); String memberID = JWT.require(Algorithm.HMAC512(JWTProperties.SECRET)).build().verify(token).getClaim("memberID").asString(); // verify()를 통해서 서명 System.out.println("token : "+token); System.out.println("memberID : "+memberID); // 서명이 정상적으로 동작했을 경우 if(memberID!=null){ Member memberEntity = memberRepository.findByMemberID(memberID); System.out.println("UserEntity 정상 : " +memberEntity); PrincipalDetails principalDetails = new PrincipalDetails(memberEntity); System.out.println("MemberName : "+memberEntity.getMemberName()); // JWT Token 서명을 통해서 서명이 정상적이면 Authentication 객체를 만들어준다. Authentication authentication = new UsernamePasswordAuthenticationToken(principalDetails, null, principalDetails.getAuthorities()); System.out.println("JWTAuthorization에서의 authentication : "+authentication); // 강제로 Security의 Session에 접근하여서 Authentication 객체를 저장시킨다. SecurityContextHolder.getContext().setAuthentication(authentication); System.out.println("Successfully Saved Authentication" + authentication); } // super.doFilterInternal(request, response, chain); chain.doFilter(request,response); } } 더 자세한 내용은 github 참고 부탁드립니다. https://github.com/msun0215/SWProject/tree/1208
해결됨
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
async function ( if (){await 어쩌구} ) 여기서 if문 안에 await가 들어있으면 await가 있는 곳이 최상위 스코프가 아닌데 작동이 가능한가요? 최상위 스코프에서만 async function 생략 가능하다는 말은 async function(await 어쩌구) 이래야 바로 await 어쩌구 로 꺼낼 수 있고 if(){await 어쩌구} 는 async function 밖으로 꺼낼 수 없는 것으로 이해되어서요.. 제가 최상위 스코프가 뭔지 잘 모르는 것 같기도 합니다..ㅠㅠ [제로초 강좌 질문 필독 사항입니다] 질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다. 도움이 되는 질문을 하는 방법을 알려드립니다. https://www.youtube.com/watch?v=PUKOWrOuC0c 0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다. 1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다. 2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다. 3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요. 4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요. 5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다. 6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.
미해결
따라하며 배우는 NestJS
이런 오류메세지가 나오는데 방법좀 부탁드립니다. nestJS서버는 5432포트로 돌아가고 있습니다!!
해결됨
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
[passport 세팅 및 회원가입 만들기] 강의 중 passport 미들웨어를 왜 express-session 밑에다가 반드시 적어야한다고 하셨는데 이유는 나오지 않았었습니다 이유는 무엇일까요? GPT도 써보았지만 생성형 AI라서 틀린 대답일 수 있으므로 강의자분께 질문드립니다.
해결됨
Spring Boot JWT Tutorial
2023년 11월 말 JWT학습 본 무료강의를 알게돼 학습했습니다. 학습중에 일부 메서드나 이나 라이브러리들이 deprecate 인 경우가 있어서 학습 중 정리한 markdown 파일 공유합니다 ㅎㅎ 소스도 같이 공유되어 있으니 학습시 참고하시면 좋을 것 같네요! https://github.com/gomshiki/jwtStudy/blob/main/studymarkdown/jwtProject_note.md
미해결
스프링부트 시큐리티 & JWT 강의
안녕하세요. 혹시 PostMan으로 Authorization 체크 해제 후 Post했을때 500error 뜰경우 ( MyFilter3 에 nullpoint오류 ) Spring Security 설정에서 MyFilter3() 필터설정부분 주석해주시면 정상적으로 진행됩니다~!
해결됨
Spring Boot JWT Tutorial
package NewYear.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity; import org.springframework.security.config.annotation.web.builders.HttpSecurity; import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity; import org.springframework.security.config.annotation.web.configuration.WebSecurityCustomizer; import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer; import org.springframework.security.web.SecurityFilterChain; import org.springframework.security.web.util.matcher.AntPathRequestMatcher; //기본적인 웹 보안을 활성화 하는 어노테이션 @Configuration @EnableWebSecurity @EnableMethodSecurity public class SecurityConfig { @Bean public WebSecurityCustomizer configure() { return (web) -> web.ignoring() .requestMatchers(new AntPathRequestMatcher("/h2-console/**")) .requestMatchers(new AntPathRequestMatcher("/favicon.ico")); } @Bean public SecurityFilterChain filterChain(HttpSecurity httpSecurity) throws Exception { return httpSecurity .csrf(AbstractHttpConfigurer::disable) .authorizeHttpRequests((registry) -> registry.requestMatchers(new AntPathRequestMatcher("/api/hello")).permitAll() .anyRequest().authenticated() ) .build(); } } @EnableWebSecurity를 비활성화도 해보고 커뮤니티에 올라온 코드로 다 해봤는 데 접근이 401에러로 접근이 안되는 것 같습니다 ㅠㅠ 해결방안이 있을까요 스프링부트 버전은 3.2.0입니다
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
[제로초 강좌 질문 필독 사항입니다] 질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다. 도움이 되는 질문을 하는 방법을 알려드립니다. https://www.youtube.com/watch?v=PUKOWrOuC0c 0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다. 1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다. 2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다. 3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요. 4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요. 5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다. 6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다. 사진업로드를 하려할때 미리보기가 뜨지 않습니다. uploads에는 올린 사진들이 잘 뜹니다. 게시글을 업로드하려 짹짹을 누르면 post 라우터가 없다고 뜹니다. POST /post 라우터가 없습니다. 404 Error: POST /post 라우터가 없습니다. at C:\Users\jyoun\udr_node\lecture\ch9\app.js:53:18 at Layer.handle [as handle_request] (C:\Users\jyoun\udr_node\lecture\ch9\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (C:\Users\jyoun\udr_node\lecture\ch9\node_modules\express\lib\router\index.js:328:13) at C:\Users\jyoun\udr_node\lecture\ch9\node_modules\express\lib\router\index.js:286:9 at Function.process_params (C:\Users\jyoun\udr_node\lecture\ch9\node_modules\express\lib\router\index.js:346:12) at next (C:\Users\jyoun\udr_node\lecture\ch9\node_modules\express\lib\router\index.js:280:10) at C:\Users\jyoun\udr_node\lecture\ch9\node_modules\express\lib\router\index.js:646:15 at next (C:\Users\jyoun\udr_node\lecture\ch9\node_modules\express\lib\router\index.js:265:14) at C:\Users\jyoun\udr_node\lecture\ch9\routes\page.js:12:3 at Layer.handle [as handle_request] (C:\Users\jyoun\udr_node\lecture\ch9\node_modules\express\lib\router\layer.js:95:5) controllers/post.js const Post = require('../models/post'); const Hashtag = require('../models/hashtag'); exports.afterUploadImage = (req, res) => { console.log(req.file); res.json({ url: `/img/${req.file.filename}` }); }; exports.uploadPost = async (req, res, next) => { try { const post = await Post.create({ content: req.body.content, img: req.body.url, UserId: req.user.id, }); const hashtags = req.body.content.match(/#[^\s#]*/g); if (hashtags) { const result = await Promise.all(hashtags.map((tag) => { return Hashtag.findOrCreate({ where: { title: tag.slice(1).toLowerCase() } }); })); console.log('result', result); await post.addHashtags(result.map(r => r[0])); } res.redirect('/'); } catch (error) { console.error(error); next(error); } }; routes/post.js const express = require('express'); const multer = require('multer'); const path = require('path'); const fs = require('fs'); const { afterUploadImage, uploadPost } = require('../controllers/post'); const { isLoggedIn } = require('../middlewares'); const router = express.Router(); try { fs.readdirSync('uploads'); } catch (error) { console.error('uploads 폴더가 없어 uploads 폴더를 생성합니다.'); fs.mkdirSync('uploads'); } const upload = multer({ storage: multer.diskStorage({ destination(req, file, cb) { cb(null, '/uploads'); }, filename(req, file, cb) { const ext = path.extname(file.originalname); cb(null, path.basename(file.originalname, ext) + Date.now() + ext); }, }), limits: { fileSize: 5 * 1024 * 1024 }, }); // POST /post/img router.post('/img', isLoggedIn, upload.single('img'), afterUploadImage); // POST /post const upload2 = multer(); router.post('/', isLoggedIn, upload2.none(), uploadPost); module.exports = router; 개발자 도구로 보면 짹짹을 눌렀을때 갈곳이 없다는데 저는 깃헙 복사해서 똑같이 했는데 뭐가 문제인지 모르겠습니다. app.js const express = require('express'); const cookieParser = require('cookie-parser'); const morgan = require('morgan'); const path = require('path'); const session = require('express-session'); const nunjucks = require('nunjucks'); const dotenv = require('dotenv'); const passport = require('passport'); dotenv.config(); const pageRouter = require('./routes/page'); const authRouter = require('./routes/auth'); const { sequelize } = require('./models'); const passportConfig = require('./passport'); const app = express(); passportConfig(); // 패스포트 설정 app.set('port', process.env.PORT || 8001); app.set('view engine', 'html'); nunjucks.configure('views', { express: app, watch: true, }); sequelize.sync({ force: false }) .then(() => { console.log('데이터베이스 연결 성공'); }) .catch((err) => { console.error(err); }); app.use(morgan('dev')); app.use(express.static(path.join(__dirname, 'public'))); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ resave: false, saveUninitialized: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false, }, })); app.use(passport.initialize()); app.use(passport.session()); app.use('/', pageRouter); app.use('/auth', authRouter); app.use((req, res, next) => { const error = new Error(`${req.method} ${req.url} 라우터가 없습니다.`); error.status = 404; next(error); }); app.use((err, req, res, next) => { res.locals.message = err.message; res.locals.error = process.env.NODE_ENV !== 'production' ? err : {}; res.status(err.status || 500); res.render('error'); }); app.listen(app.get('port'), () => { console.log(app.get('port'), '번 포트에서 대기중'); }); main.html {% extends 'layout.html' %} {% block content %} <div class="timeline"> {% if user %} <div> <form id="twit-form" action="/post" method="post" enctype="multipart/form-data"> <div class="input-group"> <textarea id="twit" name="content" maxlength="140"></textarea> </div> <div class="img-preview"> <img id="img-preview" src="" style="display: none;" width="250" alt="미리보기"> <input id="img-url" type="hidden" name="url"> </div> <div> <label id="img-label" for="img">사진 업로드</label> <input id="img" type="file" accept="image/*"> <button id="twit-btn" type="submit" class="btn">짹짹</button> </div> </form> </div> {% endif %} <div class="twits"> <form id="hashtag-form" action="/hashtag"> <input type="text" name="hashtag" placeholder="태그 검색"> <button class="btn">검색</button> </form> {% for twit in twits %} <div class="twit"> <input type="hidden" value="{{twit.User.id}}" class="twit-user-id"> <input type="hidden" value="{{twit.id}}" class="twit-id"> <div class="twit-author">{{twit.User.nick}}</div> {% if not followingIdList.includes(twit.User.id) and twit.User.id !== user.id %} <button class="twit-follow">팔로우하기</button> {% endif %} <div class="twit-content">{{twit.content}}</div> {% if twit.img %} <div class="twit-img"><img src="{{twit.img}}" alt="섬네일"></div> {% endif %} </div> {% endfor %} </div> </div> {% endblock %} {% block script %} <script> if (document.getElementById('img')) { document.getElementById('img').addEventListener('change', function(e) { const formData = new FormData(); console.log(this, this.files); formData.append('img', this.files[0]); axios.post('/post/img', formData) .then((res) => { document.getElementById('img-url').value = res.data.url; document.getElementById('img-preview').src = res.data.url; document.getElementById('img-preview').style.display = 'inline'; }) .catch((err) => { console.error(err); }); }); } document.querySelectorAll('.twit-follow').forEach(function(tag) { tag.addEventListener('click', function() { const myId = document.querySelector('#my-id'); if (myId) { const userId = tag.parentNode.querySelector('.twit-user-id').value; if (userId !== myId.value) { if (confirm('팔로잉하시겠습니까?')) { axios.post(`/user/${userId}/follow`) .then(() => { location.reload(); }) .catch((err) => { console.error(err); }); } } } }); }); </script> {% endblock %}
