개발 및 일상 블로그 개발 및 일상 블로그

https://codemate.kr/@Qcell/%EC%8B%9C%EA%B0%84-%EA%B0%80%EA%B3%B5-%ED%95%A8%EC%88%98-%EC%83%9D%EC%84%B1-E8bz93kYVW 시간 가공 함수 생성 by Qcell | 코드메이트 이번 시간에는 moment JS 라이브러리를 활용하여 현재 시간에서 영상이 업로드 된 날짜를 출력하는 기능을 구현했고, 전체적인 폴더를 해당 컴포넌트에 맞게 수정했습니다. ExploreCard.js -> HorizontalCa codemate.kr 이번 시간에는 moment JS 라이브러리를 활용하여 현재 시간에서 영상이 업로드 된 날짜를 출력하는 기능을 구현했고, 전체적인 폴더를 해당 컴포넌트에 맞게 수정했습니다. ExploreCard.js -> Ho..

https://codemate.kr/@Qcell/input-%ED%83%9C%EA%B7%B8-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-ipQ53Trvdq input 태그 상태 관리 by Qcell | 코드메이트 이번 시간에는 input 태그 상태 관리를 통해 홈 탭에서 console.log로 입력한 데이터를 출력하는 통신을 구현했습니다 :) 그 전에 전시간까지 구현했던 탐색 페이지에 이어서, 홈 탭에서도 데이터를 codemate.kr input 태그 상태 관리 이번 시간에는 input 태그 상태 관리를 통해 홈 탭에서 console.log로 입력한 데이터를 출력하는 통신을 구현했습니다 :) 그 전에 전시간까지 구현했던 탐색 페이지에 이어서, 홈 탭에서도 데이터를 받아와 구현하는..

https://codemate.kr/@Qcell/%ED%95%84%ED%84%B0-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0-Mep7u0noJu 필터 변경하기 by Qcell | 코드메이트 이번 시간에서는 map 메소드를 학습했습니다 ! map은 배열과 함수를 인자로 받고, 배열의 요소를 돌면서 전달된 함수를 적용한 새로운 배열을 반환하는 메소드입니다. 컴포넌트의 유일성을 보장 codemate.kr 이번 시간에서는 map 메소드를 학습했습니다 ! map은 배열과 함수를 인자로 받고, 배열의 요소를 돌면서 전달된 함수를 적용한 새로운 배열을 반환하는 메소드입니다. 컴포넌트의 유일성을 보장하기 위해 key값이 필요하다는 것도 깨달았어요. 그래서 이 map을 활용하여 youtubejso..

https://codemate.kr/@Qcell/%EC%98%A4%EB%8A%98%EC%9D%98-%EB%AC%B8%EC%A0%9C-%EB%A9%94%EB%89%B4-%EC%97%86%EC%95%A0%EA%B8%B0-oji9Seq52W ✅ 오늘의 문제 : 메뉴 없애기 ② by Qcell | 코드메이트 이번 시간에는 미디어 쿼리에 대해 학습했어요 . 학습해본 결과 CSS에 사용하는 조건문이라는 느낌을 많이 받았습니다. 반응형 웹 탐색 페이지를 구현하기 위해서 Explore 컴포넌트에 먼저 사용해 codemate.kr 이번 시간에는 미디어 쿼리에 대해 학습했어요 . 학습해본 결과 CSS에 사용하는 조건문이라는 느낌을 많이 받았습니다. 반응형 웹 탐색 페이지를 구현하기 위해서 Explore 컴포넌트에 먼저 사..

https://codemate.kr/@Qcell/%EC%98%A4%EB%8A%98%EC%9D%98-%EB%AC%B8%EC%A0%9C-%EB%A9%94%EB%89%B4-%EC%97%86%EC%95%A0%EA%B8%B0 ✅ 오늘의 문제 : 메뉴 없애기 ① by Qcell | 코드메이트 이번 시간에는 react-icon 라이브러리를 통해 홈,탐색,구독 탭의 아이콘을 추가로 구현했고, 각각 클릭시 페이지 이동과 해당하는 페이지 탭의 회색으로 표시하는 기능까지 구현했습니다. 그리고 codemate.kr ✅ 오늘의 문제 : 메뉴 없애기 ① 이번 시간에는 react-icon 라이브러리를 통해 홈,탐색,구독 탭의 아이콘을 추가로 구현했고, 각각 클릭시 페이지 이동과 해당하는 페이지 탭의 회색으로 표시하는 기능까지 구현..

https://codemate.kr/@Qcell/%EC%98%A4%EB%8A%98%EC%9D%98-%EB%AC%B8%EC%A0%9C-%EC%83%88%EB%A1%9C%EC%9A%B4-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%83%9D%EC%84%B1 ✅ 오늘의 문제 : 새로운 페이지 생성 by Qcell | 코드메이트 이번 시간에서는 리액트의 특성 중 하나인 SPA(Single Page Application)을 학습했습니다. 말 그대로 리액트는 페이지가 하나인 어플리케이션이라는 뜻으로, HTML의 a로 링크를 만드는 것과는 확연히 다 codemate.kr ✅ 오늘의 문제 : 새로운 페이지 생성 이번 시간에서는 리액트의 특성 중 하나인 SPA(Single Page Application)을 ..

https://codemate.kr/@Qcell/%EC%98%A4%EB%8A%98%EC%9D%98-%EB%AC%B8%EC%A0%9C-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%82%BC%ED%95%AD%EC%97%B0%EC%82%B0%EC%9E%90 ✅ 오늘의 문제 : 조건부 렌더링 ② - 삼항연산자 by Qcell | 코드메이트 이번 시간에는 유튜브의 Header부분을 클론코딩 했습니다. react의 아이콘 라이브러리를 통해 구현했고, 삼항연산자를 이용하여 subscribe 기능을 테스트로 구현해 봤습니다:D Header.js import styles from '. codemate.kr ✅ 오늘의 문제 : 조건부 렌더링 ② - 삼항연산자 ..

https://codemate.kr/@Qcell/%EC%98%A4%EB%8A%98%EC%9D%98-%EB%AC%B8%EC%A0%9C-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EB%B2%84%ED%8A%BC-%ED%81%B4%EB%A6%AD-%EC%9D%B4%EB%B2%A4%ED%8A%B8 ✅ 오늘의 문제 : 조건부 렌더링 ① - 버튼 클릭 이벤트 by Qcell | 코드메이트 컴포넌트 구조화 컴포넌트 구조화를 완료한 뒤, 조건부 렌더링을 학습하여 버튼을 클릭할 때마다 컴포넌트가 출력되거나 숨도록 코드를 구성해 보았습니다. Header.js import styles from './Header.module.c codemate.kr ✅ 오늘의 문제 ..