이야기를 나눠요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
리액트에서는 일케함 Flex UI 실전 제작(3) – 반응형 헤더 네비게이션(4)
이렇게 해결함 import React, { useRef, useState } from "react"; import styled from "styled-components"; import { Container } from "../components/styled/container"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faFacebook, faGoogle, faTwitter } from "@fortawesome/free-brands-svg-icons"; const Temp = styled(Container)<{ isShow: boolean }>` width: 100%; height: inherit; background-color: #ccc; display: flex; align-items: center; font-size: 1rem; color: black; header { .trigger { display: none; } width: 100%; height: 60px; background-color: #0099ff; display: flex; justify-content: center; align-items: center; nav { width: 1280px; display: flex; justify-content: space-between; .logo { img { filter: invert(100%); } img:hover { filter: invert(10%); } } .gnb { display: flex; white-space: nowrap; li { a { color: #fff; margin: 10px; } a:hover { color: #ff7675; } } } .sns { white-space: nowrap; a { color: #fff; margin: 5px; } a:hover { color: #ff7675; } } } } @media screen and (max-width: 768px) { header { width: 100%; height: auto; nav { flex-direction: column; position: relative; .logo { margin: 10px 0 5px 10px; } .gnb { border-top: 1px solid #1482ff; flex-direction: column; text-align: center; display: ${(props) => (props.isShow ? "block" : "none")}; li > a { color: #fff; margin: 0; } a { padding: 5px; display: block; } } .sns { display: ${(props) => (props.isShow ? "block" : "none")}; text-align: center; padding: 0 5px; background-color: #81ecec; a { /* border: 1px solid red; */ display: inline-block; margin: 0 10px; font-size: 1.2rem; padding: 3px 8px; } } .trigger { cursor: pointer; /* border: 1px solid black; */ display: block; width: 25px; height: 15px; position: absolute; top: 15px; right: 15px; span { background-color: #fff; height: 1px; position: absolute; width: 100%; transition: 0.3s ease-out; } span:nth-child(1) { top: 0px; } span:nth-child(2) { top: 50%; } span:nth-child(3) { top: 100%; } } .trigger.active { span:nth-child(1) { top: 50%; transform: rotate(45deg); } span:nth-child(2) { opacity: 0; } span:nth-child(3) { top: 50%; transform: rotate(-45deg); } } } } } `; function Resume() { const triggerRef = useRef<HTMLDivElement>(null); const [isShow, setShow] = useState(false); function bergerToggle() { triggerRef.current!.classList.toggle("active"); setShow((pre) => !pre); } return ( <Temp isShow={isShow}> <header> <nav> <div className="logo"> <a href="#none"> <img src="images/logo.png" alt="" /> </a> </div> <ul className="gnb"> <li> <a href="#none">Home</a> </li> <li> <a href="#none">About</a> </li> <li> <a href="#none">Project</a> </li> <li> <a href="#none">Plan & History</a> </li> <li> <a href="#none">Awards</a> </li> <li> <a href="#none">Location</a> </li> <li> <a href="#none">Contact</a> </li> </ul> <div className="sns"> <a href="#none"> <FontAwesomeIcon icon={faFacebook} /> </a> <a href="#none"> <FontAwesomeIcon icon={faTwitter} /> </a> <a href="#none"> <FontAwesomeIcon icon={faGoogle} /> </a> </div> <div ref={triggerRef} className="trigger" onClick={bergerToggle}> <span></span> <span></span> <span></span> </div> </nav> </header> </Temp> ); } export default Resume;
-
플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)
이야 깨달음이왓싸
이야아 a태그가 inline 속성이라 block으로 바꾸는걸 처음 배웟슴니다 감동햇어요
-
파이썬입문과 크롤링기초 부트캠프 [파이썬, 웹, 데이터 이해 기본까지] (업데이트)
html 들어오고부터 강의가 몰입도가 너무 떨어져요..
그냥 아 이런게 있나보다 하고 넘어가면 되는걸까요 의욕이 확 사라지네요 흑흑
-
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술
메시지 테스트 중 한글 비교 실패
Standard Java API에서 프로퍼티 파일들은 ISO 8859-1 인코딩을 사용한다고 합니다. 설정(⌘+;)창 Preferences > Editor > File ncodings 메뉴를 들어간 뒤 Properties Files(*.properties) 항목에서 Transparent native-to-ascii conversion 를 체크 하여 설정 참고 : https://ifuwanna.tistory.com/291
-
스프링 DB 1편 - 데이터 접근 핵심 원리
pdf 강의 자료에서 발견한 오타들 제보합니다
안녕하세요. 언제나 좋은 강의 너무 감사합니다! 스프링 DB 1편 강의도 듣다보니 마지막 영상 <다음으로> 만 남았네요. 그동안 강의자료를 보다가 발견한 오타들이 몇 개 있어서 제보드립니다. ------------------ 4. 스프링과 문제 해결 - 트랜잭션 p.30 입니다 정상 동작하는 하고 -> 정상 동작하고 ------------------------- 5. 자바 예외 이해 p.21 하단입니다. 체크 예외 구현 기술 변경시 파급 효과 -> 런타임 예외 구현 기술 변경시 파급 효과 로 변경하면 맞는 것으로 보입니다. --------------------- 6. 스프링과 문제 해결 - 예외 처리, 번복 p.11-14 입니다. MemberServiceV4Test 코드에서 SQLException 관련 부분이 모두 제거되는 것이 강의 내용과 맞습니다. 이 강의 자료에 해당되는 <런타임 예외 적용> 강의 영상에서는 이를 제거합니다. (8분 15초) --------------------- 6. 스프링과 문제 해결 - 예외 처리, 번복 p.26 입니다. 스프링 예외 추상화와 덕분에 -> 스프링 예외 추상화 덕분에 ------------------------ 감사합니다!
-
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
View 재활용에 대한 의견이 궁금합니다.
서버보다는 클라이언트 개발하시는 분들이 보시면 좋을 것 같아요. CRUD 에서 Create 와 Update 는 사용자 입장에서 보면 동일한 화면인 경우가 많습니다. 그래서 저는 개발할 때 생성과 수정을 같은 소스 파일을 사용합니다. 우려되는 점은 다음과 같습니다. View 단의 코드가 복잡해진다. 하지만 다음과 같은 이유 때문에 저는 같은 소스를 사용합니다. 디자인이 수정될 경우 하나의 소스만 수정하면 된다. SSR 에서는 잘 모르겠지만 CSR 에서는 같은 소스 파일을 사용하는 게 유지보수성이 더 좋다는 게 제 생각입니다. 여러분의 의견이 궁금합니다.
-
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술
"Elvis 연산자"를 배우며 김영한님을 써보았습니다.
v1. /: v2. /B v3. (/B-)
-
실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
MemberForm 에서 Member 로 변환 코드 개선
비슷한 내용을 담고 있으면서도 다른 data model 을 사용하는 경우가 있습니다. 여기서는 Member 와 MemberForm 이 되겠죠. 아키텍처상 다른 레이어라면 다른 data model 을 사용하게 되어 있습니다. MemberController 의 34~38 라인의 코드는 변환만 담당하는 Mapper 클래스를 별도로 두어 1줄로 바꿀 수 있습니다. 또는 MemberForm 클래스 내부에 toEntity() 와 같은 메서드를 두어 처리할 수도 있습니다. "mapper class" 혹은 "toEntity" 와 같은 키워드로 검색하시면 관련 내용을 찾을 수 있습니다. Spring 에서만 사용하는 개념은 아니니 두고두고 쓰실 겁니다...
-
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술
강의 자료에서 발견한 오타들 제보드립니다
스프링 MVC 2편 너무 잘 들었습니다. 감사합니다! 현재는 스프링 DB 1편 강의를 아주 재밌게 듣고 있습니다. 그동안 MVC 2편 강의를 들으며 발견했던 오타들을 메모해두었었는데 개선되면 좋을 것 같아 제보드립니다! ------------------ 4. 검증1 - Validation p.6 입니다. model errors를 담고 -> model에 errors를 담고 ---------------------- 4. 검증1 - Validation p.20 입니다. errorCode -> codes 로 고치면 맞는 것으로 보입니다. -------------------------------- 4. 검증1 - Validation p.25 입니다. ValidationItemControllerV2 - addItemV4() 추가 바로 다음 부분에 나오는 내용입니다. addItemV2() -> addItemV3() 로 고치면 맞는 것으로 보입니다. ------------------------- 5. 검증2 - Bean Validation p.24 입니다. 분기분 -> 분기문 --------------------------- 6. 로그인처리1 - 쿠키,세션 p.25 입니다. 나의 로컬 PC가 -> 나의 로컬 PC에서 -------------------- 9. API 예외처리 p.1 입니다. 서블릿 오류 페이지로 -> 서블릿 오류 페이지 ----------------------------- 9. API 예외처리 p.7 입니다. API는 -> API ------------------------- 9. API 예외처리 p.7 입니다. 다른 상태코드도 -> 다른 상태코드로 ---------------------------- 10. 스프링 타입 컨버터 p.13 입니다. Principal -> Principle ------------------------------ 11. 파일업로드 p.21 입니다. MultipartFile -> List<MultipartFile> 로 고치면 맞는 것으로 보입니다. -------------------------- 감사합니다!
-
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술
메시지, 국제화 강의 자료 내용 중에 개선 가능한 부분이 있는 것 같아 제보드립니다
안녕하세요. 메시지, 국제화 강의 자료 내용 중에 개선 가능한 부분이 있는 것 같아서 제보드립니다. ----------- ---------- --------- 위는 "3. 메시지, 국제화.pdf" 강의 자료 내용입니다. 강의 영상에서는 <스프링 메시지 소스 사용> 2분 30초 및 3분 55초 부근에서 해당 내용을 다룹니다. 강의 자료 및 강의 영상에서는 MessageSource 객체의 getMessage 메서드를 호출할 때, locale을 null로 넘기면 곧바로 messages.properties 파일에서 데이터를 조회하는 것처럼 설명되어 있습니다. 그런데 https://www.inflearn.com/questions/286899 에서 영한님이 답변을 해주신 바와 같이 locale을 null로 넘기면 locale = Locale.getDefault(); 를 호출하여 시스템 기본 locale로 먼저 조회를 하고 (시스템 기본 locale이 ko_KR 라면 messages_ko.properties 를 먼저 찾고), 이후 시스템 기본 locale로 조회되는 것이 없을 경우에 messages.properties를 찾는 것으로 보입니다. 정리하면, 현재 pdf 자료와 영상에서는 locale = null 인 경우 -> messages.properties 조회 라고 알려주고 있는데 이를 다음과 같이 중간 과정을 설명해주는 내용으로 개선하면 더 정확하지 않을까 생각합니다. locale = null 인 경우 -> 시스템 기본 locale이 ko_KR이므로messages_ko.properties 조회 시도 -> 조회 실패 -> messages.properties 조회 제 컴퓨터에서는 시스템 기본 언어가 en으로 되어 있어, 본 강의 내용을 들을 때, 영한님이 강의에서 보여주신 것과 동작이 달라서 문제 원인이 무엇인가 구글도 찾아보고 인프런 게시판도 찾아봤었습니다. 인프런 게시판을 검색해보니 저와 비슷한 현상을 겪으신 분들(https://www.inflearn.com/questions/259370, https://www.inflearn.com/questions/286899, https://www.inflearn.com/questions/489062)이 더러 있더라구요. 위에 언급한 강의 자료 내용을 개선해주시면 시스템 언어 설정이 달라서 발생하는 이런 혼란이 줄어들 수 있지 않을까 싶습니다. 항상 좋은 강의에 감사드립니다!
-
[무료세미나] INNOPOLIS AI SPACE-S 인공지능 세미나 - 라벨링 없이 해보는 의미론적 분할
이번에는 옥스퍼드 대학 VGG그룹 박사과정이자 AIFactory 데이터사이언티스트이신 신경인님을 모시고, "라벨링 없이 해보는 의미론적 분할"이란 주제로 Space-S 인공지능 세미나를 준비했습니다. (참고로 VGG 그룹은 여러분이 잘 아시는 CNN의 VGGNet을 개발한 랩실입니다.) 관련 주제로 이번 CVPR 2022 워크샵에도 선정되었답니다. 딥러닝 기반 의미론적 분할의 수요는 늘어나고, 라벨링은 또 어렵고... 이제 의미론적 분할에도 능동학습과 자기지도 학습이 필요한 시점입니다~ 관심있으신 분들은 7월 19일(화) 저녁 7시에 온라인(유튜브)에서 뵈어요! 상세 프로그램은 아래와 같습니다. 세미나 소개 날짜: 2022년 7월 19일 화요일 시간: PM 7:00 ~ PM 8:00 접속 링크: https://aifactory.space/competition/detail/2061 19:00~19:30 1부 의미론적 분할을 위한 능동학습 (active learning for semantic segmentation) 19:30~20:00 2부 물체분할을 위한 자기지도학습 (self-supervised learning for object segmentation) 연사 소개 연사 : 신경인 (옥스퍼드 VGG 연구실 박사과정 & AIFactory 데이터사이언티스트) 진행 : 김태영 (주)인공지능팩토리 대표이사
-
설계독학맛비's 실전 Verilog HDL Season 1 (Clock부터 Internal Memory까지)
1억^8을 실제로 해 봤습니다.
연산 규모가 늘어날수록 HW/SW의 격차는 어마무시해진다고 맛비님이 강의에서 말씀하셨죠. 얼마나 어마무시해질지 궁금해서, for문의 마지막에 정말로 1억을 넣고 시뮬레이션을 돌렸습니다. 그러니까 연산의 마지막에는 1억의 8제곱을 계산한 것입니다. 결과는 아래와 같습니다. - SW(C 코드): 23초 - HW(Verilog): 1초(시뮬레이션상 시간) 23배라는 차이를 보였습니다. 실험 결과를 공유하고 HW의 유용함을 알리기 위해 이 글을 적었습니다!
-
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
완강!! 너무너무 고맙습니다.
- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 너무너무 고맙습니다. 덕분에 스프링, DI, JPA 등에 대해서 조금 더 가까워 진 것 같아서. 한번 만들어보며 확인해보고 부족한 부분 채우러 다시 오겠습니다. 좋은 날 항상 웃음 많은 날 되세요 ^^
-
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
강의 너무 끊겨요. 무한 버퍼ㅠㅠ
껐다 켜도 그러고, 어쩝니깡ㅠㅠ 유투브는 잘 틀어지는데
-
아마존 클라우드 무료계정으로 시작하는 서버리스 애플리케이션 프로젝트
개발자 문서 공유합니다.
https://docs.aws.amazon.com/AmazonS3/latest/userguide/UsingRouting.html 강의 중 살펴보시는 s3 개발자 문서 url이 달라져서 찾은 김에 공유합니다!
-
스프링 핵심 원리 - 기본편
안녕하세요 교육 과정에 대해 문의드립니다.
안녕하세요. 이번에 취업을 하고서 공부를 하기 위해 인터넷으로 검색과 유튜브를 통해서, 영한님의 강의를 알게 되었습니다. 우선은 기초편을 듣고, 기본편을 완강을 하였습니다. 기본편을 수강하면서 뒤로 갈수록 머리보다 따라치기 바빴는데요.. 자바에 대한 지식을 다시 쌓고서 강의 수강을 시작하는게 나을까요? 아니면 추천해주신 커리큘럼 대로 진행 하는게 나을까요? 어떤 방향이 나을지 조언 부탁드리겠습니다 ㅠㅠ
-
크롤링으로 웹, 텔레그램봇, REST API, 모바일 앱 만들기
django restframework 로 rest api 만들기 26초에 가래침 뱉는소리먼가요
- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. ....편집부탁드립니다.
-
[무료 행사 홍보] 가짜연구소 컨퍼런스, 4th PseudoCon
[가짜연구소 컨퍼런스, 4th PseudoCon] 가짜연구소에서는 이번에 "함께하는 힘"이라는 주제로 컨퍼런스를 진행합니다! 관련주제로 초대하여 발표하는 invited talks와 가짜연구소의 아카데미 활동(스터디/크루/펠로우쉽)을 발표하는 contributed talk, 그리고 새로운 팀을 만들 수 있는 기회를 갖는 네트워킹까지! 누구나 참여하실 수 있으니 주저말고 오셔서 함께하는 힘, 공유, 동기부여, 함께하는 즐거움의 가치를 누리세요!! 특별히 이번 행사는 정보통신산업진흥원(NIPA)과 Google Cloud의 후원을 받아 진행됩니다. 아쉽게도 행사는 온라인으로 진행되지만, 발표자들과 기여자들은 Google for Startups의 공간에서 진행하게 됩니다! Google의 후원을 받는 날이 오다니이이 정말 기쁩니다!! :) 비영리 머신러닝 커뮤니티 가짜연구소의 4기(2022년 상반기)에는 총30여개의 그룹, 350여명이 함께 성장하며 가짜연구소의 가치를 실현해나가고 있습니다. 이번 기수에서는 삼성서울병원에서 외과의사로 근무하시는 남기님이 <CV in Surgery>팀을, Graph 관련 팀만 벌써 3번이나 이끄신 수민님의 <Groovy Graph>, 무료 튜토리얼을 자주 열어주시는 mlops 전문가 정훈님의 <ml-with-the-flow> 등 다양하고 흥미로운 주제를 기반으로 스터디와 연구개발이 이루어졌습니다! 케글 메달들과 인공지능 경진대회 우승, 70여명이 참여한 오프라인 네트워킹 파티, 다양한 튜토리얼과 쿡북, 스터디 자료와 논문 리뷰 등이 이루어졌습니다. 앞으로는 "비영리 연구"의 새로운 무브먼트를 만들기 위해 조직을 재구성하려합니다! 그러한 발표도 할 예정이니 기대해주세요!! 신청 링크: https://event-us.kr/pseudolab/event/45800 행사 정보: https://pseudo-lab.com/5aa0d71c7e7749de9545222f12c61c5e?v=32ac5977503c40618e3bdcac0035dd20&p=bdde093d551e4b59988eccaceb8ac41c 가짜연구소 디스코드 커뮤니티: https://discord.gg/EPurkHVtp2 --- 이 바쁘고 복잡한 세상에서 홀로 공부하는 것은 매우 힘이듭니다. 쏟아지는 정보를 홀로 감당하기 힘들 뿐더러, 바쁜 일상 속에 홀로 의지내어 목표 지점까지 완주하는 것은 참 어렵습니다. 그런데, 함께함은 어려운 일이 아니라, 상대적으로 쉬운 일입니다. 어떠한 작은 움직임이, 참여가, 소통이 축적되어 여러분의 삶을 크게 변화시킬 것을 기대해보세요! 단순히 혼자 공부하는 것을 함께함으로 효율적이 되는 것 뿐만 아니라, 약한 의지도 강하게 만들고, 하나의 목표를 끝까지 끌고나가 목표까지 달성하고, 같은 분야에서 오래 함께 소통하는 가짜연구소의 이야기를 들어보고 싶으시지 않으신가요? 여러분들의 참여는 거창할 필요 없습니다. 준비될 필요 없습니다. 서로에게 의지할 수 있도록 오히려 내려놓고 부족함을 인정하십시오! 그리고 함께함으로 부족함을 채워나가 끝까지 완주함으로 걸어온 발자취를 뒤돌아보며, 함께 얘기할 수 있는 동료가 있다면 얼마나 행복할까요. 여러분들의 성장 과정이 스트레스나 고통이 아닌 스토리와 즐거움이 가득하기를 바랍니다!
-
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
org.h2.jdbc.JdbcSQLInvalidAuthorizationSpecException: Wrong user name or password [28000-200]
이 에러가 나온다면 application.properties에 spring.datasource.username=sa 추가해보십쇼
-
얄코의 반응형 프로그래밍 - 자바스크립트로 쉽게 배우는 ReactiveX
Node.js 환경에서 따라 공부할때, ajax 요청의 문제점
안녕하세요 강의에 감사드립니다 저는 JSFiddle이 아니라, Node.js를 통해서 강의의 예제 코드를 따라해가며 진행중입니다 그런데 ajax 자체는 프론트엔드 상에서 브라우저의 XMLHttpRequest 객체를 통해 이루어고, rxjs 라이브러리 또한 당연히 그것을 고려해서 내부적으로 XMLHttpRequest를 사용였습니다그래서 서버에서는 '굳이' 저걸 테스트 할 수 없나 싶어서 찾아보던 중 rxjs github repository에서 issue를 발견했습니다(https://github.com/ReactiveX/rxjs/issues/2099) 이에, 아래와 같은 코드 작성으로 '굳이' Node.js에서도 동작시키게 되었습니다 global.XMLHttpRequest = require("xhr2"); const { ajax } = require("rxjs/ajax"); const obs$ = ajax("https://api.github.com/users?per_page=5"); obs$.subscribe((result) => console.log(result.response)); 혹시~~~~나 저 처럼 Node.js에서 진행하시는 분들은 도움이되셨으면해서 올립니다.. 다시 한번 강의에 감사드립니다