전체 글 썸네일형 리스트형 효과 만들기 - 1. 로딩 효과 만들기 효과 만들기 FrontEnd 개발을 하다보면 API를 적용하는 컴포넌트나 반복적인 작업을 하기 위한 컴포넌트등이 있지만, 가장 기본적인 형태의 독립적이고 재사용이 가능한 컴포넌트들이 있다. 예를 들어, 로딩중인 상태를 알려줄 수 있는 컴포넌트나, 데이터를 가져오기 직전의 데이터 표, 이미지등의 영역을 잡아 보여줄 수 있는 스켈레톤, 가장 많이 사용하고 기본적인 버튼, 입력 컴포넌트등이 있다. 이런 컴포넌트는 외부 라이브러리를 이용하여 사용할 수 있지만 직접 만들어보며 어떤 구조로 컴포넌트가 이루어져 있는지, 이벤트를 어떻게 넘겨주면 좋은 건지 이해하고 라이브러리에 너무 의존하지 않기 위해서 직접 간단한 컴포넌트를 만들어보기로 했다. 어떻게 만들까 처음엔 가장 기본적인 HTML로 만들까 고민을 했었지만, .. 더보기 토이 프로젝트 만들기 시작하게 된 계기 이것저것 써보고싶은 기술이나 회사에서 사용하며 익힌 기술들을 내것으로 만들기 위해 사이트 프로젝트를 진행하려고 한다. 주제는 이전에 이전에 아이디어를 구상하고 기본적인 뼈대는 만들었지만 만드는 시기에 찾아온 인생 현타....를 맛보게 되어 중간에 엎어버렸던걸 다시 처음부터 만들어보려고 한다. 주제 프로젝트의 아이템은 아주 간단하다. 프로젝트의 이름은 Editor Config 개발에서 사용하는 pretter, eslint와 같은 config 설정 파일들의 옵션을 사용자가 하나하나 진행하려는 프로젝트에 맞게 선택하여 설정하고 그 설정된 config를 파일로 다운받을 수 있도록 도와주는 사이트를 만드는 것이다. 물론 해당 기능만을 아주 간단하게 만드는 것이 아닌, 로그인 기능과 사용자가 설정.. 더보기 라이브러리, 프레임워크 정확히 구분하기 (feat. React) FrontEnd 개발을 하게 되면 항상 마주치는 라이브러리, 프레임워크가 있다. FrontEnd 개발 시 가장 많이 듣는 3대장 React, Vue, Angular 부터 시작해서 날짜, 시간등을 쉽게 사용할 수 있게 해주는 Moment.js, day.js, DOM을 조작하여 이벤트나 여러 효과를 쉽게 구현할 수 있도록 해주는 JQuery같이 많은 오픈 소스를 사용하면서 어느 것은 라이브러리, 어느 것은 프레임워크지 궁금해지기 시작했다. 그래서 이번 기회에 둘의 차이점은 무엇이고 지금 내가 가장 많이 사용하는 React는 둘 중 어느 것에 속하는지 알아보고 그 내용을 정리해서 남기기로 했다. 라이브러리(Library) 자바스크립트 라이브러리란 특정 작업이나 기능을 수행하기 위한 자바스크립트 코드의 모음이다.. 더보기 JavaScript - Lazy Loading 웹 페이지를 이용하는 사용자는 웹 사이트의 로딩 시간과 성능에 대해서 높은 기대치를 가지고 있다. 그렇기 때문에 로딩속도가 짧고 성능이 높은 사이트의 경우에는 많은 이용자가 방문을 하게 되지만 로딩 속도가 느리거나 컨텐츠의 확인에 시간이 걸리는 사이트의 경우 이용자의 이탈률과 불편함이 높아지게 된다. 이러한 문제를 해결하고 전반적인 사용자의 경험을 개선하기 위한 방법 중 하나로 Lazy Loading을 사용한다. Lazy Loading이란? Lazy Loading이란 웹 페이지의 성능을 최적화하기 위한 기법 중 하나로, 페이지의 로딩 속도를 빠르게 만들기 위해 필요한 리소스(예: 이미지, 스크립트, 동영상 등)를 초기 페이지 로딩 시에 모두 로드하는 것이 아니라 스크롤을 통해 해당 이미지가 화면에 나타나.. 더보기 CSS 방법론 알아보기 CSS 방법론이란? CSS 방법론은 대규모 프로젝트나 팀 작업에서 CSS 코드의 유지보수성, 재사용성, 확장성을 향상시키기 위해 사용되는 일련의 규칙을 의미한다. 이러한 방법론을 사용하면, CSS의 복잡성을 관리하고 코드의 구조를 표준화할 수 있으며, 현재 개발자들이 사용하는 방법론은 각각의 특징과 목적, 원칙을 갖고 있다. CSS 방법론은 그 자체로 독립적인 지침과 원칙을 가지고 있지만, 실제 프로젝트에서는 이러한 방법론을 혼합하거나 조정하여 사용하는 경우도 많기 때문에 하나의 방법론만을 사용해야 하는것이 아니라 프로젝트의 요구사항, 흐름에 때라 맞는 방법론을 사용하는것이 좋다. 주로 사용하는 CSS 방법론 BEM (Block Element Modifier) BEM의 목적은 구조와 의미를 명확하게 나타.. 더보기 ESLint가 뭘까 ESLint ESLint는 JavaScript 코드를 위한 정적 분석 도구 ESLint는 코드 품질과 코딩 스타일 문제를 체크하는 도구로, 사용자가 지정한 규칙들을 정의하고 로드하여 커스터마이징할 수 있다. 이를 통해 프로젝트의 코딩 스타일을 일관성 있게 유지하고 오류를 방지하며, 코드 품질을 향상시킬 수 있다. ESLint는 ECMA 스크립트(JavaScript)의 현행 표준과 차기 표준 초안의 실험적인 문법을 지원하고, 이는 JSX나 TypeScript와 같은 확장 문법을 포함한 최신 JavaScript 문법과 미래의 표준 문법에 대해 빠르게 적용하고 사용할 수 있도록 도움을 준다. ESLint를 사용하면 프로젝트의 코딩 스타일을 통일하고 오류를 미리 방지하여 코드의 안정성과 가독성을 높일 수 있으며.. 더보기 코드를 더 이쁘게 - Prettier Prettier Prettier는 코드 포맷터(Code Formatter)로써, 일관된 코딩 스타일을 유지하는 데 도움을 준다. Prettier는 코드를 읽고, 이를 내부 표현으로 변환한 다음, 미리 정의된 규칙에 따라 코드를 다시 출력한다. 이 과정에서 모든 원래의 스타일링이 제거되고, Prettier에서 정의한 규칙에 따라 일관된 스타일이 적용된다. Prettier 기능 코드 포맷팅: Prettier는 코드를 분석하여 추상 구문 트리 (Abstract Syntax Tree, AST)를 생성하고, 그 트리를 사용하여 코드를 재출력 한다. 이 과정에서 Prettier는 코드를 새롭게 포맷팅 하며, 일관된 스타일을 적용한다. 통합: Prettier는 통합 개발 환경 (IDE) 및 코드 편집기, 버전 관리 .. 더보기 React의 클래스 컴포넌트와 함수형 컴포넌트가 뭘까? React : 클래스 컴포넌트, 함수형 컴포넌트 클래스 컴포넌트 클래스 컴포넌트는 React의 전통적인 컴포넌트 작성 방법이다. 클래스 컴포넌트는 ES6의 클래스를 활용하며, 컴포넌트의 상태(state)를 가질 수 있다. 또한, 라이프사이클 메소드를 활용할 수 있어 상태 업데이트 또는 컴포넌트 라이프사이클에 따른 특정 동작을 구현할 수 있게 되며, componentDidMount, componentDidUpdate, componentWillUnmount 등의 메소드를 제공한다. 라이프 사이클 Mounting : 컴포넌트 인스턴스가 생성되어 DOM에 삽입되는 단계 constructor(): 컴포넌트가 생성될 때 호출되는 메소드로, 초기 state를 정의하거나 메소드를 바인딩하는 등의 작업을 수행한다. st.. 더보기 이전 1 2 3 4 5 6 7 ··· 9 다음
