From ee778d6eea54935fd05022e0ba8c49456003381a Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:24 +0100 Subject: unslug ko: move --- .../index.html | 170 ++++++++++++++++++++ .../thinking_before_coding/index.html | 176 +++++++++++++++++++++ .../index.html" | 170 -------------------- .../index.html" | 176 --------------------- 4 files changed, 346 insertions(+), 346 deletions(-) create mode 100644 files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html create mode 100644 files/ko/learn/common_questions/thinking_before_coding/index.html delete mode 100644 "files/ko/learn/common_questions/\354\233\271_\354\202\254\354\235\264\355\212\270\352\260\200_\354\240\234\353\214\200\353\241\234_\353\217\231\354\236\221\355\225\230\353\212\224\354\247\200_\355\231\225\354\235\270/index.html" delete mode 100644 "files/ko/learn/common_questions/\354\275\224\353\224\251\355\225\230\352\270\260_\354\240\204\354\227\220_\354\203\235\352\260\201\355\225\230\352\270\260/index.html" (limited to 'files/ko/learn/common_questions') diff --git a/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html new file mode 100644 index 0000000000..d39ea4069f --- /dev/null +++ b/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html @@ -0,0 +1,170 @@ +--- +title: 웹 사이트가 제대로 동작하는지 확인하는 방법 +slug: Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인 +translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +--- +
+

이번에는 웹사이트 동작과 관련한 다양한 문제해결 단계와 그 문제들을 해결하기 위한 방법들을 알아보겠습니다.

+
+ + + + + + + + + + + + +
전제 조건:먼저, upload files웹 서버에 파일 업로드 방법을 알아야 합니다.
목표:웹 사이트에서 발생할 수 있는 기본적인 문제들과 해결방법을 알아봅시다.
+ +

개발하신 웹 사이트를 온라인상에 배포를 하였나요? 잘 했어요! 그런데 문제없이 동작하는게 확실한가요?

+ +

종종 온라인에 배포한 웹 서버는 로컬에서 모습과는 꽤 다르게 동작할 때가 있습니다. 그 때문에 온라인에 배포할 때마다 한 번씩 확인이 필요합니다. 아마 많은 문제가 발생해 놀라게 될 텐데요: 이미지가 나오지 않거나, 페이지가 로딩이 안되거나 느리게 로딩되는 등 하는 문제들요. 대부분의 경우는 큰 문제가 아닙니다, 간단한 실수나 호스팅 세팅 같은 문제죠.

+ +

이런 문제들을 어떻게 진단하고 해결하는지 살펴봅시다.

+ +

Active Learning

+ +

There is no active learning available yet. Please, consider contributing.

+ +

Dig deeper

+ +

브라우저에서 테스트하기

+ +

웹 사이트가 잘 동작하는지 알고 싶다면, 먼저 브라우저를 시작하고 테스트하려는 페이지로 이동하세요.

+ +

어?, 이미지가 어디갔죠?

+ +

우리의 개인 사이트를 봅시다.(동작x), http://demozilla.examplehostingprovider.net/. It's not showing the image we expected!

+ +

Oops, the ‘unicorn’ image is missing

+ +

Open Firefox's Network tool (Tools ➤ Web Developer ➤ Network) and reload the page:

+ +

The image has a 404 error

+ +

There's the problem, that "404" at the bottom. "404" means "resource not found", and that's why we didn't see the image.

+ +

HTTP statuses

+ +

Servers respond with a status message whenever they receive a request. Here are the most common statuses:

+ +
+
200: OK
+
The resource you asked for was delivered.
+
301: Moved permanently
+
The resource has moved to a new location. You won't see this much in your browser, but it's good to know about "301" since search engines use this information a lot to update their indexes.
+
304: Not modified
+
The file has not changed since the last time you asked for it, so your browser can display the version from its cache, resulting in faster response times and more efficient use of bandwidth.
+
403: Forbidden
+
You aren't allowed to display the resource. Usually it has to do with a configuration mistake (e.g. your hosting provider forgot to give you access rights to a directory).
+
404: Not found
+
Self-explanatory. We'll discuss how to solve this below.
+
500: Internal server error
+
Something went wrong on the server. For instance, maybe the server-side language ({{Glossary("PHP")}}, .Net, etc.) stopped working, or the web server itself has a configuration problem. Usually it's best to resort to your hosting provider's support team.
+
503: Service unavailable
+
Usually resulting from a shortterm system overload. The server has some sort of problem. Try again in a little while.
+
+ + + +

As beginners checking our (simple) website, we'll deal most often with 200, 304, 403, and 404.

+ +

Fixing the 404

+ +

So what went wrong?

+ +

Le list of images in our project

+ +

At first glance, the image we asked for seems to be in the right place... but the Network tool reported a "404". It turns out that we made a typo in our HTML code: unicorn_pics.png rather than unicorn_pic.png. So correct the typo in your code editor by changing the image's src attribute:

+ +

Deleting the ‘s’

+ +

Save, push to the server, and reload the page in your browser:

+ +

The image loads corectly in the browser

+ +

There you go! Let's look at the {{Glossary("HTTP")}} statuses again:

+ + + +

So we fixed the error and learned a few HTTP statuses along the way!

+ +

Frequent errors

+ +

The most frequent errors that we find are these:

+ +

Typos in the address

+ +

We wanted to type http://demozilla.examplehostingprovider.net/ but typed too fast and forgot an “l”:

+ +

Address unreachable

+ +

The address cannot be found. Indeed.

+ +

404 errors

+ +

Many times the error just results just from a typo, but sometimes maybe you either forgot to upload a resource or you lost your network connection while you were uploading your resources. First check the spelling and accuracy of the file path, and if there's still a problem, upload your files again. That will likely fix the problem.

+ +

JavaScript errors

+ +

Someone (possibly you) added a script to the page and made a mistake. This will not prevent the page from loading but you will feel something went wrong.

+ +

Open the console (Tools ➤ Web developer ➤ Web Console) and reload the page:

+ +

A Javascript error is shown in the Console

+ +

In this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover JavaScript in another series of articles).

+ +

More things to check

+ +

We have listed a few simple ways to check that your website works properly, as well as the most common errors you may run across and how to fix them. You can also test if your page meets these criteria:

+ +

How's the performance?

+ +

Does the page load fast enough? Resources like WebPagetest.org or browser add-ons like YSlow can tell you a few interesting things:

+ +

Yslow diagnostics

+ +

Grades go from A to F. Our page is just small and meets most criteria. But we can already note it would have been better to use a {{Glossary("CDN")}}. That doesn't matter very much when we're only serving one image, but it would be critical for a high-bandwidth website serving many thousands of images.

+ +

Is the server responsive enough?

+ +

ping is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not:

+ +
$ ping mozilla.org
+PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
+64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
+64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
+64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
+^C
+--- mozilla.org ping statistics ---
+4 packets transmitted, 4 packets received, 0.0% packet loss
+round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
+ +

Just keep in mind a handy keyboard shortcut: Ctrl+C.  Ctrl+C sends an “interrupt” signal to the runtime and tells it to stop.  If you don't stop the runtime, ping will ping the server indefinitely.

+ +

A simple checklist

+ + + +

Next steps

+ +

Congratulations, your website is up and running for anyone to visit. That's a huge achievement. Now, you can start digging deeper into various subjects.

+ + diff --git a/files/ko/learn/common_questions/thinking_before_coding/index.html b/files/ko/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..8885c5999b --- /dev/null +++ b/files/ko/learn/common_questions/thinking_before_coding/index.html @@ -0,0 +1,176 @@ +--- +title: 나의 웹사이트를 설계하기 위해서는? +slug: Learn/Common_questions/코딩하기_전에_생각하기 +tags: + - 능동학습필요 + - 초보자 +translation_of: Learn/Common_questions/Thinking_before_coding +--- +

이 글은 모든 프로젝트에서 중요한 첫 단계  - 프로젝트를 통해 달성하고 싶은 것을 정의하기 - 를 다룬다.

+ + + + + + + + + + + + +
선이수:없음
목표:웹 프로젝트 방향 설정을 위해 목적을 정하는 법을 배운다.
+ +

요약

+ +

웹 프로젝트를 시작할 때, 많은 사람들은 기술적인 면에 집중한다. 물론 자기 분야의 기술에 익숙해야한다. 그러나 정말 중요한건 무엇을 달성하고 싶은가이다. 당연한 이야기같지만, 생각보다 많은 프로젝트들이 기술적 방법의 부족이 아닌, 목적과 전망의 부족으로 실패한다.

+ +

따라서 아이디어를 얻고, 그것을 웹 사이트로 만들고 싶을 때, 다른 것보다 먼저 대답해야할 질문이 있다.

+ + + +

이러한 것들을 프로젝트 관념(ideation)이라 한다. 당신이 초보자든 숙련된 개발자든 목표에 도달하기 위해 반드시 거쳐야 할 첫 단계이다.

+ +

능동 학습

+ +

아직 가능한 능동 학습이 없다. 기여를 고민해보라.

+ +

깊게 들어가기

+ +

프로젝트는 절대 기술에서 시작하지 않는다. 음악가는 무엇을 연주할 지 정하기 전엔 어떤 음악도 만들지 않는다. 화가, 작가, 그리고 웹 개발자도 마찬가지다. 기술은 다음이다.

+ +

기술은 분명히 중요하다. 음악가는 기악을 완성해야 한다. 그러나 좋은 음악가는 절대 생각없이 좋은 음악을 만들수 없다. 그러므로 코드와 툴같은 기술로 뛰어들기 전에, 한 걸음 물러서서 하고 싶은 것을 상세히 결정해야 한다.

+ +

친구와 함께하는 한 시간의 토론은 좋은 시작이지만 부족하다. 생각을 현실로 만들 길의 탁 트인 전망을 얻으려면 앉아서 생각을 구조화해야한다. 이것을 하기 위해서, 오직 펜과 종이 그리고 적어도 다음 질문에 대한 답할 시간이 필요하다.

+ +
+

메모: 프로젝트 관념화를 수행하기 위한 셀 수 없는 방법들이 있다. 우리는 여기에 그것들을 모두 제시할 수는 없다. (책 전체로는 충분하지 않을 것이다). 이 곳에 주는 것은 전문가들이  Project Ideation(관념화), Project Planning(계획) 그리고 Project Management(관리) 라고 부르는 것을 다루는 단순한 방법이다.

+
+ +

내가 정확히 달성하고 싶은 것은 무엇인가?

+ +

이것은 대답해야 하는 가장 중요한 질문이다. 왜냐하면, 이것이 다른 모든 것을 만들기 때문이다. 도달하고 싶은 모든 목표를 목록화해라. 그것은 무엇일 수도 있다: 돈을 벌기 위해 물건 팔기, 정치적인 의견 표현하기, 새로운 친구 만들기,  음악가들과 공연하기, 고양이 사진 모으기, 또는 원하는 무엇이든.

+ +

당신이 음악가라고 생각해보자. 이런걸 원할 수 있다.

+ + + +

일단 이런 리스트를 만들고 나면, 우선순위를 정하는 것이 필요하다. 가장 중요한 것부터 덜 중요한 것까지 목표를 정렬해라.

+ +
    +
  1. 새로운 애인 찾기
    2. +
  2. 다른 사람들이 내 음악을 듣게 하기
    3. +
  3. 내 음악에 대해 이야기하기
    4. +
  4. 다른 음악가들과 만나기
    5. +
  5. 관련 상품 팔기 
    6. +
  6. 동영상으로 음악 가르치기
    7. +
  7. 내 고양이 사진 출판하기
    8. +
+ +

단순한 목표 쓰기와 순위 정하기가 만들고 싶은 것을 결정할 때, 도움이 될 것이다. (내가 이런 특징을 구현해야할까, 이런 서비스를 사용해야할까, 이런 디자인을 만들어야할까?)

+ +

우선순위가 정리된 목적 기록부가 생겼으니, 다음 질문으로 이동하자.

+ +

어떻게 웹사이트가 나를 목적지로 데려다 줄 수 있을까?

+ +

그래서 당신은 목표 리스트를 가지고 있고, 그 목표들을 이루기위해 웹사이트가 필요하다고 느낍니다. 확실합니까?

+ +

우리의 예를 다시 봅시다. 우리는 음악에 관련된 5개의 목표, 개인 삶(소중한 사람 찾기)에 관련된 하나의 목표 그리고, 완전히 상관없는 고양이 사진을 가지고 있습니다. 이 모든 목표들을 다루기 위한 하나의 웹사이트를 만드는 것이 합리적입니까? 그것이 필요할까요? 결국에, 많은 기존의 웹 서비스는 새로운 웹사이트를 만들지 않고 당신의 목표를 가져다 줄 지 모릅니다.

+ +

애인을 찾는 것은 새로운 웹사이트를 구축하는 것보다 기존의 자원을 사용하는 것이 더 알맞다는 점에서 중요한 케이스입니다. 왜? 왜냐하면 우리가 실제로 애인을 찾는 것보다 웹사이트를 구축하고 유지하는 데 더 많은 시간을 소비하기 때문입니다. 우리의 목표가 가장 중요하기 때문에, 우리는 처음부터 시작하는 것보다는 기존의 툴을 레버리징(leveraging )하는 것에 에너지를 써야합니다. 다시, 사진을 보여주기 위해 이용할 수 있는 이미 너무 많은 웹서비스가 있습니다 그래서 우리의 고양이가 얼마나 귀여운 지에 대한 것을 퍼뜨리기 위해 새로운 사이트를 구축하는 데 노력할 가치가 없습니다.

+ +

음악과 연관된 다른 5개의 목표가 있습니다. 물론, 이런 목표들을 다룰 수 있는 많은 웹서비스가 있습니다. 그러나, 우리만을 위한 웹사이트를 구축하는 경우에는 이해가 됩니다. 그런 웹사이트는 하나의 공간에 퍼블리싱하고 싶은 모든 항목을 합치는 것과 (목표 3, 5, 6에 적합) 그리고 우리와 대중 사이에 상호작용을 장려하는 것에 (목표 2, 4) 가장 좋은 방법입니다. 다시 말해서, 이런 목표들이 같은 주제를 중심으로 돌기 때문에, 한 곳에 모든 것을 가지는 것이 우리의 목표를 충족하고, 팔로어들과 연결하는 데 도움이 될 것입니다.

+ +

어떻게 웹사이트가 나의 목표를 달성하는 데 도움이 될까요? 그것에 답함으로써, 우리는 우리의 목표를 달성하는 데 가장 좋은 방법을 찾을 것이고, 노력이 낭비되지 않도록 할 것입니다.

+ +

내 목표를 달성하기 위해, 무엇을, 어떤 순서로 해야할까?

+ +

이제 우리가 달성하고 싶은 것을 알고 있으므로, 그 목표들을 실행가능한 단계로 바꿀 시간입니다.

+ +

긴 설명을 하기 보다는 이 표로 우리의 예제를 돌아봅시다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
목표해야할 것
사람들이 당신의 음악을 듣게 하기 +
    +
  1. 음악을 녹음한다.
    2. +
  2. 온라인에서 사용할 수 있는 몇몇의 오디오 파일을 준비힌다. (기존의 웹서비스로 이것을 할 수 있을까?)
    3. +
  3. 사람들에게 당신의 웹사이트의 일부에서 당신의 음악에 접근하게 한다.
    4. +
+
음악에 대해 이야기하기 +
    +
  1. 토의를 시작하기 위한 몇몇의 글을 쓴다.
    2. +
  2. 어떻게 글이 보여야 하는 지 정해라.
    3. +
  3. 웹사이트에 이 글을 게시해라 (어떻게 이것을 할까?)
    4. +
+
다른 음악가들 만나기 +
    +
  1. 사람들이 너와 연락할 방법을 제공해라.
    2. +
  2. 너의 웹사이트에서 어떻게 사람들이 연락 채널을 찾을 지 정해라.
    3. +
+
goodies 팔기 +
    +
  1. goodies 만든다.
    2. +
  2. goodies 저장한다.
    3. +
  3. 쇼핑을 하는 방식 찾는다.
    4. +
  4. 결제 방식 찾는다.
    5. +
  5. 사이트에서 사람들의 주문 메카니즘 만든다.
    6. +
+
동영상을 통해 음악 가르치기 +
    +
  1. 동영상 강의 녹화한다.
    2. +
  2. 온라인에서 볼 수 있는 동영상 파일 준비한다. (다시, 기존의 웹사이트에서 할 수 있을까?)
    3. +
  3. 웹사이트의 한 부분에서 비디오 접근 가능하게 한다.
    4. +
+
+ +

공지할 것이 두 개가 있다. 첫째, 이런 아이템 중 몇몇은 웹과 상관이 없다. (예를 들어, 음악 녹음, 글 쓰기) 종종 그런 오프라인 활동이 프로젝트의 웹 부분보다 훨씬 더 중요하다. 예를 들어, 판매의 경우에, 공급, 결제, 배달에 시간을 쓰는 것이 사람들이 주문할 수 있는 웹사이트를 만드는 것보다 훨씬 더 중요하다.

+ +

둘째, 실행가능한 단계를 설정하는 것은 우리가 답할 필요가 있는 새로운 질문을 이끌어 낸다. 종종 우리가 본래 생각했던 것보다 더 많은 질문으로 변한다. (예를 들어, 내가 혼자서 어떻게 이것을 배워야할까? 누군가에게 이것을 부탁할까? 서드파티(제 3의) 서비스를 사용해야할까?)

+ +

결론

+ +

당신이 본 것 처럼, "나는 웹사이트를 만들고 싶다" 라는 단순한 생각이 긴 해야할 목록을 만들었다. 그리고 그것은 생각하면 할 수록 더 길어진다. 금방 그것은 압도적으로 보일 것이다. 그러나 겁먹지 마라. 당신은 모든 질문에 대답할 필요는 없다. 그리고 당신은 리스트에 모든 것을 할 필요는 없다. 중요한 것은 원하는 것과 도달하는 법에 대한 비전을 가지고 있어야하는 것이다. 일단 분명한 비전이 있다면, 당신은 해야할 때와 하는 방법을 결정할 필요가 있다. 큰 일을 작은 실행할 수 있는 단계로 부숴라. 그리고 그 작은 단계를 거대한 성과로 합쳐라.

+ +

이 글에서, 당신은 웹사이트를 만들기 위한 개략적인 계획을 지금 세울 수 있어야 한다. 다음 단계는 how the Internet works(인터넷이 작동하는 법) 을 읽어야 할 것이다.

+ +

 

diff --git "a/files/ko/learn/common_questions/\354\233\271_\354\202\254\354\235\264\355\212\270\352\260\200_\354\240\234\353\214\200\353\241\234_\353\217\231\354\236\221\355\225\230\353\212\224\354\247\200_\355\231\225\354\235\270/index.html" "b/files/ko/learn/common_questions/\354\233\271_\354\202\254\354\235\264\355\212\270\352\260\200_\354\240\234\353\214\200\353\241\234_\353\217\231\354\236\221\355\225\230\353\212\224\354\247\200_\355\231\225\354\235\270/index.html" deleted file mode 100644 index d39ea4069f..0000000000 --- "a/files/ko/learn/common_questions/\354\233\271_\354\202\254\354\235\264\355\212\270\352\260\200_\354\240\234\353\214\200\353\241\234_\353\217\231\354\236\221\355\225\230\353\212\224\354\247\200_\355\231\225\354\235\270/index.html" +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: 웹 사이트가 제대로 동작하는지 확인하는 방법 -slug: Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인 -translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly ---- -
-

이번에는 웹사이트 동작과 관련한 다양한 문제해결 단계와 그 문제들을 해결하기 위한 방법들을 알아보겠습니다.

-
- - - - - - - - - - - - -
전제 조건:먼저, upload files웹 서버에 파일 업로드 방법을 알아야 합니다.
목표:웹 사이트에서 발생할 수 있는 기본적인 문제들과 해결방법을 알아봅시다.
- -

개발하신 웹 사이트를 온라인상에 배포를 하였나요? 잘 했어요! 그런데 문제없이 동작하는게 확실한가요?

- -

종종 온라인에 배포한 웹 서버는 로컬에서 모습과는 꽤 다르게 동작할 때가 있습니다. 그 때문에 온라인에 배포할 때마다 한 번씩 확인이 필요합니다. 아마 많은 문제가 발생해 놀라게 될 텐데요: 이미지가 나오지 않거나, 페이지가 로딩이 안되거나 느리게 로딩되는 등 하는 문제들요. 대부분의 경우는 큰 문제가 아닙니다, 간단한 실수나 호스팅 세팅 같은 문제죠.

- -

이런 문제들을 어떻게 진단하고 해결하는지 살펴봅시다.

- -

Active Learning

- -

There is no active learning available yet. Please, consider contributing.

- -

Dig deeper

- -

브라우저에서 테스트하기

- -

웹 사이트가 잘 동작하는지 알고 싶다면, 먼저 브라우저를 시작하고 테스트하려는 페이지로 이동하세요.

- -

어?, 이미지가 어디갔죠?

- -

우리의 개인 사이트를 봅시다.(동작x), http://demozilla.examplehostingprovider.net/. It's not showing the image we expected!

- -

Oops, the ‘unicorn’ image is missing

- -

Open Firefox's Network tool (Tools ➤ Web Developer ➤ Network) and reload the page:

- -

The image has a 404 error

- -

There's the problem, that "404" at the bottom. "404" means "resource not found", and that's why we didn't see the image.

- -

HTTP statuses

- -

Servers respond with a status message whenever they receive a request. Here are the most common statuses:

- -
-
200: OK
-
The resource you asked for was delivered.
-
301: Moved permanently
-
The resource has moved to a new location. You won't see this much in your browser, but it's good to know about "301" since search engines use this information a lot to update their indexes.
-
304: Not modified
-
The file has not changed since the last time you asked for it, so your browser can display the version from its cache, resulting in faster response times and more efficient use of bandwidth.
-
403: Forbidden
-
You aren't allowed to display the resource. Usually it has to do with a configuration mistake (e.g. your hosting provider forgot to give you access rights to a directory).
-
404: Not found
-
Self-explanatory. We'll discuss how to solve this below.
-
500: Internal server error
-
Something went wrong on the server. For instance, maybe the server-side language ({{Glossary("PHP")}}, .Net, etc.) stopped working, or the web server itself has a configuration problem. Usually it's best to resort to your hosting provider's support team.
-
503: Service unavailable
-
Usually resulting from a shortterm system overload. The server has some sort of problem. Try again in a little while.
-
- - - -

As beginners checking our (simple) website, we'll deal most often with 200, 304, 403, and 404.

- -

Fixing the 404

- -

So what went wrong?

- -

Le list of images in our project

- -

At first glance, the image we asked for seems to be in the right place... but the Network tool reported a "404". It turns out that we made a typo in our HTML code: unicorn_pics.png rather than unicorn_pic.png. So correct the typo in your code editor by changing the image's src attribute:

- -

Deleting the ‘s’

- -

Save, push to the server, and reload the page in your browser:

- -

The image loads corectly in the browser

- -

There you go! Let's look at the {{Glossary("HTTP")}} statuses again:

- - - -

So we fixed the error and learned a few HTTP statuses along the way!

- -

Frequent errors

- -

The most frequent errors that we find are these:

- -

Typos in the address

- -

We wanted to type http://demozilla.examplehostingprovider.net/ but typed too fast and forgot an “l”:

- -

Address unreachable

- -

The address cannot be found. Indeed.

- -

404 errors

- -

Many times the error just results just from a typo, but sometimes maybe you either forgot to upload a resource or you lost your network connection while you were uploading your resources. First check the spelling and accuracy of the file path, and if there's still a problem, upload your files again. That will likely fix the problem.

- -

JavaScript errors

- -

Someone (possibly you) added a script to the page and made a mistake. This will not prevent the page from loading but you will feel something went wrong.

- -

Open the console (Tools ➤ Web developer ➤ Web Console) and reload the page:

- -

A Javascript error is shown in the Console

- -

In this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover JavaScript in another series of articles).

- -

More things to check

- -

We have listed a few simple ways to check that your website works properly, as well as the most common errors you may run across and how to fix them. You can also test if your page meets these criteria:

- -

How's the performance?

- -

Does the page load fast enough? Resources like WebPagetest.org or browser add-ons like YSlow can tell you a few interesting things:

- -

Yslow diagnostics

- -

Grades go from A to F. Our page is just small and meets most criteria. But we can already note it would have been better to use a {{Glossary("CDN")}}. That doesn't matter very much when we're only serving one image, but it would be critical for a high-bandwidth website serving many thousands of images.

- -

Is the server responsive enough?

- -

ping is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not:

- -
$ ping mozilla.org
-PING mozilla.org (63.245.215.20): 56 data bytes
-64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
-64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
-64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
-64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
-^C
---- mozilla.org ping statistics ---
-4 packets transmitted, 4 packets received, 0.0% packet loss
-round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
- -

Just keep in mind a handy keyboard shortcut: Ctrl+C.  Ctrl+C sends an “interrupt” signal to the runtime and tells it to stop.  If you don't stop the runtime, ping will ping the server indefinitely.

- -

A simple checklist

- - - -

Next steps

- -

Congratulations, your website is up and running for anyone to visit. That's a huge achievement. Now, you can start digging deeper into various subjects.

- - diff --git "a/files/ko/learn/common_questions/\354\275\224\353\224\251\355\225\230\352\270\260_\354\240\204\354\227\220_\354\203\235\352\260\201\355\225\230\352\270\260/index.html" "b/files/ko/learn/common_questions/\354\275\224\353\224\251\355\225\230\352\270\260_\354\240\204\354\227\220_\354\203\235\352\260\201\355\225\230\352\270\260/index.html" deleted file mode 100644 index 8885c5999b..0000000000 --- "a/files/ko/learn/common_questions/\354\275\224\353\224\251\355\225\230\352\270\260_\354\240\204\354\227\220_\354\203\235\352\260\201\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: 나의 웹사이트를 설계하기 위해서는? -slug: Learn/Common_questions/코딩하기_전에_생각하기 -tags: - - 능동학습필요 - - 초보자 -translation_of: Learn/Common_questions/Thinking_before_coding ---- -

이 글은 모든 프로젝트에서 중요한 첫 단계  - 프로젝트를 통해 달성하고 싶은 것을 정의하기 - 를 다룬다.

- - - - - - - - - - - - -
선이수:없음
목표:웹 프로젝트 방향 설정을 위해 목적을 정하는 법을 배운다.
- -

요약

- -

웹 프로젝트를 시작할 때, 많은 사람들은 기술적인 면에 집중한다. 물론 자기 분야의 기술에 익숙해야한다. 그러나 정말 중요한건 무엇을 달성하고 싶은가이다. 당연한 이야기같지만, 생각보다 많은 프로젝트들이 기술적 방법의 부족이 아닌, 목적과 전망의 부족으로 실패한다.

- -

따라서 아이디어를 얻고, 그것을 웹 사이트로 만들고 싶을 때, 다른 것보다 먼저 대답해야할 질문이 있다.

- - - -

이러한 것들을 프로젝트 관념(ideation)이라 한다. 당신이 초보자든 숙련된 개발자든 목표에 도달하기 위해 반드시 거쳐야 할 첫 단계이다.

- -

능동 학습

- -

아직 가능한 능동 학습이 없다. 기여를 고민해보라.

- -

깊게 들어가기

- -

프로젝트는 절대 기술에서 시작하지 않는다. 음악가는 무엇을 연주할 지 정하기 전엔 어떤 음악도 만들지 않는다. 화가, 작가, 그리고 웹 개발자도 마찬가지다. 기술은 다음이다.

- -

기술은 분명히 중요하다. 음악가는 기악을 완성해야 한다. 그러나 좋은 음악가는 절대 생각없이 좋은 음악을 만들수 없다. 그러므로 코드와 툴같은 기술로 뛰어들기 전에, 한 걸음 물러서서 하고 싶은 것을 상세히 결정해야 한다.

- -

친구와 함께하는 한 시간의 토론은 좋은 시작이지만 부족하다. 생각을 현실로 만들 길의 탁 트인 전망을 얻으려면 앉아서 생각을 구조화해야한다. 이것을 하기 위해서, 오직 펜과 종이 그리고 적어도 다음 질문에 대한 답할 시간이 필요하다.

- -
-

메모: 프로젝트 관념화를 수행하기 위한 셀 수 없는 방법들이 있다. 우리는 여기에 그것들을 모두 제시할 수는 없다. (책 전체로는 충분하지 않을 것이다). 이 곳에 주는 것은 전문가들이  Project Ideation(관념화), Project Planning(계획) 그리고 Project Management(관리) 라고 부르는 것을 다루는 단순한 방법이다.

-
- -

내가 정확히 달성하고 싶은 것은 무엇인가?

- -

이것은 대답해야 하는 가장 중요한 질문이다. 왜냐하면, 이것이 다른 모든 것을 만들기 때문이다. 도달하고 싶은 모든 목표를 목록화해라. 그것은 무엇일 수도 있다: 돈을 벌기 위해 물건 팔기, 정치적인 의견 표현하기, 새로운 친구 만들기,  음악가들과 공연하기, 고양이 사진 모으기, 또는 원하는 무엇이든.

- -

당신이 음악가라고 생각해보자. 이런걸 원할 수 있다.

- - - -

일단 이런 리스트를 만들고 나면, 우선순위를 정하는 것이 필요하다. 가장 중요한 것부터 덜 중요한 것까지 목표를 정렬해라.

- -
    -
  1. 새로운 애인 찾기
    2. -
  2. 다른 사람들이 내 음악을 듣게 하기
    3. -
  3. 내 음악에 대해 이야기하기
    4. -
  4. 다른 음악가들과 만나기
    5. -
  5. 관련 상품 팔기 
    6. -
  6. 동영상으로 음악 가르치기
    7. -
  7. 내 고양이 사진 출판하기
    8. -
- -

단순한 목표 쓰기와 순위 정하기가 만들고 싶은 것을 결정할 때, 도움이 될 것이다. (내가 이런 특징을 구현해야할까, 이런 서비스를 사용해야할까, 이런 디자인을 만들어야할까?)

- -

우선순위가 정리된 목적 기록부가 생겼으니, 다음 질문으로 이동하자.

- -

어떻게 웹사이트가 나를 목적지로 데려다 줄 수 있을까?

- -

그래서 당신은 목표 리스트를 가지고 있고, 그 목표들을 이루기위해 웹사이트가 필요하다고 느낍니다. 확실합니까?

- -

우리의 예를 다시 봅시다. 우리는 음악에 관련된 5개의 목표, 개인 삶(소중한 사람 찾기)에 관련된 하나의 목표 그리고, 완전히 상관없는 고양이 사진을 가지고 있습니다. 이 모든 목표들을 다루기 위한 하나의 웹사이트를 만드는 것이 합리적입니까? 그것이 필요할까요? 결국에, 많은 기존의 웹 서비스는 새로운 웹사이트를 만들지 않고 당신의 목표를 가져다 줄 지 모릅니다.

- -

애인을 찾는 것은 새로운 웹사이트를 구축하는 것보다 기존의 자원을 사용하는 것이 더 알맞다는 점에서 중요한 케이스입니다. 왜? 왜냐하면 우리가 실제로 애인을 찾는 것보다 웹사이트를 구축하고 유지하는 데 더 많은 시간을 소비하기 때문입니다. 우리의 목표가 가장 중요하기 때문에, 우리는 처음부터 시작하는 것보다는 기존의 툴을 레버리징(leveraging )하는 것에 에너지를 써야합니다. 다시, 사진을 보여주기 위해 이용할 수 있는 이미 너무 많은 웹서비스가 있습니다 그래서 우리의 고양이가 얼마나 귀여운 지에 대한 것을 퍼뜨리기 위해 새로운 사이트를 구축하는 데 노력할 가치가 없습니다.

- -

음악과 연관된 다른 5개의 목표가 있습니다. 물론, 이런 목표들을 다룰 수 있는 많은 웹서비스가 있습니다. 그러나, 우리만을 위한 웹사이트를 구축하는 경우에는 이해가 됩니다. 그런 웹사이트는 하나의 공간에 퍼블리싱하고 싶은 모든 항목을 합치는 것과 (목표 3, 5, 6에 적합) 그리고 우리와 대중 사이에 상호작용을 장려하는 것에 (목표 2, 4) 가장 좋은 방법입니다. 다시 말해서, 이런 목표들이 같은 주제를 중심으로 돌기 때문에, 한 곳에 모든 것을 가지는 것이 우리의 목표를 충족하고, 팔로어들과 연결하는 데 도움이 될 것입니다.

- -

어떻게 웹사이트가 나의 목표를 달성하는 데 도움이 될까요? 그것에 답함으로써, 우리는 우리의 목표를 달성하는 데 가장 좋은 방법을 찾을 것이고, 노력이 낭비되지 않도록 할 것입니다.

- -

내 목표를 달성하기 위해, 무엇을, 어떤 순서로 해야할까?

- -

이제 우리가 달성하고 싶은 것을 알고 있으므로, 그 목표들을 실행가능한 단계로 바꿀 시간입니다.

- -

긴 설명을 하기 보다는 이 표로 우리의 예제를 돌아봅시다:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
목표해야할 것
사람들이 당신의 음악을 듣게 하기 -
    -
  1. 음악을 녹음한다.
    2. -
  2. 온라인에서 사용할 수 있는 몇몇의 오디오 파일을 준비힌다. (기존의 웹서비스로 이것을 할 수 있을까?)
    3. -
  3. 사람들에게 당신의 웹사이트의 일부에서 당신의 음악에 접근하게 한다.
    4. -
-
음악에 대해 이야기하기 -
    -
  1. 토의를 시작하기 위한 몇몇의 글을 쓴다.
    2. -
  2. 어떻게 글이 보여야 하는 지 정해라.
    3. -
  3. 웹사이트에 이 글을 게시해라 (어떻게 이것을 할까?)
    4. -
-
다른 음악가들 만나기 -
    -
  1. 사람들이 너와 연락할 방법을 제공해라.
    2. -
  2. 너의 웹사이트에서 어떻게 사람들이 연락 채널을 찾을 지 정해라.
    3. -
-
goodies 팔기 -
    -
  1. goodies 만든다.
    2. -
  2. goodies 저장한다.
    3. -
  3. 쇼핑을 하는 방식 찾는다.
    4. -
  4. 결제 방식 찾는다.
    5. -
  5. 사이트에서 사람들의 주문 메카니즘 만든다.
    6. -
-
동영상을 통해 음악 가르치기 -
    -
  1. 동영상 강의 녹화한다.
    2. -
  2. 온라인에서 볼 수 있는 동영상 파일 준비한다. (다시, 기존의 웹사이트에서 할 수 있을까?)
    3. -
  3. 웹사이트의 한 부분에서 비디오 접근 가능하게 한다.
    4. -
-
- -

공지할 것이 두 개가 있다. 첫째, 이런 아이템 중 몇몇은 웹과 상관이 없다. (예를 들어, 음악 녹음, 글 쓰기) 종종 그런 오프라인 활동이 프로젝트의 웹 부분보다 훨씬 더 중요하다. 예를 들어, 판매의 경우에, 공급, 결제, 배달에 시간을 쓰는 것이 사람들이 주문할 수 있는 웹사이트를 만드는 것보다 훨씬 더 중요하다.

- -

둘째, 실행가능한 단계를 설정하는 것은 우리가 답할 필요가 있는 새로운 질문을 이끌어 낸다. 종종 우리가 본래 생각했던 것보다 더 많은 질문으로 변한다. (예를 들어, 내가 혼자서 어떻게 이것을 배워야할까? 누군가에게 이것을 부탁할까? 서드파티(제 3의) 서비스를 사용해야할까?)

- -

결론

- -

당신이 본 것 처럼, "나는 웹사이트를 만들고 싶다" 라는 단순한 생각이 긴 해야할 목록을 만들었다. 그리고 그것은 생각하면 할 수록 더 길어진다. 금방 그것은 압도적으로 보일 것이다. 그러나 겁먹지 마라. 당신은 모든 질문에 대답할 필요는 없다. 그리고 당신은 리스트에 모든 것을 할 필요는 없다. 중요한 것은 원하는 것과 도달하는 법에 대한 비전을 가지고 있어야하는 것이다. 일단 분명한 비전이 있다면, 당신은 해야할 때와 하는 방법을 결정할 필요가 있다. 큰 일을 작은 실행할 수 있는 단계로 부숴라. 그리고 그 작은 단계를 거대한 성과로 합쳐라.

- -

이 글에서, 당신은 웹사이트를 만들기 위한 개략적인 계획을 지금 세울 수 있어야 한다. 다음 단계는 how the Internet works(인터넷이 작동하는 법) 을 읽어야 할 것이다.

- -

 

-- cgit v1.2.3-54-g00ecf