웹7 Nginx - React 설정 React 를 Nginx 웹서버를 이용해 배포하려고 할 때 기본적인 설정에 대해 알아보자. algosketch 의 환경 (참고로 AWS 는 putty 로 연결하여 사용하였다. putty 연결하는 방법을 모른다면 그냥 EC2 인스턴스에서 연결 누르고 웹 환경에서 조작하면 된다. Free Tier 말고 유료 버전도 쓰고 있는데 Free Tier 버전은 입력할 때 딜레이가 생긴다. 서버 스펙 차이인 듯...) AWS EC2 - Free Tier ubuntu 20.04 CRA(Create React App) 로 만들어진 React 프로젝트 1. nginx 설치 및 실행 sudo apt-get update sudo apt-get install nginx sudo service nginx start sudo ser.. 2021. 9. 9. React - 로그인 아직 해결 못 함. API : 서버에서 jwt 를 주면, 인증이 필요할 때 헤더에 담아서 보내면 된다. 여기서는 jwt 를 사용했지만 다른 방식은 세션 방식이 있다. jwt 는 서버에서 관리할 게 줄어들어 편하지만, 세션과는 다르게 한 번 발급한 jwt 는 다시 주워 담을 수 없다. 유효 기간이 긴 refresh token 과 유효 기간이 짧은 access token 두 개를 발급하여 관리할 수도 있지만 완전한 해결책은 아니다. 대신 jwt 방식의 장점이 세션 방식의 단점. 참고 자료 : https://youtu.be/1QiOXWEbqYQ 첫 번째 접근 : 서버에서 받은 jwt 를 전역 변수에 저장 후 (axios)요청시 헤더에 jwt 를 담아서 보낸다. 문제점 : React 는 새로고침하면 전역 변수가.. 2021. 8. 29. React - 경량화 (용량 최적화) 위 사진은 경량화 전 메인 페이지 기준 자원 다운로드 용량이다. 테스트는 개발자 도구 네트워크 탭에서 Disalbe cache 에 체크한 후 새로고침 하였고, AWS 에 배포된 상태이다. 1. 폰트 경량화 디자이너에게 받은 폰트들 중 Noto Sans CJK 의 otf 포멧의 폰트가 각 font-weight 별로 15 MB 정도의 용량을 가졌다. 메인 페이지는 font-weight 400, 500 을 사용하므로 폰트에만 30 MB 정도 사용했다. 1) 처음으로 시도한 건 otf to ttf 였다. 디자이너에게 받은 다른 폰트 (ttf) 는 용량이 굉장히 적어서 이를 변환해 주는 사이트가 있을 거라 생각하고 진행했다. 결과는 15 MB 하던 게 7 KB 정도로 1/2000 로 줄었는데, 테스트 해 보니 폰.. 2021. 8. 15. 웹 - css 연습 5 : Responsive Website! 원본 사이트 : https://jolly-kalam-23776e.netlify.app/restaurantwebsite/ 카피한 사이트 : https://hambp.github.io/WebPractice/restaurant 오래 작업했는데... 아직 미완성인... 여전히 정렬하는 건 감이 안 잡힌다. 그리고 이번에는 사용자 지정 속성(?)이라는 괴상한 것을 발견했다. grid 사용법을 연습했고 grid로도 flex-wrap 처럼 만들 수 있다는 것도 알게 됐다. 2020. 5. 2. 웹 - css 연습 4 : CSS Grid Responsive Site https://hambp.github.io/WebPractice/landing CSS Grid Responsive Site Web Development Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum culpa neque quo eum et quasi velit voluptatum cum maiores exercitationem. Mobile Applications Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum culpa neque quo hambp.github.io 오늘은 이 사이트를 완성(사실 미완성했지만 삽질 때문에 의욕이 떨어져서 중단)했다. 개발 환경이 파일을.. 2020. 5. 1. 웹 - css 연습 2, 3 두 번째로 만든 웹 페이지 https://hambp.github.io/WebPractice/surveyForm 세 번째로 만든 웹 페이지 https://hambp.github.io/WebPractice/parallax prallax website를 만들면서 느낀 거지만 css의 정렬 기능은 내 능력을 떠나서 잘못 되었다는 느낌이 든다. 태그를 혹은 그 태그를 감싼 div태그를 (가운데)정렬하는 방법은 여러 가지가 있다. 해당 태그의 마진을 이용하는 방법, 상위 태그의 패딩을 이용하는 방법, position: absolute 로 설정하여 좌표값을 이용하는 방법, float: center, text-align: center, display: flex에 justify-content: center 등... 거기.. 2020. 4. 27. 웹 - css 연습 1 https://www.geeksforgeeks.org/top-10-projects-for-beginners-to-practice-html-and-css-skills/ Top 10 Projects For Beginners To Practice HTML and CSS Skills - GeeksforGeeks A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions. www.geeksforgee.. 2020. 4. 24. 이전 1 다음
