react
-
웹팩(Webpack)간단정리 2020. 12. 9. 13:21
웹팩 너란 녀석 프로젝트를 진행 하다 보면 어떤 이유에서인지 결국 webpack(이후 웹팩)을 만나게 된다. 웹팩이 파일들을 bundle.js로 export해주는 것은 이해하고 있지만 정확한 개념과 동작방식을 알아볼 필요가 있을 것 같다. 내가 너를 만나게 된 이유 파일 압축은 방법에 따라 달라지지만 우리가 흔히 사용하는 기본 압축은 파일 용량을 줄이는 압축이 아니다. 파일 이동, 다운로드를 경험한적 있는가? 3만개의 파일을 이동하는 것과 압축 된 1개의 파일을 이동하는 것은 같은 용량이여도 큰 시간 차이를 만들어낸다. 서비스를 개발 하며 확장성, 재사용성을 위하여 각 기능별로 파일을 분리하고 성격에 따라 경로도 달라진다. 하지만 위의 압축의 예시와 같이 여러개의 파일을 서버에서 내려 받고 로딩하는 것은..
-
[React] 클래스 컴포넌트와 함수 컴포넌트간단정리 2020. 12. 4. 17:27
1. 개요 1-1. 클래스 컴포넌트와 함수 컴포넌트 - React에서는 두 가지의 컴포넌트 형태가 존재한다. - 흔히 한국에서는 클래스형, 함수형 컴포넌트라고 말하지만 공식 문서에 따르면 클래스, 함수 컴포넌트가 옳바른 표현이다. (함수형 이라고 하면 오해가 생길 수 있기 때문이다.) // 안녕 난 클래스 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } // 안녕 난 함수 컴포넌트 function Welcome(props) { return Hello, {props.name}; } 1-2. Hooks의 점진적 업데이트 React 공식 문서를 확인 해보면 페이스북 또한, class컴포넌트를 ..
-
[RN] 안드로이드스튜디오 갤럭시 디바이스 추가React-Native 개발중 2020. 11. 15. 21:44
약 1년 6개월 전에 React-Native로 앱을 만들었다. 최근 다시 React-Native로 앱을 만들다 문득 안드로이드 에뮬레이터에 진짜 갤럭시를 띄울 수는 없을까? 생각했다. 굉장히 당연한 이야기일 수 있지만, xcode는 업데이트만 해도 자동으로 최신 아이폰 기종들을 테스트 해볼 수 있는 반면 Android Studio는 달랐다. 오늘은 이 꽉 깨물고 갤럭시를 추가해보자. (1) 스킨 다운로드 삼성 형님들은 다 계획이 있으셨다. 원하는 디바이스의 스킨을 다운 받자. (링크) Emulator Skin - Build | Samsung Developers The world runs on you. developer.samsung.com (2) 경로에 갤럭시 디바이스 스킨 파일 넣기 아래와 같이 설명 ..
-
[회고] 홀로선 첫 번째 웹 프로젝트회고 2020. 9. 28. 16:46
2020년 3월 부터 약 6개월동안 웹 프로젝트를 진행하였다. 입사를 하자마자, 우연히 기존 개발자들과 바통터치를 하게 되면서 프론트엔드 프로젝트의 설계 부터 세팅까지 맡게 되었다. 나름대로 주니어의 모습에서 벗어나고 있다고 생각하지만 약 4년 7개월 동안 게임 개발자, 앱 개발자, 블록체인 서비스 개발자, 웹 개발자로 탈바꿈을 하다 보니 특정 한 분야의 깊이가 부족했다. 천년만년 팀원 중에 날 리드 해줄 사수가 있다고 생각 했는데. 새삼 나의 경력에 무게를 느끼게 되었고, 두려움 속에 반년의 시간을 보냈다. 결론적으로 많은 성장을 했지만, 나의 부족함에 아쉬움 또한 많이 남았다. 하지만, 이 경험이 나를 성장 시키는 하나의 성장통이라고 생각 하고, 해당 프로젝트가 세상의 빛을 볼 수 있을지 아직 모르겠..
-
[React, TS] react-router 페이지 전환시 ScrollToTop 예제 코드간단정리 2020. 9. 17. 18:34
페이지 전환시, 스크롤 초기화가 필요해졌다. 꼭 필요하지 않아도, 해당 기능을 넣어 놓는것이 좋을 것 같다고 판단했다. '유저가 정말 작은 화면으로 높이를 고정해서 보고 있을 수도 있겠지..?' 여러가지 방법이 있겠지만, 가장 간단한 방법인 것 같고, 타입스크립트 예제가 없어 혹여 누군가에게 도움이 될 수도 있으니 포스팅 한다. 각 페이지, 특정 조건 마다 스크롤을 제어해주는 것을 제외하고 페이지가 전환 될 때(= 라우트가 변경될 때) 마다 각 페이지 별로 componentDidMount()에 입력하기에는 번거롭다. 그래서 아래 예제를 사용한다. 공식 문서에도 예제가 존재한다. 하지만, 해당 예제에서 새로고침이 발생 되었을 때는 스크롤 이벤트가 작동 되지 않는다. (1회) 검색 해보니, 해결법으로 set..
-
MobX @action @computed 간단 정리간단정리 2020. 7. 3. 18:43
이미, 개념으로는 너무 좋은 글들이 많아 가볍게만 작성 하고, 저번 프로젝트 때 나의 mobx 사용이 왜 잘 못 됬는지. 실수한 방법만 기술하자! 좋은 정리 글 (링크) MobX란? MobX는 상태 관리 라이브러리다. React, React-Native 등에서 사용 되며, 가장 많이 비교 되는 것으로는 Redux가 있다. MobX와 Redux의 가장 큰 차이점은 러닝커브라고 생각한다. MobX는 Observable 데코레이터만 잘 사용하면, 쉽게 상태를 변경할 수 있다. 그에 반하여 Redux는 여러 연관 된 라이브러리를 사용해야하고, 러닝커브가 많이 높다. 처음엔 '어려운 것이 좋은 것'이라는 생각이 있었는데. 아직 MobX에 부족한 점을 느끼지 못하여, Redux를 사용해보고 있지 않았다. 최근에 프..
-
`React.PureComponent` 이놈을 알아보자.간단정리 2020. 6. 2. 14:27
PureComponent란? React에서는 3가지 Component들이 존재한다. React.Component class Ryuk extends Component { render() { return( 안냐세여 ) } } React.PureComponent class Ryuk extends PureComponent { render() { return( 안냐세여 ) } } Function Component const Ryuk = () => { return ( 안냐세여 ); }; 각 컴포넌트들의 세세한 특징들이 있겠지만, 우리는 PureComponent 와 Component의 차이만 간단하게 짚어보자. 열심히 검색을 하다보면 두 컴포넌트의 차이는 shouldComponentUpdate() 라이프 사이클이라는..
-
React Styled-Components Font ReloadingIT 지식 2020. 5. 4. 15:41
Tech stack FrameWork - React Language - Typescript State Management - MobX UI Library - Styled-Components 사건의 발단 작업을 하는 도중, 버튼 이벤트 발생 시 화면이 깜빡 거리는 현상을 발견하게 되었다. 대수롭지 않게 생각하기에는 나름 유저가 느낄 불편함이 크다고 판단하여, 원인을 파악해보자 다짐했다. [첫 번째 접근] Code Review 불행인지, 다행인지 간헐적으로 발생하지 않았고 꾸준히 발생하는 문제였다.. 내가 볼 코드는 Button Component 부분이였다. styled-components를 이용한 스타일 코드에 삼항 연산자들이 많았다. 프로젝트에 Default 스타일들이 존재 할 것이고, 추후 이벤트에 대..