style-component와 useMemo에 대해 궁금한점이 있습니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
따로 css 파일을 두지 않고 style-component나 useMemo를 쓰면 각 엘리먼트 별로 css를 부여 할 때 style관련 소스코드가 복잡해 질 것 같은데 이런 경우에는 실무에서 어떻게 처리하는지 알 수 있을까요?
- Next.js
- react
- nodejs
- redux
- express
176만명의 커뮤니티!! 함께 토론해봐요.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
따로 css 파일을 두지 않고 style-component나 useMemo를 쓰면 각 엘리먼트 별로 css를 부여 할 때 style관련 소스코드가 복잡해 질 것 같은데 이런 경우에는 실무에서 어떻게 처리하는지 알 수 있을까요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
next js 에서 redux-toolkit 사용하고 싶은데 이 경우에는 redux-toolkit을 어떻게 nextjs에 적용해서 사용 할 수 있나요?
해결됨
파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)
안녕하세요! 선생님의 강의 들으며 많은 도움 얻고 있습니다 ^^ 다름이 아니라 제가 짠 코드에서 in1, in2, in3 까지는 답이 맞는데, in4부분 부터는 index out of range 오류가 나서 res의 길이를 더 늘려주면(원래는 res=[0]*n 이었는데 res[0]*(n+100)으로 늘려줬습니다), 답이 0으로만 출력됩니다. 혹시 어떤 부분이 잘못된 것일까요? 혼자 오래 고민해 보았지만 그럼에도 도저히 어떻게 손을 대야할 지 갈피가 잡히지 않아 질문을 남깁니다..! ㅠㅠ import sys sys.stdin=open('input.txt', 'rt') def DFS(x,s,time) : global xx if time>m: return if time==m : if sum(res) > xx: xx=sum(res) return else : for i in range(s,n+1) : res[x]=a[i-1][0] DFS(x+1, i+1, time+a[i-1][1]) res[x]=0 if __name__=='__main__' : a=[] n, m = map(int, input().split()) for _ in range(n) : a.append(list(map(int, input().split()))) xx=0 res=[0]*(n+100) DFS(0,0,0) print(xx)
미해결
it 취업을 위한 알고리즘 문제풀이 입문 (with C/C++) : 코딩테스트 대비
선생님, 안녕하세요? 일단 코드 작성했고 예제는 잘 결과가 나오는데 제가 한 방식에 확신이 없어서 질문을 드립니다. 저는 작성될 각 노드에 대한 최소비용경로를 구할 때 체크방문배열(1로 된 것)과 현재 큐에 들어온 노드까지의 경로값을 누적하는 방법으로 최단경로를 구했습니다. 해당 부분에 주석을 달아두었는데 이 방법이 다른 예제들에 대해서도 맞는지 수업을 듣기 전에 미리 먼저 물어보고 싶습니다. #include<iostream> #include<algorithm> #include<vector> #include<stdio.h> using namespace std; int Q[101]; int front = 0, back = 0; int ch[101]; int N, M; vector <int> Queue[101]; int PathCost[101]; int target = 2; int main() { scanf("%d %d", &N, &M); int SNode, TNode; for (int i = 0; i < M; i++) { scanf("%d %d", &SNode, &TNode); Queue[SNode].push_back(TNode); } /*for (int i = 0; i < N+1; i++) { for (int j = 0; j < Queue[i].size(); j++) { printf("%d ", Queue[i][j]); } printf("\n"); }*/ //최초 시작점을 설정 ch[1] = 1; Q[++back] = 1; int current; while (front < back) { current = Q[++front]; //현재 1 for (int i = 0; i < Queue[current].size(); i++) { //먼저 한 번만에 갈 수 있는 정점 판단 if (ch[Queue[current][i]] == 0) { //아직방문하지 않았다면 Q[++back] = Queue[current][i]; //뒤에 추가를 한다. ch[Queue[current][i]]=1; //그리고 방문처리를 해준다. //이게 맞는건지 궁금합니다. PathCost[Queue[current][i]] = PathCost[current] + ch[Queue[current][i]]; } } } for (int i = 2; i < N + 1; i++) { printf("%d : %d \n", i, PathCost[i]); } }
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
<! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > 마우스 호버되면 나타나는 툴팁 만들기 </ title > < style > .items { height : 100vh ; display : flex ; justify-content : center ; align-items : center ; } .item { /* border: 1px solid black; */ text-align : center ; position : relative ; } .item p { width : 250px ; margin : 0 0 15px ; padding : 15px ; background-color : black ; color : white ; opacity : 0 ; transition : 0.5s ; } .item p::after { content : ' ' ; display : block ; width : 15px ; height : 15px ; background-color : black ; position : absolute ; left : 50% ; transform : translateX ( -50% ) rotate ( 45deg ); top : 30% ; } .item:hover p { opacity : 1 ; } </ style > </ head > < body > < div class = "items" > < div class = "item" > < p > This HTML tutorial contains hundreds of HTML examples. </ p > < img src = "./image/icon-01.png" alt = "" > </ div > < div class = "item" > < p > This CSS tutorial contains hundreds of CSS examples. </ p > < img src = "./image/icon-02.png" alt = "" > </ div > < div class = "item" > < p > AngularJS extends HTML with new attributes. </ p > < img src = "./image/icon-03.png" alt = "" > </ div > < div class = "item" > < p > Node.js is an open source server environment. </ p > < img src = "./image/icon-04.png" alt = "" > </ div > </ div > </ body > </ html > 영상 따라보기전에 혼자서 먼저 해봤는데 이렇게 했을경우에는 이미지만 클릭하였 떄 툴팁이 나오게하는 방법은 없는건가요 ?ㅠ 조금만 다르게해도 너무 헷갈리네요...
미해결
현존 최강 크롤링 기술: Scrapy와 Selenium 정복
크롤링 예제와 강의에 따라서 아래와 같이 2가지 경우로 해봤는데 결과가 다르게 나왔습니다. prices = response.css('div.best-list ul > li > div.s-price > strong > span ::text').getall() prices = response.css('div.best-list ul li div.s-price strong span ::text').getall() 여기서 > 꺾쇠의 의미가 무엇이길래 결과가 다르게 나오는지 궁금합니다.
미해결
컴퓨터, 웹, 코딩, 프로그래밍의 시작 - Web1
9:40에서 방문자가 주소창 입력 후 접속을 하면 웹 서버가 index.html 파일을 읽는다는게 무슨 소리죠? index.html 라는게 정확히 뭔가요?
미해결
하울의 안드로이드 인스타그램 클론 만들기
혹시나 코드를 잘못쳤나 강의를 몇번이나 돌려봤지만 틀린부분이 없는데도 댓글이 안뜨네요
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
안녕하세요 강사님 저 springconfig에서 30번째 줄에 에러가나는데 왜 그런건지를 잘 모르겠는데 요기 문제가 생기는데 확인이 가능할까요..??
미해결
선형대수학개론
부분집합이 되기 위해서 세 가지 조건을 만족해야 한다는 것을 이해는 했습니다만, 첫번 째인 0벡터가 H에 해당되어야 한다는 점이 아직 이해가 잘 가지 않습니다. 제가 0벡터의 개념을 잘 이해하지 못 하는 거 같은데. 0벡터는 말 그대로 3차원 공간에서 원점 아닌가요? 근데 만약 원점을 지난다고 하더라도, 부분공간이 무조건 원점에 접해야 될 이유가 있어야 하는지도 직관적으로 이해가 잘 안 갑니다.
미해결
[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
강의와 관련있는 질문 을 남겨주세요. • 강의와 관련이 없는 질문은 지식공유자가 답변하지 않을 수 있습니다. (사적 상담, 컨설팅, 과제 풀이 등) • 질문을 남기기 전, 비슷한 내용을 질문한 수강생이 있는지 먼저 검색 을 해주세요. (중복 질문을 자제해주세요.) • 서비스 운영 관련 질문은 인프런 우측 하단 ‘문의하기’ 를 이용해주세요. (영상 재생 문제, 사이트 버그, 강의 환불 등) 질문 전달 에도 요령이 필요합니다. • 지식공유자가 질문을 좀 더 쉽게 확인할 수 있게 도와주세요. • 강의실 페이지 (/lecture) 에서 '질문하기'를 이용해주시면 질문과 연관된 수업 영상 제목이 함께 등록됩니다. • 강의 대시보드에서 질문을 남길 경우, 관련 섹션 및 수업 제목을 기재 해주세요. • 수업 특정 구간에 대한 질문은 꼭 영상 타임코드 를 남겨주세요! 구체적인 질문 일수록 명확한 답을 받을 수 있어요. • 질문 제목은 핵심 키워드를 포함해 간결하게 적어주세요. • 질문 내용은 자세하게 적어주시되, 지식공유자가 답변할 수 있도록 구체적으로 남겨주세요 . • 정확한 질문 내용과 함께 코드 를 적어주시거나, 캡쳐 이미지 를 첨부하면 더욱 좋습니다. 기본적인 예의 를 지켜주세요. • 정중한 의견 및 문의 제시, 감사 인사 등의 커뮤니케이션은 더 나은 강의를 위한 기틀이 됩니다. • 질문이 있을 때에는 강의를 만든 지식공유자에 대한 기본적인 예의를 꼭 지켜주세요. • 반말, 욕설, 과격한 표현 등 지식공유자를 불쾌하게 할 수 있는 내용 은 스팸 처리 등 제재를 가할 수 있습니다. 안녕하세요, 실습을 진행하면서 추가적으로 datepicker를 사용해서 날짜 값을 받아와서 라우터를 통해 몽고디비에 저장하는 것을 시도해보았습니다. 버튼을 클릭하면 달력에서 해당 날짜를 받아오는 것 까지는 했는데, 해당 값을 라우터로 전송한 뒤 콘솔에 출력해보면 빈 객체가 전송이 됩니다. 라우터 부분입니다 어떤 방식으로 데이터를 전송해야 올바르게 날짜 값이 갈 수 있을까요? 감사합니다.
미해결
C 와 C++ 을 동시에 배워보자 - 두들낙서의 C/C++
강사님 이렇게 하면 결과가 이상하게 나옵니다 1과 2를 넣으니 3이 아니라, 12974736 이 나옵니다. 뭐가 잘못된거죠? 결과가 아스키로 나온거 같은데요 int main() { int a, b; int hap; //int hap; // int hap = a + b; 여기에 두면 variable ,without being initialized가 나옴 printf("첫번째 숫자를 입력해 주세요:"); scanf("%d", &a); printf("두번째 숫자를 입력해 주세요:"); scanf("%d", &b); hap = a + b; printf("%d\n", &hap); }
해결됨
모든 개발자를 위한 HTTP 웹 기본 지식
안녕하세요 김영한님. 강의를 듣다가, 문득 모바일의 경우에는 flow가 어떻게 되는지 궁금해져서 질문남깁니다. 인터넷에서 통신은 결국 IP와 Port번호를 알아야 data를 전송할 수 있는 것으로 이해하고 있습니다. 그런데, 모바일은 IP가 계속 바뀌고 Port번호를 따로 설정하지 않아도 카톡 메시지를 서버로 부터 수신할 수 있습니다. 검색을 통해, FCM이나 APNs과 같은 Push 서버를 이용해서 보낸다는 개념은 이해하였습니다만, 이 Push 서버들이 어떻게 바뀌는 모바일의 IP를 알아내는 건지, port 포워딩?은 어떻게 해결하는지 궁금합니다. 바쁘시겠지만, 답변남겨주시면 정말 감사하겠습니다.
미해결
파이썬 무료 강의 (기본편) - 6시간 뒤면 나도 개발자
답에서는 while문 안에 try구문을 썼는데 혹시 while 문 밖에 try를 써도 괜찮나요?
미해결
[리뉴얼] 파이썬입문과 크롤링기초 부트캠프 [파이썬, 웹, 데이터 이해 기본까지] (업데이트)
postman으로는 데이터가 정상적으로 업로드 되는데 주피터 노트북으로는 업로드가 안됩니다. 해결하는 방법이 있을까요?
미해결
따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
선생님 따라서 강의보고 작성하는 데 key 에러가 많이 뜨네요. 찾아보니까 component안에 prop을 줄때 key값을 안줘서 나오는 현상 같은데 어디를 어떻게 적용할지 모르겠네요. https://github.com/ohjooyeong/youtubeclone-with-react
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
삭제된 글입니다
미해결
웹 게임을 만들며 배우는 자바스크립트
안녕하세요 제로초님 지뢰찾기가 어려워서 쭉 복습중인데, 드디어 조금 갈피가 잡혀서 기쁩니다. 좋은 강의 감사합니다! 수업시간에 따라한 코드리팩토링을 시도해보았어요. 그런데 이벤트단위로 쪼개서 리팩토링을 하는 게 좋을지, 아니면 세세하게 쪼개서 함수로 만들지 고민이 되어요. 질문 어떤 식이 다시 봤을 때 이해하기 쉬울까요? 시도한 리팩토링은 괜찮나요? var tbody = document.querySelector('#table tbody'); var dataset = []; var 중단플래그 = false; var 열은칸 = 0; var 코드표 = { 연칸: -1, 물음표: -2, 깃발: -3, 깃발지뢰: -4, 물음표지뢰: -5, 지뢰: 1, 보통칸: 0 }; var 줄; var 칸; var 주변; function 지뢰위치() { var 칸채우기 = Array(hor * ver).fill().map(function (인덱스) { //가로 * 세로 return 인덱스; }); //자바스크립트는 0부터 센다 var 지뢰만들기 = []; while (칸채우기.length > hor * ver - mine) { var 지뢰배치표 = 칸채우기.splice(Math.floor(Math.random() * 칸채우기.length), 1)[0]; 지뢰만들기.push(지뢰배치표); } }; function 깃발법칙() { if (e.currentTarget.textContent === '' || e.currentTarget.textContent === 'X') { //빈칸이거나 X일 때 e.currentTarget.textContent = '!'; //깃발과 물음표는 데이터일 필요가 없다. 화면에 표시하는 용도니까 e.currentTarget.classList.add('flag'); if (dataset[줄][칸] = 코드표.지뢰) { dataset[줄][칸] = 코드표.깃발지뢰; } else { dataset[줄][칸] = 코드표.깃발; } } else if (e.currentTarget.textContent === '!') { //느낌표라면 e.currentTarget.textContent = '?'; //우클릭 한 번은 느낌표, 두 번은 물음표 e.currentTarget.classList.remove('flag'); e.currentTarget.classList.add('question'); if (dataset[줄][칸] = 코드표.깃발지뢰) { dataset[줄][칸] = 코드표.물음표지뢰; } else { dataset[줄][칸] = 코드표.물음표; } } else if (e.currentTarget.textContent === '?') { //물음표라면 e.currentTarget.classList.remove('question'); if (dataset[줄][칸] === 코드표.물음표지뢰) { e.currentTarget.textContent = 'X'; dataset[줄][칸] = 코드표.지뢰; } else { e.currentTarget.textContent = ''; dataset[줄][칸] = 코드표.보통칸; } } }; function 오픈법칙() { dataset[줄][칸] = 1; //배열 안에 숫자를 넣자(기본설정 = 0) var 주변 = [dataset[줄][칸-1], dataset[줄][칸+1]]; //왼쪽, 오른쪽 확인 if (dataset[줄-1]) { //윗줄 검사 주변 = 주변.concat([dataset[줄-1][칸-1], dataset[줄-1][칸], dataset[줄-1][칸+1]]); } else if (dataset[줄+1]) { //아랫줄 검사 주변 = 주변.concat([dataset[줄+1][칸-1], dataset[줄+1][칸], dataset[줄+1][칸+1]]); } var 주변확인 = 주변.filter(function(v) { return [코드표.지뢰, 코드표.깃발지뢰, 코드표.물음표지뢰].includes(v); //모든 지뢰를 세자 } }; function 주변법칙() { if (주변확인 === 0) { console.log('주변을 엽니다'); var 주변칸 = []; if (tbody.childre[줄-1]) { 주변칸 = 주변칸.concat([ tbdoy.children[줄-1].children[칸-1], tbdoy.children[줄-1].children[칸], tbdoy.children[줄-1].children[칸+1] ]); if (tbody.childre[줄-1]) { 주변칸 = 주변칸.concat([ tbdoy.children[줄].children[칸-1], tbdoy.children[줄].children[칸+1] ]); if (tbody.childre[줄-1]) { 주변칸 = 주변칸.concat([ tbdoy.children[줄+1].children[칸-1], tbdoy.children[줄+1].children[칸], tbdoy.children[줄+1].children[칸+1] ]); } //열려있는 칸을 또 열릴 필요없게 수습하자 dataset[줄][칸] = 1; //배열 안에 숫자를 넣자(기본설정 = 0) 주변칸.filter(function(v) {return !!v}).forEach(function(옆칸) { //칸 위치 파악 var 부모tbody = e.currentTarget.parentNode.parentNode; var 부모tr = e.currentTarget.parentNode; //몇 줄? var 옆칸줄 = Array.prototype.indexOf.call(부모tbody.children, 부모tr); var 옆칸칸 = Array.prototype.indexOf.call(부모tr.children, e.currentTarget); //e.currentTarget = td if (dataset[옆칸줄][옆칸칸] !== 코드표.연칸) { 옆칸.click(); } }); } } //지뢰를 제외한 모든 칸이 열리면 승리함 if (열은칸 === hor * ver - mine) { document.querySelector('#result').textContent = '승리하셨습니다~!'; } } }; function 지뢰만드는규칙() { for (var k = 0; k < 지뢰만들기.length; k++) { //배열은 0부터 시작하기에 -1이 나와선 안 된다 var 세로 = Math.floor(지뢰만들기[k] / ver); var 가로 = 지뢰만들기[k] % ver; tbody.children[세로].children[가로].textContent = 'X'; //지뢰를 심는다, 화면 dataset[세로][가로] = 코드표.지뢰; //데이터, 화면과 데이터는 일치해야 됨! } }; //지뢰찾기 실행 document.querySelector('#exec').addEventListener('click', function() { //이전 게임 초기화 tbody.innerHTML = ''; document.querySelector('#result').textContent = ''; dataset = []; 열은칸 = 0; 중단플래그 = false; //input의 아이디들 var hor = parseInt(document.querySelector('#hor').value); var ver = parseInt(document.querySelector('#ver').value); var mine = parseInt(document.querySelector('#mine').value); //지뢰위치 지뢰위치(); //지뢰테이블 for (var i = 0; i < ver; i += 1) { //2차원 배열, 세로 만들기 var arr = []; //지뢰표에 배열을 깔자 var tr = document.createElement('tr'); dataset.push(arr); for (var j = 0; j < hor; j += 1) { //가로 만들기 arr.push(코드표.보통칸); var td = document.createElement('td'); //오른쪽 클릭방지 td.addEventListener('contextmenu', function(e) { e.preventDefault(); if (중단플래그) { return; } //칸 위치 파악 var 부모tbody = e.currentTarget.parentNode.parentNode; var 부모tr = e.currentTarget.parentNode; //몇 줄? 줄 = Array.prototype.indexOf.call(부모tbody.children, 부모tr); //배열이 아니여도 indexOf()를 쓸 수 있다 칸 = Array.prototype.indexOf.call(부모tr.children, e.currentTarget); //e.currentTarget = td //깃발법칙 깃발법칙(); ); //클릭 시, 주변 지뢰 파악 td.addEventListener('click', function(e) { if (중단플래그) { return; } //칸 위치 파악 var 부모tbody = e.currentTarget.parentNode.parentNode; var 부모tr = e.currentTarget.parentNode; //몇 줄? 줄 = Array.prototype.indexOf.call(부모tbody.children, 부모tr); //배열이 아니여도 indexOf()를 쓸 수 있다 칸 = Array.prototype.indexOf.call(부모tr.children, e.currentTarget); //e.currentTarget = td if ([코드표.연칸, 코드표.깃발, 코드표.깃발지뢰, 코드표.물음표지뢰, 코드표.물음표].includes(dataset[줄][칸])) { return; } //지뢰의 유무확인 e.currentTarget.classList.add('opend'); 열은칸 += 1; if (dataset[줄][칸] === 코드표.지뢰) { e.currentTarget.textContent = '펑'; document.querySelector('#result').textContent = '다시 도전하세요!'; 중단플래그 = true; } else { //지뢰가 없다면 dataset[줄][칸] = 1; //배열 안에 숫자를 넣자(기본설정 = 0) 주변 = [dataset[줄][칸-1], dataset[줄][칸+1]]; //왼쪽, 오른쪽 확인 오픈법칙().length; e.currentTarget.textContent = 주변확인 || ''; //숫자 0은 표시가 되지 않도록! dataset[줄][칸] = 코드표.연칸; //지뢰없는 부분을 한꺼번에 열리도록 만들자 주변법칙(); ); tr.appendChild(td); //td는 tr에 속하고 } tbody.appendChild(tr); //tr은 tbody에 속한다 } //지뢰 심기: 규칙을 찾아서 랜덤숫자의 위치에 지뢰를 배치시키자 지뢰만드는규칙(); });
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
안녕하세요 언제나 강의 잘 듣고 있습니다. 오라클을 사용하고 서버가 여러대인 상황에서 시퀀스 사용에 대해 질문이 있어서요 시퀀스가 유니크한것을 보장하기도 하지만 디비에 인서트되는 순서 보장을 하기 위해서 사용하기도 하는데 allocationsize를 사용하게 될 경우 서버간 할당받는 시퀀스 영역대가 달라 순서보장이 안될것 같아서요, 혹시 이런 경우는 어떻게 처리할까요? 그리고 오라클 디비를 사용하는데 Identity 전략을 사용하면 어떤일이 발생하나요?
해결됨
모든 개발자를 위한 HTTP 웹 기본 지식
안녕하세요 김영한님. Persistent Connection 질문입니다. 제가 간단한 웹 프로젝트를 운영하고 있는데, 자동으로 Persistent Connection가 적용된 것처럼 보입니다. 원래 따로 설정을 해주어야 적용이 되는 건지, g유니콘이나 그런 앱에서 알아서 처리를 해주는 건지, HTTP 자체적으로 기본설정이 되어 있는 건지, 궁금합니다!