Dgos

dongjune's dev blog

concurrently package를 이용한 React, Node.js 개발 설정

React 서버와 Node.js 서버 동시 실행

우선 프로젝트의 루트 폴더에서 concurrently package를 설치해줍니다. 1 $ npm i -D concurrently -D는 devDependencies에 설치한다는 것을 뜻합니다. package.json 파일을 보면 다음과 같이 설치된 것을 확인할 수 있습니다. 이제 package.json의 script를 수정해줍시다. 1...

Posted by dongjune on December 9, 2020

[Node.js] address already in use 에러 해결하기

macOs, Linux 해결방법

npm run 명령어를 사용하여 nodejs를 실행하려 할때 다음과 같은 오류가 발생할 때가 있습니다. 포트가 이미 다른 프로세서에서 사용중이기 때문에 발생하는 오류입니다. 현재는 5000번 포트가 사용중이라서 에러가 났습니다. lsof 명령어를 통해 터미널에서 활성화 된 프로세스들의 리스트를 확인할 수 있습니다. -i 를 통해 특정 포트를 ...

Posted by dongjune on December 9, 2020

Node.js Express 로 서버 구축하기

create http server

기본 Setting 우선 express 패키지를 설치해줍니다. 1 $ npm i express 이제 package.json을 생성하기 위해 다음 명령어를 수행해줍니다. 1 $ npm init -y 루트 폴더에 package.json이 설치 된것을 확인 할 수 있습니다. 그리고 nodemon 도 설치해줍니다. 1 $ npm i nodemo...

Posted by dongjune on December 6, 2020

[iOS] Alignment Constraints - Swift

Auto Layout and Responsive UIs

지난 포스팅에서 Pinning Constraints에 대해 알아봤습니다. 하지만 Auto Layout을 위해서는 Pinning Constraint 만으로는 충분하지 않습니다. Pinning Constraint의 문제점 버튼을 화면 중앙에 위치시키는 것을 생각해봅시다.만약 Pinning으로 이것을 설정한다면 어떻게 될까요? 다음과 같이 세로뷰에서는 잘 ...

Posted by dongjune on December 6, 2020

[iOS] Pinning Constraints - Swift

Auto Layout and Responsive UIs

Constraints가 필요한 이유 아래의 초록색 Image View만 추가해 놓은 앱을 살펴봅시다. 현재 세로뷰에서는 정상적인 모습이지만 화면을 가로로 돌린다면 어떻게 될까요? 아래의 그림 처럼 이미지뷰가 화면에 고정되지 않고 밖으로 나가버리게 됩니다. 이와 같은 현상을 방지하기 위해 저희는 이미지뷰와 같은 컨텐츠 들을 고정 할 필요가 있는데 ...

Posted by dongjune on December 6, 2020

[React] react-router-dom 사용하기

BrowserRouter,Route,Link,Switch

react-router-dom 은 SPA 구현에 사용되는 React의 package입니다. SPA 란? SPA는 Single Page Application 의 약자입니다. 화면의 header와 footer와 같이, 페이지를 이동해도 변하지 않는 요소들이 있습니다. 이때 매번 화면을 이동할 때 마다 모든 요소들을 렌더링하는 것은 비효율적 입니다. S...

Posted by dongjune on December 3, 2020

[Algorithm] 최대공약수와 최소공배수 - C++

유클리트 호제법

유클리드 호제법 유클리트 호제법을 통해 두 수의 최대공약수를 손쉽게 구할 수 있다. 우선 정의를 살펴보자. a,b 가 정수이고 a>=b 라고 하자. 그리고 a 를 b로 나눈 나머지를 r 이라고 하자. 이때 a와 b의 최대공약수를 (a, b)라고 하면 (a, b)=(b, r)이 성립한다. 정의만 봐서는 무슨 소리인지 알기 어려우니 예시를 살펴보...

Posted by dongjune on December 2, 2020

[Project] corona tracker - React

react project

Github Repository Github page Description 나라 별 코로나 확진자, 완치자, 사망자를 볼 수 있는 앱 1. 개발언어 React 2. 주요 기능 전 세계의 코로나 확진자, 완치자, 사망자를 수치와 그래프로 보여준다. 국가를 선택하여 국가 별 코로나 현황을 볼 수 있다. ...

Posted by dongjune on November 27, 2020

[Project] Tinder Clone - React

MERN stack

Github Repository Tinder Clone App Description 간단한 tinder clone 앱 React의 TinderCard Component를 사용하여 사진을 swipe 하여 넘기기 가능 MERN (MongoDB, Express, React, Node.js) stack을 사용한 Web app ...

Posted by dongjune on November 26, 2020

[React] 프로젝트를 Github pages로 배포하기

react, deploy

시작하기에 앞서 배포 결과부터 확인해보자. 위 사진은 Github pages로 직접 배포한 react 웹 앱이다. 주소는 https://donggoolosori.github.io/tinder-clone 으로, 성공적으로 배포 된 것을 확인 할 수 있다. (gh-pages로 배포 하기 위해서는 프로젝트가 Github repository와 연결 돼 있어...

Posted by dongjune on November 26, 2020

FEATURED TAGS
BOJ Programmers React Computer Vision JavaScript Machine Learning Algorithm iOS Node.js Project TypeScript NestJs Server Leetcode Swift AWS DB Data Structure Job MySQL
ABOUT ME

도전하고 실패하자