웹프로그래밍/Front-end
-
[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 프레임워크 자체에서 지원해주는 기능이 많아서 그 "편의성"을 포기하기 어렵다는 점이다. 사실 위와..
-
[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 자체가 보안을 제공하기 때문인 것 같다.
-
[💾프론트엔드] 기본 지식 정리 - 4웹프로그래밍/Front-end 2020. 12. 21. 17:45
참고 프론트엔드 개발자 기술면접 인터뷰 질문면접 URL : realmojo.tistory.com/300 11. 실행 컨테스트(Excution Context) 참고 도서 : 코어자바스크립트 일부 발췌. 📚 실행 컨테스트 📌 정의 : 실행할 코드에 제공할 환경 정보를 모아놓은 객체로 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 Context를 구성하고 이를 Call stack에 쌓아올렸다가 가장 위에 쌓여있는 Context와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장함. 📌 순서 (1) JS 파일 실행시 전역 Context 생성 (2) 함수 호출 순서대로 실행 Context 생성 (3) 쌓인 Stack 순서(Stack이니까 LIFO)로 Call stack 에서 ..