Home

사용중인 포트 프로세스 찾아서 종료시키기

문제프로젝트에서 서버를 npm run dev npm run start를 통해서 실행했을때, 사용하지 않아도 실행되어있는 경우가 있다.일반적으로 8080과 3000을 많이 사용하는데, 실행이 안된다면, 포트 프로세스를 종료시키는 방법을 사용하면 된다. 해결책8080포트가 접속중인지 확인해 본다. 1lsof -i tcp:8080 다음 명령어소 8080포트를

Nextjs typescript 절대경로 설정하기

시작하기상대경로를 사용할 시 패키지 구조가 깊어질 경우 import시에 많이 번거로워지게 됩니다.작은 규모의 어플리케이션이라면 상관없지만 규모가 커질수록 꼬이기 쉬워집니다. 상대경로 1import Acomponent from ‘../../../../component/Acomponent’; 절대경로 1import Acomponent from ‘src/com

package.json에 종속되어있는 패키지 최신화하기

시작하기npm-check-updates을 사용해서 package.json의 devDependencies, dependencies에 종속되어 있는 패키지를 간편하게 최신화 할 수 있다. 패키지 설치npm-check-updates 패키지를 설치합니다. 1npm install -g npm-check-updates 버전확인하기다음 명령어를 입력해서 구버전들을 확

heroku node 서버 배포하기(typescript)

node js 를 이용해서 heroku 서버 배포하기프로젝트 생성12mkdir heroku-nodejs-typescriptcd heroku-nodejs-typescript 초기 설정npm 기본 설정값을 생성합니다. 1npm init -y npm 패키지 설치타입스크립트를 포함하여 express를 설치하여 줍니다. 1npm i @types/express @

Styled-components Typescript 적용하기 (+Media query)

시작하기기존에 styled-components 반응형 및 스타일 리셋 설정하기 포스트을 통해서 스타일 최초 설정해보았습니다. theme를 입력했을때 typescript로 자동으로 연결해주는 부분이 미흡했습니다. 타입스크립트를 styled-components 와 제대로 사용해보도록 하겠습니다. 설치하기1npm i styled-components &&a

Favicon 웹사이트에 적용하기

시작하기파비콘(favicon)이라는 명칭으로 웹사이트 상단 탭에 나오는 아이콘 혹은 브라우저 어플 아이콘등을 뜻합니다.주로 웹사이트를 대표하는 로고를 많이 사용합니다. Favicon 만들기로고파일(png, jpg등)을 준비해줍니다.파비콘 파일을 만들어 주는 Favicon Generator사이트로 이동합니다. 파일 등록 버튼을 눌러 파일을 업로드 합니다.이후

리액트 프로젝트에 폰트추가

시작하기리액트 프로젝트에서 폰트를 추가 하는 방법을 알아보겠습니다.구글 폰트에서 링크를 통해 적용하는 방법과 폰트를 다운로드해서 프로젝트에 적용하는 방법이 있습니다. 구글 웹폰트를 통해서 적용하기 프로젝트에 직접 적용하기 구글 웹폰트를 통해서 적용하기구글 폰트 사이트에 접속해서 마음에 드는 폰트를 찾습니다. 폰트를 찾았다면 해당 폰트를 선택하고 하단에

Rollup을 사용해서 npm 배포하기

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

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

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

flutter에서 bottom Navigation 구현하기

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