173만명의 커뮤니티!! 함께 토론해봐요.
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
5차_업데이트(고정된 섹션에 하위 섹션 올라오는 인터렉티브) 이 부분 캡쳐 보면서 코드 따라쳐도 오류가 나오네요 이부분 코드좀 전달주세요 wssksms@naver.com
해결됨
[코드캠프] 강력한 CSS
안녕하세요~ 강의를 수강하면서 작성한 일부 html/css 코드를 개인 블로그에 재사용하여 css에 관련된 내용정리/요약을 하고 싶은데 가능할지 여쭙고 싶어 질문 드렸습니다! 예를들어 inline과 block에 관한 글을 작성한다면 (01-04-inline-block) 폴더에 있는 html과css코드를 사용하는 식으로 재사용이 가능할까요? 감사합니다!
미해결
처음 만난 리액트(React)
const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((a) => <li>{a}</li>); ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root')); 이 예시를 강사님처럼 리액트로 만들고 싶은데 이때 index.js를 어떻게 해야하나요? #수업질문
미해결
UIUX 디자이너 취업을 위한 웹 포트폴리오 제작 : 퍼스널 브랜딩 전략
선생님 질문이있습니다. 스크롤라 제이에스를 $(document).ready(function(){ $(".animate").scrolla({ mobile:true, once:false }) }) 작성하고, html 에 동일하게 넣었는데 <section class="visual animate" data-animate="motion"> 클래스가 motion 이렇게 붙는게아니라.. 선생님과 다르게 animate__motion 이렇게 붙습니다 혹시..이유를 할수있을까요?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요.. <button onclick=" javascript: location.href=' http://www.daum.net ', '_blank'">다음사이트 바로가기</button> 여기서 _blank 는 무엇을 의미하나요? 그리고 쌍따옴표 안에 맨 앞에 javascript: 는 붙여도 되고 안 붙여도 되는걸까요??
미해결
처음 만난 리액트(React)
기존 생성했던 npx create-react-app my-app 명령어로 생성했던 my-app 실제 경로로 들어가서 폴더 삭제하고 npm uninstall -g create-react-app npm install -g create-react-app npx create-react-app my-app 수행 시 C:\Program Files\nodejs>npx create-react-app my-app Need to install the following packages: create-react-app@5.0.1 Ok to proceed? (y) y npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap. node:fs:1380 const result = binding.mkdir( ^ Error: EPERM: operation not permitted, mkdir 'C:\Program Files\nodejs\my-app' at Object.mkdirSync (node:fs:1380:26) at module.exports.makeDirSync (C:\Users\김진구\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\fs-extra\lib\mkdirs\make-dir.js:23:13) at createApp (C:\Users\김진구\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:257:6) at C:\Users\김진구\AppData\Local\npm-cache\_npx\c67e74de0542c87c\node_modules\create-react-app\createReactApp.js:223:9 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { errno: -4048, code: 'EPERM', syscall: 'mkdir', path: 'C:\\Program Files\\nodejs\\my-app' } Node.js v20.11.0 에러가 발생합니다. 어떻게 조치해야할까요 ??
미해결
처음 만난 리액트(React)
시계가 정상적으로 작동하는데 강사님이 말씀해주시는 것 처럼 변경된 사항이 반짝이지 않아요
미해결
처음 만난 리액트(React)
안녕하세요 헷깔리는게 있어서 질문을 드립니다. JSX 사용시에 XSS 방지가 된다고 말씀해주셨는데 JSX 문법 사용하지 않고 createElement 사용하더라도 방지가 되는 것 아닌가요? + 제가 생각했던 것은 JSX 가 내부적으로 createElement 를 호출하고 createElement 메소드 내에서 escape 가 일어나는 것 아닌가 했는데, chatGPT 한테 물어본 결과 JSX 문법을 사용하면 createElement 를 호출 하기 전에 escape 을 완료하는 것으로 이해를 하였습니다. 이렇게 이해하는 것이 맞을까요..?
해결됨
반응형 웹사이트 포트폴리오(Architecture Agency)
< 모바일 네비게이션 퍼블리싱 - 모바일트리거, GNB 보이기 감추기> 수업중에 /* Trigger */ .trigger { display: block; width: 24px; height: 14px; position: absolute; right: 20px; top: 20px; } .trigger span { position: absolute; height: 1px; width: 100%; background-color: #000; transition: 0.5s; } .trigger span:nth-child(1) { top: 0; } .trigger span:nth-child(2) { top: 50%; width: 80%; } .trigger span:nth-child(3) { top: 100%; } 이미 .trigger 위치 잡을때 position: absolute를 썼기 때문에 추가로 relative 중복 설정이 불가하면, 어떻게 .trigger가 부모이고 .trigger span이 자식요소가 되서 span이 위치를 잡을 수 있나요?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요.. 궁금한점이 있어서 질문드립니다.. 밀리의 서재 홈페이지에서 검사를 눌러봤는데 div 다음 data-v-003e81a0 이 부분은 어떤 걸 의미하는지요? 속성명="값" 이렇게 안쓰고 저렇게 쓸 수도 있나요? 그리고 p태그 아래에 글자들에 쌍 따옴표로 묶어준 것도 왜 인지 궁금합니다.. 검사 화면에는 쌍따옴표가 있는데 실제 화면에는 쌍따옴표가 안뜨는건 왜 그럴까요..? https://www.millie.co.kr/v3/brand/update?utm_source=google&utm_medium=cpc&utm_campaign=pc&utm_content=brand&utm_term=%2B%EB%B0%80%EB%A6%AC%EC%9D%98%2B%EC%84%9C%EC%9E%AC%2B&gad_source=1&gclid=Cj0KCQiA-62tBhDSARIsAO7twbb3uOaPxtCl7MI2dexTMHLKLnXTEK9kaIQLua7WRA7sAHVtG_zOt70aAqWJEALw_wcB 그리고 여기서 쓰신 확장 프로그램 이름도 알려주실수 있으실까요..?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
선생님.. 텍스트 복사하러 넷플릭스 사이트에 갔는데.. 궁금한 것이 생겨서 여쭤봅니다.. https://www.netflix.com/kr/ newletter div 부분에 원래 클릭 하지않으면 아래 화면이 뜨고 이메일을 입력하려면고 클릭하면 아래 화면처럼 placeholder가 사라지고 background 텍스트가 되는것 같은데.. 이렇게 만들려면 어떻게 하면 되나요..?
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
안녕하세요, 알고리즘 개선하기 강의를 들은 이후, 새로 짜여진 알고리즘의 원리(?)에 대해 공부하는 중입니다. 그런데, select 부분에 대한 이해가 어려워 질문 올려봐요 ㅠㅠ answer.addEventListener("click", function(){ //'answer' 버튼을 클릭했을 때 4 var children = document.querySelectorAll('.answerList'); for(let i = 0; i < children.length; i++){ children[i].disabled = true; // 버튼 비활성화 children[i].style.WebkitAnimation = "fadeOut 0.5s"; // 0.5초동안 main 섹션이 사라지면 children[i].style.animation = "fadeOut 0.5s" // 사용자가 어떤 한 버튼만 클릭해도, 다른 버튼들은 다 무시가 되고 모든 버튼들이 사라진다. } setTimeout(() => { var target = qnaList[qIdx].a[idx].type; // 우리가 선택한 버튼이 가지고 있는 타입이 target에 할당됨. //버튼을 클릭하는 순간에 바로 값 증가 for(let i = 0; i < target.length; i++){ select[target[i]] += 1; // 이 반복문이 돌고나면 사용자가 버튼을 클릭하였을 때, 12간지의 순서대로 해당하는 type의 값이 1씩 증가 } for(let i = 0; i < children.length; i++){ children[i].style.display = 'none'; // 버튼이 보이지 않게 } goNext(++qIdx); console.log(target); console.log(children.length); },450); //450 경과 시 }, false); 저는 이 for문 안에 들어있는 select[target[i]] += 1; 이 부분을 이해하기 위해 calResult() 부분에 console.log(select); 를 작성하였고, 임의로 선택된 모든 버튼에 대한 select 값을 받을 수 있었습니다. // console.log(select); [2, 4, 3, 4, 4, 3, 4, 4, 2, 5, 1, 6] 우선 저는 처음에 이 숫자들이 select 값이라는 것은 알고 있었으나 진짜 무엇을 의미 하는 지 알 수 없어 수기로 디버깅을 해보았습니다. 모든 버튼에 대한 type 값을 추적해가며 적어보았는데 qIdx 선택한 버튼 type 0 a [1, 2, 4, 9] 1 c [7, 4, 9, 11] 2 b [7, 9 ,11] 3 c [0, 3, 6, 5] 4 c [2, 5, 8] 5 b [0, 3, 6, 10] 6 a [1, 7, 11] 7 c [1, 7, 11] 8 b [1, 3, 6, 11] 9 a [4, 9, 11] 10 c [2, 5, 8] 11 a [3, 6, 4, 9] 선택한 버튼에 대한 type 값의 누계를 도출해보니 [2, 4, 3, 4, 4, 3, 4, 4, 2, 5, 1, 6] // select console에 제가 요청했던 select 값과 동일한 배열이 나왔습니다. 또한 0~11까지의 띠 순서 그대로 오름차순으로 배정된 것을 발견할 수 있었습니다. 제가 부족한 지식을 동원하여 생각한 바로는 type 값을 누계할 때 오름차순으로 정렬하라는 어떤 메세지가 있지 않으면 [4, 2, 3, 4, 4, 3, 1, 4, 2, 6, 4, 5] 이런식으로 순서에 상관없이 해당 값에 대한 누계만 select 에 담길 것으로 예상하였으나 오름차순으로 배열이 정리되어 정렬 원리가 궁금하였습니다. select[target[i]] += 1; 이 부분에서 자동으로 저희가 선택한 버튼들의 type 을 select 배열에 넣을 때, 각 누계 값이 0 부터 11까지의 오름차순으로 자동 정렬되나요? const select = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; 아니면 저희가 초반에 select 에 0값으로 총 12개의 빈자릿수를 만들어 주었을 때부터 각 자리당 0부터 11까지의 인덱스 주소가 자동 배정되는 건가요? 아니면 이 배열(select)의 정렬방식에 대하여 놓친 부분이 있을까요? 도와주세요 ㅠㅠ
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
제이 쿼리 연결, 제일 처음 강의에서 파일을 왜 새로 만들고, 왜 첫번째 파일 이름은 3.2어쩌구고 Custom파일에 왜 쓰는건지, 연결은 아래 바디 맨 마지막에 3.어쩌고를 먼저 쓰고 그 다음에 custom 쓰라는 부분만 이해하고 인터넷 찾아보니 무슨 링크를 찾아서 넣고 뭐 방법이 여러가지인데 무슨 말인지 당췌 이해가 안갑니다… 설명이 좀 필요할 것 같아요…도와주세요
미해결
빠르게 훑는 HTML + CSS 기초
top 2px left 4px 를 주는데 안에 폰트어썸 아이콘이 움직이는게 아니라 체크박스가 통으로 움직입니다.
미해결
풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지만들기 11(9:37) 내용중 인터넷 익스플로러 호환성을 위해 width:240px 대신 max-width:240px를 사용하고 flex-shrink:0;을 설정하셨는데 인터넷 익스플로러가 사용되지 않는 현 시점에서 <link rel="short icon" type="image/x-icon" href="img/fun-coding.ico" /> 이와 같이 익스플로러의 호환성을 고려하는 행위가 현업에서 필요한지 궁금합니다!
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요.. MP4 영상 소스에는 검정화면이 없는 것 같은데, 소스에 넣으면 검정 화면이 나타나는 것 같습니다,.. 인터넷이 느려서 그런걸까요..? 영상이 반복되면서 다시 시작할 때 검정화면이 잠깐 나오는 것을 혹시 없애는 방법이 있을까요?
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
//상품 추천 api (feat: tensoflow) app.get("/products/:id/recommendation", (req, res) => { const { id } = req.params; //findOne으로 req을 통해 받아온 param값 id에 맞는 상품을조회한다. models.Product.findOne({ where: { id, }, }) .then((product) => { //id와 일치하는 상품에서 type값을 뽑아서, const type = product.type; //type값과 일치하는 상품들을 모두찾는다. models.Product.findAll({ where: { type, id: { //기준이되는 id와 일치하지않는 데이터만찾겠다. //예를들어 id가4번일때 4번을제외한 4번과 같은type의 상품만 보여줘야하는데 //4번도 함께 추천이되니, 4번을 제외하게해준다. [models.Sequelize.Op.ne]: id, }, }, }).then((products) => { res.send({ products, }); }); }) .catch((error) => { console.error(error); res.status(500).send("에러가 발생했습니다.."); }); }); server.js 에서 추천api를 작성하고 웹에서 확인하려고하면 에러내용 TypeError: Cannot read properties of null (reading 'type') at /Users/kimsehun/Desktop/market-prj/h-market-server/server.js:191:28 이런 에러가발생합니다. models-product.js module.exports = function (sequelize, DataTypes) { const product = sequelize.define("Product", { name: { type: DataTypes.STRING(20), allowNull: false, }, price: { type: DataTypes.INTEGER(10), allowNull: false, }, seller: { type: DataTypes.STRING(30), allowNull: false, }, description: { type: DataTypes.STRING(300), allowNull: false, }, imageUrl: { type: DataTypes.STRING(300), allowNull: true, }, soldout: { type: DataTypes.INTEGER(1), allowNull: false, defaultValue: 0, }, type: { type: DataTypes.STRING(50), allowNull: true, }, }); return product; }; 계속보고있는데, findOne부분에서 where을 통해 id값에 해당하는 상품을 못찾아서 product에 데이터가 담기지않아서, type을 못불러오는거같은데. 뭐가문제일까요??
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요. 2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠ ex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다! 3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요! 상품상세페이지 구현-2 마지막에 보면 css를 적용하고자, product폴더내에 Index.css를 만드는데, Index.js에 css를 import하지 않고 넘어가서 상세페이지구현-3 영상에서는 그냥 css를 적용하고 적용되는 모습이 영상에 담겨있습니다. 원래 자동으로 Import 되는게 아니라면, 이부분에 대한 추가적인 제안이 필요할거같습니다. import "./index.css";
미해결
반응형 웹사이트 포트폴리오(Architecture Agency)
items에 div를 사용했기때문에 CSS작성시 그러한 것 때문에 이왕이면 다른 태그가 좋다고 하는 부분은 이해가 됐어요~ 혹시나 dl dt dd 태그를 이용을 안하신건 이유가 있으실까요? div를 사용해도 되고 어느것도 괜찮다고 하셨는데 dl이 있는데 이용하지 않고 span태그와 h3를 이용하신 이유가 있을 것 같아서요.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
import { API_URL } from "./config/constants.js"; import avatarImg from "./assets/icons/avatar.png"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, } from "react-native"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import Carousel from "react-native-reanimated-carousel"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]); const [banners, setBanners] = React.useState([]); React.useEffect(() => { axios .get(`${API_URL}/products`) .then((result) => { const products = result.data.products; setProducts(products); }) .catch((error) => { console.log("error :", error); }); axios .get(`${API_URL}/banners`) .then((result) => { const banners = result.data.banners; setBanners(banners); }) .catch((error) => { console.log("error :", error); }); }, []); return ( <GestureHandlerRootView> <View style={styles.container}> <ScrollView> <Carousel data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} sliderWidth={Dimensions.get("window").width} itemWidth={Dimensions.get("window").width} itemHeight={200} renderItem={(obj) => { return ( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.imageUrl}` }} resizeMode="contain" /> </TouchableOpacity> ); }} /> <Text style={styles.headline}>판매되는 상품들!</Text> <View style={styles.productList}> {products.map((product, index) => { return ( <View key={index} style={styles.productCard}> {product.soldout === 1 && <View style={styles.productBlur} />} <View> <Image style={styles.productImg} source={{ uri: `${API_URL}/${product.img_url}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={avatarImg} /> <Text style={styles.productSellerName}> {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.created_at).fromNow()} </Text> </View> </View> </View> ); })} </View> </ScrollView> </View> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ headline: { fontSize: 24, fontWeight: "800", marginTop: 10, marginBottom: 10, }, container: { flex: 1, backgroundColor: "#fff", paddingTop: 32, margin: 10, }, productCard: { width: "100%", borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 10, }, productBlur: { position: "absolute", top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, productImg: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 14, }, productPrice: { fontSize: 16, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 14, }, productDate: { fontSize: 14, }, productList: { alignItems: "center", }, bannerImage: { width: "100%", height: 200, }, }); 어떤 오류메세지도 뜨지않고, 에뮬레이터에 화면이 출력되지않는 문제가 발생합니다. Carousel을 적용하기전에는 화면 잘 출력되었는데, Carousel을 적용하니 화면이 출력되지않네요.. Error: PanGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details. 이러한 오류가 발생해서 GestureHandlerRootView 태그로 최상단에 묶어주니 저 오류는 사라졌는데, 애뮬레이터의 화면이 출력되지 않는 문제가 발생합니다. 서버는 잘 연결되어있는걸 확인햇습니다.. 뭐가문제일까요
