프론트엔드/정보
-
핸드폰 Console 확인하는 방법프론트엔드/정보 2024. 4. 21. 13:07
핸드폰 Console 확인하는 방법 1. 핸드폰 설정 → 휴대전화 정보 → 소프트웨어 정보 → 빌드번호(개발자 옵션 활성화) → 개발자 옵션 (USB디버깅 활성화) * 개발자 옵션 활성화 : 빌드번호를 연속으로 누르면 개발자 모드가 활성화됩니다. * 만약 'USB디버깅'메뉴가 활성화되지 않는 경우 아래와 같이 보안 위험 자동 차단을 해제하면 활성화됩니다. 2. 핸드폰과 컴퓨터를 USB로 연결한 다음 컴퓨터 Chrome브라우저 주소창에 "chrome://inspect"를 검색 한다음 "Page"메뉴를 확인하면 연결된 핸드폰의 Chrome에서 열려있는 Page를 확인할 수 있습니다. 해당 Page에 inspect메뉴를 눌러서 Console을 확인하면 됩니다.
-
Nelyfy 배포 page not found 404 에러프론트엔드/정보 2024. 4. 17. 16:40
[문제] 배포한 페이지에 접속하고 나서 첫 페이지까지는 잘 렌더링이 되었으나, 페이지를 이동 한 후 새로고침 시 page not found 404라는 창이 뜨는 문제가 발생했다. [원인] spa방식인 리액트는 하나의 페이지인 index.html만 렌더링 하게 되며, 리액트가 최초 접속할 때의 url 은 / 이다. 서버는 기본 URL 요청이 들어왔을 때 index.html만 보내는 규칙만 갖고 있기 때문에 화면을 넘기면서 라우팅된 각 url(/a, /b)에 맞는 자원이 존재하지 않아 발생하는 오류이다. 그래서 이를 해결하기 위해선 URL에 대한 리디렉션 및 다시 쓰기 규칙을 재구성해야 한다. [해결] 프로젝트의 public 폴더 안에 다음과 같이 _redirects라는 이름의 파일을 생성하고, 아래와 같이..
-
Fly.io로 Portfolio 배포 성공 후 사용한 명령어 정리프론트엔드/정보 2024. 4. 17. 16:36
Fly.io로 Portfolio 배포 성공 후 사용한 명령어 정리 iwr https://fly.io/install.ps1 -useb | iex PowerShell을 사용하여 Fly CLI(Command Line Interface)를 설치합니다. 이는 Fly.io 플랫폼을 사용하여 애플리케이션을 관리하기 위해 필요한 도구입니다. flyctl auth login Fly CLI를 사용하여 Fly.io 계정에 로그인합니다. 이를 통해 Fly.io 플랫폼에 액세스할 수 있습니다. flyctl launch Fly CLI를 사용하여 새로운 애플리케이션을 시작합니다. 이 명령어를 사용하여 애플리케이션을 생성하고 Fly.io 플랫폼에 배포할 수 있습니다. flyctl deploy Fly CLI를 사용하여 현재 디렉토리에..
-
Redux에 대해서프론트엔드/정보 2024. 1. 12. 21:17
Redux는 JavaScript 애플리케이션의 상태를 관리하기 위한 상태 관리 라이브러리입니다. 특히 복잡한 상태 관리와 데이터 흐름을 효율적으로 다루는 데 사용됩니다. Redux의 핵심 개념은 다음과 같습니다: Store: 애플리케이션의 상태를 담고 있는 단일 저장소입니다. 이 상태는 읽기 전용으로, 직접 수정할 수 없고 오직 액션을 통해 변경됩니다. Actions: 애플리케이션에서 상태를 변경하는 요청입니다. 일종의 페이로드(payload) 데이터를 가지고 있고, type 속성을 통해 어떤 액션이 수행되어야 하는지 식별합니다. Reducers: 액션에 의해 상태를 변경하는 로직을 가지고 있는 순수 함수입니다. 이전 상태와 액션을 받아 새로운 상태를 반환합니다. Dispatch: 액션을 발생시키는 함수..
-
CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)의 차이점프론트엔드/정보 2023. 11. 15. 15:29
CSR(클라이언트 사이드 렌더링)과 SSR(서버 사이드 렌더링)은 웹 애플리케이션에서 페이지를 렌더링하는 두 가지 주요 접근 방식입니다. CSR (Client-Side Rendering - 클라이언트 사이드 렌더링): CSR은 브라우저에서 이루어지며, JavaScript를 사용하여 동적으로 페이지를 생성하는 방식입니다. 일반적으로 단일 페이지 애플리케이션(SPA)에서 많이 사용됩니다. 초기에는 HTML, CSS, JavaScript 파일이 다운로드되고, 브라우저에 의해 실행됩니다. 그런 다음 JavaScript가 페이지의 컨텐츠를 가져오고 렌더링합니다. 이로 인해 사용자 경험이 향상되고, 페이지 간의 전환이 매끄럽습니다. 그러나 초기 로딩 속도가 느릴 수 있고, 검색 엔진 최적화(SEO)에 취약할 수 있..