본문 바로가기

분류 전체보기

 (90)
네이버클라우드에서 Nginx적용 후, 리액트 배포하기 기존 AWS의 EC2서버로 배포를 하는 것과 네이버클라우드에서 배포를 하는 것이 큰 차이가 없다. 큰 흐름은 다음과 같다. 네이버클라우드에서 일단 서버를 연다. (필자는 ubuntu를 사용했다.) 서버에서 nginx를 설치하고, nginx의 default설정을 살짝 바꿔주자. git에서 파일을 받아오든, 서버에 프로젝트파일을 가져와 빌드해서 nginx에 연결시켜주면 된다. 추가적으로, 보안인증서를 nginx와 letsencrypt를 사용하여 https도 연결해주자. 네이버클라우드에서 일단 서버를 연다. (필자는 ubuntu를 사용했다.) 이번 프로젝트에서는 회사에서 사용하고있던 기존 서버를 받아서, 이에 대한 자료가 거의 없다. 근데 서버를 설정하는 방법은 AWS와 크게 다르지 않을 것 같다. 가장 실수..
취업 후, 2주 취업을 하고 정신없이 2주가 흘러간 것 같다. 항상 기록하고 싶었으나, 아무래도 실제 서비스를 만들다보니 기록하기에 제약이 조금 있었던 것 같다. 그래도 이렇게 정신없이 흘러가는 것을 좋아하기도 하고, 이것이 스타트업에서 일하고 싶었던 이유이기도 하다. 대강 지금 하고있는 프로젝트를 얘기하자면, 세금관련 환급IT서비스를 만들고 있다. 그렇기에, 지금하고 있는 프로젝트가 여러 면에서 색다르다. 세금을 다루는 서비스다보니까 세무사분들과의 미팅도 잦다. 그렇기에 커뮤니케이션 방식이 기존 개발자들과 하던 방식과 아예 다르기 때문에 적응을 하는 시간이 필요했다. 현재 회사에서 고용한 디자인업체가 있는데 처음으로 실무에서 디자이너와 소통을 하고있는 것 같다. 결과적으로, 입사하고 2주 간 꽤나 많은 코드를 정신없이..
[ TypeScript ] "No overload matches this call" Props의 타입을 지정해주고, 아래와 같이 그 prop을 또 다시 스타일드컴포넌트의 컴포넌트로 넘겨주었다. 근데 다음과 같이 "No overload matches this call" 라는 오류가 발생하였다. overloaded function란 뭘까? 매개변수가 다르며 이름이 동일한 함수를 함수 오버로딩이라고 한다. 그러니까 결론은 overloaded function 내에서 지정한 매개변수의 타입과 실제 함수에 전달된 인자의 타입이 일치하지 않으면 발생하는 에러이다. 그러니까 위와 같은 오류가 발생하면 앞에서 지정한 타입과 실제 전달되는 인자의 타입을 잘 살펴보자. 필자와 같은 경우는 아래 이미지처럼 스타일드컴포넌트 코드에서 타입을 지정해주지 않아서 위와 같은 오류가 떳던 것이였다. 그러니까, 다시 p..
[ TypeScript ] import로 이미지 불러올 때 현재 기존 리액트프로젝트를 자바스크립트에서 타입스크립트로 바꾸는 작업을 진행하던 도중에, 이미지 파일을 불러올 수 없다는 오류가 발생하였다. 이미지도 따로 타입을 선언해주란 말인가..? 란 생각이 첫 번째로 들었다. 아래 이미지 속의 에러메시지를 해석해보자. 뭐 대충 모듈이나 선언된 형식을 찾을 수 없다는 얘기인 것 같다. 그래서 구글링을 해보았는 데, 명확한 해법이 나와있었다. 해법이 담긴 링크는 여기다. https://www.carlrippon.com/using-images-react-typescript-with-webpack5/ Using images in React and TypeScript with Webpack 5 How to configure Webpack 5 so that images ca..
[ 애플 웹사이트 클론 ] 캔버스 드로우 애니메이션 적용하기 2 저번 포스팅에서는 캔버스 내에서 좌우 흰색 영역을 설정하는 것까지 진행했었다. 이제 그 흰색 영역들의 X좌표를 이용하여, 스크롤에 따라 옆으로 이동시켜주기만 하면 된다. 구현순서는 아래와 같다. 캔버스가 시작하는 타이밍의 Y좌표 그 Y좌표부터 시작하여 스크롤섹션이 끝날때까지 애니메이션 설정 간단하다. 그럼 바로 Y좌표 (시작점)을 구해보자. 가장 간단한 방법으로는 getBoundingClientRect()라는 내장메소드를 사용하는 것이다. domRect = element.getBoundingClientRect(); 위의 메소드를 사용하면, 상대적인 뷰포트와 Y,X값 모두 알 수 있다. 하지만, 스크롤을 빠르게 느리게할때마다 다른 값이 출력되 이 방법으로는 딱 떨어지는 정밀한 애니메이션을 구현할 수 없다는..
[ 애플 웹사이트 클론 ] 캔버스 드로우 애니메이션 적용하기 1 이제 다음 구현해야할 애니메이션은 아래와 같다. 캔버스태그에 이미지를 그린 뒤에, 이미지가 스크롤을 내릴수록 점점 차오르는 애니메이션을 구현할 차례다. 점점 차오르는 구간은 이미지의 크기가 변하는 것이 아니라, 양 옆의 흰색 영역을 추가하여 흰색 영역의 X좌표를 조절하여 구현할 것이다. 그러기 위해서는 아래와 같은 순서가 필요하다. 캔버스가 윈도우창 비율에 맞게 항상 꽉 차야한다. 캔버스 양 옆에 흰색 영역을 그려, 스크롤을 내릴때마다 양 옆으로 좌표를 이동시켜준다. 가장 먼저, 캔버스태그를 윈도우창에 꽉 차게 만들어보자. const widthRatio = window.innerWidth / objs.canvas.width; const heightRatio = window.innerHeight / obj..
Vanilla JS로 SPA(싱글페이지) 구현하기 리액트 라이브러리만 써오다가, 바닐라 JS로 무언가를 만들 생각을 하니 벌써부터 막막하다. 하여튼, 넘블이라는 곳에서 챌린지를 신청하여 바닐라JS로 SPA를 만들어보기로 했다. 가이드라인 페이지는 아래와 같다. 필요한 조건은 API를 통해, 데이터를 불러와 동적으로 메인페이지를 구성해야함. 디테일페이지에서 해당 데이터를 불러와, 구성해주어야함. 글쓰기페이지 중요한거는 SPA로 구현을 해야한다는 점이다. 기존의 자바스크립트는 페이지를 이동할 때마다, url에 따라 정적파일을 서버로부터 받아오는 형태라면 SPA는 첫 로드시에 모든 html파일들을 다운받아 놓고 사용한다. 페이지는 굉장히 단순한데, 결국 라우팅을 어떻게 처리하냐가 관건일 것 같다. 그래서 바닐라JS로 라우팅을 구현하는 것에 대해 구글링을 시작..
아토믹 디자인 : 디자인 시스템의 필요성 디자인 시스템은 일관성있는 디자인을 위해, 회사 내부에서 만든 디자인 가이드라인이라고 생각하면 편하다. 런칭한 서비스가 여러 방면으로 확장되고, 회사 인력이 많아질 수록, 사용자들에게 일관성있는 경험을 제공하기 위해서는 꼭 필요한 서비스라고 생각한다. 그리고 이것이 나아가, 사용자들뿐만 아니라 개발자들에게도 일관된 경험을 제공하면서 협업에 굉장한 도움이 될 수 있다고 생각한다. ( 조직의 비용, 시간 손실을 줄여줄 수 있다는 것 ) 아, 그리고 디자인 시스템은 완성하는 것이 아니고, 계속해서 서비스와 함께 발전하고 확장되어가는 것이다. 오늘은 디자인 시스템 방법론 중 하나인, 아토믹 디자인에 대해서 알아보려고 한다. Atomic Design은 원자(Atom)에서 영감을 받은 디자인 시스템 아래와 같이, ..

티스토리툴바