최근에 Drag and Drop(DnD) 기능을 직접 만들기를 시도했었다. 하지만 생각보다 고려해야 할 사항들이 많았고, 그렇게 삽질해서 만들어진 결과물은 완성도가 너무나도 부족했다...😂 싸늘하다.. 가슴에 비수가 날아와 꽂힌다.. 하지만 걱정하지마라. 라이브러리는 우리보다 빠르니까. 결국 기존에 작업하던 코드를 삭제하고 구글링을 통해 참고할만한 글을 찾던 중 DnD 기능을 제공해주는 라이브러리가 있다는 것을 알게 되었다. 그래서 오늘은 라이브러리로 DnD 기능을 구현하는 예제를 만들어보려고 한다. 0. DnD Library 먼저 React 환경에서 DnD 기능을 제공해주는 라이브러리는 대표적으로 3개가 있다. 라이브러리 각각의 특징을 간단하게 정리하면 다음과 같다. react-draggable rea..
오늘은 깃허브 프로필을 꾸미는 방법에 대해 알아보려고 한다. 기존에 있던 우리?의 구린 프로필을 이번 시간에 한번 제대로 꾸며보자. 0. 프로필 레퍼지토리 만들기 프로필을 꾸미려면 먼저 프로필 레퍼지토리를 만들어야 한다. 우리가 평소에 레퍼지토리를 만드는 방법과 유사하다. 이렇게 본인의 깃허브 id와 똑같이 입력하면 아래에 귀여운 냥이😺가 '프로필을 추가하는 데 사용할 수 있는 ✨특별한✨ 저장소' 라고 알려준다. 필자는 이미 해당 레퍼지토리를 만들었기 때문에 경고문이 나타난 것이니 걱정하지 말고 만들면 된다. 다른 사람들에게 보여주려고 만드는 프로필이니 당연히 Public ✅ Add a README file 버튼도 ✅ 이렇게 생긴 레퍼지토리가 생성되었으면 프로필 README 꾸밀 준비 끝!! ※ md파일..
오늘은 AccuWeather API를 사용해서 날씨 데이터를 호출해보려고 한다. API를 어떻게 호출하고, 호출한 데이터를 화면에 출력해보자. - Main // pages/main.tsx import Weather from "components/main/Weather"; import BackgroundImgInfo from "components/main/BackgroundImgInfo"; import Advice from "components/main/Advice"; const Main = () => { return ( ); }; export default Main; 사용할 컴포넌트를 main 페이지에 불러온다. - AccuWeather API 필자는 현재 날씨 데이터를 받기 위해 AccuWeaher의 ..
오늘은 현재 시간을 실시간으로 나타내주는 시계 기능과, 검색창에 텍스트 입력 후 검색 버튼을 누르면 구글 검색창으로 연동되는 기능을 만들었다. 코드가 간단하니 빠르게 가보자. 0. Main ./pages/Main.tsx import Clock from "components/main/Clock"; import GoogleSearch from "components/main/GoogleSearch"; const Main = () => { return ( ); }; export default Main; GoogleSearch 컴포넌트와 Clock 컴포넌트를 Main 페이지에 불러온다. 1. Clock ./components/Clock.tsx import { useState, useEffect } from "re..
오늘은 원티드에서 무료로 지원해주는 신입이나 주니어들의 고민거리에 대해 얘기하는 영상을 정리해 보려고 한다. 영상이 궁금하다면 아래 링크에서 참가신청 후 볼 수 있다. https://www.wanted.co.kr/events/talk83?utm_source=wanted&utm_medium=share [무료] 신입&주니어 고민 1분만에 해결하기 | 원티드 경력직 채용을 원하는 대부분의 회사들 사이에서, 진짜 신입은 어떻게 경력을 쌓나요? 원티드 커뮤니티에서 많은 분들이 이야기하는 신입 지원자의 고민에 대해 이야기 합니다. www.wanted.co.kr 해당 영상에서는 원티드랩 정승일님, 네이버웹툰 한현규님 두 분이서 질문을 읽고 답변을 해주시는 방식으로 진행된다. Q1. 진짜 신입은 경력사항을 뭐라고 적나..
오늘부터 개인 프로젝트를 진행하면서 구현하는 기능이나 에러 해결 등 도움이 될만한 것들을 글로 적어 기록해보려고 한다. 그 첫 번째 시간으로 Todo List를 간단하게 구현해보자. CSS 없이 기능만을 구현하는 것이 이번 글의 목표이기 때문에 디자인은 프로젝트 CSS를 전체적으로 만질 때 다룰 예정이다. 디자인 보기 힘들어도 이해해주세요..😂 - 프로젝트 구조 📦components ┗ 📂todo ┣ 📜TodoInput.tsx ┣ 📜TodoEdit.tsx ┣ 📜TodoItem.tsx ┣ 📜TodoList.tsx ┗ 📜Todos.tsx 📦pages ┣ 📜_app.tsx ┗ 📜index.tsx 📦redux ┣ 📂slice ┃ ┗ 📜todoListSlice.ts ┣ 📜hooks.ts ┗ 📜store.ts 📦s..
