Home

2021
frontendDevEnv

Rollup을 사용해서 npm 배포하기

시작하기제작중인 라이브러리를 npm에 배포하는 방법입니다.webpack 도구와는 조금 다른 rollup을 사용해서 번들링 하도록 하려고 합니다.webpack을 쓸 수도 있는데 rollup을 쓰는 이유는 webpack은 ES Module 형태로 번들을 할 수 없습니다.webpack을 사용 할 때에는 일반적으로 commonjs 형태로 번들링을 하게 됩니다com

frontendflutter

flutter에 스타일(margin, padding, border, border-radius) 적용하기

시작하기웹에서 엘리먼트에 스타일을 넣으려면 css를 사용하는 것은 대부분 아는 사실입니다. 크로스 플랫폼의 react native의 경우에는 js와 같은 방식으로 사용합니다. 하지만 사용방법은 크게 다르지 않죠. flutter에서는 margin, padding, border, border-radius 등을 어떻게 넣을 수 있을까 사용해보도록 하겠습니다. 기

frontendflutter

flutter에서 bottom Navigation 구현하기

시작하기어플리케이션을 사용해보면 하단에 스크린을 손쉽게 이동할 수 있도록 도와주는 네비게이션이 있습니다. 플러터에서도 이 네비가 탑재가 되어있습니다. 구현하기기본 MyApp에서 MyBottomNavigationBar 클래스를 MaterialApp 내부 home에 실행시켜주도록 합니다. main.dart123456789101112131415161718192

frontendReactNative

react native android 시작시 adb 에러

시작하기react native에서 시뮬레이터가 켜져 있는 상태인데도 npm run android를 하면 adb command not found와 같은 에러가 날때가 있습니다. android studio를 설치하면 자동으로 adb가 설치됩니다.react native 프로젝트를 시작할때 에러가 나오는 것은 경로가 설정이 제대로 되어있지 않기 때문입니다. 해결하

frontendflutter

flutter(플러터) 초기설정 - mac

시작하기플러터는 구글이 개발한 오픈소스 크로스 플랫폼 개발 프레임워크입니다.크로스 플랫폼이란 react native 와 같이 하나의 개발을 통해 ios, android 개발을 동시에 진행 할 수 있어서 생산성이 높습니다.기존에 react native를 사용해보았기에 flutter와 미약하나마 다른 점을 확인할 수 있었습니다.react native는 자바스크

Js / Tsjavascript

throttle(쓰로틀링) 과 debounce(디바운싱)로 성능 향상 시키기

시작하기사이트 퍼포먼스를 향상 시키기위해서 사용하는 방법 중 하나입니다. 스크롤 혹은 인풋 박스에서 너무 많은 이벤트를 호출하여 불필요한 메모리를 소모하여 퍼포먼스를 떨어뜨립니다. 이 문제를 해결하기 위한 방법으로 Throttling(쓰로틀링)과 debouncing(디바운싱)이 있습니다. 기본 개념쓰로틀링은 마지막 함수가 호출된 이후 지정한 시간이 지나기

2020
frontendreact

Gatsby에 markdown 설정하기

시작하기gatsby는 정적 페이지로 제작시 많이 이용합니다. 예로 블로그나 소개 페이지 같은 경우에 용이합니다.데이터 베이스를 연결하지 않고 markdown파일로 글을 작성 후 데이터를 불러와 화면에 뿌릴수 있습니다.markdown파일로 작성시 재사용에 좋습니다. 그러면 gatsby에 markdown를 추가해보도록 하겠습니다. 플러그인 설치기존에 설치되어있

backenddevOps

AWS EC2 forever사용하기

시작하기forever 설치하기설치하는 방법은 간단합니다. ec2에 연결되어있는 상태에서 다음 커맨드를 입력합니다. 1npm install forever -g forever를 글로벌로 설치해줍니다. 다음 커맨드를 입력해 서버를 실행하겠습니다. 123cd 해당프로젝트forever start -c "npm run start" ./# 예시) forever sta

backenddevOps

AWS linux2에서 certbot nginx 인증하기

시작하기https를 사용하기 위해서는 인증을 해야합니다. 여러 인증하는 방법중에 nginx와 certbot을 이용한 인증 방법을 하도록 하겠습니다. 확인하기1yum repolist 커맨드를 입력했을시 EPEL (Extra Packages for Enterprise Linux)이 없다면 certbot을 설치할 패키지를 가지고 있는 저장소가 없다는 뜻입니다.

backenddevOps

AWS route53를 이용해서 vercel 도메인 연결하기

시작하기도메인을 구입한 상태여야 합니다. vercel 설정vercel로 접속해 해당 프로젝트에 edit을 버튼을 클릭합니다. 도메인 탭으로 들어와서 구입한 도메인을 입력합니다.에러가 나오면서 다음과 같은 값이 나옵니다. value라는 값을 복사해줍니다. Route53에서 사용할 값입니다.에러를 해결하기 위해서는 aws에서 설정해주어야합니다. Route