묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 훈훈한 Javascript
Object.keys 에 대해서 질문 드립니다.
Object.keys(userData);console.log(Object.keys(userData));두개의 결과가 같은 이유가 뭘까요??굳이 console.log 로 찍지 않아도 결과가 찍히네요.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
Delete 'CR' eslint 표시 없애기 공유(windows사용자)
windows에서 vscode에서 typescript를 사용하시다 보면아래와 같이 delete 'cr'이라고 계속 빨간 글씨가 떠서눈에 거슬리는 경우가 있습니다.해결책 : eslintrc.js파일에 가셔서 아래와 같이rules에 추가한 후 저장해 주시면 됩니다.긁어서 eslintrc.js파일의 하단의 rules에 추가해 주세요 'prettier/prettier': [ 'error', { endOfLine: 'auto', }, ],
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
끝장내기 수업의 로그인을 실무에서 사용해도 될까요?
현재 actions 속성을 이용한 로그인 기능 구현과 비동기 처리시 유의할 점까지 수강하였습니다.새로고침시 로그아웃 되는 부분을 해결하기 위해,쿠키를 등록해서 로그인 상태를 유지 하면,브라우저를 종료 후 재접속시에도 로그인 상태가 유지되고 보안적으로 취약하지 않을까요?그렇다고 쿠키를 사용하지 않아, 새로고침시 로그아웃이 된다면 이것 또한 적절하지 않을것 같은 생각이 드네요.끝장내기 수업을 끝까지 들었을때, 수업에서vue와 nodejs를 활용한 로그인에 대한 권장되는 처리 방법을 알수 있을까요?만약 없다면 참고할만한 자료가 있을까요?PS. 현재 인프런 vue 전체 수업중에 login 관련 가장 많은 시간이 할당되어서 선생님 커리큘럼을 패키지로 구매하였는데, 그럼에도 불구하고, 로그인 처리가 권장되는 처리가 아닌거 같고, 커리큘럼 전체를 끝까지 들어도 실무에서 바로 사용할 수 없는 코드같아, 학습 의욕이 많이 저하 되었습니다. 조언의 한말씀 부탁드립니다.
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
스택프레임 관련 질문드립니다.
안녕하세요 항상 강의 잘 듣고 있습니다.5.합이같은 부분집합 문제에서 flag 변수를 이용해서 yes가 나오면 스택에 남아 있는 함수들만 호출되고 다른 재귀호출은 없이 끝내셨는데 혹시 아래 풀이에서와 같이 for, while의 반복문에서 break를 사용하면 불필요한 재귀호출 없이 끝낼 수 있나요?아래 풀이는 프로그래머스 스킬트리 문제 풀이에서 발췌했습니다!for (let i = 0; i < skillTree.length; i++) { if ( mySkillSet.has(skillTree[i]) && skillTree[i] === mySkill[mySkillIndex] ) { mySkillIndex++; } else if (mySkillSet.has(skillTree[i])) { canSkill = false; break; } }
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
권한요청드립니다
인프런 아이디 : dang7323@naver.com인프런 이메일 : dang7323@naver.com깃헙 아이디 : dang7323@naver.com깃헙 Username : dang7323권한요청 부탁드립니다! 감사합니다:)
-
미해결애플 웹사이트 인터랙션 클론!
영상 속 코드와 배포하신 소스 코드가 다르네요.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { height: 500vh; } .sample-video { position: fixed; top: 0; left: 0; width: 100%; } </style> </head> <body> <div class="container"> <!-- <video class="sample-video" src="../video/sample-low.mp4" muted></video> --> <video class="sample-video" src="../video/sample-high.mp4" muted></video> </div> <script> const videoElem = document.querySelector('.sample-video'); let videoDuration; videoElem.addEventListener('loadeddata', function() { console.log('비디오 로드 완료'); videoDuration = videoElem.duration; init(); }) let progress; let currentFrame; function init() { window.addEventListener('scroll', function () { progress = pageYOffset / (document.body.offsetHeight - window.innerHeight); console.log(progress); if (progress < 0) progress = 0; if (progress > 1) progress = 1; requestAnimationFrame(function() { videoElem.currentTime = videoElem.duration * progress; }) }); } </script> </body> </html>복붙해서 사용하세요.
-
미해결Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
포스트 목록 페이지 수정하기2 중에서 막히는 부분이 있습니다. (미분류)
안녕하세요 선생님. 강의 열심히 듣고 있습니다^^;다름이 아니라 아래와 같이 미분류 카운트가 입력되지 않아 오류가 발생하는 부분때문에 계속 찾아보았으나,답답한 마음에 질문글을 남깁니다.우선 카테고리 분류에서프로그래밍, 문화&예술 까진 카운트가 잘 입력됩니다.그렇지만 "미분류" 부분은 계속 () 으로 표시됩니다.분명 미분류 부분이 존재함에도 불구하고, 카운트가 되지 않는 건 무엇이 잘못되었는지 도저히 알기가 어렵습니다. 혹시 확인이 가능할까요?^^;; test.py 실행시 오류화면미분류() 카운트 부분을 주석처리하면 테스트는 잘 완료됩니다.총 4개의 페이지에 대한 코드를 올려봅니다.test.pybase.htmlviews.pypost_list.html test.pyfrom django.test import TestCase, Client from django.contrib.auth.models import User from bs4 import BeautifulSoup from .models import Post, Category # Create your tests here. class TestView(TestCase): def setUp(self): self.client = Client() # 방문하는 사람의 브라우저다 Client() self.user_trump = User.objects.create_user( username='trump', password='somepassword' ) self.user_obama = User.objects.create_user( username='obama', password='somepassword' ) self.category_programming = Category.objects.create( name='programming', slug='programming' ) self.category_music = Category.objects.create( name='music', slug='music' ) self.post_001 = Post.objects.create( title='첫 번째 포스트입니다.', content='Hello, world, we are the world', category=self.category_programming, author=self.user_trump, ) self.post_002 = Post.objects.create( title='두 번째 포스트입니다.', content='1등이 전부는 아니잖아요. 저는 개발을 좋아할겁니다.', category=self.category_music, author=self.user_obama, ) self.post_003 = Post.objects.create( title='세 번째 포스트입니다.', content='Category 가 없을 수도 있죠.', author=self.user_obama, ) def navbar_test(self, soup): navbar = soup.nav self.assertIn('Blog', navbar.text) self.assertIn('about_me', navbar.text) logo_btn = navbar.find('a', text='Do it Django') self.assertEqual(logo_btn.attrs['href'], '/') home_btn = navbar.find('a', text='Home') self.assertEqual(home_btn.attrs['href'], '/') blog_btn = navbar.find('a', text='Blog') self.assertEqual(blog_btn.attrs['href'], '/blog/') about_me_btn = navbar.find('a', text='about_me') self.assertEqual(about_me_btn.attrs['href'], '/about_me/') def category_card_test(self, soup): categories_card = soup.find('div', id='categories-card') self.assertIn('Categories', categories_card.text) self.assertIn( f'{self.category_programming} ({self.category_programming.post_set.count()})', categories_card.text ) self.assertIn( f'{self.category_music} ({self.category_music.post_set.count()})', categories_card.text ) self.assertIn( f'미분류 ({Post.objects.filter(category=None).count()})', categories_card.text ) def test_post_list_with_posts(self): self.assertEqual(Post.objects.count(), 3) # 1.1 포스트 목록 페이지 (post_list)를 연다. response = self.client.get('/blog/') # 1.2 정상적으로 페이지가 로드된다. self.assertEqual(response.status_code, 200) # 1.3 페이지 타이틀에 Blog 라는 문구가 있다. soup = BeautifulSoup(response.content, 'html.parser') self.assertIn('Blog', soup.title.text) self.navbar_test(soup) self.category_card_test(soup) # 3-2. 포스트 목록 페이지를 새로 고침 했을 때, response = self.client.get('/blog/') soup = BeautifulSoup(response.content, 'html.parser') # 3-3. 메인영역에 포스트 2개의 타이틀이 존재한다. main_area = soup.find('div', id='main-area') self.assertNotIn('아직 게시물이 없습니다.', main_area.text) post_001_card = main_area.find('div', id='post-1') self.assertIn(self.post_001.title, post_001_card.text) self.assertIn(self.post_001.category.name, post_001_card.text) post_002_card = main_area.find('div', id='post-2') self.assertIn(self.post_002.title, post_002_card.text) self.assertIn(self.post_002.category.name, post_002_card.text) post_003_card = main_area.find('div', id='post-3') self.assertIn(self.post_003.title, post_003_card.text) self.assertIn('미분류', post_003_card.text) self.assertIn(self.post_001.author.username.upper(), main_area.text) self.assertIn(self.post_002.author.username.upper(), main_area.text) self.assertIn(self.post_003.author.username.upper(), main_area.text) def test_post_list_without_post(self): Post.objects.all().delete() self.assertEqual(Post.objects.count(), 0) response = self.client.get('/blog/') self.assertEqual(response.status_code, 200) soup = BeautifulSoup(response.content, 'html.parser') self.navbar_test(soup) self.assertIn('Blog', soup.title.text) # 2-2. 메인영역에 "아직 게시물이 없습니다." 라는 문구가 나온다. main_area = soup.find('div', id='main-area') self.assertIn('아직 게시물이 없습니다.', main_area.text) def test_post_detail(self): self.assertEqual(Post.objects.count(), 3) # 1.2 그 포스트의 url은 '/blog/1/' 이다. self.assertEqual(self.post_001.get_absolute_url(), '/blog/1/') #.2. 첫 번째 포스트의 상세 페이지 테스트 # 2-1. 첫 번째 포스트의 url로 접근하면 정상적으로 작동한다. (status code : 200). response = self.client.get(self.post_001.get_absolute_url()) self.assertEqual(response.status_code, 200) soup = BeautifulSoup(response.content, 'html.parser') # # 2-2. 포스트 목록 페이지와 똑같은 네비게이션 바가 있다. self.navbar_test(soup) # 2-3. 첫 번째 포스트의 제목이 웹 브라우저 탭 타이틀에 들어있다. self.assertIn(self.post_001.title, soup.title.text) # 2-4. 첫 번째 포스트의 제목이 포스트 영역에 있다. main_area = soup.find('div', id='main-area') post_area = main_area.find('div', id='post-area') self.assertIn(self.post_001.title, post_area.text) # # 2-5. 첫 번째 포스트의 작성자(author)가 포스트 영역에 있다. (아직 구현할 수 없음) self.assertIn(self.user_trump.username.upper(), post_area.text) # # 2-6. 첫 번째 포스트의 내용(content)이 포스트 영역에 있다. self.assertIn(self.post_001.content, post_area.text) base.html<!DOCTYPE html> {% load static %} <html> <head> <title>{% block head_title %} Blog | 하도영 웹사이트 {% endblock %}</title> <link href="{% static 'blog/bootstrap/bootstrap.min.css' %}" rel="stylesheet" type="text/css"> <!-- <link href="./practice.css" rel="stylesheet" type="text/css"> --> <!-- 주석처리 키 ctrl + / --> <script src="https://kit.fontawesome.com/c1d4d1ab30.js" crossorigin="anonymous"></script> </head> <body> {% include 'blog/navbar.html' %} <div class="container"> <!-- 블로그 리스트 페이지 만들기 강의 5:04 blog 글자 부분 container 클래스에 의해 do it django 와 같은 간격으로 맞춰짐 --> <!-- 이 아래는 9:3, 좁을때는 8:4 로 나눌거임 --> <div class="row my-3"> <div class="col-md-8 col-lg-9", id="main-area"> {% block main_area %} {% endblock %} </div> <div class="col-md-4 col-lg-3"> <!-- Search widget--> <div class="card mb-4"> <div class="card-header">Search</div> <div class="card-body"> <div class="input-group"> <input class="form-control" type="text" placeholder="Enter search term..." aria-label="Enter search term..." aria-describedby="button-search" /> <button class="btn btn-primary" id="button-search" type="button">Go!</button> </div> </div> <!-- Categories widget--> <div class="card mb-4", id="categories-card"> <div class="card-header">Categories</div> <div class="card-body"> <div class="row"> <ul> {% for category in categories %} <li> <a href="#!">{{ category.name }} ({{ category.post_set.count }})</a> </li> {% endfor %} <!-- views.py 에 def get_context_data(self, **kwargs): 를 참고한다. --> <li> <a href="#!">미분류 ({{ no_category_post.count }})</a> </li> </ul> </div> </div> </div> </div> </div> </div> {% include 'blog/footer.html' %} <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> </body> </html> views.pyfrom django.shortcuts import render from django.views.generic import ListView, DetailView from .models import Post, Category class PostList(ListView): model = Post # template_name = 'blog/post_list.html' ordering = '-pk' def get_context_data(self, **kwargs): context = super(PostList, self).get_context_data() context['categories'] = Category.objects.all() context['no_category_post.count'] = Post.objects.filter(category=None).count() # 미분류인 애들이 몇개인지 확인한다. filter기능을 이용해 none 인 애를 확인하고 count() 에 숫자를 담아 no_category_post.count에 넣어준다. return context class PostDetail(DetailView): model = Post template_name = 'blog/post_detail.html' # def index(request): # posts = Post.objects.all().order_by('-pk') # # pk는 순서대로 -pk 는 역순으로 최신 쓰레드가 위로 나오도록 조회 # return render( # request, # 'blog/index.html', # { # 'posts': posts, # } # ) # def single_post_page(request, pk): # post = Post.objects.get(pk=pk) # # return render( # request, # 'blog/single_page.html', # { # 'post': post, # } # ) post_list.html{% extends 'blog/base.html' %} {% block main_area %} <h1> Blog </h1> {% if post_list.exists %} {% for p in post_list %} <!-- Blog Post --> <div class="card mb-4", id="post-{{ p.id }}"> {% if p.head_image %} <img class="card-img-top" src="{{ p.head_image.url}}" alt="{{ p.title }}" /> {% else %} <img class="card-img-top" src="https://picsum.photos/seed/{{ p.id }}/600/200" alt="{{ p.title }}" /> {% endif %} <div class="card-body"> <!-- <div class="small text-muted">January 1, 2022</div>--> {% if p.category %} <span class="badge badge-secondary float-right">{{ p.category }} </span> {% else %} <span class="badge badge-secondary float-right">미분류</span> {% endif %} <h2 class="card-title h4">{{ p.title }}</h2> {% if p.hook_text %} <h5 class="text-muted">{{ p.hook_text }}</h5> {% endif %} <p class="card-text">{{ p.content | truncatewords:45 }}</p> <a href="{{ p.get_absolute_url }}" class="btn btn-primary">Read more →</a> </div> <div class="card-footer text-muted"> Posted on {{ p.created_at }} by <a href="#">{{ p.author | upper }}</a> </div> </div> {% endfor %} {% else %} <h1> 아직 게시물이 없습니다. </h1> {% endif %} <!-- Pagination--> <ul class="pagination justify-content-center my-4"> <li class="page-item"> <a class="page-link" href="#!">← Older</a> </li> <li class="page-item disabled"> <a class="page-link" href="#!">Newer →</a> </li> </ul> {% endblock %}
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
권한 요청드립니다!
인프런 아이디: skatkd7571인프런 이메일: skatkd7571@naver.com깃헙 이메일: skatkd7571@naver.com깃헙 아이디: applevalley 감사합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
메인페이지 출력 오류
안녕하세요 메인 페이지 출력이 안되어서 질문 남깁니다해당 코드와 실행결과 사진으로 첨부했습니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
조언 부탁드립니다. mini-project
현재 puppeteer-crawling해서스타벅스메뉴와 이미지는 잘 긁어 왔는데요.자꾸 MongoDB에 저장되어 있는 img를 불러올 때 에러가 발생하는데, 성공하신 분 있나요?스키마에서 이미지 형식을 Buffer했습니다.import mongoose from "mongoose"; const StarbucksSchema = new mongoose.Schema({ name: String, img: Buffer, }); export const Starbucks = mongoose.model("Starbucks", StarbucksSchema); //이미지 URL로부터 이미지 다운로드 if (!fs.existsSync("img_crawling")) { fs.mkdirSync("img_crawling"); } let fileName = `img_crawling/${menuName}.jpg`; request(menuImage).pipe(fs.createWriteStream(fileName)); console.log(`이미지 ${fileName} 저장 완료`); 저는 fs모듈과 request모듈을 추가로 사용했는데,이미지의 주소를 MongDB에 저장하고,이미지는 별도의 폴더에 저장되게 만들었습니다.질문 요약1. MongDB에 이미지 저장할 때 fs라이브러리와 request라이브러리를 사용하게 맞나요?2. 이미지를 저장은 잘 됐는데, 화면에 뿌려 줄려고 하는데 자꾸 에러가 나요.3.몽고DB에 접속해서 이미지 주소를 가져와서, 그 주소를 기반으로 뿌려줘야 되는지4.아니면 몽고DB에 접속해서 그 메타주소(?)를 기반으로 현재 컴퓨터에 저장된 이미지를 화면에 뿌려줘야 하는지자꾸 구글링하면 몽고DB에 이미지파일을 직접적으로저장하는 것은 DB에 무리를 일으킨다. 그래서 어떠한라이브러리를 사용해서 DB에는 메타주소(?)만을 저장하고,이미지파일을 별도의 localStorage에 저장한다.또한 이미지를 그냥 가져(load) 올 수 없어서 인코딩을 해줘야 한다. 뭔 말인지 모르겠어요 ㅠ.ㅠ
-
미해결몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]
배경질문
배경을 색 대신에 이미지 넣을 수 있는거죠?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
질문 드립니다.
BFS에서 queue 배열 활용 할 때, shift로만 처리하시던데,pop을 사용하면 어떤 차이가 있을까요???단순히 해당 Level에서 처리하는 순서만 달라지지, 층 먼저 탐색한다는 BFS 개념에 위배되지는 않다고 생각해도 맞을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
노션 섹션3 미니프로젝트 제공 프론트엔드
스타벅스 미니프로젝트 프론트엔드 소스의 회원가입, 메뉴조회 등 HTML 모달창을 띄우면 잠시 보여진 후 모달창이 사라집니다. Js의 CloseModal()의 내용을 전부 주석처리해도 마찬가지입니다. 브라우저 개발자 도구의 네트워크에서 확인해보니까 일정 시간 간격으로 리소스를 다시 불러오는 것 같이 보였습니다.VS code의 Open with live server를 통해 크롬으로 실행시켰으며 회원가입 모달창을 유지하려면 어떻게 해야하는지 코멘트해주시면 감사하겠습니다.
-
해결됨[코드캠프] 시작은 프리캠프
반복문 강의 예제 질문
안녕하세요.반복문 강의 예제를 복습하다가 궁금한 점이 생겨서 질문 남깁니다.나이를 12살에서 5살로 바꿔서 해봤는데, 어린이입니다가 뜨지 않고 에러 메세지가 뜨는데왜그런건지 모르겠습니다 ㅠㅠ
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
마구간 정하기
안녕하십니까 강사님!마구간 정하기 문제를 풀이하실때 말이 3마리인 경우를 가정하고 풀어주시는데 풀이코드로 말이 4이상인 경우 대응이 가능한가요? 문제에 C마리라고 되어있어서요!
-
해결됨[코드캠프] 시작은 프리캠프
코딩 초보
안녕하세요. 강의 내용 관련된 질문은 아니지만..답답해서요ㅜㅠ 저는 코딩 공부를 시작한 지 2개월정도 된 완전 코린이입니다..! 원래 처음엔 이해가 안되고 어려운 게 맞겠죠..?ㅠ에러 뜰때마다 원인도 모르겠어서 몇시간 붙잡고 있던 적도 많고 개념 이해하기도 어려운데 ...지식공유자님은 처음에 어떤식으로 공부하셨는지 궁금합니다!! ㅠ
-
미해결Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
권한요청 부탁드립니다!
인프런 아이디 : coll_eksql@naver.com인프런 이메일 : colleksql3@gmail.com깃헙 아이디 : colleksql3@gmail.com깃헙 Username : dvlpDana권한요청 부탁드립니다! 감사합니다:)
-
미해결함수형 프로그래밍과 JavaScript ES6+
rxjs 와 차이점
학습잘 듣고 있습니다.듣다가 궁금한것이 rxjs 와 fstx 와의 차이가 컨셉이 비슷한 부분이 많다는 느낌이 받습니다.rxjs 와 fstx 를 결합해서 사용도 해도 될 듯 보입니다.rxjs 와 fstx 의 개념적으로나 사용적인 면에서 차이가 뭔지 궁금합니다.
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
[해결완료]nginx root 경로 변경 404 not found
경로 설정은 잘 된거같은데not found가 나오네요 ㅠnginx restart도 해봤습니다.문제가 뭘까요?https://github.com/memilmooki/FoodMap
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
코드 리뷰 부탁드립니다!
function solution(k, arr) { let answer = (sum = lt = 0); for (let rt = 0; rt < arr.length; rt++) { let leng = rt - lt + 1; sum += arr[rt]; if (leng === k) { answer = Math.max(answer, sum); sum -= arr[lt++]; } } return answer; } let a = [12, 15, 11, 20, 25, 10, 20, 19, 13, 15]; console.log(solution(3, a));투포인터로 풀어봤습니다.. 이렇게 풀어도 되는걸까요 ?
