묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
URL에 따라 리스트 불러오기 - getSortBy()와 getSearchWord()를 활성화 하면 리스트가 사라집니다
const getSortBy = () =>{ if(window.location.search){ const sortText = window.location.search.split('sort=')[1].split('&')[0]; console.log(`getSortBy : ${sortText}`); return sortText; }; return 'total'; }; const getSearchWord = () => { if(window.location.search && window.location.search.includes('search=')){ return window.location.search.split('search=')[1]; }; return ''; }; ... this.state = { startIdx: 0, sortBy : getSortBy(), searchWord: getSearchWord(), region: "", cities: "",}; 일단 문제가 되는 코드는 이 부분 입니다.이부분을 작성 한 이후로, 새로고침 하면 아래 시티리스트가 안나오다가상단 sort 또는 search 를 주석처리 하면 리스트가 출력 됩니다 전체 코드는 아래 git 주소를 같이 봐주시면 감사하겠습니다.https://github.com/KimDay366/onebite_js/tree/main/section09/Trip-Wiki 한시간째 똑같은 코드만 보고 있는데, 계속 봐도 저는 뭐가 문제인지 모르겠네요 ㅠㅠㅠ
-
미해결자바스크립트 비기너: 튼튼한 기본 만들기
프론트엔드 부트캠프 가기 전, 짧은 감사 인사드립니다!
안녕하세요이전에 커리어에 관한 질문 드렸었습니다(아래링크)https://inf.run/N5Wz7.다름이 아니라 강사님의 강의가 저의 프론트엔드에 대한 시각을 완전히 바꿔 놓았음을 전하고자 이 글을 씁니다. 단순히 라이브러리 숙련도를 넘어, 자바스크립트를 통해 클라이언트 공통 스펙을 깊이 있게 다루는 강사님의 강의는 저에게 큰 울림을 주었습니다. 이는 언어의 경계를 넘어선, 클라이언트 개발의 본질을 꿰뚫는 강의라고 생각합니다. 현재 텐서플로우 강의를 제외한 대부분의 강의를 90% 이상 수강했으며, 앞으로 여러 번 반복해서 들으며 더 깊은 깨달음을 얻을 수 있으리라 확신합니다. 국내외를 통틀어 이처럼 프론트엔드 펀더멘털을 유일무이하게 다루는 강의는 없다고 생각하며, 앞으로도 많은 분께 클라이언트 개발자의 공통 교과목으로 강력히 추천할 것입니다.강사님의 강의를 들으며 현업에서의 경험과 맞물려 많은 것을 느꼈습니다. 특히 현업 프론트, 백엔드 개발자들이 자신의 포지션에만 집중하여 발생하는 소통의 단절과 비효율성에 대해 깊이 공감하게 되었습니다. 한 프로젝트를 함께 완성해나가는 과정에서 각자의 파트에만 몰두하여 전체적인 흐름을 놓치고 소통이 원활하지 않은 모습들을 보며, 강사님의 강의가 제시하는 깊이 있는 이해의 중요성을 더욱 절감했습니다.곧 프론트엔드 부트캠프에 참여하게 되는데, 강사님의 강의를 통해 얻은 통찰력이 큰 자산이 될 것이라 믿습니다. 앞으로도 변함없이 좋은 강의를 제공해주시기를 바라며, 늘 응원하겠습니다.감사합니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
DOM API-2 1분54초 경 질문드립니다.
안녕하세요 강의 잘 듣고 있습니다 좋은 강의 만들어주셔서 감사합니다!DOM API-2 1분54초 경 질문드립니다. let $type = document.createElement("div"); $type.className = "info-item"; $type.id = "type"; $type.textContent = "말티즈"; console.log($type); 이렇게 출력이 되고 div#type.info-itemlet $type = document.createElement("div"); $type.className = "info-item"; $type.id = "type"; $type.textContent = "말티즈"; console.log($type.outerHTML); 다음과같이 .outerHTML을 출력해야 강의와 같이 아래처럼 출력이 되는데<div class="info-item" id="type">말티즈</div>어떤 차이가 있는 걸까요? 환경설정을 어떻게 하면 강의처럼 그냥 console.log($type);만 출력해도<div class="info-item" id="type">말티즈</div>와 같이 웹사이트 콘솔창에서 볼 수 있을까요? ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
List컴포넌트에서 필터링 하는 것과 App 컴포넌트에서 필터링하는 것의 차이
🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)제목을 구체적으로 작성해 주세요✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요더 빠른 답변이 가능합니다! 안녕하세요. 강사님! 8.5) Read - 투두리스트 렌더링하기 강의에서 질문이 있습니다. 검색어로 필터링하는 기능이 List.jsx에 되어있는데요, 이 부분 관련해서 질문이 있습니다. 필터링이 App.jsx에서 필터링 하는 것과 어떤 차이가 있나요??어떤 이유에서 List.jsx에서 필터링하는지도 궁금합니다. (원본 데이터를 건들지않기 위함(?)일까요?)그리고 어떤 컴포넌트에서 필터링 하더라도 리렌더링이 발생하는건가요?감사합니다!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
section 8-2 css 선언 문의
안녕하세요. 강사님.section 8-2 투두리스트 프로젝트 UI 구현하기에서css 스타일에 대해서 질문이 있습니다..List > input 과같이 중간에 > 연산이 있는 경우와 없는 경우의 차이는 무엇인가요?미션 day15 ContactEditor css 스타일에서.input_wrapper className이 이미 적용되어 있는데 아래와 같이 부모 속성인 .ContactEditor를 명시할 필요가 있는지도 궁금합니다..ContactEditor .input_wrapper
-
미해결@시코 - TypeScript 제대로 배우기(초중급)
interface 와 type
안녕하세요. 잘듣고 있습니다:)강의에서 웬만하면 interface 대신 type 을 쓰라고 말씀하시더라고요!저는 줄곧 type 만 쓰다가 최근에 props 같은 객체 타입은 interface를 사용하는 방향으로 바꿨는데, 이런 경우도 interface 보다 타입을 쓰는게 좋나요?(왜 그런지가 궁금합니다..!!) 그리고 interface 랑 type의 차이를 더 자세히 알고싶어요!
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vercel login
저는 이메일에 버튼이 나오는 대신 코드가 나와서 페이지에 입력하라길래 입력했는데 페이지는 로그인이 되는데 vscode는 계속 로딩중이에요...
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
yarn으로 express 다운 후 node 2_server.js 실행 안되는 경우
저는 yarn node 2_server.js 로 실행하니 되네요![코드팩토리 디스코드]https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Select 태그의 옵션 값중에 선택전에 보여지는 첫 번째 옵션값을 디폴트로 가져오는 방법
안녕하세요. 강사님.5.8) State로 사용자 입력 관리하기1에서 Select태그를 선택하지 않은 상태에서 onSubmit 이벤트 핸들러 호출시 웹 페이지에 보여지는 첫 번째 옵션 값을 디폴트 값으로 가져오는 방법이 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
10-01 Entity TypeOrmModule.forRoot 에 entities
@Module({ imports: [ BoardsModule, // // ProductModule, // UsersModule, ConfigModule.forRoot(), // GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, autoSchemaFile: 'src/commons/graphql/schema.gql', }), TypeOrmModule.forRoot({ type: process.env.DATABASE_TYPE as 'mysql', host: process.env.DATABASE_HOST, port: Number(process.env.DATABASE_PORT), username: process.env.DATABASE_USERNAME, password: process.env.DATABASE_PASSWORD, database: process.env.DATABASE_DATABASE, entities: [__dirname + '/apis/**/*.entity.*'], synchronize: true, logging: true, }), ], }) export class AppModule {} entity 파일들에서 각 entity 파일에 import 할때 절대경로로 입력하면, 오류가나는데 해결방법을 모르겠습니다.상대경로로 작성시 문제가 해결되었는데 이유를 모르겠습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
강의 버전관련 문의입니다
강의 버전이 구버전(Ver.1)인 것 같은데 Ver.2로 어떻게 업데이트하나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vercel 배포 1명
vercel 배포는 한명 한테만 되는건가요? 그리고 링크를 전달해서 당사자가 링크에 들어가면 로그인을 하라고 뜨는데 제 아이디로 로그인 하지 않으면 프로젝트를 사용할 수 없는데 이게 원래 맞는건가요?
-
미해결함수형 프로그래밍과 JavaScript ES6+
filter가 아무것도 걸러내지 못하는 경우
function FlatEvaluation(evaluation: Array<[string, { score: number }]>) { return pipe( evaluation, filter(([key]) => key !== "overallAssessment"), map(([key, value]) => ({ key: key, score: value.score })) ); } function findPros(evaluation: { [x: string]: { score: number } }) { return pipe( Object.entries(evaluation), FlatEvaluation, filter((item) => item.score >= 80), reduce((item, acc) => (item.score > acc.score ? item : acc)), (item) => item.key ); } // A의 경우 findPros({ a: { score: 90 }, b: { score: 85 }, c: { score: 75 } }) // B의 경우 findPros({ a: { score: 70 }, b: { score: 65 }, c: { score: 75 } }) 안녕하세요 선생님 강의 잘 듣고 있습니다. 다름이 아니라 한 가지 궁금한 점이 있어서 이렇게 질문을 드립니다 (나중에 뒤에 가서 이 문제에 대한 해답이 나오거나, 이미 앞에 이런 문제에 대한 해결 방법이 나왔다면 참 부끄러워질 거 같긴 합니다)다름이 아니라 FxTS를 사용해 기존의 프로젝트 일부를 함수형으로 리팩토링 해보고자 하는 중이었습니다. { [x: string]: { score: number } } 타입의 객체를 인자로 받아 제일 고득점을 한 인원의 이름(key)를 리턴해야 합니다. A의 경우 80점 이상의 득점자가 두 명이 있고, 그 중 더 높은 득점을 한 a의 이름이 잘 리턴됩니다.그런데 B의 경우 80점 이상의 득점자가 하나도 없다보니 filter가 적절한 값을 리턴하지 못해 reduce에서 에러가 납니다. 이런 경우에는 어떻게 처리하는 게 옳을지 궁금합니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Todos list map 관련
<div className='todos_wrapper'> {filterTodos.map((todo) => { return <TodoItem key={todo.id} {...todo} />; })} </div> 위에서 검색어 검색 기능을 보여 주기 위해서 filterTodos로 map 해 주는 건 이해가 가는데 처음에 초기값 보여 주는 건 어디에서 하는 건지 궁금합니다 초기값도 저기서 기능을 해 주는 거 아닌가요? 초기값은 애초에 filter 하지 않았기 때문에 todo.id에 따른 모든 값들을 보여 주는 걸까요 ??? 초기에 모든 값을 보여 주는 건 어디서 하는 건지 이해가 안 됩니다 ㅠ
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
[재 질문]Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?
현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요,1.그랩 선생님 소스 코드와 동일하게 아래 작성한 index.js 소스 첨부하는데요,실행하면,1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이에러가 발생 합니다.이 에러는 어떻게 해결 할 수 있을까요?--------2. index.js 소스 아래에 작성 첨부 합니다.import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 목 mock 서버 주소를 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage;그리고, 추가적으로 아래 그랩님 답변 본 뒤 다시 시도해 본 후 질문이 있어 추가적으로 글을 적습니다.현재 postman을 실행하고요, 제 해당 목 mock 서버 주소를 입력 후 끝에 /products까지하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결해야 하는지 단계별로 친절한 설명 부탁드립니다.
-
미해결[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
&& ||가 너무 햇갈려요
true && '안유진'을 썼으면 안유진이 나오는게 아니라 양쪽이 true 니까 true가 나와야 하는거 아닌가요?
-
미해결[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
js에선 string값이 아스키코드값으로 저장되지 않나요?
C와 C++를 쓸때는 if(A==65)같은 느낌으로 사용 가능했는데 js는 그렇지 않나요? 예를들어 C에서는 1=='1'에서 1과 '1'의 아스키코드값이 다르기 때문에 false가 나오지만 js에서는 true가 나와 여쭤봅니다
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
모바일 화면 전환
네비게이션 바 만들 때, 데스크탑에서 모바일로 화면 전환하는 거 어떻게 해요?
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
tailwind css 설치 위치
홈페이지에서 tailwind 4.1버전을 다운 받으니 packge.json의 devDependencies가 아닌 dependencies에 tailwind가 생기는데요. 강의 내용 중엔 devDependencies에 생겨서 구글링을 해보니 배포용과 개발용의 차이라고 하는데, 그렇다면 그 둘을 따로 관리하는 이유가 뭔가요?제 생각엔 어차피 개발을 완료한 다음에 배포를 할 테니 별도로 관리할 필요가 있을까 싶어서요.또 한쪽에서 설치한 프레임워크를 다른 쪽으로 옮기려면 그냥 해당 부분을 복사 붙여넣기 하면 되는 건가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
pdf
강의자료 pdf다운받아서 사용하려는데, 소유자 암호를 입력하지 않으면 이 문서를 저장할 권한이 없다는데 메모하면서 사용하고싶어서요. 비밀번호를 찾을수없는데 알수있을까요?