Front End Develop Front End Develop

크롬 88버전이 업데이트 되면서 새로운 속성이 등장했습니다. 바로 aspect-ratio에 관한 것 입니다. 이것은 1 월 6일에 출시된 Safari Technology Preview 118에서 지원을 발표한 Safari의 뒤를 잇는 것입니다. 이는 Edge, Firefox 및 기타 브라우저로 출시 될 때 기대할만한 무언가를 제공합니다. 크롬 88 업데이트에 관한 내용을 아래의 공식 youtube를 통해 확인해보세요. 가로 세로 비율은 요소 크기의 비율을 정의합니다. 예를 들어 가로 세로 비율이 1/1 인 상자는 완벽한 정사각형입니다. 3/1의 종횡비는 넓은 직사각형입니다. 많은 비디오가 16/9 종횡비를 목표로합니다. 이미지 및 iframe과 같은 일부 요소에는 고유한 종횡비가 있습니다. 즉, 너비 또..

1. 범위 무시 디자이너가 개발 프로세스를 지나치게 복잡하게하는 기능을 도입하면서 애플리케이션에 추가적인 가치를 제공하는 것은 드문 일이 아닙니다. 비즈니스 목표, 프로젝트 범위, 타임 라인 및 제품 개발 방식에 초점을 맞추는 것은 디자인을위한 기능의 우선 순위를 지정할 때 모두 중요한 고려 사항입니다. 예를 들어 사용자가 프로필 사진을 업로드 할 수있는 옵션을 디자인하고 있지만 사진 자르기, 크기 조정 및 회전 기능도 추가하면 디자인 이 불필요하게 복잡해집니다. 디자인에 "회전" 또는 "자르기" 버튼을 추가하는 것은 어렵지 않지만 개발 단계에서 구현하기가 더 까다롭습니다. 안전한 방법은 응용 프로그램에 필수적인 기능이 아닌한 기능을 추가하지 않는 것입니다. 항상 비즈니스 및 사용자 목표를 디자인 프로세..

css variables 사용에 대해서 어떻게 생각하시나요? 오랫동안 요청되었지만 여전히 많이 사용되지 않는 계단식 변수에 대한 CSS 맞춤 속성은 협업 및 코드 재사용을위한 혁신적인 가능성을 제공합니다. 그러나 오늘날 CSS 변수는 제대로 이해되지 않고 있습니다. 이 글을 읽은 후 선언적 CSS 변수와 다른 프로그래밍 언어의 변수 간의 차이점과 그 기능을 활용하는 방법을 더 잘 이해하기를 바랍니다. CSS 변수는 계단식으로 연결되고 상속되는 사용자 지정 속성입니다. -접두사로 시작하며 값에 대한 실제 규칙이 없습니다. 선언시 느슨하게 구문 분석되지만 사용자 지정이 아닌 속성에서 사용될 때까지 오류 처리가 수행되지 않습니다. 해당 값은 모든 CSS 속성에서 사용할 수있는 var (-name) 함수를 통해..

module.exports = { rules: { // 하나의 값을 배열로 했을 때 (에러로 처리) 'react-native/no-single-element-style-arrays': 2, // jsx에서 함수 사용 하지 않기 (에러로 처리) 'react/jsx-no-bind': 2, // jsx 상에서 인라인 스타일 사용하지 않기 (에러로 처리) 'react-native/no-inline-styles': 2, // 불필요한 스타일 선언 하지 않기 (에러로 처리) 'react-native/no-unused-styles': 2, }, }; 팀워크에서 코드 블럭을 맞추어나간다는 점은 매우 좋습니다. 그런 의미에서 eslint를 사용하는 것은 불필요한 코드 유지 관리 리소스를 줄이는 데에 도움이 됩니다. 2로..

JavaScript는 이제 많은 라이브러리와 프레임워크가 파생된 매우 인기있는 프로그래밍 언어입니다. 하지만 상위 생태계가 어떻게 진화하든 바닐라 자바스크립트 없이는 불가능합니다. 여기에서는 프로그래머의 바닐라 JavaScript 기술을 테스트하기 위해 4개의 JavaScript 인터뷰 질문을 선택했습니다. 1. Array.prototype.map 구현 Array.prototype.map 메서드를 직접 구현하는 방법은 무엇입니까? lodash를 참조하면 다음과같은 맵 함수를 작성할 수 있습니다. function map(array, iteratee) { let index = -1 const length = array == null ? 0 : array.length const result = new Arra..

CSS로 레이아웃을 가운데 맞추는 방법들은 많습니다. 그 중 5가지를 알아보도록 하지요. 동영상 버전 레이아웃을 가운데로 맞추는 것에는 다양한 유형이 있습니다. 주의할 다섯 가지는 다음과 같습니다. 1. Squished width(넓이) 변경에 대응할 수 있어야 합니다. 2. Squashed height(높이) 변경에 대응할 수 있어야 합니다. 3. Duplicate 항목 수가 늘어나도 동적으로 늘어나야 합니다. 4. Edit 콘텐츠의 길이와 언어에 따라 동적이어야 합니다. 5. Flow 문서 방향과 글의 방향에 구애받지 않아야 합니다. 5가지 센터링 방법 1. 콘텐트 센터 .content-center { display: grid; place-content: center; gap: 1ch; } 장점 * ..

useState 및 setState를 많이 사용들하고 계실텐데요. 한동안 React로 작업했다면 아마 useState를 사용했을 겁니다. 다음은 API의 간단한 예입니다. function Counter() { const [count, setCount] = React.useState(0) const increment = () => setCount(count + 1) return {count} } 초기 상태 값으로 useState를 호출하면 해당 상태값과 이를 업데이트하기 위한 메커니즘(dispatch 함수)이 포함된 배열이 반환되면서, 상태에 대한 새로운 값을 전달하고 구성 요소를 다시 렌더링하여 useState가 다시 호출되어 새 상태 값과 디스패치 함수를 다시 검색합니다. 그러나 가끔 사용할 수 있는 ..

Vue의 최근 변경사항들이 있습니다. Vue는 작업하기 쉬운 프런트 엔드 프레임 워크입니다. 앱을 쉽게 만들 수 있습니다. Vue 앱을 빌드 할 때 따라야 할 몇 가지 필수 규칙을 살펴 보겠습니다. Computed Properties에 대한 async 함수 없음 Computed properties는 동기 함수여야만 합니다. 비동기 함수를 사용하면 예기치 않은 동작이 발생할 수 있습니다. 위와 같이 작성해야만 합니다. 필드 이름에 중복 키 없음 구성 요소 개체에 중복된 필드 이름이 없어야합니다. 이것은 전체 개체에 적용됩니다. 따라서 예를 들어 메서드나 데이터에서 동일한 이름을 사용해서는 안됩니다. // 위와 같이 쓰지말고 아래와 같이 작성합니다. 템플릿에 중복 속성이 없어야합니다. // 위와같이 작성하는..