inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

flex-grow IE 질문드립니다.

미해결

CSS Flex와 Grid 제대로 익히기

안녕하세요 선생님. 강의에서 menu-item에 길이를 width 혹은 flex-grow를 넣을 수 있는데 인터넷 익스플로어 때문에 width를 사용하셨는데 caniuse에서 확인하면 IE 버전10이상부터는 flex-grow를 지원하는게 맞을까요? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>CSS Flex</title> <link rel="stylesheet" href="default.css" /> <!-- <link rel="stylesheet" href="ui.css" /> --> <style> .menu { display: flex; } .menu-item { width: 25%; /* flex-grow: 1; */ background: gold; } .menu-item:hover { width: 35%; /* flex-grow: 1.5; */ background: crimson; transition: all 0.5s ease-in-out; } .menu-link { display: block; /* 클릭하는 버튼 영역을 키우기 위해서 */ padding: 1em; font-size: 1.2rem; font-weight: bold; color: #555; text-decoration: none; text-align: center; } .menu-link:hover { color: #ffffff; } </style> </head> <body> <ul class="menu"> <li class="menu-item"> <a href="#" class="menu-link">Home</a> </li> <li class="menu-item"> <a href="#" class="menu-link">About</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Product</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Contact</a> </li> </ul> </body> </html>

  • html/css
  • flex
  • HTML/CSS
박종규 댓글 2 좋아요 0 조회수 655

로그인 폼을 만들고 로컬 스토리지에 jwt저장하기 강의에서 질문입니다!

해결됨

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

import React, { useState } from "react"; import { Card, Button, Form, Input, notification } from "antd"; import { useHistory } from "react-router-dom"; import Axios from "axios"; import { SmileOutlined, FrownOutlined } from "@ant-design/icons"; import useLocalStorage from "utils/useLocalStorage"; export default function Login() { const history = useHistory(); const [jwtAccessToken, setJwtAccessToken] = useLocalStorage( "jwtAccessToken", "" ); console.log("loaded Token: ", jwtAccessToken); // 왜 이게 두번이나 출력되는 것이지? const onFinish = (values) => { async function fn() { const { username, password } = values; const data = { username, password }; try { //응답을 꼭 받아야 한다. 토큰을 받아야 하니까 const response = await Axios.post( "http://127.0.0.1:8000/accounts/token/", data, { headers: { "Content-Type": "application/json" } } ); // const { data: token } = response; 이런 방식은 아래랑 다르다 response에서 data을 꺼내서 이름을 token이라 짓는 것 // const token = response.data 와 일치하며 밑에 녀석은 // const jwtAccessToken = response.data.access 과 일치한다 const { data: { access: jwtAccessToken }, } = response; setJwtAccessToken(jwtAccessToken); notification.open({ message: "로그인 성공!", icon: <SmileOutlined style={{ color: "#108ee9" }} />, }); // history.push("/accounts/login"); //TODO: 이동주소 } catch (error) { console.log(error); if (error.response) { notification.open({ message: "로그인 실패!", icon: <FrownOutlined style={{ color: "#ff3333" }} />, description: "아이디/암호를 확인해 주세요.", onClick: () => { console.log("Notification Clicked!"); }, }); } } } fn(); }; return ( <Card title="login"> <Form labelCol={{ span: 8 }} //부트스트랩은 한 행이 12 컬럼인데 antd는 24컬럼임 wrapperCol={{ span: 16 }} style={{ maxWidth: 600 }} onFinish={onFinish} autoComplete="off" > <Form.Item label="Username" name="username" rules={[{ required: true, message: "Please input your username!" }]} //rules을 통해 유효성검사로직이 들어가 잇다 > <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[ { required: true, message: "Please input your password!" }, { min: 5, message: "5자리 이상 해주세요" }, // 한글자 한글자 들어갈때마다 검사해준다. ]} > <Input.Password /> </Form.Item> {/* //8칸 이동하고 16칸을 쓰겠다 */} <Form.Item wrapperCol={{ offset: 8, span: 16 }}> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> </Card> ); } 안녕하세요 강사님!! 위에서 15번째 줄에 있는 console.log("loaded Token: ", jwtAccessToken); 이 부분이 페이지의 콘솔창에서 두번이나 나타납니다... 왜 그런지 알 수 있을까요?? 새로고침을 했을때도 두번 나타나고 submit을 했을 때도 2번 출력됩니다. 아 ! 그리고 simplejwt토큰을 사용중 입니다!

  • docker
  • django
  • python
  • react
꺼넝 댓글 1 좋아요 0 조회수 714

안녕하세요. 다른 풀이도 풀었는데 괜찮을까요?

미해결

파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)

정답은 제대로 나오긴 했는데 시간 초과라던가 하는 문제가 없을까요? 4중 for문은 생각지도 못했네요..ㅠㅠ sudoku = [list(map(int, input().split())) for _ in range(9)] def solution(sudoku): length = len(sudoku) a, b, c, = list(), list(), list() # 행열 검사 for i in range(length): row, col = list(), list() for j in range(length): row.append(sudoku[i][j]) col.append(sudoku[j][i]) if len(set(row)) != 9 or len(set(col)) != 9: return "NO" # 3x3 격자판 검사 a.extend(row[0:3]) b.extend(row[3:6]) c.extend(row[6:]) if i == 2 or i == 5 or i == 8: if len(set(a)) != 9 or len(set(b)) != 9 or len(set(c)) != 9: return "NO" a, b, c, = list(), list(), list() return "YES" print(solution(sudoku))

  • 코딩-테스트
  • python
  • 코테 준비 같이 해요!
HTCho1 댓글 1 좋아요 0 조회수 461

1068번: 트리

미해결

파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)

제가 다음과 같이 코드를 작성했는데, 100%까지 가다가 틀립니다.. 어떤게 문제일까요? 반례를 제시해주실 수 있나요? 감사합니다. https://www.acmicpc.net/problem/1068 import sys input = sys.stdin.readline n = int(input()) g = list(map(int, input().split())) m = int(input()) cnt = 0 def DFS(x): g[x] = -1 for i in range(n): if g[i] == x: DFS(i) DFS(m) for i in range(n): if g[i] != -1 and i not in g: cnt += 1 print(cnt)

  • 코딩-테스트
  • python
  • 코테 준비 같이 해요!
이도열 댓글 1 좋아요 1 조회수 377

search icon 오류

미해결

따라하며 배우는 HTML, CSS

선생님 저는 왜 서치 부분이 이렇게 되는 걸까요?

  • html/css
  • HTML/CSS
yh 댓글 1 좋아요 0 조회수 388

질문있습니다.

미해결

반응형 웹사이트 포트폴리오(App Official Landing Website)

선생님 강의에서 테마를 변경 후 작업중입니다. 슬릭슬라이드를 적용 하였는데 마지막 사진의 위치가 내려갔습니다. 사진을 변경하여 작업을 해봐도 같은 현상이 발생합니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>다울건축사무소</title> <!--jquery--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <!--Slick slider--> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" /> <!--Custom CSS & js --> <link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/resposive.css"> <script src="js/custom.js"></script> </head> <body> <div class="container"> <!--section : header --> <header> <div class="header-inner"> <div class="logo"> <a href="#none"> <img src="/images/logo.png"> </a> </div> <div class="gnb"> <a href="#none">ABOUT</a> <a href="#none">RPOJECTS</a> <a href="#none">NEWS</a> <a href="#none">CONTACT</a> </div> </div> </header> <!--section : home --> <section class="home"> <div class="home-inner"> <ul class="imgbox"> <li class="item-bg" style="background-image: url(/images/강원대농업생명과학대학개축설계제안공모\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">강원대 농업생명과학대학 개축 설계제안 공모</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울대학교문화관재건축공사현상설계.jpg)"> <div class="text-area"> <h3 class="eng">서울대학교 문화관 재건축공사 현상설계</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울출입국·외국인청\(설계공모안\).jpg)"> <div class="text-area"> <h3 class="eng">서울출입국·외국인청</h3> <p>(설계공모안)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/수성행복드림센터\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">수성행복드림센터</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화\ MTV\ 초중통합학교\(우수상\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 초중통합학교</h3> <p>(우수상)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화mtv지하주차장\ \(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 지하주차장</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/한수원새울본부복지관신축.jpg)"> <div class="text-area"> <h3 class="eng">한수원 새울본부 복지관 신축</h3> </div> </li> </ul> </div> </section> <section class="about"></section> <section class="award"></section> <footer></footer> </div> </body> </html> /*CSS*/ /* Web Font - Kanit */ @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700&display=swap'); /* Web Font - S-CoreDream */ @font-face { font-family: 'S-CoreDream-3Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: normal; font-style: normal; } /* Reset CSS */ * { box-sizing: border-box; } a { text-decoration: none; color: #333; } button, input { outline: none; } h1, h2, h3, h4, h5, h6 { margin-top: 0; font-weight: normal; line-height: 1.5em; } ul, li { padding: 0; list-style: none; } /* Default CSS */ body { font-family: 'Kanit'; line-height: 1.7em; margin: 0; background-color: #fff; color: #333; } /*section - header*/ .header-inner { width: 1300px; margin: auto; padding-top: 20px; padding-bottom: 10px; overflow: hidden; } .logo { float: left; } .gnb { margin-top: 10px; float: right; } .gnb a { font-size: 20px; margin-left: 80px; } /*section - home*/ ul.imgbox { overflow: hidden; margin: 0; } .item-bg { display: inline-block; top: 0; background-size: cover; background-position: center; height: 100vh; } /*Custom JS*/ $(document).ready(function(){ $('.imgbox').slick({ infinite: true, dots: true, speed : 3000, autoplay: true, autoplaySpeed: 5000, swipe: true, arrows: false, fade : true, zIndex:50, pauseOnFocus: false, pauseOnHover: false, }); });

  • html/css
  • jquery
  • 반응형-웹
  • HTML/CSS
  • 반응형-웹
황재중 댓글 2 좋아요 2 조회수 687

Flex-grow가 적용되는 영역에 대해 질문드립니다.

미해결

CSS Flex와 Grid 제대로 익히기

혹시 Flex-direction: row이고, Flex-wrap이 Wrap으로 설정되어 있고, 아이템들은 width: 33.3333%의 크기를 가지며, Height들은 서로서로 다 다를때, Wrap되어 행이 2개가 생길때에 Flex-grow가 1로 Item들에 설정되어 있다면 모든 행의 높이가 가장 큰 높이에 맞춰지게 되는데요. https://blogpack.tistory.com/863 여기나 이 강의에서 학습한 대로 1행에서는 flex-grow의 이해가 쉽게 됬습니다. 그치만, 제가 언급한 지금 이 예처럼 2열이고 높이가 서로다른 3개의 아이템들일 경우에는 Flex-grow가 한 행의 영역에서 남은 여백을 참조하여 모든 높이를 최대까지 늘리는 것인가요? flex-grow 또는 flex-shrink가 적용되는 영역은 한 행이나 열에서 적용되나요? 각각의 Item들에 적용하는 속성이니 이해가 조금 어렵네요... 많은 조언 부탁드립니다.

  • flex
  • flex
  • HTML/CSS
chebread 댓글 1 좋아요 0 조회수 455

안녕하세요 리뷰복습하다가, 발견했습니다

미해결

파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)

최근에 다시 자바스크립트로 돌리면서, 기존에 파이썬으로 했던 것들 다시 모두 자바스크립트로 풀어보면서 문제 풀어보니, 발견했습니다. 이거 첫번째 가정을, 그리디로 접근하면 해결 안되는 문제인것같습니다. 이후 가정들은 당연히 그리디 관념으로 최적값 찾을 수 있는데, 첫번째 가정부터 그리디로 접근하면 해결되는 문제가 아니라서 어긋나기때문에, 그리디관념이 통하지 않는 문제인것같습니다. 완전탐색해버리거나, 시간 더 줄이려면 백트래킹 가지치기 해야하는 문제인것같습니다. 입력입니다! 7 172 67 183 65 179 61 178 62 177 63 170 72 181 60 기존 풀이(무조건 183선발) 가 내주는 답 : 3 감독 현수가 원할 것 같은 답 : 6 그리디로 가장 키 큰 사람 무조건 선발하는 과정이 풀이에서 오류인것같습니다. 183 선발 가정하고 cnt 값 구하고, 그다음 181 선발 가정하고 cnt값 구하고, 쭉 다음 순으로 선발 가정하고 cnt값 구하는데, 만약 어떤 사람 선발 가정하고 cnt값 구하는데 남은 사람 수 다 합해도 기존 Max cnt보다 적을 경우, 백트레킹 가지치기로 break 혹은 return 끊어버리는게 맞는것같습니다. 풀이1. 이중포문 const input = require("fs") .readFileSync("input.txt") .toString() .trim() .split("\n"); const n = parseInt(input[0]); const arr = Array.from(Array(5), () => []); for (let i = 0; i < n; i++) { arr[i] = Array.from(input[i + 1].trim().split(" ")).map((v) => parseInt(v)); } function solution(n, arr) { arr.sort((a, b) => b[0] - a[0]); let cnt = 0; let largest = 0; let res = 0; for (let i = 0; i < n; i++) { largest = arr[i][1]; cnt += 1; if (res >= n - i) { break; } for (let j = i + 1; j < n; j++) { if (arr[j][1] > largest) { largest = arr[j][1]; cnt += 1; } } res = Math.max(res, cnt); cnt = 0; } console.log(res); } solution(n, arr); 풀이2. DFS const input = require("fs") .readFileSync("input.txt") .toString() .trim() .split("\n"); const n = parseInt(input[0]); const arr = Array.from(Array(5), () => []); for (let i = 0; i < n; i++) { arr[i] = Array.from(input[i + 1].trim().split(" ")).map((v) => parseInt(v)); } let cnt = 0; let res = 0; //const list = []; function DFS(s, weight) { if (s < 0) return; if (cnt + n - s <= res) { cnt -= 1; s -= 1; return; } for (let i = s; i < n; i++) { if (arr[i][1] > weight) { cnt += 1; //list.push(arr[i][1]); DFS(i + 1, arr[i][1]); //list.pop(); } } res = Math.max(res, cnt); //console.log(list); cnt -= 1; } function solution(n, arr) { arr.sort((a, b) => b[0] - a[0]); DFS(0, 0); console.log(res); } solution(n, arr);

  • 코딩-테스트
  • python
  • 코테 준비 같이 해요!
ncprog1 댓글 2 좋아요 1 조회수 456

강의자료 레벨업 퀴즈

해결됨

[코드캠프] 시작은 프리캠프

강의자료에 있는 레벨업 퀴즈의 정답은 어디서 확인할 수 있나요??

  • html/css
  • javascript
  • HTML/CSS
예은 댓글 1 좋아요 0 조회수 332

강의자료는 어디서 받을 수 있나요?

미해결

중상급 퍼블리싱을 위한 CSS3의 모든 것

비주얼 스튜디오 코드(Visual Studio Code) 사용법 강의를 보고 있는데 자주사용하는 에밋 단축키라던지 vscode 설정법 관련 강의자료 pdf 를 올려주신다고 하시던데.. 그 자료는 어디서 받을 수 있나요?

  • html/css
  • HTML/CSS
황현빈 댓글 1 좋아요 1 조회수 376

postman invalid url 질문드립니다.

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

1. 질문은 문제 상황을 최대한 표현해주세요. postman 에서 send 버튼을 누르면 아래와 같이 invalid URL 오류가 뜹니다. 어느 부분이 잘못된 걸까요?ㅠㅠ 2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠ 구글에 검색해봤는데 해결책이 딱히 나오지 않았어요 3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!

  • html/css
  • nodejs
  • express
  • react
  • node.js
  • tensorflow
  • react-native
  • 머신러닝
  • HTML/CSS
  • javascript
  • 머신러닝 배워볼래요?
다혜 댓글 1 좋아요 0 조회수 1034

로드맵상 다음강의? 크롤링? 퀀트1?

해결됨

문과생도, 비전공자도, 누구나 배울 수 있는 파이썬(Python)!

안녕하세요.. 멋지고 깔끔한 강의 덕분에 2주만에 완강했습니다! 좋은 강의 준비해주셔서 감사합니다. 로드맵상 다음강의가 퀀트part1 으로 되어 있는데, 크롤링을 모르고 가도 상관이 없을까요? 아니면 크롤링 강의 먼저 듣고 가는게 나을까요?

  • python
wk 댓글 1 좋아요 0 조회수 272

마커 클러스터링 도입

미해결

Next.js 시작하기(feat. 지도 서비스 개발)

안녕하세요, 강의 보면서 많은 도움 받았습니다. 제가 추가로 마커클러스터링을 도입하려고 하는데 네이버에서 제공하는 깃헙 예제 코드를 봐도 도무지 이해가 안가서요.. 혹시 어떤식으로 풀어나가면 될지 궁금합니다... ㅠㅠ

  • next.js
  • ssg
  • ssr
  • vercel
  • csr
  • ssg
  • vercel
  • ssr
  • Next.js
  • cluste
  • seo
윌럄 댓글 2 좋아요 2 조회수 2957

회원가입 양식 과제

해결됨

[코드캠프] 시작은 프리캠프

안녕하세요 과제를 해봤는데 예쁘게 잘 되긴 하였습니다. 혹시 여기서 더 고쳐야 되는 부분이 있을까요? <!DOCTYPE html> <html lang="ko"> <head> <title>회원가입</title> <link rel="stylesheet" href="02-signup.css" /> </head> <body> <div class="container"> <div class="member-container"> <div class="header"> <div>회원 가입을 위해</div> <div>정보를 입력해주세요</div> </div> <div class="user-info"> <div id="email">* 이메일</div> <div>* 이름</div> <div>* 비밀번호</div> <div>* 비밀번호 확인</div> </div> <div class="gender"> <input type="radio" name="gender" /> <label for="women">여성</label> <input type="radio" name="gender" /> <label for="men">남성</label> </div> <div class="agree-check"> <input type="checkbox" /> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다. </div> <div class="btn"> <button>가입하기</button> </div> </div> </div> </body> </html> * { box-sizing: border-box; font-family: "Noto Sans CJK KR"; font-style: normal; } body { display: flex; flex-direction: row; justify-content: center; } .container { display: flex; flex-direction: column; align-items: center; width: 670px; height: 960px; margin-top: 60px; margin-bottom: 60px; background: #ffffff; border: 1px solid #aacdff; box-shadow: 7px 7px 39px rgba(0, 104, 255, 0.25); border-radius: 20px; } .member-container { display: flex; flex-direction: column; align-items: center; width: 470px; height: 818px; margin-top: 72px; margin-bottom: 70px; } .header { width: 466px; height: 94px; font-weight: 700; font-size: 32px; line-height: 47px; color: #0068ff; } .user-info div { font-weight: 400; font-size: 16px; line-height: 24px; color: #797979; border-bottom: 1px solid #cfcfcf; width: 466px; height: 80px; margin-top: 21px; } .user-info #email { border-bottom: 1px solid #0068ff; } .gender { display: flex; align-items: center; justify-content: space-between; width: 140px; height: 23.94px; margin-top: 50px; } .gender input { width: 20px; height: 19.95px; background: #ebebeb; border: 1px solid #d2d2d2; } .gender label { font-weight: 400; font-size: 16px; line-height: 24px; } .agree-check { width: 454px; height: 21.06px; margin-top: 52.05px; font-weight: 400; font-size: 14px; line-height: 21px; color: #000000; } .btn { display: flex; flex-direction: column; margin-top: 60px; width: 470px; height: 106px; border-top: 1px solid #e6e6e6; } button { margin-top: 30px; width: 470px; height: 75px; font-weight: 400; font-size: 18px; line-height: 27px; text-align: center; color: #0068ff; background: #ffffff; border: 1px solid #0068ff; border-radius: 10px; } 잘 듣고 있습니다. 제가 들어본 강의 중에서 최고로 안 헷갈리게 가르쳐주셔서 좋습니다.

  • html/css
  • javascript
  • HTML/CSS
xudegloss 댓글 1 좋아요 1 조회수 2963

슬릭슬라이더가 왜 안되는지 모르겠습니다

미해결

반응형 웹사이트 포트폴리오(App Official Landing Website)

현재 선생님 강의에서 테마를 변경해서 작업하고 있습니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>다울건축사무소</title> <!--jquery--> <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script> <!--Slick slider--> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <!--Custom CSS & js --> <link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/resposive.css"> <script src="js/custom.js"></script> </head> <body> <div class="container"> <!--section : header --> <header> <div class="header-inner"> <div class="logo"> <a href="#none"> <img src="/images/logo.png"> </a> </div> <div class="gnb"> <a href="#none">ABOUT</a> <a href="#none">RPOJECTS</a> <a href="#none">NEWS</a> <a href="#none">CONTACT</a> </div> </div> </header> <!--section : home --> <section class="home"> <div class="home-inner"> <ul class="imgbox"> <li class="item-bg" style="background-image: url(/images/강원대농업생명과학대학개축설계제안공모\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">강원대 농업생명과학대학 개축 설계제안 공모</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울대학교문화관재건축공사현상설계.jpg)"> <div class="text-area"> <h3 class="eng">서울대학교 문화관 재건축공사 현상설계</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/서울출입국·외국인청\(설계공모안\).jpg)"> <div class="text-area"> <h3 class="eng">서울출입국·외국인청</h3> <p>(설계공모안)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/수성행복드림센터\(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">수성행복드림센터</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화\ MTV\ 초중통합학교\(우수상\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 초중통합학교</h3> <p>(우수상)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/시화mtv지하주차장\ \(설계공모\ 당선\).jpg)"> <div class="text-area"> <h3 class="eng">시화 MTV 지하주차장</h3> <p>(설계공모 당선)</p> </div> </li> <li class="item-bg" style="background-image: url(/images/양주아트센터건립공사.jpg)"> <div class="text-area"> <h3 class="eng">강원대 농업생명과학대학 개축 설계제안 공모</h3> </div> </li> </ul> </div> </section> <section class="about"></section> <section class="award"></section> <footer></footer> </div> </body> </html> /* Slick Slider : home */ $('.imgbox').slick({ rtl: true });

  • html/css
  • jquery
  • 반응형-웹
  • HTML/CSS
  • 반응형-웹
황재중 댓글 1 좋아요 1 조회수 655

모달과 light box차이점

미해결

최고의 프론트엔드 CSS Frameworks, UIkit

모달과 light box차이점은 light box가 슬라이드가 된다는것뿐이죠??

  • html/css
  • 포트폴리오
  • 포트폴리오
  • HTML/CSS
비타민걸 댓글 1 좋아요 1 조회수 513

API 보안 관련 질문입니다!

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

안녕하세요! 현재 올려주신 강의 내용을 바탕으로 쇼핑몰 상품의 정품 등록을 하는 서비스를 구현하려고 하고 있습니다. 정품 등록 과정에서 사용자가 정품 인증 코드를 입력하면, API 서버를 통해 데이터베이스에 해당 코드가 존재하는지 찾은 후, 존재한다면 해당 코드와 사용자를 매칭시키는 방식으로 우선 구현하고자 합니다. (약간 문화상품권 등록 같기도 하네요 ㅎㅎ) 물론 위 내용에 관련된 코드 질문은 아니구요 ㅎㅎ 위와 같은 내용이 구현되었을 때 악의를 가진 사용자가 postman 등 툴을 통해 API 서버에 무작위로 정품 인증 코드를 보낸 후, 정말 우연히 존재하는 코드를 찾은 경우에 그 코드를 사용해서 정품 등록을 할 수 있을 것 같은데, 이를 어떻게 대비하는게 좋을지 궁금합니다. rate limit이 생각나긴 하지만... 그리 완벽한 방법은 아닐 것 같아서요..!! 그리고 API 서버 주소가 외부에 노출이 되지 않는 경우엔 무차별 대입 공격을 하기도 힘들텐데, 개발자도구에서 소스를 확인하면 결국 API 서버 주소가 나오잖아요~ 그래서 API 서버 주소를 쉽게 알아내지 못하게 하는 방법이 있을지도 궁금합니다. 또 하나 구현해야 하는 기능이 사용자 본인이 정품 등록한 제품을 조회할 수 있도록 하는 기능인데요, userID가 API 서버에 전송되면 데이터베이스에서 해당 userID로 등록된 제품들을 찾아서 보여주도록 구축하려고 합니다. 다만 이 경우에도 위와 비슷하게 API 서버 주소를 알고있는 사람이 다른 사람 ID를 API 서버에 전송해서 그 사람의 정품 등록된 제품을 조회할 수 있는 문제점이 있을 것 같은데요, 이를 어떻게 해결하는게 좋을지도 의견 여쭤보고 싳습니다. 요약하자면 다음과 같습니다.: API 서버에 무작위 정품인증 코드를 보내는걸 어떻게 막는게 좋을까요? 제가 생각한 방법은 rate limit인데, 더 좋은 방법이 있을까요? API 서버 주소를 개발자도구 등을 통해 쉽게 알아내지 못하게 하는 방법이 있을까요? userID를 통해 API 서버에서 해당 사용자의 정보를 가져오는 경우, 타인이 API 서버와 통신해서 다른 사용자의 정보를 가져오는걸 어떻게 막을 수 있을지 궁금합니다. 제 짧은 생각으로는 ID를 암호화해서 API 서버와 통신해야 될 것 같은데, 조금 막막한 감이 있네요.. 현재 제가 사용하는 프론트엔드가 react가 아니라 순정 html+JS인지라... 약간 질문이 두서없고 강의 주제랑 조금 벗어난 것 같지만... 잘 부탁드리겠습니다..ㅎㅎ 지금 질문드리는 내용이 결국 API 서버 보안과 관련된 내용인 것 같은데, 혹시나 해당 내용과 관련해서 말씀해주고 싶으신 내용이 있으시다면 설령 TMI라고 생각드실지라도 얼마든 알려주세요!! 열심히 배우겠습니다. 💪 좋은 강의 감사드립니다. 좋은 하루 되세요!

  • html/css
  • javascript
  • react
  • 머신러닝 배워볼래요?
  • node.js
  • react-native
  • HTML/CSS
  • 머신러닝
  • nodejs
  • tensorflow
  • express
견견 댓글 1 좋아요 0 조회수 1052

jsconfig 오류 질문입니다!

해결됨

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

{ "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } keonhongkoo@keonhongui-MacBookAir frontend % yarn start yarn run v1.22.19 $ react-scripts start node:internal/modules/cjs/loader:1325 throw err; ^ SyntaxError: /Users/keonhongkoo/Desktop/instagram/frontend/jsconfig.json: Unexpected token / in JSON at position 75 at parse (<anonymous>) at Module._extensions..json (node:internal/modules/cjs/loader:1322:39) at Module.load (node:internal/modules/cjs/loader:1117:32) at Module._load (node:internal/modules/cjs/loader:958:12) at Module.require (node:internal/modules/cjs/loader:1141:19) at require (node:internal/modules/cjs/helpers:110:18) at getModules (/Users/keonhongkoo/Desktop/instagram/frontend/node_modules/react-scripts/config/modules.js:126:14) at Object.<anonymous> (/Users/keonhongkoo/Desktop/instagram/frontend/node_modules/react-scripts/config/modules.js:142:18) at Module._compile (node:internal/modules/cjs/loader:1254:14) at Module._extensions..js (node:internal/modules/cjs/loader:1308:10) Node.js v18.14.1 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 이렇게 결과가 출력되는데 해결책이 안보이네요... vscode도 재시작해봤습니다ㅠ

  • docker
  • python
  • react
  • django
꺼넝 댓글 1 좋아요 0 조회수 811

github 좀 알려주세요...

미해결

DOM 인터랙션

소스코드 링크 알려주세요.. 같은글2번정도올렸었는데 답글 없으셔서 한번더 올립니다..

  • html/css
  • dom
  • HTML/CSS
  • javascript
bigger 댓글 1 좋아요 0 조회수 488

웹페이지에서 상품 정렬 혹은 조건을 정하여 보여주려면 어떤 방법을 사용해야할까요?

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

예를들어서 웹페이지에서 select나 checkbox를 통하여 값을 정했을 때 선택한 값에 따라 정렬이나 조건에 맞게 화면에 보여줄 방법은 없을까요?

  • html/css
  • HTML/CSS
  • react-native
  • nodejs
  • node.js
  • react-native
  • react
  • 머신러닝
  • express
  • tensorflow
  • 머신러닝 배워볼래요?
  • javascript
이태희 댓글 1 좋아요 1 조회수 532

인기 태그

인프런 TOP Writers

주간 인기글