FrontEngineer JungBam

보호되어 있는 글입니다.

React-native로 개발하던 중 프로필 이미지 작업을 하다가 React-native에서 기본적으로 제공하는 Image 컴포넌트보다 성능을 최적화 할 수 있는 FastImage 컴포넌트에 대해서 알게 되었다. 어떤 차이점이 있는지 살펴보고 어떤 상황에 어떤 컴포넌트를 사용하는 것이 좀 더 좋을지 고민해보자. 웹 성능최적화에서와 마찬가지로 프론트엔드에서 직접적으로 성능에 많은 영향을 미치는 것이 바로 이미지이다. 이미지를 효율적으로 로딩되도록 구현하여 성능을 최적화하는 것은 프론트엔드 개발자에게는 필수적인 덕목이다. 이러한 점에서 FastImage와 Image 컴포넌트를 비교해보자. Image와 FastImage에 대한 각각의 공식문서 내용을 정리해보면 아래와 같다. Image 컴포넌트 Image 컴포..

React Native에서의 gradle 에러 해결하기 클린빌드란 무엇인가? React Native에서 gradle에 관련된 오류를 종종 만날 수 있다. 나는 아래 와 같은 경우에서 이 gradle이라는 친구가 속을 썩였었다. - 디펜던시를 추가하고 작업하다가 다른 PC에서 작업을 시작하려고 할 때 - 협업을 하던 중 팀원의 코드와 병합하고 풀을 땡겨서 작업을 시작하려고 때 그 때 해결한 방법이 "클린빌드"라는 방법인데 오늘은 이 "클린빌드"가 어떤 것인지, 어떻게 하는지 알아보자. "클린 빌드"는 프로젝트를 처음부터 다시 빌드하고 이전 빌드의 결과물을 완전히 지우는 작업을 말한다. 클린 빌드는 개발 과정에서 발생하는 일부 문제를 해결하고 빌드 환경을 초기화하여 일관된 빌드 환경을 유지하는 데 도움이 ..

mac에서 react-native를 빌드할 때 발생하는 에러 중 하나! mac이 다 좋은데 이 권한 이슈가 계속해서 발생하는 것은 참 슬프다ㅠㅠ 해결방법은 간단! 터미널에 아래와 같이 명령어 입력해주면 끝! chmod 755 android/gradlew

jest를 이용하여 test코드를 작성하면 axios import 이슈가 발생한다. axios 깃헙에 jest test관련 이슈를 확인하면 해결방법이 몇가지 명시되어 있는데 해결방법을 해본 결과 버전을 다운하는 것 외에 다른 방법은 문제가 해결되지 않았다. Updating Axios from 0.27.2 to 1.0.0 breaks Jest tests in a create-react-app app · Issue #5026 · axios/axios I have several React applications created with a Typescript based create-react-app application (and using react-scripts@5.0.1, which depends on je..

1. 리팩토링이란? 소프트웨어 기능을 보존하면서 설계, 구조 및 구현을 개선 리팩토링을 할때에 기능을 추가하거나 버전을 업그레이드하는 것은 금지임. 기존의 코드를 개선하는 것이지 기능을 개선하는 것이 아니라는 것을 확실히 알아야 함. 2. 리팩토링을 하는 이유 - 유지보수가 용이해짐.(각각의 코드가 고유한 일을 수행하는 것이 보장됨.) - 추상화, 설계가 좋아짐에 따라 코드를 이해하고 의도를 파악하기 쉬워짐. - 기능추가, 확장이 용이해짐. - 버그를 수정하는 것이 빨라짐. 그럼 처음부터 설계하고 클린코드로 작성하면 되잖아? ☞ 개발 초기 설계는 최소한의 설계이지 완벽한 설계가 될 수 없음. 또한, 프로젝트가 커지면 커질수록 기능이 하나가 추가되더라도 매번 각각의 기능을 분리해서 추가하는 것은 어려움. ..

폰트 적용시점 때문에 내가 의도하지 않은 이슈가 생김. 웹폰트의 문제는 두가지로 정의할 수 있는데 FOUT(Flash of Unstyled Text)와 FOIT(Flash of Invisible Text)이다. 쉽게 말하면 FOUT는 웹 폰트가 다운로드 되기 전부터 컨텐츠가 노출되어 웹폰트가 적용되지 않은 텍스트가 노출되었다가 웹폰트로 적용되는 현상을 이야기하고 FOIT는 웹 폰트가 다운로드 될때까지 대기했다가 컨텐츠가 노출되어 내가 처음에 레이아웃과 함께 컨텐츠를 노출하고자 할때 에러사항이 있다. 이런 점들을 어떻게 개선시킬까? 고민하다가 유동균님의 강의에서 해당 방법을 찾을 수 있었다. 1. 폰트 적용 시점 컨트롤 하기 2. 폰트 파일 사이즈 줄이기 1. 폰트 적용 시점 컨트롤 하기 이 부분은 @fo..

퍼블리싱 수업을 받을 때 '시맨틱적이지 않아요.' 라는 리뷰를 받은 적이 있었다. 그 때의 나는 위의 그림과 달리 모든 요소들을 div 요소로 작성했었고 내 생각과 같은 결과물이 나왔기 때문에 이게 뭐가 문제지? 라는 생각을 했었다. 왜 html 요소를 시맨틱적으로 작성하라고 하는걸까? 시맨틱 태크란? 각 태그 요소에 의미가 부여된 이름이 있는 것이라고 생각하면 된다. 앞서 이야기 했듯이 위의 요소들을 모두 div 요소로 바꾼다고 해서 결과가 달라지거나 에러가 나지 않는다. 그런데 왜 시맨틱적으로 작성을 해야될까? html5에서 적용된 이유를 살펴보면 된다. ① 태그를 시맨틱적으로 작성한다면 흐름을 이해하기가 편하다. 즉, header 다음 main 다음 footer 라는 기본적인 흐름 안에서 작성이 된..