173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 시작은 프리캠프
이렇게 하나하나 나눠서 한다고 틀린건아니지만 어차피 같은 css속성이고 문서길이만 길어질 뿐이라서 과제 레퍼런스에서는 <div class="profile_detail> 이렇게 하나로 묶은건가요? 만약에 phone부분만 특정스타일 부여하고 싶으면 id부여해주면되는건가요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Editor.jsx 파일은 Props 가 없고 단순히 export default memo (editor) 코드만 있으니 당연히 리렌더링이 안되어야 하지만 리렌더링이 되고 있습니다. 그래서 App.jsx 파일에서 <TodoDispatchContext.Provider value={memoizedDispatch}> <Editor /> <List /> </TodoDispatchContext.Provider> 이렇게 리턴하는걸 <Editor />를 위쪽으로 빼면 리렌더링이 안 일어 납니다. dispatchContext 안쪽으로 editor 컴포넌트가 들어가면 리렌더링 일어나고 바깥으로 빼면 리렌더링 안 일어 나는거 설명좀 될까요?
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
npm run dev를 통해 frontend 폴더에서 다음과같이 정상적으로 실행이 되었습니다. 다만, 막상 해당 경로로 접속하면 우외같이 무한로딩에 빠져서 아무것도 뜨지 않습니다. F12 개발자도구로 봐도 어떠한 콘솔에러메시지도 없습니다. 어떻게 해결해야 할까요?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
선생님 궁금한 게 있어서 글을 남겨봅니다 오늘 To-do list 강의 세션을 완강했는데 이해를 하지 못하는 부분이 있었습니다 const onUpdate = (targetId) => { setTodo( todo.map ((it) => it.id === targetId ? { ...it, isDone: !it.isDone } : it ) ); }; onUpdate 부분을 만들때 todo.map ((it) => it.id === targetId ? { ...it, isDone: !it.isDone } : it 이분에서 ...it : !it.isDone 이 무엇을 의미하는지와 스프레드 연산자를 쓴 이유를 이해하기 어려웠습니다 const onDelete = (targetId) => { setTodo(todo.filter((it) => it.id !== targetId)); }; 에서 todo.filter((it) => it.id !== targetId) 가 삭제를 하기위해 만들어졌는데 .filter((it) => it.id !== targetId filter 를 쓴 이유와 it.id !== targetId 가 뭔지를 아직도 잘모르겠습니다 to-do list 를 배열을 이용하여 상태 관리를 하는것으로 만들었는데 천천히 공부 해보면서 적용 해볼려고 합니다 공부할떄 선생님께서 보는 학습자료나 to-do list 를 만들때 특별히 참고한게 있었는지 궁금합니다
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
밑에 같은 질문을 하신 분이 계시던데요. 12.15 챕터의 10:33 초에 보면 수정 으로 들어 왔을때 기본값으로 수정 전 데이터가 나온다고 되어 있습니다. 지금까지 영상을 보면서 같이 코딩을 해오고 있었는데요.. 그런데 밑에 질문 하신 분 처럼 10:33 초 전 까지의 코딩으로는 수정 시 데이터가 나오지 않습니다. 그리고 인프런 측 인지..답변 설명에 useEffect 얘기 하시던데.. useEffect(() => { if (initData) { setInput({ ...initData, createdDate: new Date(Number(initData.createdDate)), }); } }, [initData]); 이 부분은 10:33 초 전 까지는 나오지 않았습니다. 인프런 측도 답변을 주실려면 정확히 파악 후 답변을 주세요.. 뭐가 잘못된 건가요? useEffect 부분이 없어도 설명대로 수정 으로 들어가면 데이터가 나오는게 맞는건가요? 아니면 제가 뭔가 빠트린 것이 있나요?
미해결
Next + React Query로 SNS 서비스 만들기
강의 진행 도중 생긴 에러는 아니고, 순수한 궁금증에 질문 남깁니다. 제가 React 로 프론트엔드 개발은 항상 모든 컴포넌트를 화살표 함수로 작성했었습니다. 이를테면 const Home = () => { }; export default Home; 이런식으로 작성하였는데요, 근데 상기 Nextjs 강의에서도 그렇고 다른 수많은 블로그 글들에서는 전통적인 함수 선언식을 사용하더라구요. export default function Home() { }; 그 이유가 무엇일까요? 모두가 사용하는데는 이유가 있는거 같은데 관련 자료를 찾을 수가 없어서 질문드립니다. 혹시나 강제된 문법인가 싶어 해당 강의에서 사용된 페이지들을 화살표함수로 바꿔서 작성해봤는데 똑같이 에러 없이 잘 실행이 되더군요..
미해결
Next + React Query로 SNS 서비스 만들기
[username] 라우터의 page.tsx에 현재 들어온 유저정보를 받아오는 prefetchQuery랑 그 유저의 게시글을 받아오는 infinitePrefetchQuery가 있는데 두 번째 Query의 경우 서버 컴포넌트에서 실행되는 함수라 credential:"include"가 작동하지 않아 Cookie값을 따로 명시해줘야 하는걸로 알고있습니다. 근데 Cookie값을 따로 명시해주지않아도 게시글들이 잘 불러와지는데 이 과정이 궁금합니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
우연찮게 '완벽한' 프론트엔드 강의를 발견하였는데 제가 지금 듣고 있는 강의와 과정이 많이 다른 걸까요? 앱 개발 관련해서도 코드캠프를 통해 공부하고 싶은데 따로 강의가 있진 않은걸까요?
미해결
프로그래밍 시작하기 : 웹 입문 (Inflearn Original)
<html> <head> <meta charset="utf-8"> <title>인스타그램</title> <link rel = "stylesheet" href="styles/card.css"> </head> <body> <section class="container"> <article class ="card"> <header> <div class = "circle-image"> <img src="images/inflearn-project-images/profile.png"/> </div> <div class="card-username"> <span>inflearn</span> </div> <div class="option-more"> <button class="transparent-button"><img src="images/inflearn-project-images/icons/mark.png"/></button> </div> </header> <main> <div class="carousel" data="0"> <!--캐러셀 들어갈 영역--> <div> <ul> <li><img src="images/inflearn-project-images/mountain1.jpg"/></li> <li><img src="images/inflearn-project-images/mountain2.jpg"/></li> <li><img src="images/inflearn-project-images/mountain3.jpg"/></li> <li><img src="images/inflearn-project-images/mountain4.jpg"/></li> </ul> <div class="slide slide-left"> <button class="transparent-button"><img src="images/inflearn-project-images/icons/arrow-left.png"/></button> </div> <div class="slide slide-right"> <button class="transparent-button"><img src="images/inflearn-project-images/icons/arrow-right.png"/></button> </div> </div> <footer> <div class = "active"></div> <div></div> <div></div> <div></div> </footer> </div> <div class="card-container"> <dic class="card-buttons"> <div> <button class="transparent-button"> <img src="images/inflearn-project-images/icons/heart.png"/> </button> </div> <div> <button class="transparent-button"> <img src="images/inflearn-project-images/icons/chat.png"/> </button> </div> <div> <button class="transparent-button"> <img src="images/inflearn-project-images/icons/paper-plane.png"/> </button> </div> <div class="last-card-button"> <button class="transparent-button"> <img src="images/inflearn-project-images/icons/bookmark.png"/> </button> </div> </dic> <div class="card-likes"> 좋아요999,999개 </div> <div class="card-content"> <ul> <li> <div> <span> lnflean.user </span>본문 내용 </div> </li> <li class="comment"> <div> <span>lnflean.user</span>댓글 1 <button class="transparent-button"> <img src="images/inflearn-project-images/icons/heart.png"> </button> </div> </li> <li class="comment"> <div> <span>lnflean.user</span>댓글 2 <button class="transparent-button"> <img src="images/inflearn-project-images/icons/heart.png"> </button> </div> </li> </ul> </div> <div class="card-time">7일전</div> </div> </main> <footer class="card-comment"> <input type="text" placeholder="댓글달기..." name="comment"> <div> <button class ="transparent-button">개시</button> </div> </footer> </article> </section> </body> </html> body { padding : 0; margin : 0; } ul, li{ list-style: none; } button.transparent-button{ background-color: transparent; border: 0; outline: 0; cursor: pointer; } .container{ width: 100%; background-color: #f0f0f0; padding: 20px 0; } article.card{ width: 600px; margin: 20px auto; margin-bottom: 60px; background: #fff; border: 1px solid #c0c0c0; border-radius: 3px; } /*** header 시작 ***/ article.card header{ height: 40px; padding: 10px; } article.card header > div { display: inline-block; vertical-align: middle; } .circle-image { height: 100%; padding: 5px; box-sizing: border-box; } .circle-image > img { height: 100%; border-radius: 50%; } .card-username { padding: 10px 0; font-weight: 900; line-height: 20px; margin-left: 5px; font-size: 13px; } .option-more { float: right; padding: 7px; } /*** header 시작 ***/ /*** content 시작 ***/ .card-container{ padding: 5px 10px; } /* 버튼 */ .card-buttons{ padding: 0 5px; margin-top: 5px; } .card-buttons > div{ display: inline-block; margin-right: 10px; } .card-buttons > div.last-card-button { float: right; margin-right: 0; } /* 좋아요*/ .card-likes{ padding: 5px; font-size: 13px; font-weight: 900; } /* 본문*/ .card-content{ padding: 2px 5px; font-size: 13px; } .card-content li > div{ padding: 1px 0; } .card-content li > div > span{ font-weight: 900; } .card-content li.comment > div > button{ float: right; } .card-content li.comment > div > button > img{ width: 12px; margin-right: 5px; } /*시간*/ .card-time{ padding: 3px; font-size: 11px; color: #a0a0a0; } /*푸터*/ footer.card-comment{ position: relative; height: 55px; border-top: 1px solid #e0e0e0; } footer.card-comment input{ width: 100%; height: 100%; border : 0; outline : 0; padding: 0 15px; color: #606060; } footer.card-comment >div{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } footer.card-comment > div > button{ color: #0095f6; opacity: 0.5; padding: 10px 5px; } /*캐러셀*/ article.card main .carousel{ width: 100%; position: relative; } article.card main .carousel > div{ overflow: hidden; } article.card main .carousel ul{ width: 10000px; } article.card main .carousel ul >li { display: inline-block; } article.card main .carousel ul > li img{ width: 600; } .slide{ position: absolute; top: 50%; transform: translateY(-50%); padding: 10px; } .slide img { opacity: 0.75; } .slide-right{ right: 0; } .carousel footer{ position: absolute; height: 20px; text-align: center; width: 100%; bottom: -20px; } .carousel footer div{ width: 6px; height: 6px; background-color : #a8a8a8; display: inline-block; border-radius: 50%; } .carousel footer div { width: 6px; height: 6px; background-color: #a8a8a8; } 원인을 찾을 수 없어서 ul style 사용해서 그냥 40px을 지웠는데 왜 40px이 들어가 있는지를 모르겠습니다
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
<html> <head> <meta charset="UTF-8" /> <title>출력결과</title> </head> <body> <script> function solution(s) { let answer = []; for (e of s) { if (!answer.includes(e)) { answer.push(e); } } return answer; } let str = ["good", "time", "good", "time", "student"]; console.log(solution(str)); </script> </body> </html>
해결됨
코드로 배우는 React 19 with 스프링부트 API서버
선생님, 안녕하세요~ 섹션 3. 스프링부트와 API서버 => REST 방식 컨트롤러 만들기(2)에서 4:06분 근처 => LocalDateFormatter에서 오류가 납니다. CustomServletConfig까지 작성하고 실행하면 아래와 같은 오류가 나옵니다. C:\backend2\serverapi\serverapi\src\main\java\org\zerock\serverapi\controller\formatter\LocalDateFormatter.java:12: error: type Formatter does not take parameters public class LocalDateFormatter implements Formatter<LocalDate> { ^ 앞.뒤로 돌려보면서 찾아 보려 했는데 잘 모르겠습니다. LocalDateFormatter만드는 부분부터 오류가 납니다. 죄송하지만 확인하시면 답변 부탁 드립니다. 감사합니다. 코드 첨부합니다. package org.zerock.serverapi.controller.formatter; import org.hibernate.engine.jdbc.internal.Formatter; import java.text.ParseException; import java.time.LocalDate; import java.time.format.DateTimeFormatter; import java.util.Locale; import static java.awt.SystemColor.text; public class LocalDateFormatter implements Formatter<LocalDate> { @Override public LocalDate parse(String Text, Locale locale) throws ParseException { return LocalDate.parse(text, DateTimeFormatter.ofPattern("yyyy-MM-dd")); } @Override public String print(LocalDate object, Locale locale) { return DateTimeFormatter.ofPattern("yyyy-MM-dd").format(object); } }
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
self-signed certificate in certificate chain 발생합니다. 1번 process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'; 2번 // SSL 인증 무시를 위한 Agent 생성 const httpsAgent = new https.Agent({ rejectUnauthorized: false }); await axios.get("target_url", { httpsAgent: agent }); 1,2 번 외 해결 방법이 있을까요? 또는 2번을 적용하려면 어떻게 해야하나요? 또는 Java에서 로컬 톰캣 서버에서 HTTPS 설정하듯이 할수있는 방법이 있나요?
해결됨
아바타 커뮤니티앱 만들기 (React Native Expo)
❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, Expo, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 윈도우, 안드로이드 환경에서 실행하였습니다. 홈화면은 잘 보이지만 profile이나 setting 버튼 클릭시 위의 오류화면이 나오게 됩니다. 서버 연결하는 부분까지도 잘 됐는데 어느 순간 이런 오류가 등장하였습니다. 어떻게 수정해야 할까요..? 감사합니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
안녕하세요. self-signed certificate in certificate chain 에러 발생합니다,
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
귀찮게 해서 죄송합니다. 혹시 저도 기간을 놓쳐 쿠폰을 사용하지 못했는데 새로운 강의를 수강하기 위한 할인 쿠폰을 받을 수 있을지 문의드립니다. 좋은 강의를 제공해주셔서 감사드립니다 :)
해결됨
한 입 크기로 잘라먹는 Next.js
혹시 강의를 처음에는 쭉 보면서 따라하거나 정리하고 다시한번 한입 북스를 스스로 만들어보면서 nextjs흐름을 파악하면서 잘 모르겠거나 막히는 부분 강의 다시 한번 듣고 소스 코드 보고 이렇게 듣는 방식이 젤 괜찮은가요?? 아니면 스타일링이나 단순 리액트 컴포넌트를 구성하는 부분은 혼자서 해보고 강의를 듣는 방식이 더 나을까요?? 감사합니다
미해결
기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]
StockList 만들기 중 404 ERR_BAD_REQUEST 에러 발생하여 한참 구글링 해보다가 아래의 방법으로 해결하였습니다. 혹시 같은 에러 있으신 분들 참고하세요 보안 이슈땜에 proxy 설정 필요합니다. 1) npm install http-proxy-middleware --save 2) src 폴더에 setupProxy.js 생성 후 아래 내용 복사 const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: " http://localhost:3000 ", changeOrigin: true, }) ); };
미해결
기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]
BMI 계산기 프로그램 완성하기 5:14 ~ APP.vue 파일에서 <router-view></router-view> main.js 파일에서 import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App) .use(router) .mount('#app') 작성하면 선생님이 보여주신 거처럼 하단에 HomePage가 나와야 하는데 저는 HomePage 가 나오지 않아요. BMI를 눌러도 BMI 가 나오지 않습니다. BMI를 클릭하면 BMI를 클릭하면 path만 변경되지 다른 반응이 나오지 않습니다. 코드는 제가 직접 적진 않았고 선생님이 작성해준 코드를 그대로 넣었습니다 index main app.vue
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
삭제하기 강의 까지 들었는데 따로 데이터를 삭제하지 않았어도 새로고침을 하면 기본 mockData들만 다시 화면에 나타납니다. 새로 고침을 해도 이전 데이터들이 그대로 나오게 하려면 어떻게 해야 하나요?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
const Header = () => { return { <header> <h1>header</h1> </header> }; }; 위의 코드 작성시 속성 할당이 필요합니다. 선언 또는 문이 필요합니다. 식이 필요합니다. 선언 또는 문이 필요합니다. 이 4가지 에러가 표시됩니다.
