본문 바로가기

"공부" 𝑟𝑒𝑐𝑜𝑟𝑑/𝐹𝑟𝑜𝑛𝑡𝑒𝑛𝑑14

[React error] Warning: Expected `onClick` listener to be a function, instead got a value of `object` type. 유튜브 클론 프로젝트를 하면서 햄버거 바 (FiMenu) 클릭시 메뉴 숨기기 코드를 짜고 있었다. 코드를 처음엔 이렇게 짰다가 햄버거 바를 계속 클릭해도 숨겨지지가 않는 에러가 발생했다. 앞으로 리액트를 공부하면서 자주 발생할 것 같은 에러 같아서 기록하게 되었다. 콘솔 창을 확인해보니 Warning: Expected `onClick` listener to be a function, instead got a value of `object` type. 다음 사진과 같은 이런 에러가 적혀있었다. 결론부터 말하자면 부모 컴포넌트에서 하위 컴포넌트에 무언가를 전달하면서 생긴 오류이다. 나는 현재 Menu의 state가 담겨있도록 만든 비구조화 할당 문법을 사용한 Props를 onClickMenu 라는 함수 파라.. 2022. 4. 5.

re:tro 협업 프로젝트 개발 일지 프로젝트 명 re:tro (리:레트로) 프로젝트 설명 1980년대부터 2010년대까지의 당신의 추억 속 음악을 들려주는 웹 사이트 프로젝트 구성 메인 페이지 로그인 / 회원가입 페이지 re:tro 소개 페이지 마이 페이지 노래 검색 페이지 레트로 뮤직 차트 페이지 시대별 분류 레트로 뮤직 모음집 페이지 음악 성향 테스트 페이지 노래 모음집 페이지 re:tro 페이지 별 기능 메인 페이지 개폐형 상단 팝업 슬라이드 음악 플레이 바 Youtube를 연동한 노래 재생 버튼을 통해 음악 일시정지 및 재생 로그인 시, 좋아요 기능을 통해 마이 플레이리스트에 추가 1980~2010년대 시대 별 상위 6위 노래 차트 로그인 시에만 마이페이지, 보관함 접속 가능 각 사이트로 연결 노래 검색창 깔끔한 레이아웃 구성 로그.. 2022. 3. 20.

스파르타코딩클럽 메이킹 챌린지 프로젝트 회고 스파르타코딩클럽에서 웹개발 종합반과 앱개발 종합반을 수료하고 수료생들을 대상으로 모집하는 메이킹 챌린지라는 프로그램에 참여하게 되었다. 이는 웹개발 종합반에서 배운 내용을 바탕으로 수료생들끼리 팀을 이뤄 실제 하나의 웹사이트를 만들어보는 프로젝트 활동이었다. 복습 팀과 심화 팀 중 어디로 신청을 해야 할지 고민하다가 내 자신도 성장할 기회가 될 것 같아 이왕 하는 거 심화 팀으로 도전해보자💪 라는 생각으로 지원하게 됐다. 그렇게 첫 OT가 시작이 되었고 두둥-!! 대망의 팀 발표 !! 어떤 분들이 팀이 될지 너무 떨렸고 졸업 프로젝트 이후로는 첫 팀 프로젝트여서 기대도 되었다. 그렇게 나는 심화 4팀으로 배정이 되었고 총 6분과 프로젝트를 하게 되었다. 프로젝트는 코로나로 인해 비대면으로 진행되었기 때문.. 2022. 3. 20.

스파르타코딩클럽 웹개발 종합반 + 앱개발 종합반 후기 1월 새해를 맞아 나는 동기부여가 꼭 필요한 사람인걸 스스로 잘 알기에 저번달 초부터 내게 꼭 맞는 강의를 찾아보고 있었다. 그러던 중, ✨스파르타코딩클럽✨에서 진행하고 있는 내일배움단 플러스 에 대해 알게 되었다. 웹개발 종합반의 강의 커리큘럼을 보니 1️⃣ 내가 이전에 공부해놓은 것을 토대로 복습도 할 수 있고, 2️⃣ 이전엔 공부해보지 못한 백엔드 분야까지 종합적으로 배워볼 수 있고, 3️⃣ 다양한 토이 프로젝트들을 해볼 기회까지 될 것 같아 이거다!! 싶은 마음에 바로 신청하게 되었다. 나는 웹과 앱 둘다 관심이 있었기에 내일배움단 플러스로 이렇게 두 개의 강좌를 신청을 하게 되었다. 모두 국비지원으로 진행이 되며, 10%의 자비부담금은 완주 후에 전액 환급이 가능하다 !! 모두들 완주하고 전액 .. 2022. 2. 27.

스타벅스 랜딩 페이지 구현에 사용된 유용한 라이브러리 이번 스타벅스 랜딩페이지(홈페이지) 구현에 사용된 유용한 라이브러리들과 몇 가지 사이트들에 대해 적어보았다. ╰(⊡-⊡)و✎⮹ . . . Open Graph Protocol Open Graph Protocol은 페이스북에서 만든 메타 태그로, 소셜 미디어 서비스(페이스북, 카카오톡 등)로 웹 사이트를 공유할 때 미리보기를 만들어 주는 역할을 한다. ※ 본 구현에선 Kakaotalk의 Open Graph Protocol을 사용하였다. ex) Kakaotalk Twitter Cards 트위터에는 Twitter Cards라는 기능이 있다. 140자의 텍스트만 표현할 수 있는 트위터의 제약을 확장할 수 있는 기능으로 추가적인 이미지나 내용을 미리보기처럼 보여주는 기능이다. ※ 본 구현에서 사용된 Twitter .. 2022. 1. 18.

스타벅스 랜딩 페이지(홈페이지) 만들어보기 - vanilla ver. 이번에는 스타벅스 랜딩 페이지(홈페이지)를 구현해보았다. 이번에는 HTML, CSS, JavaScript 사용과 함께 몇 가지의 라이브러리도 함께 활용해보았다. 모든 코드를 이해하고 구현까지 하느라 넘무 힘들었지만 이제 막 코린이 단계일 뿐 ,,, (-‸-,) 내가 원하는 디자인대로 뚝딱뚝딱!! 단시간에 만들 수 있는 실력이 될 때까지 화이륑 ⋆⁺₊⋆ ⛧ 출처: https://github.com/ParkYoungWoong/starbucks-vanilla-app GitHub - ParkYoungWoong/starbucks-vanilla-app: 스타벅스 랜딩 페이지(+로그인) 예제 for FastCampus 스타벅스 랜딩 페이지(+로그인) 예제 for FastCampus. Contribute to Park.. 2022. 1. 18.

이전 1 2 3 다음

티스토리툴바