์๋
ํ์ธ์.
์ฝ๋ฉ ๊ต์ก ํฌ๋ฆฌ์์ดํฐ ์ง์ฝ๋ฉ ์
๋๋ค ๐
์ ํ๋ธ์์ ์ฝ๋ฉ ๊ต์ก "์ง์ฝ๋ฉ GYM CODING"์ฑ๋์ ์ด์ํ๊ณ ์์ผ๋ฉฐ,
์ธํ๋ฐ ๊ต์ก ํ๋ซํผ์์ ํ๋ก๊ทธ๋๋ฐ ์ง์์ ๊ณต์ ํ๊ณ ์์ต๋๋ค.
์ ๊ฐ์์ ํน์ง์ ์ด์ ๋ง ์์ํ์๋ ๋ถ๋ค์ ์ํ์ฌ
์ค๋ช
ํ๊ณ ์ ํ ๋๋ ์ต๋ํ ์ฝ๊ฒ,
์๋ ค๋๋ฆฌ๊ณ ์ ํ ๋๋ ์ต๋ํ ์์ฐจ๊ฒ ์ค๋ช
๋๋ฆฝ๋๋ค.
ํญ์ ์๊ฐ์ ์
์ฅ์์ ์๊ฐํ๋ ์ฝ๋ฉ ๊ต์ก ํฌ๋ฆฌ์์ดํฐ๊ฐ ๋๊ฒ ์ต๋๋ค.
๊ฐ์ฌํฉ๋๋ค.
๐จ ์ด๋ฉ์ผ bruce.lean17@gmail.com
๐๏ธโโ๏ธ ํฌ์คํ๊ทธ๋จ @helinlee.gram
๐งโ๐ป ์ฝ๋ฉ์คํ๊ทธ๋จ @gymcoding
Courses
Reviews
- Asynchronous Programming: Promise, async/await Complete
- Master React: From Basic Concepts to LinCanva Projects
- Vue3 Perfect Mastery: From Basics to Practice - "Practical Edition"
- Front-end Wings: Knowledge You Must Know Before Learning Vue and React
- Front-end Wings: Knowledge You Must Know Before Learning Vue and React
Posts
Q&A
json-server ๊ด๋ จ ์ง๋ฌธ์ ๋๋ค.
๋ง์ฝ ๋์์ด ๋ค๋ฅด๊ฒ ๋์ํ๋ฐ๋ฉด json-server ๊ฐ ๊ฐ์ ๋ฒ์ ์ธ์ง ํ์ธํด ๋ณด๋๊ฒ ์ข์ ๊ฒ ๊ฐ์์~!
- 0
- 1
- 21
Q&A
์ง์ฝ๋ฉ๋ ์ง๋ฌธ ๋๋ฆฝ๋๋ค.
์๋ ํ์ธ์ ๐๊ณต์๋ฌธ์(์ฃผ๋ก) ํํ ๋ฆฌ์ผ์ ์ดํด๋ด ๋๋ค.์คํ์ ํ์ต(ํ์ํ ๋งํผ)ํ ํ ๊ฐ๋จํ ์ฑ์ ๋ง๋ค์ด์.๋ฌผ๋ก ์ฒ์์ ์ค๋ ๊ฑธ๋ฆฌ๋๋ฐ์. ์ด๋ ๊ฒ ๋ฐ๋ณตํ์ต ํ๋ค๋ณด๋ฉด ๋ค์ ๊ธฐ์ ์ ๋ฐฐ์ฐ๋๋ฐ ์ข๋ ์์ํ๊ณ ์ ์ฐจ ์๋๋ ๋ถ๋๋ผ๊ณ ์ ๐์... ๋ฐ๋ณตํ์ต? ๋ฐ๋ณตํด์ ํ์ตํ๋ ๊ฒ์ด ์ค์ํ ๊ฑฐ ๊ฐ์์.
- 0
- 2
- 30
Q&A
eslint.config.js (flat config): eslint.config.js ํ์ผ์์ eslint-config-prettier๋ฅผ importํ ํ, ๋ค๋ฅธ ์ค์ ์ ์ฌ์ ์ํ ์ ์๋๋ก ์ค์ ๋ฐฐ์ด์ ๋ง์ง๋ง์ ์ถ๊ฐํฉ๋๋ค.
์๋ ํ์ธ์ ๐๊ณต์๋ฌธ์๋ฅผ ์ฐธ๊ณ ํ์๋ฉด ์๋์ ๊ฐ์ด ๊ฐ์ด๋ ํ๊ณ ์๋๊ฑธ ํ์ธํ ์ ์์ต๋๋ค.import someConfig from "some-other-config-you-use"; import eslintConfigPrettier from "eslint-config-prettier"; export default [ someConfig, eslintConfigPrettier, ];๊ณต์๋ฌธ์ - https://github.com/prettier/eslint-config-prettier๊ทธ๋ฆฌ๊ณ ๋ชจ๋ ์์คํ ์ ESModule ๋ฐฉ์์ผ๋ก ์ผ๊ด์ฑ ์๊ฒ ํ์๋ ๊ฒ์ ๊ถ์ฅ๋๋ฆฝ๋๋ค.๋ชจ๋ ์์คํ - https://youtu.be/5NXEXkIrkAk?si=fhmQ6jvoNjIbouPP์์ธ๋ฌ ํ์ต์์๋ ๊ฐ์ ๋ฒ์ ๊ณผ ๋ง์ถ์๋ ๊ฑธ ๊ถ์ฅ๋๋ฆฝ๋๋ค. ๋ง์ฝ ํ๋ก ํธ์๋ ๊ด๋ จ ์ํ๊ณ ์ง์์ด ๋ถ์กฑํ์๋ค๋ฉด ๊ผญ! ํ๋ก ํธ์๋ ๋ ๊ฐ๋ฌ๊ธฐ ๊ฐ์(๋ฌด๋ฃ๊ฐ์)๋ฅผ ๋ณด์๋ ๊ฒ์ ๊ถ์ฅ๋๋ฆฝ๋๋ค!
- 0
- 4
- 43
Q&A
์๋ ๊ฐํ ์ง๋ฌธ์ด ์์ต๋๋ค.
์๋ ํ์ธ์ ๐ ESLint ํ๋ฌ๊ทธ์ธ ์ค์น ํ.vscode/settings.json ํ์ผ์ ์๋ ์ค์ ํ์ จ์๊น์?"editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },https://gymcoding.notion.site/ESLint-Prettier-0a2d35bab9254c26b4257e53bba218f7๊ต์ ์ฐธ๊ณ ํ์๋ฉด ์ข์ ๊ฒ ๊ฐ์์.
- 0
- 2
- 34
Q&A
nested ๋ฆฌ์คํธ์ผ๋ <ul> bullet ์คํ์ผ ๋ฐ๊พธ๋ ๋ฐฉ๋ฒ
Tailwind CSS์์ ์ค์ฒฉ๋ ๋ฆฌ์คํธ์ ๋ถ๋ฆฟ ์คํ์ผ์ ๋ค๋ฅด๊ฒ ์ง์ ํ๋ ค๋ฉด ๋ช ๊ฐ์ง ๋ฐฉ๋ฒ์ด ์์ต๋๋ค.๋ฐฉ๋ฒ 1: ์ ์ญ ์คํ์ผ ์ถ๊ฐํ๊ธฐglobals.css ํ์ผ์ ์ง์ CSS๋ฅผ ์ถ๊ฐํ๋ ๋ฐฉ๋ฒ์ ๋๋ค:/* globals.css ํ์ผ์ ์ถ๊ฐ */ ul { list-style-type: disc; } ul ul { list-style-type: circle; } ul ul ul { list-style-type: square; } ๋ฐฉ๋ฒ 2: Tailwind CSS ์ค์ ์ ์ถ๊ฐํ๊ธฐtailwind.config.ts ํ์ผ์ ์์ ํ์ฌ ์คํ์ผ์ ์ง์ ํ ์ ์์ต๋๋ค:import type { Config } from "tailwindcss"; const config: Config = { // ๊ธฐ์กด ์ค์ ... theme: { extend: { // ๊ธฐ์กด ํ์ฅ... }, }, plugins: [ function({ addBase }) { addBase({ 'ul': { listStyleType: 'disc' }, 'ul ul': { listStyleType: 'circle' }, 'ul ul ul': { listStyleType: 'square' }, }) } ], }; export default config; addBase ํ๋ฌ๊ทธ์ธ ํจ์๋ฅผ ์ฌ์ฉํ๋ฉด ๊ธฐ๋ณธ ์คํ์ผ์ ์ถ๊ฐํ ์ ์์ต๋๋ค.๋ฐฉ๋ฒ 3: ํน์ ํด๋์ค๋ฅผ ์ฌ์ฉํ๊ธฐํน์ ์ปดํฌ๋ํธ์๋ง ์ ์ฉํ๊ณ ์ถ๋ค๋ฉด, ํด๋์ค๋ฅผ ๋ง๋ค์ด ์ฌ์ฉํ ์๋ ์์ต๋๋ค:// tailwind.config.ts import type { Config } from "tailwindcss"; const config: Config = { // ๊ธฐ์กด ์ค์ ... theme: { extend: { // ๊ธฐ์กด ํ์ฅ... }, }, plugins: [], }; export default config; ๊ทธ๋ฆฌ๊ณ globals.css์ ๋ค์๊ณผ ๊ฐ์ด ์ถ๊ฐ:/* globals.css */ @layer components { .nested-list ul { list-style-type: disc; } .nested-list ul ul { list-style-type: circle; } .nested-list ul ul ul { list-style-type: square; } } ๊ทธ๋ฐ ๋ค์ ์ปดํฌ๋ํธ์์: ํญ๋ชฉ 1 ํ์ ํญ๋ชฉ 1.1 ํ์ ํ์ ํญ๋ชฉ 1.1.1
- 0
- 2
- 35
Q&A
๊ฐ์๋ฅผ ๋ฃ๋ค๋ณด๋ ๊ถ๊ธํ ์ ์ง๋ฌธ๋๋ฆฝ๋๋ค.
์๋ ํ์ธ์ ๐ ์๋๊ฒฝ๋ก(./), ๋ณ์นญ(@/, alias) ์ด๋ค ๊ฒ์ ์ฌ์ฉํ์ ๋ ๋ฌธ์ ์์ผ๋ ์ ์ง๋ณด์ ๊ด์ ์์ @/์ ์ฌ์ฉํ๋ ๊ฒ์ ๊ถ์ฅ๋๋ฆฝ๋๋ค.๊ฐ๊น์ด ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ ธ์ฌ ๋๋ ./์ ์ฌ์ฉํ์ ๋ ์ข๊ณ ์. ์ฆ ์ด๋ค ๋ฐฉ๋ฒ์ ์ฌ์ฉํ์๋ ์ผ๊ด๋๊ณ ๊ท์น์ ์ธ ์ฌ์ฉ์ด ์ข์๋ฐฉ๋ฒ์ ๋๋ค.
- 0
- 2
- 50
Q&A
eslint prettier ์ค์ ์ค๋ฅ
์๋ ํ์ธ์ ๐ ๋ณต์ฌ ๋ถ์ฌ๋ฃ๊ธฐ๋ก ์ธํด ๊ณต๋ฐฑ๊ณผ ํญ์ด ์ธ์์ด ์๋๊ฑฐ ๊ฐ์๋ฐ์.npm run lint (--fix ์ต์ ํฌํจ) ํด์ ์ ์ฒด์ ์ผ๋ก ๊ฒ์ฌ๋ฅผ ํ๋ฒ ์ํํด ์ฃผ์๊ฒ ์ด์~?
- 0
- 2
- 60
Q&A
watch๊ฐ์ ์ง๋ฌธ
์๋ ํ์ธ์ ๐๊ฐ์ฒด์ ๊ฐ ์์ฒด๋ฅผ ๋ณ๊ฒฝํ๋ฉด watch์์ ๊ฐ์ง๋ฅผ ํ ์ ์์ต๋๋ค.๋ง์ํ์ ๊ฒ์ฒ๋ผperson๋ด์ obj๊ฐ์ฒด๋ฅผ {"count":1} => "Hello"๋ก ๋ณ๊ฒฝ์** ์ ์์๋ ๊ฐ ์์ฒด๋ฅผ ๋ณ๊ฒฝํ๊ธฐ์ watch๊ฐ ๋์ํ์ง ์์ต๋๋ค.๋์ํ์ง ์๋ ๊ฒฝ์ฐ โ// 1. ๊ฐ ์์ฒด๋ฅผ ๋ณ๊ฒฝ person.obj = "Hello" // 2. ๊ฐ์ฒด ์ฌํ ๋น person.obj = { count: 2 }๋์ํ๋ ๊ฒฝ์ฐ โ // ๊ฐ์ฒด์ ์์ฑ์ ๋ณ๊ฒฝ person.obj.count = 2Vue์ Reactive ๋ฐ์ํ ์์คํ ์ ๊ฐ์ฒด์ ์์ฑ ๋ณ๊ฒฝ๋ง ๊ฐ์งํ ์ ์์ต๋๋ค.
- 0
- 1
- 61
Q&A
endOfLine git checkout ํ ๋๋ง๋ค ๋งค๋ฒ ์ ๋ ฅ์ํ๋ ๋ฐฉ๋ฒ ์์๊น์?
์๋ ํ์ธ์ ๐ ๋ฐฉ๋ฒ์ ์ฐพ์๋ณด๋ ค๊ณ ํ๋๋ฐ์. ์ง์ ์ถ๊ฐํ์ ์ผ ํ ๊ฒ ๊ฐ์์. ์ข์ ๋ฐฉ๋ฒ์ ์ฒ์์ ์ค์ ํ์๊ณ ์ต๋ํ ์ฝ๋๋ฅผ ๊ฐ์ ์์๋๋ก ๋ฐ๋ผ ๊ฐ๋ ๊ฒ์ ๊ถ์ฅ๋๋ ค์ ~!
- 0
- 1
- 45
Q&A
AppCard.vue ๋ง๋ค๋ค ๋ง๊ณ ์ค๋ฅ๊ฐ ๊ฐ์๊ธฐ ์์ฒญ ๋น๋๋ค
ํน์ ์ฝ๋๋ฅผ ๋ณต์ฌ ๋ถ์ฌ๋ฃ๊ธฐ ํ์ จ์๊น์? ์๋ํฐ ํด ์ค๋ฅ ๊ฐ์๋ฐ์.ํ์ผ ์ญ์ ํ ๋ค์ ํด๋ณด์๊ฒ ์ด์? ๊ทธ๋๋ ํด๊ฒฐ์ด ์๋๋ค๋ฉด ์ ๊ฐ ์ฝ๋๋ฅผ ๋ด์ผ ์ ๊ฒ ๊ฐ์์~!๊นํ ์ฃผ์๋ ๋ฉ์ผ๋ก ์ฝ๋๋ฅผ ๋ณด๋ด์ฃผ์๋ฉด ํ์ ๋๋ฆฌ๊ฒ ์ต๋๋ค. (๋ฉ์ผ๋ก ์ฝ๋ ์์ถํด์ ๋ณด๋ด์ค๋ node_modules ๋๋ ํ ๋ฆฌ๋ ์ ๊ฑฐ ํ ๋ณด๋ด์ฃผ์ธ์)
- 0
- 1
- 37