inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

통합 테스트 코드 - 회원가입() 메서드 에러 질문드립니다.

미해결

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 16:47초에 실행하시는 통합테스트 코드 - 회원가입() 메서드 실행에서 에러가 납니다.. 에러 내용은 다음과 같습니다. could not prepare statement [Column "M1_0.USERNAME" not found; SQL statement: select m1_0.id,m1_0.username from member m1_0 where m1_0.username=? [42122-214]] [select m1_0.id,m1_0.username from member m1_0 where m1_0.username=?] org.hibernate.exception.SQLGrammarException: could not prepare statement [Column "M1_0.USERNAME" not found; SQL statement: select m1_0.id,m1_0.username from member m1_0 where m1_0.username=? [42122-214]] [select m1_0.id,m1_0.username from member m1_0 where m1_0.username=?] at app//org.hibernate.exception.internal.SQLExceptionTypeDelegate.convert( SQLExceptionTypeDelegate.java:64 ) at app//org.hibernate.exception.internal.StandardSQLExceptionConverter.convert( StandardSQLExceptionConverter.java:56 ) at app//org.hibernate.engine.jdbc.spi.SqlExceptionHelper.convert( SqlExceptionHelper.java:108 ) at app//org.hibernate.engine.jdbc.internal.StatementPreparerImpl$StatementPreparationTemplate.prepareStatement( StatementPreparerImpl.java:187 ) at app//org.hibernate.engine.jdbc.internal.StatementPreparerImpl.prepareStatement( StatementPreparerImpl.java:76 ) at app//org.hibernate.sql.exec.internal.JdbcSelectExecutorStandardImpl.lambda$list$0( JdbcSelectExecutorStandardImpl.java:102 ) at app//org.hibernate.sql.results.jdbc.internal.DeferredResultSetAccess.executeQuery( DeferredResultSetAccess.java:226 ) at app//org.hibernate.sql.results.jdbc.internal.DeferredResultSetAccess.getResultSet( DeferredResultSetAccess.java:163 ) at app//org.hibernate.sql.results.jdbc.internal.JdbcValuesResultSetImpl.advanceNext( JdbcValuesResultSetImpl.java:254 ) at app//org.hibernate.sql.results.jdbc.internal.JdbcValuesResultSetImpl.processNext( JdbcValuesResultSetImpl.java:134 ) at app//org.hibernate.sql.results.jdbc.internal.AbstractJdbcValues.next( AbstractJdbcValues.java:19 ) at app//org.hibernate.sql.results.internal.RowProcessingStateStandardImpl.next( RowProcessingStateStandardImpl.java:66 ) at app//org.hibernate.sql.results.spi.ListResultsConsumer.consume( ListResultsConsumer.java:198 ) at app//org.hibernate.sql.results.spi.ListResultsConsumer.consume( ListResultsConsumer.java:33 ) at app//org.hibernate.sql.exec.internal.JdbcSelectExecutorStandardImpl.doExecuteQuery( JdbcSelectExecutorStandardImpl.java:361 ) at app//org.hibernate.sql.exec.internal.JdbcSelectExecutorStandardImpl.executeQuery( JdbcSelectExecutorStandardImpl.java:168 ) at app//org.hibernate.sql.exec.internal.JdbcSelectExecutorStandardImpl.list( JdbcSelectExecutorStandardImpl.java:93 ) at app//org.hibernate.sql.exec.spi.JdbcSelectExecutor.list( JdbcSelectExecutor.java:31 ) at app//org.hibernate.query.sqm.internal.ConcreteSqmSelectQueryPlan.lambda$new$0( ConcreteSqmSelectQueryPlan.java:110 ) at app//org.hibernate.query.sqm.internal.ConcreteSqmSelectQueryPlan.withCacheableSqmInterpretation( ConcreteSqmSelectQueryPlan.java:303 ) at app//org.hibernate.query.sqm.internal.ConcreteSqmSelectQueryPlan.performList( ConcreteSqmSelectQueryPlan.java:244 ) at app//org.hibernate.query.sqm.internal.QuerySqmImpl.doList( QuerySqmImpl.java:518 ) at app//org.hibernate.query.spi.AbstractSelectionQuery.list( AbstractSelectionQuery.java:367 ) at app//org.hibernate.query.Query.getResultList( Query.java:119 ) at app//hello.hellospring.repository.JpaMemberRepository.findByName( JpaMemberRepository.java:33 ) at app//hello.hellospring.service.MemberService.validateDuplicateMember( MemberService.java:33 ) at app//hello.hellospring.service.MemberService.join( MemberService.java:27 ) at java.base@17.0.4.1/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at java.base@17.0.4.1/jdk.internal.reflect.NativeMethodAccessorImpl.invoke( NativeMethodAccessorImpl.java:77 ) at java.base@17.0.4.1/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke( DelegatingMethodAccessorImpl.java:43 ) at java.base@17.0.4.1/java.lang.reflect.Method.invoke( Method.java:568 ) at app//org.springframework.aop.support.AopUtils.invokeJoinpointUsingReflection( AopUtils.java:343 ) at app//org.springframework.aop.framework.ReflectiveMethodInvocation.invokeJoinpoint( ReflectiveMethodInvocation.java:196 ) at app//org.springframework.aop.framework.ReflectiveMethodInvocation.proceed( ReflectiveMethodInvocation.java:163 ) at app//org.springframework.aop.framework.CglibAopProxy$CglibMethodInvocation.proceed( CglibAopProxy.java:756 ) at app//org.springframework.transaction.interceptor.TransactionInterceptor$1.proceedWithInvocation( TransactionInterceptor.java:123 ) at app//org.springframework.transaction.interceptor.TransactionAspectSupport.invokeWithinTransaction( TransactionAspectSupport.java:391 ) at app//org.springframework.transaction.interceptor.TransactionInterceptor.invoke( TransactionInterceptor.java:119 ) at app//org.springframework.aop.framework.ReflectiveMethodInvocation.proceed( ReflectiveMethodInvocation.java:184 ) at app//org.springframework.aop.framework.CglibAopProxy$CglibMethodInvocation.proceed( CglibAopProxy.java:756 ) at app//org.springframework.aop.framework.CglibAopProxy$DynamicAdvisedInterceptor.intercept( CglibAopProxy.java:708 ) at app//hello.hellospring.service.MemberService$$SpringCGLIB$$0.join(<generated>) at app//hello.hellospring.service.MemberServiceIntegrationTest.회원가입( MemberServiceIntegrationTest.java:28 ) at java.base@17.0.4.1/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at java.base@17.0.4.1/jdk.internal.reflect.NativeMethodAccessorImpl.invoke( NativeMethodAccessorImpl.java:77 ) at java.base@17.0.4.1/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke( DelegatingMethodAccessorImpl.java:43 ) at java.base@17.0.4.1/java.lang.reflect.Method.invoke( Method.java:568 ) at app//org.junit.platform.commons.util.ReflectionUtils.invokeMethod( ReflectionUtils.java:727 ) at app//org.junit.jupiter.engine.execution.MethodInvocation.proceed( MethodInvocation.java:60 ) at app//org.junit.jupiter.engine.execution.InvocationInterceptorChain$ValidatingInvocation.proceed( InvocationInterceptorChain.java:131 ) at app//org.junit.jupiter.engine.extension.TimeoutExtension.intercept( TimeoutExtension.java:156 ) at app//org.junit.jupiter.engine.extension.TimeoutExtension.interceptTestableMethod( TimeoutExtension.java:147 ) at app//org.junit.jupiter.engine.extension.TimeoutExtension.interceptTestMethod( TimeoutExtension.java:86 ) at app//org.junit.jupiter.engine.execution.InterceptingExecutableInvoker$ReflectiveInterceptorCall.lambda$ofVoidMethod$0( InterceptingExecutableInvoker.java:103 ) at app//org.junit.jupiter.engine.execution.InterceptingExecutableInvoker.lambda$invoke$0( InterceptingExecutableInvoker.java:93 ) at app//org.junit.jupiter.engine.execution.InvocationInterceptorChain$InterceptedInvocation.proceed( InvocationInterceptorChain.java:106 ) at app//org.junit.jupiter.engine.execution.InvocationInterceptorChain.proceed( InvocationInterceptorChain.java:64 ) at app//org.junit.jupiter.engine.execution.InvocationInterceptorChain.chainAndInvoke( InvocationInterceptorChain.java:45 ) at app//org.junit.jupiter.engine.execution.InvocationInterceptorChain.invoke( InvocationInterceptorChain.java:37 ) at app//org.junit.jupiter.engine.execution.InterceptingExecutableInvoker.invoke( InterceptingExecutableInvoker.java:92 ) at app//org.junit.jupiter.engine.execution.InterceptingExecutableInvoker.invoke( InterceptingExecutableInvoker.java:86 ) at app//org.junit.jupiter.engine.descriptor.TestMethodTestDescriptor.lambda$invokeTestMethod$7( TestMethodTestDescriptor.java:217 ) at app//org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute( ThrowableCollector.java:73 ) at app//org.junit.jupiter.engine.descriptor.TestMethodTestDescriptor.invokeTestMethod( TestMethodTestDescriptor.java:213 ) at app//org.junit.jupiter.engine.descriptor.TestMethodTestDescriptor.execute( TestMethodTestDescriptor.java:138 ) at app//org.junit.jupiter.engine.descriptor.TestMethodTestDescriptor.execute( TestMethodTestDescriptor.java:68 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$6( NodeTestTask.java:151 ) at app//org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute( ThrowableCollector.java:73 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$8( NodeTestTask.java:141 ) at app//org.junit.platform.engine.support.hierarchical.Node.around( Node.java:137 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$9( NodeTestTask.java:139 ) at app//org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute( ThrowableCollector.java:73 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.executeRecursively( NodeTestTask.java:138 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.execute( NodeTestTask.java:95 ) at java.base@17.0.4.1/java.util.ArrayList.forEach( ArrayList.java:1511 ) at app//org.junit.platform.engine.support.hierarchical.SameThreadHierarchicalTestExecutorService.invokeAll( SameThreadHierarchicalTestExecutorService.java:41 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$6( NodeTestTask.java:155 ) at app//org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute( ThrowableCollector.java:73 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$8( NodeTestTask.java:141 ) at app//org.junit.platform.engine.support.hierarchical.Node.around( Node.java:137 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$9( NodeTestTask.java:139 ) at app//org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute( ThrowableCollector.java:73 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.executeRecursively( NodeTestTask.java:138 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.execute( NodeTestTask.java:95 ) at java.base@17.0.4.1/java.util.ArrayList.forEach( ArrayList.java:1511 ) at app//org.junit.platform.engine.support.hierarchical.SameThreadHierarchicalTestExecutorService.invokeAll( SameThreadHierarchicalTestExecutorService.java:41 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$6( NodeTestTask.java:155 ) at app//org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute( ThrowableCollector.java:73 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$8( NodeTestTask.java:141 ) at app//org.junit.platform.engine.support.hierarchical.Node.around( Node.java:137 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.lambda$executeRecursively$9( NodeTestTask.java:139 ) at app//org.junit.platform.engine.support.hierarchical.ThrowableCollector.execute( ThrowableCollector.java:73 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.executeRecursively( NodeTestTask.java:138 ) at app//org.junit.platform.engine.support.hierarchical.NodeTestTask.execute( NodeTestTask.java:95 ) at app//org.junit.platform.engine.support.hierarchical.SameThreadHierarchicalTestExecutorService.submit( SameThreadHierarchicalTestExecutorService.java:35 ) at app//org.junit.platform.engine.support.hierarchical.HierarchicalTestExecutor.execute( HierarchicalTestExecutor.java:57 ) at app//org.junit.platform.engine.support.hierarchical.HierarchicalTestEngine.execute( HierarchicalTestEngine.java:54 ) at app//org.junit.platform.launcher.core.EngineExecutionOrchestrator.execute( EngineExecutionOrchestrator.java:107 ) at app//org.junit.platform.launcher.core.EngineExecutionOrchestrator.execute( EngineExecutionOrchestrator.java:88 ) at app//org.junit.platform.launcher.core.EngineExecutionOrchestrator.lambda$execute$0( EngineExecutionOrchestrator.java:54 ) at app//org.junit.platform.launcher.core.EngineExecutionOrchestrator.withInterceptedStreams( EngineExecutionOrchestrator.java:67 ) at app//org.junit.platform.launcher.core.EngineExecutionOrchestrator.execute( EngineExecutionOrchestrator.java:52 ) at app//org.junit.platform.launcher.core.DefaultLauncher.execute( DefaultLauncher.java:114 ) at app//org.junit.platform.launcher.core.DefaultLauncher.execute( DefaultLauncher.java:86 ) at app//org.junit.platform.launcher.core.DefaultLauncherSession$DelegatingLauncher.execute( DefaultLauncherSession.java:86 ) at org.gradle.api.internal.tasks.testing.junitplatform.JUnitPlatformTestClassProcessor$CollectAllTestClassesExecutor.processAllTestClasses( JUnitPlatformTestClassProcessor.java:110 ) at org.gradle.api.internal.tasks.testing.junitplatform.JUnitPlatformTestClassProcessor$CollectAllTestClassesExecutor.access$000( JUnitPlatformTestClassProcessor.java:90 ) at org.gradle.api.internal.tasks.testing.junitplatform.JUnitPlatformTestClassProcessor.stop( JUnitPlatformTestClassProcessor.java:85 ) at org.gradle.api.internal.tasks.testing.SuiteTestClassProcessor.stop( SuiteTestClassProcessor.java:62 ) at java.base@17.0.4.1/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at java.base@17.0.4.1/jdk.internal.reflect.NativeMethodAccessorImpl.invoke( NativeMethodAccessorImpl.java:77 ) at java.base@17.0.4.1/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke( DelegatingMethodAccessorImpl.java:43 ) at java.base@17.0.4.1/java.lang.reflect.Method.invoke( Method.java:568 ) at org.gradle.internal.dispatch.ReflectionDispatch.dispatch( ReflectionDispatch.java:36 ) at org.gradle.internal.dispatch.ReflectionDispatch.dispatch( ReflectionDispatch.java:24 ) at org.gradle.internal.dispatch.ContextClassLoaderDispatch.dispatch( ContextClassLoaderDispatch.java:33 ) at org.gradle.internal.dispatch.ProxyDispatchAdapter$DispatchingInvocationHandler.invoke( ProxyDispatchAdapter.java:94 ) at jdk.proxy1/jdk.proxy1.$Proxy2.stop(Unknown Source) at org.gradle.api.internal.tasks.testing.worker.TestWorker$3.run( TestWorker.java:193 ) at org.gradle.api.internal.tasks.testing.worker.TestWorker.executeAndMaintainThreadName( TestWorker.java:129 ) at org.gradle.api.internal.tasks.testing.worker.TestWorker.execute( TestWorker.java:100 ) at org.gradle.api.internal.tasks.testing.worker.TestWorker.execute( TestWorker.java:60 ) at org.gradle.process.internal.worker.child.ActionExecutionWorker.execute( ActionExecutionWorker.java:56 ) at org.gradle.process.internal.worker.child.SystemApplicationClassLoaderWorker.call ( SystemApplicationClassLoaderWorker.java:113 ) at org.gradle.process.internal.worker.child.SystemApplicationClassLoaderWorker.call ( SystemApplicationClassLoaderWorker.java:65 ) at app//worker.org.gradle.process.internal.worker.GradleWorkerMain.run( GradleWorkerMain.java:69 ) at app//worker.org.gradle.process.internal.worker.GradleWorkerMain.main( GradleWorkerMain.java:74 ) Caused by: org.h2.jdbc.JdbcSQLSyntaxErrorException: Column "M1_0.USERNAME" not found; SQL statement: select m1_0.id,m1_0.username from member m1_0 where m1_0.username=? [42122-220] at org.h2.message.DbException.getJdbcSQLException( DbException.java:514 ) at org.h2.message.DbException.getJdbcSQLException( DbException.java:489 ) at org.h2.message.DbException.get( DbException.java:223 ) at org.h2.message.DbException.get( DbException.java:199 ) at org.h2.expression.ExpressionColumn.getColumnException( ExpressionColumn.java:244 ) at org.h2.expression.ExpressionColumn.optimizeOther( ExpressionColumn.java:226 ) at org.h2.expression.ExpressionColumn.optimize( ExpressionColumn.java:213 ) at org.h2.command.query.Select .prepareExpressions( Select.java:1170 ) at org.h2.command.query.Query.prepare( Query.java:218 ) at org.h2.command.Parser.prepareCommand( Parser.java:583 ) at org.h2.engine.SessionLocal.prepareLocal( SessionLocal.java:634 ) at org.h2.server.TcpServerThread.process( TcpServerThread.java:288 ) at org.h2.server.TcpServerThread.run ( TcpServerThread.java:191 ) at java.base/java.lang.Thread.run( Thread.java:833 ) at app//org.h2.message.DbException.getJdbcSQLException( DbException.java:502 ) at app//org.h2.engine.SessionRemote.readException( SessionRemote.java:637 ) at app//org.h2.engine.SessionRemote.done( SessionRemote.java:606 ) at app//org.h2.command.CommandRemote.prepare( CommandRemote.java:78 ) at app//org.h2.command.CommandRemote.<init>( CommandRemote.java:50 ) at app//org.h2.engine.SessionRemote.prepareCommand( SessionRemote.java:480 ) at app//org.h2.jdbc.JdbcConnection.prepareCommand( JdbcConnection.java:1116 ) at app//org.h2.jdbc.JdbcPreparedStatement.<init>( JdbcPreparedStatement.java:92 ) at app//org.h2.jdbc.JdbcConnection.prepareStatement( JdbcConnection.java:288 ) at app//com.zaxxer.hikari.pool.ProxyConnection.prepareStatement( ProxyConnection.java:327 ) at app//com.zaxxer.hikari.pool.HikariProxyConnection.prepareStatement( HikariProxyConnection.java ) at app//org.hibernate.engine.jdbc.internal.StatementPreparerImpl$1.doPrepare( StatementPreparerImpl.java:91 ) at app//org.hibernate.engine.jdbc.internal.StatementPreparerImpl$StatementPreparationTemplate.prepareStatement( StatementPreparerImpl.java:177 ) ... 123 more Java HotSpot(TM) 64-Bit Server VM warning: Sharing is only supported for boot loader classes because bootstrap classpath has been appended MemberServiceIntegrationTest > ȸ������() FAILED org.hibernate.exception.SQLGrammarException at MemberServiceIntegrationTest.java:28 Caused by: org.h2.jdbc.JdbcSQLSyntaxErrorException at MemberServiceIntegrationTest.java:28 2023-08-20T14:08:26.076+09:00 INFO 17356 --- [ionShutdownHook] j.LocalContainerEntityManagerFactoryBean : Closing JPA EntityManagerFactory for persistence unit 'default' 2023-08-20T14:08:26.079+09:00 INFO 17356 --- [ionShutdownHook] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Shutdown initiated... 2023-08-20T14:08:26.109+09:00 INFO 17356 --- [ionShutdownHook] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Shutdown completed. 1 test completed, 1 failed > Task :test FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':test'. > There were failing tests. See the report at: file:///C:/Users/man25/OneDrive/����%20ȭ��/������%20����/hello-spring/build/reports/tests/test/index.html * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 22s 4 actionable tasks: 1 executed, 3 up-to-date 아래 사진은 application.properties 디렉터리의 코드입니다. 아래 사진은 SpringConfig 클래스의 코드입니다. 해결 방법을 모르겠네요ㅠㅠㅠ

  • java
  • spring
  • mvc
  • spring-boot
김수환 댓글 4 좋아요 0 조회수 1587

미니 블로그 질문입니다.

미해결

처음 만난 리액트(React)

미니블로그를 실행시키면 아래와 같은 에러가 브라우저 콘솔에 찍힙니다. 소스는 몇 번을 확인해서 잘 못 된 부분이 없다고 생각합니다. MainPage.jsx 부터 불러오질 못하네요. 뭐가 잘 못 됐는지 찾아주시면 고맙겠습니다. 아래는 App.js 에 PostWritePage, PostViewPage 를 빼고 실행했을 경우 브라우저 페이지 자체에 나오는 에러입니다. function App(props) { return ( <BrowserRouter> <MainTitleText>제플리카의 미니 블로그</MainTitleText> <Routes> <Route index element={<MainPage />} /> </Routes> </BrowserRouter> ); } Uncaught runtime errors: × ERROR Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage . Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage . at createFiberFromTypeAndProps ( http://localhost:3000/static/js/bundle.js:36883:21 ) at createFiberFromElement ( http://localhost:3000/static/js/bundle.js:36904:19 ) at createChild ( http://localhost:3000/static/js/bundle.js:25473:32 ) at reconcileChildrenArray ( http://localhost:3000/static/js/bundle.js:25713:29 ) at reconcileChildFibers ( http://localhost:3000/static/js/bundle.js:26055:20 ) at reconcileChildren ( http://localhost:3000/static/js/bundle.js:28987:32 ) at updateHostComponent ( http://localhost:3000/static/js/bundle.js:29631:7 ) at beginWork ( http://localhost:3000/static/js/bundle.js:31076:18 ) at HTMLUnknownElement.callCallback ( http://localhost:3000/static/js/bundle.js:16062:18 ) at Object.invokeGuardedCallbackDev ( http://localhost:3000/static/js/bundle.js:16106:20 ) ERROR Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage . Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage . at createFiberFromTypeAndProps ( http://localhost:3000/static/js/bundle.js:36883:21 ) at createFiberFromElement ( http://localhost:3000/static/js/bundle.js:36904:19 ) at createChild ( http://localhost:3000/static/js/bundle.js:25473:32 ) at reconcileChildrenArray ( http://localhost:3000/static/js/bundle.js:25713:29 ) at reconcileChildFibers ( http://localhost:3000/static/js/bundle.js:26055:20 ) at reconcileChildren ( http://localhost:3000/static/js/bundle.js:28987:32 ) at updateHostComponent ( http://localhost:3000/static/js/bundle.js:29631:7 ) at beginWork ( http://localhost:3000/static/js/bundle.js:31076:18 ) at HTMLUnknownElement.callCallback ( http://localhost:3000/static/js/bundle.js:16062:18 ) at Object.invokeGuardedCallbackDev ( http://localhost:3000/static/js/bundle.js:16106:20 ) ERROR Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage . Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of MainPage . at createFiberFromTypeAndProps ( http://localhost:3000/static/js/bundle.js:36883:21 ) at createFiberFromElement ( http://localhost:3000/static/js/bundle.js:36904:19 ) at createChild ( http://localhost:3000/static/js/bundle.js:25473:32 ) at reconcileChildrenArray ( http://localhost:3000/static/js/bundle.js:25713:29 ) at reconcileChildFibers ( http://localhost:3000/static/js/bundle.js:26055:20 ) at reconcileChildren ( http://localhost:3000/static/js/bundle.js:28987:32 ) at updateHostComponent ( http://localhost:3000/static/js/bundle.js:29631:7 ) at beginWork ( http://localhost:3000/static/js/bundle.js:31076:18 ) at beginWork$1 ( http://localhost:3000/static/js/bundle.js:36015:18 ) at performUnitOfWork ( http://localhost:3000/static/js/bundle.js:35284:16 )

  • HTML/CSS
  • javascript
  • react
metlin 댓글 1 좋아요 0 조회수 568

오늘 시험 9시 시작하고 1시간 20분만에 나왔습니다.

해결됨

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

B유형이 나왔구 선생님 강의 듣고 매일 연습한 결과 아주 완벽하게 끝내고 왔습니다! 팁을 하나 드리자면 제가 맨처음에 시험을 시작할때 라이브서버나 한글버전의 비주얼 스튜디오가 설치되어 있지 않아서(영문버전) 일단 그냥 했는데 시험 도중에 웹 페이지에서 아무것도 CSS에 적은게 반영이 안되는겁니다... 감독관님을 손들며 부를 때 알게 되었죠 저장 누르면서 해야 적용될 것 같은데? 이생각을요 ㅠㅠ..(+추가드립니다! 시험장에서 영문버전 Auto Save 누르고 하였으나.. 적용이 안되어 비주얼 소프트웨어 문제인지 그거까지 둘다 Ctrl+S / 브라우저 F5를 번갈아가며 눌렀습니다 ;ㅅ;) Html, Css, jQuery를 저장하면서 홈페이지까지 F5로 새로고침을 계속 누르면서 해야되는게 많이 번거로웠습니다! 저의 작업순서는 와이어프레임 작성 (8분) --> 포토샵 열고 파일 정리(이미지 등등 크기에 맞게 자르고 텍스트까지 전부다 마침) (20분) --> 헤더로고, 푸터 모든 영역 완성 (5분) --> 바로 슬라이드 완성 (5분) --> news, gallery 완성 (10분) --> Navi 완성 (10분+10분 서브백 어떻게하는지 중간에 까먹음...!!그래도 완성) --> 그리고 나머지는 검토시간(10분정도) 이 순서로 했던 것 같습니다. 많은분들이 작업 순서를 고민하신다면 이렇게 해보시는걸 추천드립니다! (참고로....저는...시험 다 끝나고 제출할때까지도...용량 초과했는지 확인을 못했지만... 연습을 엄청나게 많이 해봤을때 아무리커봐야 2MB~3MB정도 일거라고 판단하여.. 95점정도의 고득점 예상합니다!) 다들 화이팅입니다! ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 아차! 추가로 영문버전은 단축키(줄 삭제 / 줄 복제 / 줄 이동) 이런거는 단축키에 들어가셔서 "line" 이것만 쳐도 바로 상단에 전부다 몰려있으니 꼭 시험 시작하기전에 단축키부터 설정하고 하시면됩니다. 한글버전도 마찬가지구 이게 시험 시간 단축의 큰 도움이 될겁니다.

  • HTML/CSS
  • jquery
  • 웹-디자인
DDD 댓글 1 좋아요 1 조회수 305

오늘이 시험인데 C타입 와이어프레임이 갑자기 이상합니다!....

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>남도맛기행 축제</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="right"> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="banner"></div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"> <div></div> <div></div> </div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "utf-8"; body { background-color: #fff; color: #222328; font-size: 15px; margin: 0; } a { color: inherit; text-decoration: none; } .container { border: 1px solid red; width: 1000px; overflow: hidden; } .container > div { /* border: 1px solid black; */ /* height: 1000px; */ float: left; box-sizing: border-box; } .left { width: 200px; } header {} header > div { border: 1px solid green; } .header-logo { height: 100px; } .navi { height: 400px; } .right { width: 800px; } .slide {} .slide > div { border: 1px solid pink; height: 350px; } .items { overflow: hidden; } .items > div { border: 1px solid blue; height: 200px; float: left; box-sizing: border-box; } .news { width: 300px; } .gallery { width: 300px; } .banner { width: 200px; } footer {} footer > div { border: 1px solid green; height: 100px; float: left; box-sizing: border-box; } .footer-logo { width: 200px; } .copyright { width: 600px; } .copyright > div {} 이게 갑자기 이런식으로 밑에가 안밀리고 왼쪽으로 딱 붙어있는데 저도 실기 연습중에 처음으로 일어난 일이라 방법을 못찾고있습니다....도움이 필요합니다

  • HTML/CSS
  • jquery
  • 웹-디자인
DDD 댓글 1 좋아요 1 조회수 393

e-2했는데 이게맞는가요 ??

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>e-2레이아웃연습</title> <link rel="stylesheet" href="css/e-2.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="center"> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="slide-banner"></div> </div> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="family-site"></div> </footer> </div> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333; } a{ list-style: none; text-decoration: none; color: #333; } .container{} .main-content{ display: flex; } .main-content > div{ border: 1px solid #000; } .left{ width: 200px; } .center{ width: 400px; } .right{ flex: 1; } /*header*/ header{} header > div{ border: 1px solid red; } .header-logo{ height: 100px; } .navi{ height: 400px; } .items{} .items > div{ border: 1px solid #000; } .news{ height: 250px; } .gallery{ height: 250px; } .slide-banner{ height: 200px; } .slide{} .slide > div{} .slide-image{ border: 10px solid blue; height: calc(100vh - 100px); } footer{ display: flex; } footer > div{ border: 1px solid green; height: 100px; } .footer-logo{ width: 200px; } .copyright{ flex: 1; } .family-site{ width: 230px; } 선생님 강의하신대로 따라했는데 vh 하고나서 저게맞는지는 모르겠지만 사진에 빨간색 칠해놓은부분이 선생님화면이랑 다르게 길어보여서 그런데 혹시 잘못한부분이 있을까요 ? 계속 문의드려 죄송하네요 ...

  • HTML/CSS
  • jquery
  • 웹-디자인
jkjk7088 댓글 1 좋아요 1 조회수 285

e유형하는데 선생님이랑 같이했는데 vh넣고 칸이 밑으로 크게보여요..

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>e-1레이아웃연습</title> <link rel="stylesheet" href="css/e-1.css"> </head> <body> <div class="container"> <div class="main-content"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> <div class="spot-menu"></div> </header> </div> <div class="center"> <div class="shortcut"></div> <div class="news"></div> <div class="gallery"></div> <div class="slide-banner"></div> </div> <div class="right"> <div class="slide-image"></div> </div> </div> <footer> <div class="footer-logo"></div> <div class="footer-content"> <div class="footer-link"></div> <div class="copyright"></div> </div> </footer> </div> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333; } a{ list-style: none; text-decoration: none; color: #333; } .container{} .main-content{ display: flex; } .main-content > div{ border: 1px solid #000; height: 800px; } .left{ width: 200px; } .center{ width: 400px; } .right{ flex: 1; } /*header*/ header{} header > div{ border: 1px solid red; } .header-logo{ height: 100px; } .navi{ height: 400px; } .spot-menu{ height: 50px; } /*slide*/ .slide{} .slide-image{ border: 5px solid green; height: calc(100vh - 120px); } /*shortcut*/ .shortcut{ border: 1px solid #000; height: 150px; } /*news-gallery*/ .news{ border: 1px solid #000; height: 250px; } .gallery{ border: 1px solid #000; height: 250px; } .slide-banner{ border: 1px solid #000; height: 150px; } /*footer*/ footer{ display: flex; } footer >div{ border: 1px solid pink; height: 120px; } .footer-logo{ width: 200px; } .footer-content{ flex: 1; } .footer-content > div{ border: 1px solid blue; height: 60px; } .footer-link{} .copyright{} 선생님이랑 같이했는데 vh넣고 칸이 밑으로 크게보여요.. 뭐가잘못된걸까요 ....????ㅠㅠㅠ

  • HTML/CSS
  • jquery
  • 웹-디자인
jkjk7088 댓글 2 좋아요 1 조회수 282

ㅜㅜ확실히 d유형은 헷갈리네요 ㅠㅠ 선생님 사진에 처럼 왜겹쳐져서 보이는걸까요ㅠㅠ

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>d-4레이아웃연습</title> <link rel="stylesheet" href="css/d-4.css"> </head> <body> <div class="container"> <div class="main-container"> <div class="left"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> </div> <div class="right"> <div class="slide"> <div class="slide-image"></div> <div class="slide-banner"></div> </div> <div class="items"> <div class="news-gallery"> <div class="news"></div> <div class="gallery"></div> </div> </div> </div> </div> </div> <footer> <div class="footer-logo"></div> <div class="footer-content"> <div class="footer-link"></div> <div class="copyright"></div> </div> <div class="family-site"></div> </footer> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333; } a{ list-style: none; text-decoration: none; color: #333; } /*layout*/ .container{} .main-container{ display: flex; } .main-container > div{ border: 1px solid #333; } .left{ width: 200px; } .right{ flex: 1; } /*header*/ header{} header > div{ border: 1px solid #333; } .header-logo{ height: 100px; } .navi{ height: 400px; } .slide{ height: 400px; } .slide > div{ border: 1px solid #333; } .slide-image{ height: 400px; } .slide-banner{ height: 150px; } /*news-gallery*/ .news-gallery{ display: flex; } .news-gallery > div{ border: 1px solid #000; height: 250px; flex: 1; } .news{} .gallery{} footer{ display: flex; } footer > div{ border: 1px solid #333; height: 120px; } .footer-logo{ width: 200px; } .footer-content{ flex: 1; } .footer-content> div{ border: 1px solid #333; height: 60px; } .family-site{ width: 230px; } 강의 1,2,3,4 할때 마다 조금씩 방식이 바뀌는거같아서 혼란스럽네요 container 하고 main-content인가요 main-container 인가요 ?ㅜㅠ헷갈려요,, 그리고 2 4탭메뉴부분도 똑같다고하셨는데 2에서는 .news, .gallery 하셨는데 4에서는 news-gallery 에 .news/.gallery 로나뉘는거 보고 혼란이왔네요 ..어떤게 정확한건가요 ?? 그리고 3-4유형에서도 item에 shortcut 따로 하는게 맞는걸까요 ㅜ 4번에서 news-gallery부분도 헷갈리네요... 위에첨부한거는 왜 저렇케 겹쳐지는지 모르겠어서 문의남깁니다 ㅠㅠㅠ

  • HTML/CSS
  • jquery
  • 웹-디자인
jkjk7088 댓글 1 좋아요 1 조회수 262

공지사항부분이 왜올라가져서 안보일까요 ?? 뭐가문제일까요 ㅠㅠㅠ???ㅠㅠ

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>c실전연습</title> <link rel="stylesheet" href="css/c.css"> </head> <div class="container"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"> <ul class="menu"> <li> <a href="#none">축제소개</a> <div class="sub-menu"> <a href="#none">초대의 글</a> <a href="#none">축제개요</a> <a href="#none">축제연혁</a> <a href="#none">오시는길</a> </div> </li> <li> <a href="#none">행사안내</a> <div class="sub-menu"> <a href="#none">셔틀버스안내</a> <a href="#none">행사안내</a> <a href="#none">행사일정</a> <a href="#none">소공연장</a> </div> </li> <li> <a href="#none">홍보마당</a> <div class="sub-menu"> <a href="#none">축제소식</a> <a href="#none">보도자료</a> <a href="#none">음식레시피</a> </div> </li> <li> <a href="#none">참여마당</a> <div class="sub-menu"> <a href="#none">참가후기</a> <a href="#none">연꽃갤러리</a> <a href="#none">포토갤러리</a> </div> </li> </ul> </div> </header> </div> <div class="right"> <div class="slide"> <div> <a href="#none"><img src="images/slider01-c.jpg" alt="slider01"></a> <a href="#none"><img src="images/slider02-c.jpg" alt="slider02"></a> <a href="#none"><img src="images/slider03-c.jpg" alt="slider03"></a> </div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <span>공지사항</span> </div> <div class="tab1"> <a href="#none"> 운영위원장 후보자 추천을 받고 있습니다. <b>2020.01.09</b></a> </div> </div> </div> <div class="gallery"></div> <div class="shortcut"> <a href="#none"><img src="images/shortcut-c.jpg" alt=""></a> </div> </div> <footer> <div class="copyright"> 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 <br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div> <a href="#none"><img src="images/sns1.png" alt="facebook"></a> <a href="#none"><img src="images/sns2.png" alt="tiwtter"></a> <a href="#none"><img src="images/sns3.png" alt="instagram"></a> </div> <div> <select> <option value="">familysite</option> <option value="">여주군청 홈페이지</option> <option value="">한국관광공사</option> <option value="">여행자보험가입</option> </select> </div> </div> </footer> </div> </div> <body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333333; } a{ list-style: none; color: #333333; } .container{ width: 1000px; border: 1px solid #000; display: flex; } .container > div{ } .left{ width: 200px; } .right{ width: 800px; } header{} header > div{ } .header-logo{ height: 100px; line-height: 130px; } .navi{ height: 400px; } .slide{} .slide > div{ border: 1px solid #000; height: 350px; } .items{ display: flex; } .items > div{ height: 200px; border: 1px solid #000; } .news{ width: 300px; } .gallery{ width: 300px; } .shortcut{ width: 200px; } footer{ display: flex; } footer > div{ height: 100px; text-align: center; } .copyright{ width: 800px; padding-top: 30px; box-sizing: border-box; text-align: center; } .sns{ width: 200px; } .sns div{ height: 50px; box-sizing: border-box; } .sns div:nth-child(1){ padding-top: 15px; } .sns div:nth-child(2){ padding-top: 10px; box-sizing: border-box; } /*slide*/ .slide{ position: relative; width: 800px; height: 300px; } .slide >div{ } .slide >div a{ font-size: 0; width: 2400px; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; visibility: hidden; } .slide >div a:nth-child(1){ animation-delay: 0s; } .slide >div a:nth-child(2){ animation-delay: 3.5s; } .slide >div a:nth-child(3){ animation-delay: 7s; } @keyframes slide{ 0%{ opacity: 0; } 5%{ opacity: 1; visibility: visible; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } /*navigation*/ .menu{ list-style: none; padding: 0; width: 90%; margin: auto; position: relative; } .menu li{ padding: 2px; text-align: center; } .menu li > a{ display: block; border: 1px solid #000; padding: 4px; text-decoration: none; transition: 0.5s; } .menu li:hover > a{ background-color: #000; color: #fff; } .sub-menu{ display: none; border: 1px solid #000; } .sub-menu a{ display: block; text-decoration: none; padding: 5px; transition: 0.5s; } .sub-menu a:hover{ background-color: #000; color: #fff; } 사진처럼 공지사항부분이 위에서 슬라이더에 가렸는데 뭐때문에 가린건지요 ,,, 크기값이안맞아서 그런지 display:flex 를 써서 영향이 있는지 뭐때문에 그런지 궁금합니다 !ㅜ

  • HTML/CSS
  • jquery
  • 웹-디자인
jkjk7088 댓글 1 좋아요 1 조회수 283

node server.js 실행 시 오류 발생

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

Express에서 데이터 처리하기 강의 수강 중에 생긴 오류 입니다. 이후에 포스트맨에서 body 수정 후 send 시에도 Error: connect ECONNREFUSED이 오류가 떳습니다. index.js를 실행 후에 웹 브라우저에 http://localhost:8080/products 입력하면 [{"name":"농구공","price":5000}] 이렇게 웹 화면에 뜨면서 node:events:492 thorw er;도 같이 뜨면서 서버 에러가 납니다 database.sqlite3을 vs코드 열었을 때는 위 사진처럼 뜨고 sqllite로 열었을 때는 읽을 수 없다고 뜹니다

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
Wakgood 댓글 2 좋아요 1 조회수 2027

개발블로그 내용정리 게시 가능 여부

해결됨

따라하며 배우는 HTML, CSS

안녕하세요! 존안님! html, css에 대해 많이 모르는 상태인데도 불구하고 이 강의를 열심히 따라 치고 공부하면서 조금이나마 알아가고 있는 수강생입니다! :) 다름이 아니라 제가 개발 블로그를 사용 중인데 내용을 정리하고, 이전에 공부했던 내용들을 다시 찾아보기 위해서 해당 강의를 보고 제가 정리한 내용을 출처 표기하고 올려도 되는지 궁금합니다! 제공되는 강의 자료는 아니고 따로 제가 보고 정리한 내용들만 올리려고 합니다. 감사합니다!

  • HTML/CSS
guswjd1gh 댓글 1 좋아요 0 조회수 428

반응형 실습

해결됨

[코드캠프] 강력한 CSS

강사님 안녕하세요~ 강의 잘 들었습니다. 다름이 아니라 반응형 실습진행을 flex로 진행하셨는데 grid로 되어있는 css 도 있다고 하신 것 같은데 어디서 받아 볼 수 있을까요?

  • HTML/CSS
이형종 댓글 2 좋아요 0 조회수 307

선생님 슬라이드 첫번째사진에서버벅거리는느낌나는건 뭐때문일까요 ..

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>c실전연습</title> <link rel="stylesheet" href="css/c.css"> </head> <div class="container"> <div class="left"> <header> <div class="header-logo"> <a href="#none"><img src="images/header-logo.png" alt="header-logo"></a> </div> <div class="navi"></div> </header> </div> <div class="right"> <div class="slide"> <div> <a href="#none"><img src="images/slider01-c.jpg" alt="slider01"></a> <a href="#none"><img src="images/slider02-c.jpg" alt="slider02"></a> <a href="#none"><img src="images/slider03-c.jpg" alt="slider03"></a> </div> </div> <div class="items"> <div class="news"></div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="copyright"> 상호 : (주)이스타컴퍼니 | 대표자 : 최종윤 | 개인정보관리책임자 : 이주현 부장 <br> 사업장주소 : 인천광역시 중구 개항로 6층 (주)이스타컴퍼니 </div> <div class="sns"> <div> <a href="#none"><img src="images/sns1.png" alt="facebook"></a> <a href="#none"><img src="images/sns2.png" alt="tiwtter"></a> <a href="#none"><img src="images/sns3.png" alt="instagram"></a> </div> <div> <select> <option value="">familysite</option> <option value="">여주군청 홈페이지</option> <option value="">한국관광공사</option> <option value="">여행자보험가입</option> </select> </div> </div> </footer> </div> </div> <body> <script src="js/jquery-1.12.4.js"></script> <script src="js/custom.js"></script> </body> </html> @charset "UTF-8"; body{ margin: 0; background-color: #fff; color: #333333; } a{ list-style: none; color: #333333; } .container{ width: 1000px; border: 1px solid #000; display: flex; } .container > div{ } .left{ width: 200px; } .right{ width: 800px; } header{} header > div{ } .header-logo{ height: 100px; line-height: 130px; } .navi{ height: 400px; border: 1px solid #000; } .slide{} .slide > div{ border: 1px solid #000; height: 350px; } .items{ display: flex; } .items > div{ height: 200px; border: 1px solid #000; } .news{ width: 300px; } .gallery{ width: 300px; } .shortcut{ width: 200px; } footer{ display: flex; } footer > div{ height: 100px; text-align: center; } .copyright{ width: 800px; padding-top: 30px; box-sizing: border-box; text-align: center; } .sns{ width: 200px; } .sns div{ height: 50px; box-sizing: border-box; } .sns div:nth-child(1){ padding-top: 15px; } .sns div:nth-child(2){ padding-top: 10px; box-sizing: border-box; } /*slide*/ .slide{ position: relative; width: 800px; height: 300px; } .slide >div{ } .slide >div a{ font-size: 0; width: 2400px; position: absolute; top: 0; left: 0; animation: slide 10s linear infinite; } .slide >div a:nth-child(1){ animation-delay: 0s; } .slide >div a:nth-child(2){ animation-delay: 3.5s; } .slide >div a:nth-child(3){ animation-delay: 7s; } @keyframes slide{ 0%{ opacity: 0; visibility: hidden; } 5%{ opacity: 1; } 35%{ opacity: 1; } 40%{ opacity: 0; } 100%{ opacity: 0; } } 선생님 슬라이드 첫번째사진에서버벅거리는느낌나는건 뭐때문일까요. 가로세로는 이해가되는데 페이드인아웃 효과가 젤어렵긴하네요 .. 일단 해봤는데 약간 버벅거리는느낌이있는거같아 첨부해보아요,,

  • HTML/CSS
  • jquery
  • 웹-디자인
jkjk7088 댓글 2 좋아요 1 조회수 262

등록 시 질문

미해결

자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]

등록 id가 1번과 2번이 있었다가 2번을 삭제하고 다시 등록을 하면 id가 3번으로 등록이 됩니다. 제가 잘못한 걸까요..?? 아니면 혹시 원래 이렇게 돌아가도록 설정하신건가요??

  • java
  • spring
  • aws
  • mysql
  • spring-boot
  • jpa
qwe_e0606 댓글 2 좋아요 1 조회수 268

이게 왜 안될까요? 변수가 안먹어요

미해결

처음 만난 리액트(React)

import React from "react"; function Book(props) { return ( <div> <h1>{'이 책의 이름은 ${props.name}입니다'}</h1> <h2>{'이 책은 총 ${props.numOfPage} 페이지로 이뤄져 있습니다.'}</h2> </div> ); } export default Book;

  • HTML/CSS
  • javascript
  • react
phb1533 댓글 1 좋아요 0 조회수 340

소스코드 공유는 없을까요?

해결됨

떠먹는 Three.js

강의 대부분이 내용 skip이 되며, 이번 강의에서는 css파일 등이 공개가 되어 있지 않아 똑같이 따라하기가 너무나 힘듭니다. ㅠㅠ 기술을 배워 응요하는 것도 좋지만, 처음 학습시에는 시청한 강의와 똑같은 내용으로 만들어보고자 합니다. 해당 소스코드 (모델들, 세팅 index.js 소스코드, reset css)가 어딘가 공유가 되어있는지, 또는 공유가 가능한지 알고 싶습니다. 강의 내용 중 사용된 material 등도 제공 가능하신지 알고 싶습니다.

  • HTML/CSS
  • javascript
  • three.js
댓글 1 좋아요 1 조회수 493

공지사항, 갤러리 탭 <section><article class></article></section>, <div class> 중 어떤 것 이용?

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

A1 작업시 공지사항, 갤러리 탭 만들때 <section><article class></article></section>, <div class> 중 어떤 태그 이용해서 제작합니까? 강의 중 <section><article></article></section> 태그로 제작하는 것도 있고 <div class> 태그로 제작하는 것도 있는데 각각 어떤 경우에 사용합니까?

  • HTML/CSS
  • jquery
  • 웹-디자인
HL5PFM 댓글 1 좋아요 1 조회수 267

시험장에서 유효성검사는 어떻케하는지요 ,,?? 인터넷이안되는걸로알고있는데 어떻케하는지궁금해서요 ,

미해결

[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드

유효성검사를 하게되어 오류가난다면 실격이되는건가요 ?? 인터넷이안되는데 시험때 다만들고 유효성검사는 어떻케 하는건가요 ??

  • HTML/CSS
  • jquery
  • 웹-디자인
jkjk7088 댓글 2 좋아요 1 조회수 368

실습 강의 미니프로젝트 const {} = props ;

미해결

처음 만난 리액트(React)

function MainPage(props) { const {} = props ; props 에다 중괄호에 아무것도 없이 쓰는 건 객체를 선언하기 위함인가요? 무슨 기능을 하는지 모르겠어요 이 코딩 한 줄 쓰는 이유가 뭔가요?

  • HTML/CSS
  • javascript
  • react
문연희 댓글 1 좋아요 1 조회수 456

코드가 이상해요 ㅠ

해결됨

[코드캠프] 시작은 프리캠프

영상 보면서 그대로 했는데 9번째 줄부터 이상하게 배열이 됩니다. 그리고 12, 13번째 줄에 따옴표가 생겨요. 인증번호 전송을 눌러도 숫자가 일 바뀝니다. 어떻게 해야 하나요?

  • HTML/CSS
  • javascript
kbtusno12 댓글 1 좋아요 1 조회수 292

안녕하세요 이렇게 나오는데..

해결됨

웹 애니메이션을 위한 GSAP 가이드 Part.02

오늘 강의 시작했는데 실습 예제 다운 받으려고 하니 저렇게 나오고 클릭이 안되네요 ㅜ 해결 방법 있을까요? 엣지 크롬 파이어폭스 셋다 저러네요 브라우저 보안 설정 떄문인가 해서 보안도 끄고 들어가봐도 저래요 아 그리고 실습예제 codepen 링크들어가서 보면 버튼눌러도 애니메이션이 반응이 없던데 .. 왜그런지 이유를 모르겠어요 다 그런건 아닌거같고 처음에 motionpath 예제만 그런거 같더라구요

  • HTML/CSS
  • javascript
  • 인터랙티브-웹
  • gsap
웹개바르르 댓글 1 좋아요 1 조회수 441

인기 태그

인프런 TOP Writers

주간 인기글