WEB2 - JavaScript

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

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. Jeremy Jo
    완료
  2. 지나감
    처음부터 생각하고 짜지 않습니다. 물론 숙련된 사람이라면 이런 기능들은 보나마나 객체화 파일화가 필요하니까 미리 해둬야지 할 수 있겠지만, 숙련되지 않은 사람이라면 그냥 손가는대로 짠 뒤 자신이 짠 코드를 훑어보며 다시 객체화와 파일화 과정을 거치면 됩니다. 이런 과정을 리팩토링(Refactoring)이라고 하며, 컴퓨터 공학에서 매우 중요한 과정입니다.
    대화보기
    • 문병민
      완료
    • 샬롬
      완료
    • BoBo
      :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> 넣으니까 작동이 안되고 바디태크 안에다 넣어야 되던데 영상안에는 헤드안에다 했던데.. 뭐가 문제인거죠?
              • 2019-02-21 완료
              • 우도순
                완료
              • 발헤
                감사합니다. 완료
              • 호두
                파일로 쪼개기
              • dj_yang
                강의 정말 마음에 드네요
              • 함가죠
                완료 감사합니다:)
              • 지미츄
                완료 ! 감사합니다 !
              • gravity251
                완료
              • 이수하
                완료
              • 최종민
                완전 신세계입니다,,
              • Dustin Yook
                완료
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기