๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿ’š ๊ฐœ๋ฐœ/์›น

[์•ˆ๋“œ๋กœ์ด๋“œ] ์›น๋ทฐ ๋””๋ฒ„๊น… ์‰ฝ๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ• - Chrome inspect ์‚ฌ์šฉ๋ฒ• (1)

by devshin.kr 2021. 5. 2.
728x90

์›น๋ทฐ๋Š” ๋ชจ๋ฐ”์ผ ๋‹จ๋ง๊ธฐ์—์„œ ์›นํŽ˜์ด์ง€๋ฅผ ๋„์šฐ๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•œ๋‹ค.

Chrome inspect ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ๋“œ๋กœ์ด๋“œ ์›น๋ทฐ์—์„œ๋„ ์›น๋ธŒ๋ผ์šฐ์ €์—์„œ F12๋ฅผ ๋ˆŒ๋Ÿฌ ๋””๋ฒ„๊น…ํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ํšจ๊ณผ๋ฅผ ๋‚ผ ์ˆ˜ ์žˆ๋‹ค.



๋จผ์ € ์ƒˆ๋กœ์šด ์›นํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์—…ํ–ˆ๋‹ค.


1. Package Explorer์—์„œ ์šฐํด๋ฆญ > New > Other > Dynamic Web Project




2. ํ”„๋กœ์ ํŠธ ์ด๋ฆ„์„ ์ ๊ณ  Finish




3. ๊ธฐ์กด ์„ค์น˜ํ•œ Tomcat Server์— ๋ฐฉ๊ธˆ ์ƒ์„ฑํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ๋„ฃ๊ธฐ ์œ„ํ•ด ๋”๋ธ”ํด๋ฆญ




4. Tomcat Server์„ ๋”๋ธ”ํด๋ฆญํ•˜๋ฉด ๊ฐ€์žฅ ๋จผ์ € ๋œจ๋Š” ํŽ˜์ด์ง€๋Š” Overview์ธ๋ฐ, ์ด๋Š” ๋ฌด์‹œ
Modules > Web App Module... ๋ฅผ ํด๋ฆญ




5. ๋ฐฉ๊ธˆ ์ƒ์„ฑํ•œ ํ”„๋กœ์ ํŠธ๋ฅผ ๋”๋ธ”ํด๋ฆญํ•ด Path์— ๋„ฃ์–ด์ค€๋‹ค.




6. 5๋ฒˆ์„ Saveํ•˜๊ณ , ์‹œ์ž‘ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ์„œ๋ฒ„๋ฅผ ๊ตฌ๋™์‹œํ‚จ๋‹ค.




(5๋ฒˆ์—์„œ ์ˆ˜์ •์„ ํ–ˆ๋Š”๋ฐ Save๊ฐ€ ์•ˆ ๋œ ๊ฒฝ์šฐ, Tomcat Server at Localhost ์™ผ์ชฝ์— *๊ฐ€ ๋˜์–ด ์žˆ๋‹ค.)






7. ์›น๋ทฐ ๋””๋ฒ„๊น…์„ ํ…Œ์ŠคํŠธํ•ด ๋ณด๊ธฐ ์œ„ํ•ด ๊ฐ„๋‹จํ•œ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด ๋ณด์ž.
html ํŒŒ์ผ์„ ์ƒ์„ฑํ•œ๋‹ค.
WebContent > New > Other... > html ๊ฒ€์ƒ‰ํ•ด ์ถ”๊ฐ€
(๋‚˜๋Š” index.html ๋กœ ์ด๋ฆ„์„ ์ •ํ•ด์ฃผ์—ˆ๋‹ค.)




8. WebContent > New > File > ํ…Œ์ŠคํŠธํŒŒ์ผ์ด๋ฆ„.js
(๋‚˜๋Š” test.js ๋กœ ์ด๋ฆ„์„ ์ •ํ•ด์ฃผ์—ˆ๋‹ค.)


์—ฌ๊ธฐ๊นŒ์ง€ ํ–ˆ์œผ๋ฉด, index.html๊ณผ test.js ํŒŒ์ผ์ด ์ƒ์„ฑ๋จ



...
ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋Š” ๋‹ค์Œ ์žฅ์—์„œ ์ถ”๊ฐ€ํ•˜๊ฒ ๋‹ค.

๋‹ค์Œ
[์•ˆ๋“œ๋กœ์ด๋“œ] ์›น๋ทฐ ๋””๋ฒ„๊น… ์‰ฝ๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ• - Chrome inspect ์‚ฌ์šฉ๋ฒ• (2)

[์•ˆ๋“œ๋กœ์ด๋“œ] ์›น๋ทฐ ๋””๋ฒ„๊น… ์‰ฝ๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ• - Chrome inspect ์‚ฌ์šฉ๋ฒ• (2)

index.html ์„ ์ƒ์„ฑํ•˜๋ฉด ๊ธฐ๋ณธ ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๋˜์–ด ์žˆ๋‹ค. ์—ฌ๊ธฐ์— ์ƒˆ๋กœ์šด ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•ด ๋ณด์ž. <!DOCTYPE html> Insert title here ํ…Œ์ŠคํŠธ ์ฝ”๋“œ <!DOCTYPE html> Insert title here ํ…Œ์ŠคํŠธ ๋ฒ„ํŠผ ๋ฅผ ์•ˆ์— ์ถ”๊ฐ€ํ•˜..

devshin93.tistory.com

๋Œ“๊ธ€