WEB2 - JavaScript

파일로 쪼개서 정리 정돈하기

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. moon
    항상 감사합니다.!!
  2. 메메
    ~.js 파일을 만든 뒤 <head>에 추가
    <script src="~.js"></script>
  3. 춤춤
    완료!
  4. thsths
    완료
  5. 스티븐잡숴
    완료
  6. Jeremy Jo
    완료
  7. 지나감
    처음부터 생각하고 짜지 않습니다. 물론 숙련된 사람이라면 이런 기능들은 보나마나 객체화 파일화가 필요하니까 미리 해둬야지 할 수 있겠지만, 숙련되지 않은 사람이라면 그냥 손가는대로 짠 뒤 자신이 짠 코드를 훑어보며 다시 객체화와 파일화 과정을 거치면 됩니다. 이런 과정을 리팩토링(Refactoring)이라고 하며, 컴퓨터 공학에서 매우 중요한 과정입니다.
    대화보기
    • 문병민
      완료
    • 샬롬
      완료
    • :p
      colors.js

      css정리할때처럼 js파일로 정리하기!
    • 딥허브
      2019.12.21
      진짜 신기하고 멋지긴한데 이걸 처음부터 파일화 객체화를
      생각하고 짠다고 하면.. 머리가...
    • 울면안돼
      colors.js 파일에 스크립트태그 제외하고 버튼에 관한 코드를 붙여넣기 했는데요 colors.js 파일에서 오류가 엄청많이 나서 기존파일에서 스크립트태그에 src로 color.js를 줘도 동작을 안하네요 colors.js 파일에 오류가 엄청 나서 그런거 같은데 오류가 왜 나는건가요? 정상적으로 작동하는 코드였는데 colors.js 파일에 넣으니까 오류가 50여 가지가 나는데.. 뭔지도 모르겠고.. 어떡하죠???
      var Body = {
      setbackgroundcolor:function(color){
      document.querySelector('body').style.backgroundColor=color;
      },
      setcolor:function(color){
      document.querySelector('body').style.color=color;
      }

      }
      var Links = {
      setcolor:function(color){
      var alist = document.querySelectorAll('a');
      var i = 0 ;
      while(i < alist.length){
      alist[i].style.color = color;
      i = i + 1;
      }
      }
      }
      function nightdayHandler(self){
      var target = document.querySelector('body');
      if(self.value === 'night'){
      Body.setbackgroundcolor('black');
      Body.setcolor('white');
      self.value = 'day';

      Links.setcolor('yellow');
      }

      else{
      Body.setbackgroundcolor('white');
      Body.setcolor('black');
      self.value = 'night';

      Links.setcolor('blue');
      }
      }
      이 코드입니다 ㅠ

      참고로 brackets 쓰고 있습니다 ㅠ
    • codinginpain
      크.. 완료
    • 이명박
      다른 페이지로 넘어가도 day night모드가 초기화 되지 않게 하는방법이 있나요?
    • 아빠늑대
      객체보다 더 큰 정리정돈의 도구를 배운다.
      파일쪼개기
      이것을 사용하면 아무리 웹 페이지가많아도 감당할 수 있게 된다.
      <input>을 옮기면 작동하지 않는다! <script>가 따라가지 않았으니까
      복붙복붙 반복반복
      1억개라면?(feat. 극단)
      powderblue를 수정하려면? 절망
      자 colors.js를 만듭니다. <script>내부를 옮겨주고, 원래 있던 script에 src="colors.js" 요소를 붙여줍니다.
      폭발적 효과!
      colors.js만 include(참조)한다면 가독성이 좋아지고, 코드가 훨씬 명확해지고, 유지보수도 쉬워진다.
      자 장점 한가지 더
      inspect(검사) network tab을 보면 브라우저가 colors.js를 cache합니다.
      돈이 아니라 저장해 둔 것. 이제 사용자와 서버 모두 네트워크 트레픽이 줄고, 속도도 향상. 비용 절감
      정리정돈의 끝판왕, 파일 쪼개기입니다.
    • 홍주호
      20191116 완료
    • 우유병
      다솜화이팅
    • 땀쟁이
      엄청 늦은 답변이긴한데요..ㅎ 파일로 만들어둔 colors.js를 저장하신다음에 리로드 하시면 될꺼에요!
      저는 8개월뒤인 지금 듣는중인데 저장하고나니까 동작되네요
      대화보기
      • 육포
        20191103
      • 씬이삼
        아래 사이트 확인해보세요~
        https://flaviocopes.com......de/
        대화보기
        • 굽벵이
          완료
        • 박창신
          완료
        • 코딩만이 살길이다
          완료
        • 거룩한깜상
          저도 궁금한데 어떻게 해야ㅐ되는지 아시는분 계신가요..?
          다른 웹페이지의 value값도 바뀌게 해야되는건지..
          만약 그런거면 그건 어떻게 해야될까요 ㅠㅠ
          대화보기
          • 쑤우
            수강완료. 감사합니다.
          • 현우
            완료
          • 정완료
            완료
          • 한조
            감사합니다!
          • 들국화
            감사합니다
          • JT_brand
            완료
          • Object
            함수와 객체를 사용할 때 처음부터 사용하시는 편인가요
            아니면 수업진행한거처럼 리팩토링과정을 거치면서 함수로 만든 후
            객체로 정리하시는 편인가요

            처음부터 객체로 짜보고싶었는데 그건 좀 어렵더라고요ㅠㅠ
            만약 전자면 숙련되면 그렇게 될 수 있을까요..ㅎ
          • Student
            스크립트 태그에 src 속성을 사용해서 재 사용하자.
          • 김영인
            강의에 나온 colors.js 파일을 제가 처음에 color.js라고 저장하고 코드를 작성했더니, 오류가 났었는데요. color를 colors라고 변경해주니 오류가 해결되네요. 혹시 이게 color가 이미 있는 코드 이름이라서 그런건가요?
          • eventme
            완료
          • Hyeon-Jun Ha
            완료
          • 주워니
            완료!
          • 위준우
            완료
          • 허공
            190509 감사합니다.
          • 최승윤
            완료!
          • egoing
            그건 쿠키라는 것을 통해서 상태를 유지할 수 있습니다~
            대화보기
            • 산티아고
              아 저도 궁금하네요. 유튜브도 그렇고 커뮤니티 사이트들중에 어두운화면 지원하는 사이트가보면 한번 누르고나서 다른 페이지로 넘어가도 어두운화면이 유지되잖아요.
              대화보기
              • ericpark
                쉽게 개념을 정리하게 되었습니다. 고맙습니다.
              • 완료!
              • 오승원
                헤드안에 <script src="colors.js"></script> 넣으니까 작동이 안되고 바디태크 안에다 넣어야 되던데 영상안에는 헤드안에다 했던데.. 뭐가 문제인거죠?
              • lygon
                2019-02-21 완료
              • 우도순
                완료
              • 발헤
                감사합니다. 완료
              • 호두
                파일로 쪼개기
              • dj_yang
                강의 정말 마음에 드네요
              • 함가죠
                완료 감사합니다:)
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기