172만명의 커뮤니티!! 함께 토론해봐요.
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
입력란과 버튼의 크기를 배분하기 위해 flex를 사용할 때, 부모 요소는 반드시 display: flex를 사용해야 하는 것인가요? flex와 display:flex가 상관관계가 있는 것인지 궁금합니다.
미해결
SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma
spoqa han sans neo글씨체 다운받았는데 피그마 할 때 text밑에 fonts에서 no matching font로 나오네요. 아예 검색자체가 안되는데 무슨 문제인가요??
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요. react-native-reanimated-carousel 사용 시, carousel의 prop으로 width를 정의했는데도, 제목 처럼 "width must be speified for horizontal carousels" 오류가 발생합니다. 어떻게 해결할 수 있을까요?? 강의 클론코딩 했는데, 위 오류에 앞서 "PanGestureHandler must be used as a descendant of GestureHandlerRootView" 오류가 발생했었는데, 인터넷 검색 결과로 <SafeAreaView> 바깥에 <GestureHandlerRootView> 선언하여 해결했는데, 이 영향도 일까요?? 코드 첨부합니다. import { StatusBar } from "expo-status-bar"; import { API_URL } from "./config/constant"; import avatarImg from "./assets/icons/avatar.png"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, SafeAreaView, } from "react-native"; import Carousel from "react-native-reanimated-carousel"; import { GestureHandlerRootView } from "react-native-gesture-handler"; 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(function (result) { const products = result.data.products; setProducts(products); }) .catch(function (error) {}); axios .get(`${API_URL}/banners`) .then(function (result) { const banners = result.data.banners; setBanners(banners); }) .catch(function (error) {}); }, []); return ( <GestureHandlerRootView> <SafeAreaView style={styles.safeAreaView}> <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) => { retrun( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.img_url}` }} /> </TouchableOpacity> ); }} </Carousel> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> {products.map((product, index) => { return ( <View key={index} style={styles.productCard}> {product.status === "02" && ( <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> </SafeAreaView> </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, }, safeAreaView: { flex: 1, backgroundColor: "#fff", }, });
해결됨
처음 만난 리액트(React)
Contex가 하위 컴포넌트들에서 해당 변수에 바로 접근이 가능하게 만들어주는 것은 이해가 되었습니다. 하지만 한 가지 의문점이 있습니다. 저의 짧은 지식으로는 redux같은 전역 상태 관리 라이브러리를 이용하면 모든 컴포넌트가 접근할 수 있는 store라는 공간이 생기는 것으로 알고 있습니다. 그래서 redux를 사용한다면 contex는 굳이 사용할 필요가 없는 것으로 생각됩니다. redux같은 전역 상태 관리 라이브러리를 이용할 때에도 context를 사용하는 경우가 있는지 궁금합니다. 그리고 이전 질문에서 엄밀히 말하면 context가 상태 관리는 아니라고 하셨는데 상태 관리와 context의 차이점을 잘 모르겠습니다.. 간략하게나마 차이점을 설명들을 수 있을까요?
해결됨
처음 만난 리액트(React)
useRef() Hook의 다음 코드에서 질문이 있습니다. useRef는 DOM에 접근하기 위해 사용하는 Hook으로 이해하면 될까요? 예시 코드에서 <input type="text" ref={inputElem} /> inputElem을 해당 input태그에 접근하기 위해 useRef를 사용하는 것이 맞나요? useRef() Hook이 데이터 변경을 감지하지 못해서 HTML 코드에 있는 ref의 변경을 감지할 수 있는 useCallback() Hook을 대신 사용하는게 맞나요? 그럼 useCallback을 useRef를 대체하여 사용가능한 건가요?
해결됨
김영한의 실전 자바 - 기본편
선생님, 안녕하세요. 내부에서만 사용하는 매서드는 private으로 캡슐화 해두는 것이 좋은 구현이라고 알고 있고, 이번 수업에서도 그런 내용을 확인할 수 있었는데요, private 매서드들도 테스트 코드를 작성해서 테스트 해보고싶은 경우가 자주 발생합니다... 이런 경우 고민을 하다가 몇 가지 방법이 있겠으나 ... 그냥 public 으로 열어버리고 테스트 코드를 두곤 했는데요, 이런 경우에 선생님은 실무에서 어떻게 하셨는지, 가장 좋은 practice가 무엇인지 알고 싶습니다. 항상 감사합니다..^^
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
Hibernate 6에서는 강의에서 처럼 Dialect를 통한 함수 등록이 불가능합니다. https://start.spring.io/ 로 Spring Boot 3버전으로 만드신 분들은 문제를 겪으실 거라고 생각합니다. 등록법 FunctionContributer 의 구현체를 만들어 준다. package custom; import org.hibernate.boot.model.FunctionContributions; import org.hibernate.boot.model.FunctionContributor; import org.hibernate.dialect.function.StandardSQLFunction; import org.hibernate.type.StandardBasicTypes; public class CustomFunctionContributor implements FunctionContributor { @Override public void contributeFunctions(FunctionContributions functionContributions) { functionContributions.getFunctionRegistry() .register("group_concat", new StandardSQLFunction("group_concat", StandardBasicTypes.STRING)); } } src/main/resources/META-INF/services/org.hibernate.boot.model.FunctionContributor 파일을 생성한다. 해당 파일에 직접 구현한 CustomFunctionContributor를 등록한다. 패키지명.컨트리뷰터이름 형태로 등록!! custom.CustomFunctionContributor 이렇게 하시면, 강의에서처럼 group_concat함수를 사용하실 수 있습니다. Dialect는 변경 안하셔도 됩니다. reference https://aregall.tech/hibernate-6-custom-functions
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
안녕하세요. 도형 만들어 지지 않아 질문 드립니다. 사진 올리기, 색깔 등등 다른 것은 다 되는데 이상하게 border와 같은 테두리, 도형을 만들면 화면에 보이지 않습니다. 아래의 코드 방식으로 작성했을 때는 적용이 됩니다. 표기 방식만 다른 것인데 무엇이 문제인가요?
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
안녕하세요 선생님! 개인 포트폴리오 홈페이지 만들다 궁금한 점이 있어 여쭤봅니다 :) 해당 강의에서 만든 작업물을 변형하여 개인 포트폴리오 홈페이지에 넣으려고 하는데 Header랑 GNB 부분을 제이쿼리 load 메서드로 연결해서 그런지 a태그로 모바일 웹 작업물을 연결하면 Header랑 GNB 부분이 안 뜨더라구요ㅜㅜ 혹시 이런 경우에는 어떻게 하면 되는 걸까요? 항상 알차고 좋은 강의 감사합니다!
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)
강의 영상에서는 .tabs에 relative, 100vh .items에 absolute top, left 이렇게 강의 해주셨는데 제가 다르게도 한번 해보았습니다. 이렇게 하니 코드가 조금이나마 짧은것 같아서요~ 동작은 똑같이 하는데 이렇게 해도 실무에 적용하는데 구조적으로 문제 없는지 궁금해서 질문 드려봅니다. 항상 좋은강의 감사합니다 선생님!
미해결
자바스크립트 제대로 배워볼래?
.js로 아래와 같은 자바스크립트 파일을 작성했습니다. export function log(message) { console.log(message); } export function error(message) { console.error(message); } 해당 자바스크립트 파일을 html에 삽입하기 위해 src에 넣고, type을 module로 지정했습니다. 후에 log함수를 이용하려고 아래 코드를 작성했는데, "Uncaught ReferenceError: log is not defined at 3-14.html:9:7" 이라고 에러가 납니다. <!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <script src="./scripts/3-13.Module.js" type="module"></script> <script> log("메세지 출력"); // Uncaught ReferenceError: log is not defined at 3-14.html:9:7 에러 출력 </script> </body> </html> 여기서 질문이 2가지가 있는데, 위의 코드 에러를 해결하려면 어떻게 해야하나요? 모듈을 삽입하는 방법으로 script 안에 type을 모듈로 정의하고 import를 통해 삽입하는 방법과, src에 자바스크립트를 사용하여 삽입하는 2가지 방법이 존재한다고 이해했습니다. 그럼 후자의 방법은 단순히 src만 입력해 해당 자바스크립트 안에 있는 모든 함수, 변수를 사용하는 방법을 말하는 걸로 이해하면 될까요? 답변주시면 감사하겠습니다.! 항상 강의 잘 듣고 있습니다. 좋은 강의 내주셔서 정말 감사합니다 . ㅎㅎ 😃
미해결
처음 만난 리액트(React)
안녕하세요 마지막 프로젝트 진행시 오류때문에 질문남겨드립니다. 이러한 오류가 생기는데 해결방법을 잘 모르겟습니다 ㅠㅠ
해결됨
김영한의 실전 자바 - 기본편
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] private static method 를 사용하는 이유를 알고 싶습니다. [질문 배경] 영한님의 다른 강의(스프링 강의로 기억합니다.) 중에 아주 단순한 기능을 private static method를 사용하셔서 만드신 걸 본적이 있었습니다. 왜 private 접근제어자를 사용하셨는데, 인스턴스 메서드가 아닌 static 메서드를 사용하셨을까? 궁금하여 여러 검색과 이리 저리 혼자서 생각도 많이 해보고 나름대로 정리했습니다만 뇌내 망상 수준이라.. 영한님의 답변만큼 확실한건 없을 것 같아 질문드립니다. [검색 등을 통해 제가 정리한 내용] 속도 : 인스턴스 메서드의 경우에는 메서드 영역의 virtual table을 거쳐서 이 인스턴스에 매핑되는 메서드를 조회 후 메서드에 접근해야 하지만, static 메서드의 경우에는 그럴 필요가 없어 인스턴스 메서드에 비해 빠르다. -> 이 부분은 제가 여러 정보를 조합한 내용이라 신빙성이 떨어지고, 과연 속도 측면에서 유의미한 차이가 있을까 의문입니다. 객체지향기반의 커뮤니케이션 : private 접근제어자를 명시하여 캡슐화를 하였으나 static 까지 붙여 이 메서드는 내부에서만 쓸 뿐더러 객체지향적으로 대화할 의도가 없으니 거들떠도 보지 말아라 라는 의미를 담고 있는 것이 아니었을까 추측해봅니다.
해결됨
자바스크립트 제대로 배워볼래?
var i = 0; var fnc = setInterval(function () { if (i == 3) { clearInterval(fnc); } console.log("3초마다 프로그램 실행 - " + i); i++; }, 3000); i가 3일 때 setInterval를 중단하기 위해 해당 코드를 작성했습니다. i가 3일 경우에는 clearInterval에 의해 setInterval이 중단됐기 때문에 아래 console.log("3초마다 프로그램 실행 - " + i)도 실행되지 않아 콘솔창을 실행했을 때 "3초마다 프로그램 실행 - 2"까지만 나오고 멈출거라고 생각했는데, "3초마다 프로그램 실행 - 3"이 나와 왜 그런지 질문 드립니다.
미해결
모바일 웹 퍼블리싱 포트폴리오 with Figma
/* Goods Accordion */ $('.goods-accordion .detail').eq(0).show() $('.goods-accordion .title').click(function(){ $(this).toggleClass('active') $(this).next().toggle() $(this).siblings('.goods-accordion .title').removeClass('active') }) 상품문의에 클레스가 들어가서 상품후기에 있는 엑티브가 빠졌는데 상품문의 밑에 디테일은 안접혀졌어요 (영상강의캡쳐) 이렇게 적을경우에 .title부분은 class가 빠져서 시블링이 되는데 .detail 부분은 접었다 펴는 토글이라서 계속클릭하면 .title +,- 와 .detail의 이미지가 안맞는데 이런경우에는 어떻게 하나요 ㅠ?
미해결
따라하며 배우는 HTML, CSS
안녕하세요. 강의를 듣고 있는 수강생입니다. 초반 버튼을 만드는 과정에서 css가 인식이 안되는데 어떻게 해야할까요?
미해결
따라하면서 배우는 웹애플리케이션 만들기
bitnami wamp가 홈페이지에서 다운로드가 불가능 한데 다른 대체 프로그램을 찾아봤더니, 여러 프로그램이 있어서 어떤 프로그램을 이용해야 하는지 추천해주세요.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
for(var i = 0; i < names.length; i++) { var name = names[i] console.log(name); } 에서 var name = names[i] 에서 i가 0 임으로 0 값부터 시작한다고 이해 했는데 i 가 아니라 1 을 넣으니까 철수만 3번 반복 되더라구요 i를 넣음으로써 어떻게 순차적으로 진행되는건지 궁금합니다
미해결
김영한의 자바 입문 - 코드로 시작하는 자바 첫걸음
안녕하세요 강사님 배열에 대해서 정말 이해하기 쉽게 알려주셔서 정말 감사드립니다! students[0] = 90; students[1] = 80; students[2] = 70; students[3] = 60; students[4] = 50; 이 선언문을 for문을 활용해서 students[i]가 이전의 값을 계속 참조해서 10씩 증가 즉, students[0] = 60; students[1] = 70; students[2] = 80; students[3] = 90; students[4] = 100; 이렇게 응용한 코드를 작성해보려고 했는데 해당코드가 리펙토링이 잘 된 코드인지 컨펌을 받고 싶습니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
function calculate(x) { var result = 3*x+5; return result; } 라고 입력후 var result1 = calculate(1); 이 어떻게 동작 하는 건가요 ? 괄호를 닫았음에도 아직 저 위에 함수 블록에서 작업 중인 걸로 되는 건가요?
