Firewalld는 리눅스 시스템의 네트워크 보안을 관리하는 데 사용되는 도구, 이를 통해 사용자는 방화벽 규칙을 정의하고, 네트워크 트래픽을 제어하며, 서비스를 관리할 수 있다. Firewalld는 iptables를 기반으로 하며, 간단한 명령어를 사용하여 방화벽 설

mixed content란?"혼합 콘텐츠 오류"는 웹 페이지에서 보안 연결(HTTPS)을 통해 제공되는 페이지에 비해 보안되지 않은 연결(HTTP)을 통해 로드되는 콘텐츠가 있는 경우 발생한다. 일반적으로 HTTPS로 보호된 페이지에 HTTP로 로드되는 이미지, 스크립

nginx를 사용하면 간편하게 https 연결을 할 수 있다고한다. 실제로 backend에서 세팅하는것보다 쉬웠다!서버 : 카페24 호스팅 서버 인증서 : 카페24에서 구매도메인 : 카페24에서 구매개발 환경 자체가 카페 24 기반이다. 인터페이스 자체가 익숙하지 않고

로딩표시가 없으면 검색이 다소 느린 느낌이 듭니다. 어쩔 때는 앱이 멈춘것 처럼 보이기도 합니다. 데이터 베이스를 더 빠르게 만드는것도 중요하지만 더 나은 UX를 위해 검색에 대한 즉각적인 UI 피드백을 추가해 봅시다. 여기서는 useNavigation을 사용합니다.

src/routes/root.jsxNav 링크를 사용하면 어던 링크를 사용중인지 확인할 수 있습니다. isActive : url이 해당링크를 가리키는지 확인isPending : 내용이 로딩중인지 확인이제 사용자가 어떤 링크를 보고있는지 확실히 알 수 있게 됩니다. 안

react는 csr방식을 사용합니다. 때문에 페이지에서 보여지는 데이터를 서버에서 주로 json형태로 불러온 다음 화면을 그립니다. 우리가 특정 페이지로 라우팅 될 때, 서버와 통신할 함수를 미리 만들어 놓고, 자동으로 데이터를 가져온다면 얼마나 편할까요?react-r

React Router는 React 기반의 웹 애플리케이션에서 라우팅을 관리하기 위한 라이브러리 입니다. 라우팅은 사용자가 웹 내에서 다른 페이지로 이동하는 것을 말하며 React Router는 이를 쉽게 구현할 수 있도록 도와줍니다. 즉 SPA로 구성된 React 애

📖 Ajax는 javascript의 라이브러리중 하나이며, Asynchronous Javascript And XML의 약자로, 비동기적으로 서버와 통신하여 웹 페이지의 일부를 업데이트하거나 데이터를 동기적으로 불러오는 기술이다. 📖 페이지를 새로고침하지 않고도 데이

리액트에서는 최적화는 컴포넌트의 리랜더링을 줄이는 과정이라고해도 과언이 아니다. useCallback과 useMemo 그리고 React.memo를 사용하여 메모이제이션 기법으로 리랜더링을 줄이게 된다. 리액트의 렌더링은 Render Phase와 Commit Phase

Content Delivery Network의 약자로 전송 네트워크를 의미한다. CDN은 인터넷 상에서 웹 페이지, 이미지, 비디오 등 다양한 정적 컨텐츠를 더 빠르게 제공하기 위한 분산 네트워크 시스템이다. 결국 부하를 분산시키고 사용자에게 더 빠르게 컨텐츠를 제공하

리액트의 메모이 제이션은 함수 컴포넌트 내에서 불필요한 재계산을 방지하고 컴포넌트의 성능을 최적화 하기 위한 기술이다. React.memouseMemouseCallback다음과 같은 함수를 활용하여 메모이제이션을 구현할 수 있다. 먼저 메모이제이션이 왜 필요한지 알아보

‘URL’은 우리에게 참 익숙한 용어이다. 흔히 \[웹사이트 주소]로 많이 알고 있다. 그렇다면 URI는 무엇일까?Uniform Resource Identifier : 우리말로는 통합 자원 식별자 라고 한다. Uniform: 리소스를 식별하는 통일된 방식Resource

평소에 너무 자연스럽게 브라우저를 키고 웹서핑을 해왔지만 그 과정이 어떻게 동작하는지는 자세하게 알아본적이 없는것 같다. frontend개발자를 꿈꾸는 취준생으로서 반드시 알아야 할 필요가 있다고 느꼈다. 브라우저는 웹페이지를 그리기위해 정적 리소스 (html,css,

www.example.com 을 인터넷에 입력하게 되면 우리에게 친숙한 웹페이지 화면이 보이게 된다. 도대체 어떻게 우리에게 웹페이지가 전달 되는 것일까?전체적으로 어떻게 동작하는지 알아보자 그림은 밑의 순서와는 상관이 없습니다.먼저 브라우저는 입력된 주소 “www.e

tcp/ip는 두개의 주요 프로토콜인 TCP(Transmission Control Protocol)와 IP(Internet Protocol)의 이름을 합쳐서 부른것이다. 인터넷을 포함한 다양한 컴퓨터 네트워크에서 데이터를 주고 받을 때 사용하며, 가장 널리 사용되는 인

GET은 HTTP 메서드 중 하나로, 서버로 부터 정보를 요청하기 위해 사용되는 메서드다. 주로 데이터를 가져오기 위해 사용되고, 요청하는 데이터는 URL의 쿼리 매개변수로 전달 된다. 위 예시에서 /api/data 는 요청하는 자원의 경로이다. id=123 은 쿼리

즉 클라이언트(브라우저) 에서 화면을 랜더링 하는 방식이다. CSR로만 만들어진 유명한 SPA 사이트로는 FaceBook, Twitter, Gmail등이 있다. 이 사이트들의 특징으로는 새로고침이 발생하지 않는다는 것이다. 새로고침이 발생하지 않는 이유는 초기에 페이

http(hyper text transfer Protocol)란 서버 클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜입니다. 즉 약속과 같습니다.데이터를 암호화 하지 않기 때문에 보안성이 낮습니다.기본포트는 80번 이며, URL에 포트가 명시되지 않을경우 자동

개발 하다보면 프론트랑 백을 연결하는 과정에서 cors에러가 나기 쉽상이다. 대체 cors가 뭐길래 이렇게 귀찮게 구는것일까?Cross-Origin Resource Sharing(교차 출처 리소스 공유) 약자입니다.웹 브라우저에서 실행되는 웹 애플리케이션에서 다른 도메

javascript 객체를 잘못 구현하는 방법 중 하나는 인스턴스마다 저장해야할 데이터를 실수로 프로토타입에 저장하는 것이다.만약 트리 데이터 구조를 구현하는 클래스는 아마도 각 노드마다 자식들의 배열을 포함할 것이다. 근데 자식 배열을 프로토타입에 저장한다면 어떻게