๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ111

[Python] ์‹œ๊ณ„์—ด๋ถ„์„_์ฃผ์‹๋ฐ์ดํ„ฐ_์ฃผ๊ฐ€์˜ˆ์ธก ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„๋ฅผ ํƒ๊ตฌํ•ฉ์‹œ๋‹ค. ์‹œ๊ณ„์—ด๋ถ„์„_์ฃผ์‹๋ฐ์ดํ„ฐ_์ฃผ๊ฐ€์˜ˆ์ธก In [4]: """๊ธฐ๋ณธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ""" import datetime import matplotlib.pyplot as plt import platform from matplotlib import font_manager, rc In [5]: """๋งˆ์ด๋„ˆ์Šค ๊ธฐํ˜ธ ๋ฐ ํ•œ๊ธ€ ์„ค์ •""" ### ๋งˆ์ด๋„ˆ์Šค ๊ธฐํ˜ธ ์‚ฌ์šฉ ์„ค์ • plt.rcParams["axes.unicode_minus"] = False ### OS๋ณ„ ํ•œ๊ธ€ ์„ค์ • if platform.system() == "Windows" : path = "c:/Windows/Fonts/malgun.ttf" font_name = font_manager.FontProperties(fname=path).get_nam.. 2024. 1. 17.
[react] ์Šคํฌ๋กค์— ๋”ฐ๋ผ ๋‚˜ํƒ€๋‚˜๊ณ  ์‚ฌ๋ผ์ง€๋Š” ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ” ๊ตฌํ˜„ํ•˜๊ธฐ (Navbar) ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„๋ฅผ ํƒ๊ตฌํ•ฉ์‹œ๋‹ค. ์Šคํฌ๋กค์— ๋”ฐ๋ผ ๋‚˜ํƒ€๋‚˜๊ณ  ์‚ฌ๋ผ์ง€๋Š” ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ” ๊ตฌํ˜„ํ•˜๊ธฐ ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ ์Šคํฌ๋กค์— ๋”ฐ๋ผ ๋‚˜ํƒ€๋‚˜๊ณ  ์‚ฌ๋ผ์ง€๋Š” ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ”๋ฅผ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. ์Šคํฌ๋กค์„ ๋‚ด๋ฆด ๋•Œ๋Š” ์‚ฌ๋ผ์กŒ๋‹ค๊ฐ€, ์Šคํฌ๋กค์„ ์˜ฌ๋ฆฌ๋ฉด ๋‹ค์‹œ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค. ๊ตฌํ˜„ ํ™”๋ฉด ์ž‘์„ฑ ์ฝ”๋“œ ๋งˆ์ง€๋ง‰ ์Šคํฌ๋กค ์œ„์น˜๋ฅผ ๊ธฐ์–ตํ•˜์—ฌ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ”์˜ ํ‘œ์‹œ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ์Šคํฌ๋กค์ด ์•„๋ž˜๋กœ ์ง„ํ–‰ ์ค‘์ด๋ฉด false, ์Šคํฌ๋กค์ด ์œ„๋กœ ์ง„ํ–‰ ์ค‘์ด๋ฉด true๋กœ ์„ค์ •ํ•˜์—ฌ ๋ฐ” ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜์˜€์Šต๋‹ˆ๋‹ค. Nav.jsx import { useEffect, useState } from 'react'; import style from './Nav.module.css' import { Link } from 'react-router-dom'; function Nav() {.. 2024. 1. 15.
[react] ๋™์  select box ๊ตฌํ˜„ํ•˜๊ธฐ (์ฒซ๋ฒˆ์งธ ํ•ญ๋ชฉ ์„ ํƒ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง€๋Š” ๋‹ค์Œ ์„ ํƒ ๋ชฉ๋ก ๊ตฌํ˜„ํ•˜๊ธฐ, ์ง€์—ญ ์„ ํƒ ๋ฐ•์Šค) ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„๋ฅผ ํƒ๊ตฌํ•ฉ์‹œ๋‹ค. ๋™์  select box ๊ตฌํ˜„ํ•˜๊ธฐ ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ ์ง€์—ญ, ๋‚œ์ด๋„ ์„ ํƒ์„ ์ˆœ์ฐจ์ ์œผ๋กœ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ๋Š” Select Box๋ฅผ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. ์„ ํƒํ•˜๋Š” ์‹œ๋„์— ๋”ฐ๋ผ ํ•˜์œ„ ์ฃผ์†Œ ์„ ํƒ ๋ชฉ๋ก์ด ๋‹ฌ๋ผ์ง€๋ฉฐ, ๋‚œ์ด๋„ ์„ ํƒ์€ ๋ณ„๊ฐœ๋กœ ํ•ญ์ƒ ๋‚˜ํƒ€๋‚˜์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์ธ ์Šคํฌ๋กค ํ˜•ํƒœ์˜ Select Box๊ฐ€ ์•„๋‹ˆ๋ผ ๋ชฉ๋ก์ด ์ œ์‹œ๋˜์–ด ์žˆ๊ณ  ํด๋ฆญํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์›ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ตฌํ˜„ ํ™”๋ฉด Console ์ž‘์„ฑ ์ฝ”๋“œ ํด๋ฆญํ•ด์•ผ ๋‚˜ํƒ€๋‚˜๋Š” ๋ชฉ๋ก์ด ์•„๋‹ˆ๋ผ ๋ชฉ๋ก์ด ์ œ์‹œ๋˜์–ด ์žˆ๋Š” ํ˜•ํƒœ์˜ Select Box๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ๋ชฉ๋ก์„ ๋ฐฐ์—ด ํ˜•ํƒœ๋กœ ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค. useState๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒํƒœ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•˜์˜€์Šต๋‹ˆ๋‹ค. ์ดˆ๊ธฐ ์ƒํƒœ๋กœ๋Š” ์ฒซ ๋ฒˆ์งธ ์‹œ๋„๊ฐ€ ์„ ํƒ๋˜๊ณ , ๋‚˜๋จธ์ง€๋Š” ๋นˆ ๋ฌธ์ž์—ด๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค. const [selec.. 2024. 1. 13.
[react] react Framer-motion ๋ฆฌ์•กํŠธ ํ”„๋ ˆ์ด๋จธ ํ™œ์šฉํ•˜๊ธฐ (์• ๋‹ˆ๋ฉ”์ด์…˜์„ ๊ฐ„ํŽธํ•˜๊ฒŒ!) ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์„ธ๊ณ„๋ฅผ ํƒ๊ตฌํ•ฉ์‹œ๋‹ค. react Framer-motion ๋ฆฌ์•กํŠธ ํ”„๋ ˆ์ด๋จธ ๋ชจ์…˜ ํ™œ์šฉํ•˜๊ธฐ React Framer Motion์€ ์ฃผ๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค: ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ œ์–ด: ์‚ฌ์šฉ์ž๊ฐ€ ์ •์˜ํ•œ ์ปดํฌ๋„ŒํŠธ๋‚˜ DOM ์š”์†Œ๋ฅผ ์• ๋‹ˆ๋ฉ”์ด์…˜ํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์›€์ง์ž„, ํฌ๊ธฐ ์กฐ์ ˆ, ํšŒ์ „ ๋“ฑ ๋‹ค์–‘ํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ œ์Šค์ฒ˜ ์ฒ˜๋ฆฌ: ํ„ฐ์น˜, ํด๋ฆญ ๋“ฑ์˜ ์ œ์Šค์ฒ˜ ์ด๋ฒคํŠธ๋ฅผ ๊ฐ์ง€ํ•˜๊ณ  ์ด์— ๋”ฐ๋ฅธ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์‰ฝ๊ฒŒ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ ๊ฐ„ ํ†ต์‹ : ๋‹ค์–‘ํ•œ ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ํ†ต์‹ ์„ ์ด‰์ง„ํ•˜๋ฉฐ, ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ํ†ตํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜ ํ–ฅ์ƒ์— ๊ธฐ์—ฌํ•ฉ๋‹ˆ๋‹ค. react Framer-motion ๋ฆฌ์•กํŠธ ํ”„๋ ˆ์ด๋จธ ๋ชจ์…˜ ๊ตฌํ˜„ ์˜ˆ์‹œ ๊ตฌํ˜„ ์˜ˆ์‹œ ํ™”๋ฉด์ž…๋‹ˆ๋‹ค. ๋ฐ‘์ค„ ํšจ๊ณผ, ๋งˆ์šฐ์Šค hover ์‹œ box๊ฐ€ ์ปค์ง€๋Š” ํšจ๊ณผ, ๋ฒ„ํŠผ์ด ๋‚˜ํƒ€๋‚˜๋Š”.. 2024. 1. 10.

loading