매 요청마다 로그인 유지를 위한 요청을 보낸다고 할때(유저 정보를 받아오는 방식) useEffect를 이용해 CSR로 구현을하면 로그인 정보를 받아오기 전에는 초기상태가 없기 때문에 `초기상태` -> `유저정보 들어있는 상태` 로 변경하는 과정에서 화면 CSS에 깜빡임이 발생합니다. 이 현상이 저는 layout shift와 같다고 느껴서 해결을 하고 싶은데 실무에서는 보통 어떻게 해결하나요? 초기로드에 SSR을 적용할지, 아니면 CSR 에서도 깜빡임을 없애는 방법이 있는지 궁금합니다.
@RunWith(SpringRunner.class) @SpringBootTest public 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 assertThat(findMember.getId()).isEqualTo(member.getId()); assertThat(findMember.getUsername()).isEqualTo(member.getUsername()); assertThat(member).isEqualTo(findMember); System.out.println("findMember == member: " + (findMember == member)); } } 위 코드에서 디비에 넣은 멤버와 찾은 멤버가 같은지를 비교를 isEqualTo를 사용을 하셨는데 이것은 제가 알기론 value부분만 같다면 true라는것으로 알고 있습니다. 같은 영속성 컨텍스트 안에서의 객체가 같은지 확인하려면 isSameAs가 맞지 않은지 의문이 생겼습니다!
동적인 페이지에서 getStaticPaths 를 사용할때 fallback: true 속성을 이용해서 페이지를 요청때마다 새롭게 빌드할수 있는걸 배웠습니다. 만약 getStaticPaths를 안쓰고 getStaticProps만 쓰는경우는 요청할때마다 빌드하는 방식의 처리를 못하는건가요? , getStaticprops만 사용하면 revalidate 밖에 못하는건가요?
TLDR NestJS를 최신 버전으로 업그레이드하여 프로젝트를 다시 생성하시면 설치가 가능합니다. Details 2023년 6월 15일 기준 NestJS의 v10 릴리즈가 나와, 이전 버전의 CLI로 설치된 경우 아래 명령어 실행 시 에러가 발생 합니다. (작성자의 경우 NestJS v9로 실행) $ npm i --save @nestjs/websockets @nestjs/platform-socket.io npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: test-chat@0.0.1 npm ERR! Found: @nestjs/common@9.4.3 npm ERR! node_modules/@nestjs/common npm ERR! @nestjs/common@"^9.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @nestjs/common@"^10.0.0" from @nestjs/websockets@10.1.0 npm ERR! node_modules/@nestjs/websockets npm ERR! @nestjs/websockets@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. 이를 해결하기 위한 방법으로 두 가지를 생각해볼 수 있는데, 작성자 본인은 첫 번째 방법을 사용했음 을 알려드립니다. NestJS v10으로 새로 설치 후 프로젝트 다시 생성 공식문서( 링크 )를 따라 v9에서 v10으로 마이그레이션
128줄에 return inside에서 inside()를 안하는 이유가 궁금합니다 @higher_order_example 자체가 inside 리턴받은 함수를 자동으로 ()붙여서 실행해주는 것인가요? 136줄에 sample_example()을 안쓰면 121줄에 있는 func 매개변수로 못넣는것인가요???
https://nextjs.org/docs/getting-started/installation 공식문서, 아래 명령어 실행. npx create-next-app@latest 폴더명 적고 아래와 같이 선택하여 설치. ✔ Would you like to use TypeScript? … Yes ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use `src/` directory? … No ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias? … No 강좌 그대로 따라하려고 했는데 아래 캡쳐화면이 현재 제가 설치한 화면 입니다. 강의 화면 처럼 pages 이런 폴더들이 없는데, 대체 어떻게 하라는 건가요?? 사용하지 않는 코드를 모두 정리하라고 했는데, 정리해야하는 코드들이 없을 경우 어떻게 처리를 해야 하는 지 상세한! 자세한! 답변 바랍니다.
1. fallback:true 인 경우 npm run build 할때 정적 페이지를 생성하는게 아니라 외부사용자가 접근한 시점에 생성을해서 보여준다는 것인가요? 맞다면 npm build 시점에는 생성을 하나도 안한다는 건가요? 2. fallback: false 인 경우 npm run build 시에 getStaticPaths 에서 return한 path에 대한 페이지만 생성하는게 맞나요? 3. getStaticProps 안에서 fallback에 대한 처리는 fallback:true인 경우에만 처리하는거죠? (return { notFound: true } 같은것) 4. getStaticPaths는 path에 따른 페이지를 생성시켜주는 함수이니 동적 라우팅에만 사용하는 함수인가요? 5. 데이터가 자주 바뀌는 페이지도 이러한 방식을 적용가능한것 같은데 초기 페이지에 대해서 SSR과 SSG 중 하나의 선택지로 골라서 적용을 해야할것 같네요. 어떤것을 선택해야 하는지는 직접 성능을 측정해가면서 비교하는게 정확한가요? 아니면 강좌에서 말씀하신것 처럼 웬만하면 SSR를 지양하고 SSG를 적용하는쪽으로 가는게 좋은건가요? CSR, SSR, SSG 적용을 하는 판단기준이 잘 안서네요.
일단 새로운 프로젝트 만들고 premain 추가해주는 것 까진 강의를 그대로 따라하시면 됩니다. manifest plugin 부터 조금 차이가 있어서 거기부터 설명하면, build gradle 에 다음과 같이 추가한다. tasks.named('jar') { manifest { attributes( 'Implementation-Title': project.name, 'Implementation-Version': project.version, 'Premain-Class' : "com.java.magicianAgent.MagicianAgent", 'Can-Redefine-Classes' : true, 'Can-Retransform-Classes' : true) } } 터미널에서 다음 명령어를 통해 build 한다 ./gradlew clean build build.libs file 안에 있는 jar file 을 확인한다. (옵션) 강의에서와 마찬가지로 zip file 로 변경하면 확인가능합니다. 저같은 경우 SNAPSHOT.jar 과 SNAPSHOT -plain.jar 이렇게 2개가 생겼는데 SNAPSHOT.jar 은 제가 spring boot 로 실행서 그런지 관련 설정들이 보이고 SNAPSHOT -plain.jar 이 맞는거 같더라구요. jar file 의 절대 경로를 복사해 VM option 에 추가한다. 여기서부터는 다시 강의와 같습니다. VM option 이 안보이시면 오른쪽에 Modify options 클릭하면 add vm options 라고 보이실 겁니다. 이상한거나 궁금한거 있으시면 말씀해주세요. gradle 을 쓰시는 모든 분들도 마술을 성공시킵시다 하하
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 강의 내용을 질문할 경우 몇분 몇초의 내용에 대한 것인지 반드시 기재 부탁드립니다. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 선생님 보스턴 가격예측 데이터 임포트가 안돼요 ㅠㅠ
안녕하세요. 강사님 아래 코드에서 '블랙핑크' 를 검색할 때 Traceback (most recent call last): File "c:\pratice_crolling\심화1_\03_스포츠 뉴스 크롤링.py ", line 52, in <module> print(article_title.text.strip()) ^^^^^^^^^^^^^^^^^^ AttributeError: 'NoneType' object has no attribute 'text' 다음과 같은 오류가 뜹니다 ㅠㅠ CSS 선택자, 오타도 모두 맞게 확인이 되는데 왜 저 검색어만 오류가 뜰까요ㅠㅠ? # -*- coding: euc-kr -*- # 네이버에서 손흥민, 오승환과 같은 스포츠 관련 검색어 크롤링하기 import requests from bs4 import BeautifulSoup import pyautogui import time search = pyautogui.prompt("어떤 것을 검색하시겠어요?") response = requests.get(f"https://search.naver.com/search.naver?sm=tab_hty.top&where=news&query={search}&oquery=%EC%98%B7%EC%9C%BC%ED%99%98&tqi=i74G%2FdprvTossZPeMhCssssssko-058644") html = response.text soup = BeautifulSoup(html, "html.parser") articles = soup.select(".info_group") for article in articles: # '네이버뉴스' 가 있는 기사만 추출한다. (<a> 하이퍼링크가 2개 이상인 경우에 해당) links = article.select("a.info") if len(links) >=2 : url = links[1].attrs['href'] response = requests.get(url, headers={'User-agent':'Mozila/5.0'}) html = response.text soup = BeautifulSoup(html, "html.parser") # 스포츠 기사인 경우 if "sports" in url: article_title = soup.select_one("h4.title") article_body = soup.select_one("#newsEndContents") # 본문 내에 불필요한 내용 제거 p태그와 div태그의 내용은 출력할 필요가 없다. 없애주자. p_tags = article_body.select("p") # 본문에서 p 태그인 것들을 추출 for p_tag in p_tags: p_tag.decompose() div_tags = article_body.select("div") # 본문에서 div 태그인 것들을 추출 for div_tag in div_tags: div_tag.decompose() # 연예 기사인 경우 elif "entertain" in url: article_title = soup.select_one(".end_tit") article_body = soup.select_one("#articeBody") # 일반 뉴스 기사인 경우 else: article_title = soup.select_one("#title_area") article_body = soup.select_one("#dic_area") # 출력문 print("==================================================== 주소 ===========================================================") print(url.strip()) print("==================================================== 제목 ===========================================================") print(article_title.text.strip()) print("==================================================== 본문 ===========================================================") print(article_body.text.strip()) #strip 함수는 앞 뒤의 공백을 제거한다. time.sleep(0.3)
2일째 고민을 해보았는데.. 2%까지만 맞고 틀리다고 합니당..ㅠㅠ 포기하고 싶지 않은 마음에 도움을 요청합니다!! 제가 짠 코드는 이렇습니다! import java.io.*; import java.util.*; // 불이 하나가 아닌 여러개일 수 있다. public class Main { public static int R; public static int C; public static String[][] map; public static int[][] visitedFire; public static int[][] visitedHuman; public static int[] dx; public static int[] dy; public static Node fireLocation; public static Node humanLocation; public static Queue<Node> fireQueue; public static void main(String[] args) throws IOException { // 초기화 BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out)); StringTokenizer st = new StringTokenizer(br.readLine()); R = Integer.parseInt(st.nextToken()); C = Integer.parseInt(st.nextToken()); map = new String[R][C]; // 0으로 초기화 visitedFire = new int[R][C]; visitedHuman = new int[R][C]; dx = new int[]{0,1,0,-1}; dy = new int[]{-1,0,1,0}; fireQueue = new LinkedList<>(); // 맵 입력 for (int i = 0; i < R; i++) { String S = br.readLine(); for (int j = 0; j < C; j++) { // 불 좌표, 지훈이 좌표 찾기 map[i][j] = String.valueOf(S.charAt(j)); if(map[i][j].equals("J")){ humanLocation = new Node(j,i); map[i][j] = "."; // .으로 변경 }else if(map[i][j].equals("F")){ // 불이 여러개, 불이 아무것도 없을 수 있다. -> 반레 fireLocation = new Node(j,i); fireQueue.add(fireLocation); visitedFire[i][j] = 1; } } } // (1) 불이 이동할 수 있는 최단경로 fireBfs(); // (2) 사람이 이동할 수 있는 최단경로 + 길 비교해야함 humanBfs(humanLocation.y, humanLocation.x); // 가능한 길 찾아서 int result = Integer.MAX_VALUE; // (3) 가장 짧은 최단거리 찾기 (가장자리 찾기) for (int i = 0; i < visitedHuman.length; i++) { for (int j = 0; j < visitedHuman[i].length; j++) { if((0<i && i<R-1) && 0 < j && j < C-1)continue; // 가장자리가 아닌 경우 pass if(visitedHuman[i][j] > 0) { result = Math.min(result, visitedHuman[i][j]); } } } if(result == Integer.MAX_VALUE){ System.out.println("IMPOSSIBLE"); }else{ System.out.println(result); } } public static void humanBfs(int y, int x){ // tkfk visitedHuman[y][x] = 1; Node node = new Node(x,y); Queue<Node> queue = new LinkedList<>(); queue.add(node); while(queue.size()>0){ Node cur = queue.poll(); for (int i = 0; i < 4; i++) { int nx = cur.x + dx[i]; int ny = cur.y + dy[i]; if(nx < 0 || nx >= C || ny < 0 || ny >= R) continue; if(visitedHuman[ny][nx] == 0 && (map[ny][nx].equals("."))){ if(visitedHuman[ny][nx] < visitedFire[ny][nx] || visitedFire[ny][nx] == 0){ visitedHuman[ny][nx] = visitedHuman[cur.y][cur.x] + 1; Node next = new Node(nx,ny); queue.add(next); } } } } } public static void fireBfs(){ while(fireQueue.size()>0){ Node cur = fireQueue.poll(); for (int i = 0; i < 4; i++) { // 4방향 탐지 int nx = cur.x + dx[i]; int ny = cur.y + dy[i]; if(nx < 0 || nx >= C || ny < 0 || ny >= R) continue; if(visitedFire[ny][nx] == 0 && (map[ny][nx].equals("."))){ visitedFire[ny][nx] = visitedFire[cur.y][cur.x] + 1; // 이동함을 표현 Node next = new Node(nx,ny); fireQueue.add(next); } } } } public static class Node { int x; int y; Node(int x, int y){ this.x = x; this.y = y; } } }
안녕하세요 강의를 듣다가 궁금증이 생겨서 질문을 드립니다. void init() { // given List<Product> products = List.of( createProduct("001", 1000), createProduct("002", 2000) ); // when Order order = Order.create(products, LocalDateTime.now()); // then assertThat(order.getOrderStatus()).isEqualByComparingTo(OrderStatus.INIT); } 강의에서 OrderTest 클래스 테스트 과정에서 enum을 비교할때 isEqualByComparingTo를 사용하셨습니다. assertThat(order.getOrderStatus()).isEqualTo(OrderStatus.INIT); 위와 같이 isEqualTo를 사용해도 enum을 비교할 수 있는데, 혹시 isEqualTo 대신 isEqualByComparingTo를 사용한 이유를 알 수 있을까요? isEqualByComparing가 정의된 AbstractComparableAssert.java를 확인해보면 BigDecimal을 예시로 들어서 사용법을 설명하고 있습니다. BigDecimal의 예시로 Enum을 써야 하는 방법을 생각해보았는데, 유추(?)가 잘 되지 않아서 질문을 남깁니다. 항상 좋은 강의 제공해주셔서 감사합니다!!😀😀
CSR 부분 강의를 듣던도중 useEffect 바깥에서 window나 document를 접근하는 경우 문제가 되는것을 알게 되었습니다. 강의에서는 초기에 값이 들어있지않은 html을 프리렌더링해서 제공한다고 설명하고 있는데 이부분에서 의문점이 있습니다. 1. 제가 기존에 알고있던 CSR은 프리렌더링을 하지 않는걸로 알고 있었는데 그러면 결국 프리렌더링 이라는것은 SSR SSG ISR CSR 까지 모두 적용되고있는 방식인가요? 2. 프리렌더링을 하는것이 맞다면, 저같은 경우 일전에 했던 리액트 프로젝트를 정적 파일을 저장하는 aws S3에 배포해본적이 있는데 이것이 가능했던 이유가 서버에서 렌더링을 진행하기 않기때문에 가능한것이라고 알고 있었습니다. 그렇다면 S3에서 CSR만 적용된 리액트 프로젝트를 배포할수있는 이유는 무엇인가요?
개인정보 페이지같은 보안이 중요한경우 CSR보다 SSR을 적용하는게 좋다고 하셨는데 오히려 검색엔진의 정보수집때문에(SEO) 개인정보를 노출할수도 있지 않나요? 검색을 해보니 이런 주장을 하는 분들도 계셔서요 요청을 최소화 하냐 vs 정보수집에 노출되지 않도록 하냐 이 두개의 충돌같은데 어떻게 생각하시는지 궁금합니다.
먼저 좋은 강의 해주셔서 감사합니다. 궁금한 점은 CSR이 자바스크립트 파일을 캐시한다고 하셨는데 여기서의 캐시가 브라우저가 state값을 계속 가지고 있다는 것인지 아니면 브라우저가 js파일을 가지고 계속 동적으로 렌더링 할 때 사용한다는 의미인가요? 둘 다 아니라면 캐시의 의미가 궁금합니다. 다시 한 번 좋은 강의 감사드려요
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 강의를 듣다 의문점이 생겨 질문 드립니다. OrderDto는 JPA에서 생성된 객체가 아니고 직접 생성자로 만들어서 사용한 객체인데 왜 Hibernate5Module이 프록시 객체로 생각해서 null값을 반환하는지 모르겠습니다. 제가 긴시간 찾아보면서 생각한 이유는 이렇습니다. 강의 5분경 쯤에 api 호출시 Json에서 orderItems 가 null로 반환되는것을 보여주십니다. orderItems가 null로 반환되는것은 스프링이 string으로 응답을 보낼때 messageConverter가 json으로 변환해서 반환을합니다. 이때 orderItems가 JPA(Hibernate)에서 만든 프록시 객체로 되어있어 전강의에서 설정한 Hibernate5Module이 프록시 객체를 null로 바꾸기 때문에 orderItems가 null로 나타낸것으로 생각됩니다. 하지만 제가 디버깅 모드로 확인해본 결과 OrderDto안에 있는 orderItems는 프록시 객체가 아닌 실제로 생성된 객체였습니다.(OrderDto는 단순히 JPA가 관리 하지 않아서 당연하다고 생각합니다.) 강의 기준으로 orderItems 안에 있는 orderItem객체가 2개 존재하는데 orderItem객체는 JPA를 통해 생성된 객체이고 자세히 살펴보면 orderItem 안에 Item은 LAZY로딩으로 프록시 객체가 생성되어있습니다. 혹시몰라 Hibernate5Module을 끄고 실행한 결과 Item이 @JsonIgnore가 있으면 orderItems가 제대로 결과 값이 나오고 @JsonIgnore이 없으면 프록시 객체를 Json으로 변환하지 못해서 오류가 발생합니다. 그럼 Hibernate5Module는 엔티티 안에 객체의 값중 하나라도 프록시 객체가 있다면 다른 객체의 값이 있든 말든 그냥 null을 반환하는 걸까요?? 제가 이해한것이 맞는지 궁금해서 질문드립니다. 긴글 읽어주셔서 감사합니다.