묻고 답해요

왜 data 값을 못 찾는 걸까요?

미해결

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

강의를 보고 이해한거 토대로 직접 코드를 작성해보았는데요. 다 맞게 작성한 것 같은데 무한스크롤이 안됩니다.ㅠㅠ 로그를 찍어보니 data 변수가 제대로 선언되지 않은 것 같은데 왜 그런걸까요?... 선언하는 위치상으로도 문제가 없는 것 같은데 왜 안되는지 도통 모르겠네요 ㅠㅠ <! doctype html > < html lang = "ko" > < head > < meta charset = "utf-8" > < meta http-equiv = "X-UA-compatible" content = "chrome=1,IE=edge" > < title > 깡코딩 - 초보자도 만들 수 있는 스크를인터렉션1편 </ title > < link rel = "stylesheet" type = "text/css" href = "" > < link rel = "stylesheet" type = "text/css" href = "../../library/css/common.css" > < script type = "text/javascript" src = "../../library/js/jquery.1.12.4.js" ></ script > </ head > < style type = "text/css" > .com_tit { margin : 100px 0 80px ; font-size : 70px ; text-align : center ;} .sc_infinity {} .sc_infinity .list {} .sc_infinity .list:after { clear : both ; display : block ; content : '' ;} .sc_infinity .list li { float : left ; width : 25% ;} .sc_infinity .list li figure { padding : 10px ;} .footer { height : 200px ; background-color : #ddd ;} .footer p { padding : 50px 20px ;} </ style > < body > < div class = "wrap" > < section class = "sec01" > < h2 class = "com_tit" > INFINITE SCROLL </ h2 > < article class = "sc_infinity" > < ul class = "list" > < li > < figure > < img src = "../images/1.jpg" > </ figure > </ li > < li > < figure > < img src = "../images/2.jpg" > </ figure > </ li > < li > < figure > < img src = "../images/3.jpg" > </ figure > </ li > < li > < figure > < img src = "../images/1.jpg" > </ figure > </ li > < li > < figure > < img src = "../images/2.jpg" > </ figure > </ li > < li > < figure > < img src = "../images/3.jpg" > </ figure > </ li > </ ul > </ article > < div class = "footer" > < p > FOOTER </ p > </ div > </ section > </ div > < script > $ ( function (){ var target = $ ( '.list' ), winTop = $ ( window ). scrollTop (), onTop = $ ( document ). height () - $ ( window ). height () - $ ( '.footer' ). height (), breakList = 10 , listCount = 0 ; function getList (){ var list ; listCount ++; if ( listCount > breakList ){ list = null ; } else { list = '<li><figure><img src="../images/1.jpg"></figure></li>' ; list += '<li><figure><img src="../images/2.jpg"></figure></li>' ; list += '<li><figure><img src="../images/3.jpg"></figure></li>' ; } return list ; } function listCall (){ if ( winTop >= onTop ){ var data = getList (); if ( data !== null ){ target . append ( data ); } else { return false ; } } } console . log ( data ); $ ( window ). scroll ( function (){ listCall (); }); function init (){ listCall (); } init (); }); </ script > </ body > </ html >

• javascript
• HTML/CSS
• 인터랙티브-웹
• jquery

제로초님 제가 블로그를 타입스크립트와 next.js로 만들려고하는데요

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하십니까 !! 제가 개인 블로그를 제로초님의 교육 덕분에 만들긴 만들었습니다. 그런데 cra를 이용해서 만들었어서 몇일 전에 배포하고 난 뒤 조금 아쉬운거 같아서 이번에는 제대로 typescript와 next.js로 만들어서 다시 배포하려고합니다.!! 그런데 next의 여기 리듀서 설정하는 곳에서 좀 헷갈려서 질문을 드립니다. import { HYDRATE } from ' next-redux-wrapper ' ; import { combineReducers } from ' redux ' ; import user from ' ./user ' const rootReducer = combineReducers ({ index : ( state : {} = {}, action ) => { switch ( action .type) { case HYDRATE : return { ... state , ... action .payload }; default : return state ; } }, user }); export type RootState = ReturnType < typeof rootReducer > export default rootReducer ; 제가 검색을 해보아도 원하는 답이 안나와서 그런데 혹시 여기서 고칠점이 있나요?? 감사합니다.!!

• Next.js
• nodejs
• express
• react
• redux

editable 구현 관련 문의 드립니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

antd 의 테이블 구현 관련 궁금한 부분을 문의 드리고 싶습니다. antd 의 EditableTable , ResizableTitle, infinite scroll(react)를 적용해 보려하고 있습니다. 1. 테이블 헤드 가로 사이즈 변경이 먹지 않습니다. (예제 코드를 약간 변경해서 적용했습니다.) 2. 편집시 <td> padding과 Edit button 클릭시 td 안에 <input> padding 을 유지시 셀의 세로 높이가 바뀌는 문제가 있어서 Edit button 클릭시에도 동일하게 padding를 유지하도록 <td> className을 주어 padding를 주려고 합니다. 어느 부분이 잘못되어 있는지 코드 체크 부탁드립니다. // import { VariableSizeGrid as Grid } from 'react-window'; // import ResizeObserver from 'rc-resize-observer'; // import classNames from 'classnames'; import React, { useState, useEffect, useRef } from 'react'; import { Resizable } from 'react-resizable'; import { Table, Input, InputNumber, Popconfirm, Form } from 'antd'; import styled, { createGlobalStyle } from 'styled-components'; const Global = createGlobalStyle` .editable-row, .ant-form-item-explain { position: absolute; top: 100%; font-size: 12px; } table thead tr th { height: 10px;} table tbody tr th { height: 10px;} .editable row { height: 10px;} #components-table-demo-resizable-column .react-resizable { position: relative; background-clip: padding-box; } #components-table-demo-resizable-column .react-resizable-handle { position: absolute; right: -5px; bottom: 0; z-index: 1; width: 10px; height: 100%; cursor: col-resize; } .antd-table > tr > td { padding: 0; } .antd-form-control-input-content > input { padding: 11px 11px; } `; const originData = []; for (let i = 0; i < 100; i++) { originData.push({ key: i.toString(), name: `Edrward ${i}`, age: i, address: `London Park no. ${i}`, // description: name + ' ' + age +' '+ address, }); } const ResizableTitle = props => { const { onResize, width, ...restProps } = props; if (!width) { return <th {...restProps} />; } return ( <Resizable width={width} height={0} handle={ <span className="react-resizable-handle" onClick={e => { e.stopPropagation(); }} /> } onResize={onResize} draggableOpts={{ enableUserSelectHack: false }} > <th {...restProps} /> </Resizable> ); }; const EditableCell = ({ editing, dataIndex, title, inputType, record, index, children, ...restProps }) => { const inputNode = inputType === 'number' ? <InputNumber /> : <Input />; return ( ======================================== {editing ? ( <td {...restProps} className="padding0"> <Form.Item name={dataIndex} style={{ margin: 0, }} rules={[ { required: true, message: `Please Input ${title}!`, }, ]} > {inputNode} </Form.Item> </td> ) : ( <td {...restProps}> children </td> ) } ); }; ============================================ const EditableTable = () => { const [form] = Form.useForm(); const [data, setData] = useState(originData); const [editingKey, setEditingKey] = useState(''); const isEditing = (record) => record.key === editingKey; const edit = (record) => { form.setFieldsValue({ name: '', age: '', address: '', ...record, }); setEditingKey(record.key); }; const cancel = () => { setEditingKey(''); }; const save = async (key) => { try { const row = await form.validateFields(); const newData = [...data]; const index = newData.findIndex((item) => key === item.key); if (index > -1) { const item = newData[index]; newData.splice(index, 1, { ...item, ...row }); setData(newData); setEditingKey(''); } else { newData.push(row); setData(newData); setEditingKey(''); } } catch (errInfo) { console.log('Validate Failed:', errInfo); } }; const columns = [ { title: 'name', dataIndex: 'name', width: 100, editable: true, sorter: (a, b) => a.name.length - b.name.length, }, { title: 'age', dataIndex: 'age', width: 80, editable: true, sorter: (a, b) => a.age - b.age, }, { title: 'address', dataIndex: 'address', width: 200, editable: true, sorter: (a, b) => a.address.length - b.address.length, }, { title: 'operation', dataIndex: 'operation', render: (_, record) => { const editable = isEditing(record); return editable ? ( <span> <a href="javascript:;" onClick={() => save(record.key)} style={{ marginRight: 8, }} > Save </a> {/* <Popconfirm title="Sure to cancel?" onConfirm={cancel}> <a>Cancel</a> </Popconfirm> */} <a href="javascript:;" onClick={cancel} style={{ marginRight: 8 }}> Cancel </a> </span> ) : ( <a disabled={editingKey !== ''} onClick={() => edit(record)}> Edit </a> ); }, }, ]; const handleResize = index => (e, { size }) => { this.setState(({ columns }) => { const nextColumns = [...columns]; nextColumns[index] = { ...nextColumns[index], width: size.width, }; return { columns: nextColumns }; }); }; const mergedColumns = columns.map((col, index) => { if (!col.editable) { return col; } return { ...col, onHeaderCell: column => ({ width: column.width, onResize: handleResize(index), }), onCell: (record) => ({ record, inputType: col.dataIndex === 'age' ? 'number' : 'text', dataIndex: col.dataIndex, title: col.title, editing: isEditing(record), }), }; }); const onChange = (pagination, filters, sorter, extra) => { console.log('params', pagination, filters, sorter, extra); } return ( <Form form={form} component={false}> <Table components={{ header: { cell: ResizableTitle, }, body: { cell: EditableCell, }, }} expandable={{ expandedRowRender: record => <p style={{ margin: 0 }}>{record.description}</p>, rowExpandable: record => record.name !== 'Not Expandable', }} bordered dataSource={data} columns={mergedColumns} rowClassName="editable-row" onChange={onChange} scroll={{ y: 400 }} pagination={false} /> </Form> ); }; export default EditableTable;

• redux
• react
• nodejs
• express
• Next.js

colab에서 to_csv하면 저장이 안되나요?

미해결

단 두 장의 문서로 데이터 분석과 시각화 뽀개기

강의 잘 듣고 있습니다. 강사님 실습데이터를 다운로드후 제 구글드라이브의 colab에 저장해놓고 실행하였습니다. to_csv 후 read_csv결과도 제대로 확인했는데 이상하게 제 구글드라이브에서 생성되어야하는 csv는 찾을 수 없네요. 혹시 이에 대해 아시는게 있으신가요?

• pandas
• python

wsgi 실행 참조

해결됨

Vue.js - Django 연동 웹 프로그래밍 (실전편)

manage.py 대신, wsgi.py 설정으로 실행하는 방법에 대한 참조입니다. https://wayhome25.github.io/django/2018/03/04/django-deploy-04-uwsgi/

• vuejs
• django
• Vuetify

npm insatll을 눌러도 자꾸 아래 메시지가 떠요 ㅠ cmd로도 했는데 똑같아요..

미해결

MQTT 사물인터넷 통신 프로젝트 (Arduino, MQTT, Node.js, mongoDB, Android)

audited 101 packages in 0.684s found 4 vulnerabilities (3 low, 1 critical) run `npm audit fix` to fix them, or `npm audit` for details

• mongodb
• nodejs
• arduino
• iot

오전에 사진업로드 질문한 사람입니다.

미해결

윤재성의 만들면서 배우는 Spring MVC 5

업로드 폼이 브라우저 마다 다르다고 하셔서 지금까지 이클립스에서 작업하던걸 멈추고 크롬으로 했더니 정상 작동 했습니다. 정말로 감사합니다.

• MVC
• java
• XML
• spring

mysql 이 작동하질않습니다.

미해결

초보를 위한 도커 안내서

설명자료에 있는 명령어를 복사해서 입력했는데 정상작동하질 않네요 ㅠㅠ

• docker

factory pattern의 스마트 포인터화 시켜봤는대 이게 맞는지 모르겠네요

미해결

홍정모의 게임 만들기 연습 문제 패키지

//Example클래스는 변함이 없고 namespace jm { class Example : public Game2D { float time = 0.0f; std::vector<std::shared_ptr <Shape>> my_objs; public: Example() : Game2D() { my_objs.push_back(Shape::makeTriangle(Colors::gold, vec2{ -0.5f,0.2f }, 0.25f)); my_objs.push_back(Shape::makeCircle(Colors::olive, vec2{ -0.1f,0.1f }, 0.2f)); my_objs.push_back(Shape::makeBox(Colors::black, vec2{ 0.0f,0.5f }, 0.1f, 0.3f)); my_objs.push_back(Shape::makeStar(Colors::gold, vec2{ 0.0f,-0.5f }, 0.25f,0.15f)); //my_objs.push_back(new Triangle(Colors::gold, { -0.5f,0.2f }, 0.25f)); //my_objs.push_back(new Circle(Colors::olive, { -0.1f,0.1f }, 0.2f)); //my_objs.push_back(new Box(Colors::black, { 0.0f,0.5f }, 0.1f, 0.3f)); } ~Example() { } void update() override { for (const auto &obj : my_objs) { obj->draw(); } } }; //shape.h의 static 함수들을 shared_ptr화 시켜주는 작업 #pragma once #include "Game2D.h" #include "Shape.h" namespace jm { class Shape { public: vec2 pos; RGB color; void init(const RGB& _color, const vec2& _pos,float _r=0.0f) { this->color = _color; this->pos = _pos; } virtual ~Shape() { } virtual void drawShape() const = 0; //pure virtual classes void draw() { beginTransformation(); { translate(this->pos); drawShape(); } endTransformation(); } static std::shared_ptr<Shape> makeTriangle(const RGB& _color, const vec2& _pos, const float& _size); static std::shared_ptr <Shape> makeCircle(const RGB& _color, const vec2& _pos, const float& _size); static std::shared_ptr<Shape> makeBox(const RGB& _color, const vec2& _pos, const float& _width, const float& _height); static std::shared_ptr<Shape> makeStar(const RGB& _color, const vec2& _pos, const float& _outer_radius, const float& _inner_radius); }; } //이렇게 해준 후 //Shape.cpp #include "Shape.h" #include"Triangle.h" #include"Circle.h" #include"Box.h" #include"Star.h" namespace jm { std::shared_ptr<Shape> Shape::makeTriangle(const RGB& _color, const vec2& _pos, const float& _size) { return std::make_shared<Triangle>(_color, _pos, _size); } std::shared_ptr <Shape> Shape::makeCircle(const RGB& _color, const vec2& _pos, const float& _size) { return std::make_shared<Circle>(_color, _pos, _size); } std::shared_ptr <Shape> Shape::makeBox(const RGB& _color, const vec2& _pos, const float& _width, const float& _height) { return std::make_shared <Box>(_color, _pos, _width, _height); } std::shared_ptr <Shape> Shape::makeStar(const RGB& _color, const vec2& _pos, const float& _outer_radius, const float& _inner_radius) { return std::make_shared <Star>(_color, _pos, _outer_radius, _inner_radius); } } //위에처럼 바꿔주면 돼는거 같은대 //소멸자가 정상적으로 호출되는거 같거든요 cout 찍어보니까 //맞나요?

• C++
• oop
• OpenGL

Uncaught ReferenceError: firebase is not defined 오류

미해결

요즘 누가 유료로 웹서비스 구축 하나, Firebase의 모든것

Firebase가 선언되지 않았다는 오류가 뜹니다... 해결방법 알려주시면 감사하겠습니다! var firebaseConfig = {...}; // Initialize Firebase firebase.initializeApp(firebaseConfig); $(document).ready(function (user){ firebase.auth().onAuthStateChanged(function (user){ if (user) {console.log('log',user);} else {console.log('err','not yet')} }); }); function login(){ firebase.auth().createUserWithEmailAndPassword($("txtemail").val(), $("txtpasswd")).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // ... }); }

• firebase

아마존 프라임 비디오 페이지에서의 유사성의 원리와 근접성의 원리

미해결

뉴욕 프로덕트 디자이너가 알려주는, 입문자를 위한 UX디자인 개론

비디오 썸네일에서 크기의 차별을 두어 영상의 종류나 특성에 따라 차별을 두고 있다는 점에서 유사성의 원리를 찾아볼 수 있습니다. 다만, 리스트 타이틀과 비디오간의 간격이 약간 애매하여 근접성의 원리가 아주 잘 적용됐다고 보기는 힘들 것 같습니다. 비교예시로 넷플릭스에서는 리스트 타이틀과 영상들간의 간격에 좀 더 과장된(?) 간격을 두고 있습니다.

• 웹 디자인
• 모바일-디자인

TF_RECORD 데이터 세트 만들기 (오타 수정)

미해결

[개정판] 딥러닝 컴퓨터 비전 완벽 가이드

TF_RECORD 데이터 세트 만들기 에서 경로가 잘못된 것 같습니다. #export TENSOR_OBJ_DIR=~/DLCV/Detection/tensor_api/model/research/object_detection#export -> model -> models #python $TENSOR_OBJ_DIR/datatoolcreate_pet_tf_record.py --label_map_path=$TRAIN_DIR/annotations/pet_label_map.pbtxt --data_dir=$DATA_DIR --output_dir=$TRAIN_DIR/annotations -> $TENSOR_OBJ_DIR/dataset_tools/create_pet_tf_record.py --label_map_path=$TRAIN_DIR/annotations/pet_label_map.pbtxt --data_dir=$DATA_DIR --output_dir=$TRAIN_DIR/annotations

• python
• 딥러닝
• tensorflow
• keras
• 컴퓨터-비전
• 머신러닝 배워볼래요?

preserve-3d 설정

해결됨

인터랙티브 웹 개발 제대로 시작하기

3d 효과를 주고자 하는 영역의 최상위 element에 perspective를 설정하고, 하위 여러 중첩된 자식 element들에 3d 효과가 잘 영향을 미치게 하기 위해서 transform-style: preserve-3d 설정을 중간 element에 한다는 개념으로 강의를 들었어요..^^ 아래와 같은 상황일때, <a>에 perspective를 적용하고, b,c,d,e 모두 3d 효과를 사용한다고 하면, b,c,d 모두에 preserve-3d 설정을 넣는것이 가장 옳은(?) 상황 일까요...? <a> <b> <c> <d> <e> </e> </d> </c> </b> </a>

• javascript
• 인터랙티브-웹
• HTML/CSS

이벤트 리스닝 관련 (@PostUpdate)

미해결

자바 ORM 표준 JPA 프로그래밍 - 기본편

안녕하세요 영한님 @PostUpdate 이벤트 리스닝이 한 트랜잭션 내에서 반복 호출되는 이슈가 있어 질문 드립니다. 한 트랜잭션인 메서드 내에서 1. 상품 entity 조회 2. 가격 field 변경 3. 상품 entity 목록 조회 4. 상태 field 변경 위의 케이스에서 3번이 실행되기 전에 @PostUpdate 가 수행 메서드 종료시 @PostUpdate 가 수행 이렇게 2회 호출이 됩니다. 저는 트랜잭션이 종료되는 시점에 한번만 호출(동일한 엔티티가 한 메서드 내에서 여러번 수정되더라도) 되는 것을 생각하고 사용했다가 중복 작업이 발생되고 있는데요. 이 상황을 해결할 좋은 방법이 있을지 도움 요청드립니다.

• java
• JPA

사진 업로드 질문

미해결

윤재성의 만들면서 배우는 Spring MVC 5

저는 선생님이 주신 소스코드를 그대로 붙여 넣어 봐도 write.jsp에서 같은 모양의 폼이 나오질 않습니다 . 그리고 업로드를 하였을때 사진파일의 주소 때문에 업로드가 안되는거 같은데 어떻게 해결해야 하나요 ㅠ ?

• MVC
• spring
• java
• XML

애플 시퀀스 이미지 질문 드립니다

미해결

애플 웹사이트 인터랙션 클론!

안녕하세요! 강의 너무 잘 보고 있습니다! 혹시 이번 아이패드 제품도 그렇고, 아이폰12 제품 페이지의 이미지 시퀀스가 일반적인 상태가 아니라 뭔가 암호화 된듯한? 형태인데 혹시 이유와 방법을 알 수 있을까요..?? 이런 질문을 어디에다 해야 하는지 고민하다가 질문 드립니다..!ㅠㅠ

• javascript
• HTML/CSS
• svg
• 웹 디자인
• 인터랙티브-웹
• 클론코딩

keras retinanet 수업 코드 질문입니다.

미해결

[개정판] 딥러닝 컴퓨터 비전 완벽 가이드

#from keras_retinanet.utils.gpu import setup_gpu # 현 버전에서 이슈가 있어서 주석 처리합니다 . 2020.08.29 #gpu = 0 #setup_gpu(gpu) 혹시 이렇게 되면 GPU 사용을 안하는건가요?? 속도가 느려지는건지 궁금해서 물어봅니다~ ㅎ

• 컴퓨터-비전
• keras
• 딥러닝
• python
• tensorflow
• 머신러닝 배워볼래요?

PM2 프론트엔드 문의

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요? 좋은 강의 잘 들었습니다 현재 PM2 백엔드는 터미널 프로그램을 꺼도 잘 작동합니다. 하지만 프론트엔드에서는 PM2가 터미널 프로그램을 끄면 작동을 안합니다 그래서 터미널을 켜두면 터미널 자체적으로 두시간뒤에 꺼져서, 빌드부터 다시 해야합니다. 24시간 작동시키려면 프론트엔드에 PM2 설정을 추가적으로 해야 하나요?

• redux
• nodejs
• react
• express
• Next.js

손잡이 처음에 만들 때

미해결

Maya 하드서페이스 모델링 강좌

손잡이 부분 맨처음에 만들 때 윗 면이랑 아랫면에서 각각 extrude 하는데 두 개가 만나서 닿는 부분은 그냥 face 두 개 지우고 merge 하나요?

• maya

질문이있습니다

[개정판] 딥러닝 컴퓨터 비전 완벽 가이드

삭제된 글입니다

• 컴퓨터-비전
• tensorflow
• 머신러닝 배워볼래요?
• python
• 딥러닝
• keras