웹프로그래밍
-
[NextJS] 사용하는 이유와 SSR(Server Side Rendering)웹프로그래밍/Front-end 2023. 9. 14. 18:38
📌 NextJS를 사용하는 이유 1. 이미지, 글꼴, 빌드 등을 최적화 할 수 있는 툴이 내장 - 빌드엔 TurboPack 을 사용하여 빠른 빌드 가능 2. React 기반의 프레임 워크 3. CSR, SSR 지원 - SSR을 통한 SEO 강화 4. Node.js 기반으로 단일로 서버까지 구축하여 사용 가능 5. 라우팅의 편리함 6. 미들웨어 기능 정리하면 위와같은 이유로 NextJS를 사용할 수 있겠다. 일반적으론 SSR, SEO 때문에 사용하는 경우가 많은데, 사실 직접 써보면서 느낀 점이자, 주변에서 이야기하는 것을 들으면 가장 강력한 것은 원래면 별도의 최적화를 따로 해주어야하는 작업들을 NextJS 프레임워크 자체에서 지원해주는 기능이 많아서 그 "편의성"을 포기하기 어렵다는 점이다. 사실 위와..
-
[CDN] CloudFront + Lamda + S3로 이미지 서빙 과정웹프로그래밍/Etc 2023. 9. 13. 11:57
아무래도 정리하지않고, 이 전에 기억나는대로 말하다보니 말로 정리가 되지 않을때가 많다. 그래서 이참에 복기도 할겸 사용해보려고 한다. 📌 문제정의 기존에는 따로 CDN을 설정한 것이 아니라, 이미지 id 값을 전달받아서 사용하곤 했다. 물론 이러한 방식도 문제는 없었으나, 웹뷰 기반의 앱을 만들려고 보니 좀 더 이미지 서빙을 효율적으로 해야겠다는 생각이들어 CDN을 구축하기로 마음먹게되었다. 기존의 방식으로도 문제가 없어서, 최초에 이야기를 할 땐 그냥 쓸까? 했지만, 결국 어드민에서 업로드 하고 실 앱에서는 cdn 서버를 통해서 이미지를 가져오고 람다에서 이미지 리사이징 처리를 해주는 것이 좋겠다는 판단이 들었다. Next.js를 사용하고 있었기에 'loader' 등을 이용해서 편리하게 CDN 쿼리스..
-
[Bundler] 모듈 번들러(Module Bundler) - Webpack웹프로그래밍/Front-end 2023. 9. 12. 15:01
📌 Webpack에 대해서 알아보기 1. 웹팩의 역할은? 웹팩 사이트에 의하면 내부적으로 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 "디펜던시 그래프'를 만든다. 엔트리포인트에서 시작하여 웹팩은 애플리케이션에 필요한 모든 모듈을 포함하는 "디펜선시 그래프"를 "재귀적"으로 빌드하고 모두 하나 혹은 여러개의 번들 단위로 묶게된다. 2. 웹팩에서의 주요 개념 (1) Entry 엔트리 포인트는 웹팩의 디펜던시 그래프를 생성하기 위해 사용하는 모듈이다. 웹팩은 엔트리 포인트를 통해 직간접적으로 의존하는 다른모듈과의 라이브러리를 찾아낸다. (말 그대로 시작점) 엔트리 포인트를 잘못 설정하는 경우, 빌드 후 배포했을 때 흰화면이 나올 수 있기 때문에 배포환경에서 엔트리 포인트를 잘 설정해주..
-
[Bundler] 프론트엔드에서 모듈 번들러(Module Bundler)웹프로그래밍/Front-end 2023. 9. 12. 01:16
📌 모듈 번들러는 왜 등장했을까? (1) 모듈은 무엇인가? 모듈은 어플리케이션을 구성하는 개벌적 요소로 재사용 가능한 코드 조각을 이야기 한다. 일반적으로 모듈은 "💾 파일단위"로 분리를 한다. 이때, 모듈 성립에 중요한 요건은 "💾 파일스코프"를 가질 수 있어야 한다는 점 이다. 파일 스코프를 가지는 모듈의 모든 자산은 "💰Private" 이며 캡슐화되어 다른 모듈에서 접근 할 수 없도록 되어있는 것이다. 하지만 기본적으로 모듈은 "재사용 가능"해야하므로 이를 선택적으로 "📡Public" 하게 오픈할 수 있도록 되어있다. 그것이 바로 "📦Export" 로 표현한다. 또, 공개한 자산 중 이를 일부/전체를 선택하여 자신의 스코프로 불러들여 사용하는 것을 "📜Import"라 표현한다. (2) 모듈을 사용했..
-
[HTTP] HTTP에 관해서웹프로그래밍/Front-end 2021. 8. 10. 18:30
🏠 HTTP 📚 1. HTTP 브라우저와 서버 간에 데이터를 주고받기위한 방식 인터넷 상에서 데이터를 주고 받기위한 서버/클라이언트 모델을 따르는 프로토콜 애플리케이션 레벨의 프로토콜로 TCP/IP 위에서 작동 어떤 종류의 데이터든지 전송할 수 있도록 설계되어있고, 이 데이터는 HTML 문서, 이미지, 동영상, 오디오, 텍스트 문서 등 이다. 기본적으로 클라이언트는 URI를 통해 서버에 접속하고, 웹 서버는 표준 포트인 80번 포트로 서비스 한다. 기본적으로 Connectionful 하지 않고, less 하다. (요청하고 응답받으면 연결을 끊는방식. 연결을 끊으므로 이전의 상태를 유지하지않아 stateless 하다. 📚 2. HTTP와 HTTPS의 차이 기본적으로 둘다 브라우저와 서버 사이의 데이터를 주..
-
{VanillaJS} 프레임워크없는 개발 - 1웹프로그래밍/Front-end 2021. 8. 8. 17:09
최근에 책을 샀다. 프레임워크없는 개발이라는 책이다. 생각보다 책이 인상깊어 읽기시작 한지 약 2시간 정도만에 책을 다 읽었다. (코드 X 글만) 책은 흐름이 매우 탄탄하게 잘 짜여져있어 굉장히 읽기 좋았다. 책이란 쓰여진 목차가 있고, 그 목차는 흐름대로 구성되어있어야 제일이다. (이때, 흐름이란 말그대로 의식의 흐름... 아, 이게 나왔으니 다음은 이건가?) 가끔씩 중구난방식 목차가 되어있고, 그 목차대로 흘러가는 책들이 답도없는 경우가 종종있었기에 이 책의 흐름은 굉장히 부드럽고 읽기 좋게 작성되었다는 인상을 받았다. 그래서 이 책을 읽고, 말 그대로 프레임워크없는 개발이 하고 싶었다. 물론 내 머릿속에서 다 나온 것은 아니고, 해당 책에서 나온 내용을 바탕으로 내 손에 가장 익은 흐름으로 작성하기..
-
[React] Strict 모드웹프로그래밍/Front-end 2021. 8. 4. 12:30
🚚 Strict 모드 어플리케이션 내의 잠재적 문제를 알아내기 위한 도구. Fragment와 같이 UI를 렌더링 하지 않으며, 자손들에 대한 부가적 검사와 경고를 활성화 하는 기능임. 해당 모드는 개발 모드에서만 활성화도므로 프로덕션 빌드시에는 영향을 끼치지 않음.👑 StricMode가 도움을 줄 수 있는 부분 ✔ 안전하지 않은 생명주기를 사용하는 컴포넌트 발견 향후 서드파티를 이용할 때 발생할 수 있는 생명주기 문제를 해결하는데 도움됨. 사실 생명주기에서 문제가 발생하는 경우에 발견이 어려운데(특히 Hooks 사용하는 경우) 그 부분에서 일정 부분 Document 상으로는 도움을 줄 수 있을 것으로 보인다. ✔ 권장되지 않는 findDOMNode 사용 경고 ref로 해결할 수 있는 문제를 findDOM..
-
[토큰기반인증] 토큰을 어디에 저장할까웹프로그래밍/Front-end 2020. 12. 23. 17:57
맨날 백엔드에서만 처리하다가 프론트엔드에서 처리하려니 갑자기 보안이 걱정되서 열심히 이것저것 자료를 찾아보았다. 결론은 뭘 어찌해도 털릴 것은 털린다라는 점이다. -localStorage/sessionStorage : XSS 공격에 취약. -cookie : httpOnly 플래그로 XSS에 비교적 안전. 그러나 CSRF 공격에 취약. 그래도 cookie를 사용하되, httpOnly 플래그와 함께 secure 플래그를 사용하는 것이 비교적 안전하게 느껴지는데 아무래도 https를 사용해야 secure 플래그를 사용할 수 있고, https 자체가 보안을 제공하기 때문인 것 같다.