[Hanaro] 8일차 / Tailwind CSS Framework로 UI/UX 구성하기, JavaScript 기초

Tailwind CSS Framework로 UI/UX 구성하기

• tailwind 설치 및 실행 확인
  • https://tailwindcss.com/docs/installation
  • tailwind 설치했는데 CSS가 적용이 안될 때! cmd 창에서 yarn dev 를 다시 실행해보자
• tailwind의 CSS 적용 방식
  • html에서 <div class="text-xl bg-sky-700 text-white"> 이런 식으로 class 안에 꾸미는 코드를 안에 넣으면 output.css에 CSS 코드가 자동으로 추가된다!
  • 코드가 자동 추가된 output.css

  .bg-sky-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(3 105 161 / var(--tw-bg-opacity));
  }
  
  .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
  
  .text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }
  

• 로그인 화면을 TailwindCSS로 만들어보기
  
  • 작성 코드
    
    • https://github.com/yubin-im/DigitalHanaro_TIL/blob/master/htmlcss/tw/src/loginTailwind.html
• html과 css를 이용하여 표 만들고 해당 표 tailwind로 이용하여 바꾸기
  • 작성 코드
    • html 사용 표
      • https://github.com/yubin-im/DigitalHanaro_TIL/blob/master/htmlcss/tw/src/table.html
    • CSS 사용 표
      • https://github.com/yubin-im/DigitalHanaro_TIL/blob/master/htmlcss/tw/src/tableTailwind.html

 

 

프론트엔드 개발 기초(JavaScript/TypeScript)

JavaScript 시작하기

• parameter, argument
  • argument(인자)
    • 어떤 함수가 호출될 때 전달하는 값
  • parameter(매개변수)
    • 전달된 값을 받아들이는 변수
• primitive(call-by-value) vs object(call-by-reference)
  • call by value
    • 값에 의한 호출 (값을 복사)
    • 숫자, 문자열, boolean, null, undefined 같은 기본형(원시형)을 인자로 매개변수에게 넘길 때 사용 방식
    • 값을 복사, 보존. 하지만 메모리 사용량 늘어남
  • call by reference
    • 참조에 의한 호출 (주소를 복사)
    • 배열, 객체, 함수, 날짜, 정규표현식 같은 참조형 데이터의 주소값을 인자로 매개변수에게 넘길 때 사용 방식
    • 값 복사말고 직접 참조해서 빠름. 하지만 참조기 때문에 값의 영향 (리스크)
• JavaScript에서 primitive(call-by-value) vs object(call-by-reference)
  • call by value
    • JS는 원시데이터(숫자, 문자 등)에서 사용 (let)
  • call by reference
    • JS는 객체에서 사용 (const)