Today I Learn : 2024-06-24 # 모듈 (module)모듈은 왜 쓰는가?⇒ 개발하는 애플리케이션의 크기가 커지면 파일을 여러 개로 분리해야 하는 시점이 오는데 이때, 분리된 파일 각각을 모듈(module)이라고 부른다.⇒ 가독성 ↑⇒ 캡슐화모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.모듈에 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다.type=”module” 속성을 사용하면 defer가 default로 들어가있다.# 모듈 내보내기변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다. ⇒ 외부 모듈에서 해당 변수나 함수에 접..
Today I Learn : 2024-06-05참고 ) https://ko.javascript.info/function-expressions 함수 표현식 ko.javascript.info # 함수 표현식 (Function Expression)- 자바스크립트는 함수를 특별한 종류의 값으로 취급한다.참고 ) first-class function (일급객체, 일급함수)→ 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체- 함수를 생성하고 변수에 할당 → 함수는 값이기 때문에 변수에 할당 가능예시 )// 함수 선언(Function Declaration, 함수 선언문 방식)function sayHi() { console.log('Hello!');}// 함수 표현식(Function Expressio..
* Today I Learn - 2024-05-28* JavaScript 스토리① 탄생- 1995년 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입한다.- 브렌던 아이크(Brendan Eich)가 개발- Mocha → LiveScript → JavaScript 순으로 이름 변경② 표준화- ECMA에 ECMA-262 표준으로 등록되면서 JavaScript 언어의 표준 이름은 ECMAScript가 된다.③ 버전참고 📚 ) https://github.com/tc39/proposals/blob/main/finished-proposals.md proposals/finished-proposals.md at main · tc39/proposals..
Today I Learn - 2024-05-27 VOD강의* JavaScript 를 배워야 하는 이유① 자바스크립트는 쉽고 재미있게 배울 수 있다.- 자바스크립트는 문법이 C언어 Java 등에 비해 쉽고 직관적이어서 배우기 쉽다.② 배워놓으면 활용할 범위가 넓다.- 웹 서비스를 구성하는프론트엔드(화면부분)- 백엔드 서버, DataBase 등- 스마트폰 앱(안드로이드, ios등)③ 많은 사람들이 사용한다- 양질의 오픈소스코드 多- 좋은 라이브러리 多* JavaScript를 사용하는 방법- body 태그가 끝나기 직전에 script 태그를 넣어준다.① html... JavaScript html에서 사용 ...② js 파일... JavaScript js파일 사용 ...
Today I Learn - 2024-05-23* 오늘은 Tailwind 실습 위주로 진행!!- 자세한 내용은 github 😎https://github.com/hyesom2/learn-tailwindCSS GitHub - hyesom2/learn-tailwindCSSContribute to hyesom2/learn-tailwindCSS development by creating an account on GitHub.github.com벌써 수업을 들은 지도 한 달이 되었다. 물론 나는 5일이나 늦게 시작해서 초반에 깃이나 기초적인 HTML 내용을 듣지는 못했지만... 😓처음에 독학으로 공부할 땐 웹 접근성에 대해서는 생각해 본 적이 한 번도 없었는데 수업을 듣고 난 후에는 어느 웹사이트를 들어가든 레이..
Today I Learn - 2024-05-22* Tailwind CSS ?- Utility-first(유틸리티 기반)의 CSS프레임워크- 완제품 형태가 아니라 필요한 부품을 조립하는 방식- 디자인 및 개발의 자율도가 높아져 창의성과 재사용성, 생산성 등을 높일 수 있다.* Tailwind CSS 설치 & 셋팅* 참고 : https://tailwindcss.com/docs/installation Installation - Tailwind CSSThe simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.tailwindcss.com* 기본 테마 확장- 테마 옵션 기본값..
Today I Learn - 2024-05-20* Node.js- javascript를 돌릴 수 있는 실행환경- 웹만이 아닌 브라우저가 아닌 Node라는 환경에서도 스크립트를 구동할 수 있다.- 패키지를 npm을 통해 설치할 수 있다.- Node를 설치하면 npm은 자동으로 설치된다.- npm / yarn / pnpm- npm install > 패키지를 관리하는 package.json의 dependencies(1) 전역으로 설치 추천 : degit, add-gitignore 등(2) 지역으로 설치 추천 : fiveserver, Sass 등 협업으로 할 땐 지역으로 까는게 좋음- 설치가 제대로 안 될 경우> echo '{}' > package.json> npm install 설치할package* PostC..
Today I Learn - 2024.05.17* 스프라이트 이미지- 스프라이트 이미지는 여러개의 이미지가 필요한 경우 사용된다.- 이미지를 각각의 별도의 파일로 관리하는 것 보다는 하나의 파일로 만들어서 HTTP 요청수가 줄어들어서 메모리와 네트워크 사용량 측면에서 효율적이다.- 스프라이트는 규칙성으로 만드는게 좋다.(1) 비트맵 스프라이트 이미지 (2) svg 스프라이트 이미지 * media query vs container query- 둘 다 반응형으로 지정할 수 있다.- media query는 viewport(브라우저 너비) 를 기준- container query는 특정 컴포넌트 요소를 기준* container query ?(1) 반응형을 적용 할 컴포넌트 요소타입 지정하기 : container-..
