Language40 [TypeScript] TypeScript 타입스크립트 | 기술적 분석 + 사용해본 후 느낀점 TypeScript 타입스크립트 | 기술적 분석 + 사용해본 후 느낀점 [index] 1. 타입스크립트란? 2. 타입스크립트의 등장배경 3. 타입스크립트 장점과 단점 4. 타입스크립트와 자바스크립트 비교해보기 5. 타입스크립트와 자바스크립트 중 하나를 고른다면? 6. 사용해본 후 느낀점 1. 타입스크립트란? https://www.typescriptlang.org/ JavaScript With Syntax For Types. TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before y.. 2023. 12. 6. [CSS] Sass 와 Styled-components 비교 분석 + 직접 사용해보며 느낀점 Sass 와 Styled-components 비교 분석 + 직접 사용해보며 느낀점 [index] 1. Sass 특징 2. Styled-components 특징 3. Sass와 Styled-components 코드로 비교해보기 4. css-in-css vs css-in-js 관점에서 비교해보기 5. 직접 사용해보며 느낀점 | 개인적인 견해 이번글은 주로 css in css와 css in Js의 차이를 중점으로 Sass 와 styled-components를 비교해보려고 합니다. 우선 Sass 와 styled-components 각각의 특징에 대해 간략하게 정리해보겠습니다. 1. Sass 특징 Sass는 CSS in CSS 방식입니다. 흔히 HTML, JS, CSS는 관심사가 다른 개별적 요소로 보고 분리하는.. 2023. 11. 21. [CSS] Tailwind CSS 분석 + 실제로 프로젝트에 적용해보며 느낀점 Tailwind CSS 분석 [index] 1. Tailwind CSS란? 2. Tailwind CSS 장점 3. Tailwind CSS 단점 4.실제로 프로젝트에 적용해보며 느낀점 1. Tailwind CSS란? https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML. tailwindcss.com Tailwind CSS는 utility-first CSS 프레임워크로서 핵심 개념.. 2023. 11. 21. CSS-in-JS Library | styled-components란? ( + 직접 사용해본 후 느낀점 ) styled-components란? [ index ] 1. styled-components란? 2. styled-components의 장점과 단점 3. 왜 styled-components를 사용해야 할까? 4. styled-components를 직접 사용해보며 느낀 장점과 단점 5. 결론 1. styled-components란? https://styled-components.com/docs styled-components: Documentation Learn how to use styled-components and to style your apps without stress styled-components.com styled-components is the result of wondering how w.. 2023. 11. 16. 클로저 | Closures 클로저 | Closures [index] 1. 클로저란? 2. 실행컨텍스트 관정에서 본 클로저 3. 클로저의 활용 사례 4. 클로저와 관련된 문제점 5. 결론 1. 클로저(closures)란? 1-1. 클로저에 대한 정의 클로저는 자신이 생성될 때의 렉시컬 환경(Lexical environment)을 기억하는 함수 함수와 그 함수가 선언되었을 때의 렉시컬 환경(어휘적 환경)의 조합이다. 선언되었을 때란, 내부 함수가 선언되었을 때를 지칭한다. 주변 상태(어휘적 환경)에 대한 참조나 함께 묶인(포함된) 함수의 조합을 의미한다. MDN 에서의 클로저의 정의는 다음과 같다. A closure is the combination of a function enclosed with references to its s.. 2023. 10. 17. [ React ] textarea text 높이 따라 자동으로 높이 조절하기 (with Tailwind css) textarea text 높이 따라 자동으로 높이 조절하기 with Tailwind css 이 글은 비교적 동적 스타일 적용이 번거로운 tailwind css를 사용하는 과정에서 textarea의 높이를 자동으로 조절하는 방법에 대해 다루고 있습니다. tailwind css가 아니라면 이것보다 더 편리한 다른 방법도 있을 것 같습니다만, 우선 해당 조건에서 실행되어야만 하는 상황이기에 최선을 다해 방법을 찾아보았습니다. 이점 참고하시기 바랍니다. onChange 이벤트 리스너를 이용해 scrollHeight를 textarea.style.height에 직접 적용하는 방법 위와 같이 적용 한 후 콘솔로그로 높이를 확인해보면 이렇게 event.target.scrollHeight가 정상적으로 확인됩니다. 그리고.. 2023. 7. 30. CSS in CSS | CSS전처리기 Sass(SCSS) + 직접 사용해보고 느낀점 CSS전처리기 Sass & SCSS [index] 1. CSS전처리기( CSS Preprocessor) 2. Sass (Syntactically Awesome Style Sheets) 3. Sass 적용하기 4. Sass 활용하기 5. 직접 Sass를 사용하면서 느낀점 해당 글에서는 CSS 천처리기 종류 중 하나인 Sass에 대한 개념정리와 Sass를 사용하는 이유 및 활용 방법에 대해 다룹니다. 기존에 작성했던 글에 추가된 내용이 있습니다.(2023.10) 1. CSS전처리기( CSS Preprocessor) 1-1. CSS전처리기( CSS Preprocessor) 개념 정리 CSS 문서 작성에 도움을 주는 도구로, 작업을 하며 발생하는 다양한 문제들을 programmatically 한 방식으로 해결해.. 2023. 4. 23. JS/ 로그인 버튼 활성화 / addEventListener "keyup"이 아닌 "input" 사용해야 하는 이유 유효성 검사를 통해 조건 충족 시 로그인 버튼이 활성화 되는 기능 구현중, input에 유저의 액션이 있을 때 유효성 검사를 하도록 하는데 addEventListener를 사용했다. 기존에는 addEventListener("keyup")을 사용했었는데, keyup이 아닌 input을 사용하는게 더 적합하다는 것을 알게 되었다. keyup이 아닌 input을 사용해야 하는 이유 우선 지금 구현하고자 하는 기능에 대한 세부적인 조건에 대해 먼저 명시하자면, (무조건적으로 keyup이 틀리고 input이 맞는 것은 아니다.) HTML JS function loginForm (x) { return document.getElementsByClassName(x)[0] } loginForm("loginId").add.. 2023. 4. 13. <img>와 background-image 속성 /Semantic Web, Semantic Tags 태그를 이용하는 방법과 background-image 속성을 이용하는 방법의 차이점 둘다 시각적으로는 같은 효과를 낼 수 있지만, 사용하는 목적이 조금 다르다. 크게 웹접근성과 업무 효율성 측면에서 구분해 사용될 수 있다. 태그를 이용하는 방법 1. 해당하는 이미지가 구체적인 정보를 담고 있을 때 이미지가 정보 전달을 목적으로 사용되는 경우 태그의 alt 속성을 이용해 웹접근성을 높일 수 있다. 태그의 alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시한다. alt 속성은 사용자가 느린 네트워크 환경, src 속성값의 오류, 시각 장애인용 스크린 리더 사용 등으로 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공한다. 그렇기 때문에 태그를 이용해 background.. 2023. 3. 8. 이전 1 2 3 4 5 다음
