반응형 분류 전체보기50 next.js 에 typescript, storybook 설정하기 🎠 내 tmi... 쿠키파킹의 웹사이트는 원래 react.js로 개발했었다. 쿠키파팅 서비스에는 디렉토리 공유 기능이 있다. 우리는 사용자들이 카톡으로 공유 링크를 전달하는 경우가 많을 것이라고 예측했다. 카톡으로 웹 사이트 링크를 전달하는 경우 카톡에서 자체적으로 메타태그들을 인식해서 사이트 이름, 썸네일 등을 띄워준다. 그런데 spa 특성상 공유 링크를 전달하게 되면, 디렉토리에 해당하는 메타태그들 값이 뜨는 것이 아니라 모든 페이지가 동일한 값이 뜬다는 불편함이 있었다. 그래서 이 문제를 해결하기 위해 웹 사이트를 next.js로 바꾸기로 결정했다. 앞으로 추가하게 될 기능들이나, SEO를 위해서도 next.js로 바꾸는 것이 맞는 선택이라고 생각했다. 이왕 옮기는 김에 typescript로 전환하.. 2021. 7. 25. ReactComponent를 통해 svg 를 컴포넌트처럼 사용하기 ReactComponent를 통해 svg 파일을 컴포넌트처럼 사용하면 fill 속성을 변경하여 svg 에셋의 색을 설정할 수 있다! svg 파일 코드를 뜯어보면 다음과 같다 혹은 이런 형식이다. 첫번째 svg의 경우 색상을 바꾸는 방법은 다음과 같다. import styled from "styled-components"; import { PlusIcon } from "@assets/icons/common"; const IconBox = () => { return ( ); }; const Container = styled.div` width: 20px; height: 20px .plus_icon{ width: 10px; height: 10px; path { fill: #ffffff; } } `; 이렇게 s.. 2021. 7. 24. 서버 개발부터 배포까지(4): 로드밸런서 설정하기 2021.07.16 - [서버 개발/AWS] - 서버 개발부터 배포까지(3): elastic ip, route53, https 설정하기 서버 개발부터 배포까지(3): elastic ip, route53, https 설정하기 ec2 인스턴스를 생성하여 서버를 배포하였다면, 부가적으로 필요한 것들을 설정해줄 차레이다. 아직 인스턴스를 생성하지 못했다면 아래의 게시물을 보고 먼저 인스턴스를 생성하자. 2021.07.14 - [ carpediem9911.tistory.com 이전 글에서 https 설정까지 완료했었다. 이제 https를 통해 우리 서버에 요청을 보내면 443번 포트, http를 통해 요청을 보내면 80번 포트로 들어오게 된다. 그런데 우리가 만든 코드는 5000번 포트를 열어놓도록 설정해놓았다... 2021. 7. 22. 서버 개발부터 배포까지(3): elastic ip, route53, https 설정하기 ec2 인스턴스를 생성하여 서버를 배포하였다면, 부가적으로 필요한 것들을 설정해줄 차레이다. 아직 인스턴스를 생성하지 못했다면 아래의 게시물을 보고 먼저 인스턴스를 생성하자. 2021.07.14 - [서버 개발/AWS] - 서버 개발부터 배포까지(2): aws로 서버 배포 서버 개발부터 배포까지(2): aws로 서버 배포 우리가 만든 api를 웹 개발 팀원들이 사용하기 위해서는 서버를 배포해주어야 했다. 그래서 ec2를 사용하여 배포하기로 결정하였다. 1. ec2 인스턴스 생성하기 먼저 aws에 로그인하여 콘솔에 접속해 carpediem9911.tistory.com 1. elastic ip 설정하기 생성한 인스턴스에 대한 정보를 보면 퍼블릭, 프라이빗 ip 주소 등이 있을 것이다. 하지만 이러한 ip 주.. 2021. 7. 16. 서버 개발부터 배포까지(2): aws로 서버 배포 우리가 만든 api를 웹 개발 팀원들이 사용하기 위해서는 서버를 배포해주어야 했다. 그래서 ec2를 사용하여 배포하기로 결정하였다. 1. ec2 인스턴스 생성하기 먼저 aws에 로그인하여 콘솔에 접속해야 한다. https://ap-northeast-2.console.aws.amazon.com/console/home?region=ap-northeast-2 https://ap-northeast-2.console.aws.amazon.com/console/home?region=ap-northeast-2 ap-northeast-2.console.aws.amazon.com 만약 계정이 없다면 계정을 만들어야 한다. 나의 경우는 돈이 없는 대학생이기 때문에 프리티어로 계정을 생성하였다. 로그인을 한 후 상단 헤더에서.. 2021. 7. 14. 서버 개발부터 배포까지(1): typescript 설정 동아리에서 진행하는 3주간의 프로젝트에서 서버 개발을 담당하게 되었다. 서버 개발은 처음이라 시행착오도 굉장히 많았는데, 그래서 내가 겪었던 오류와 해결책들을 정리해보고자 한다! 협업에서는 typescript로 개발하는것이 유지, 보수에 좋다고 하여 우리도 typescript를 사용하기로 했다. 그리고 디렉토리 구조가 복잡해질 것을 대비해 절대경로를 사용하기로 하였다. 그런데 typescript와 절대경로를 사용하니 예상치 못한 여러 에러들에 부딪혔다. 결론부터 말하자면 결국 우리는 절대경로를 포기하였다ㅠㅠㅠ 그 이유는 아래에서 설명할 것이다. 1. tsconfig.json 설정하기 typescript를 사용하기 위해서는 tsconfig.json을 작성해주어야 한다. 우리 프로젝트에서는 다음과 같이 ts.. 2021. 7. 14. 이전 1 2 3 4 5 6 7 ··· 9 다음 반응형
