본문 바로가기

전체 글83

HashRouter의 #는 어떤 역할을 하는가 HashRouter의 #는 어떤 역할을 할까요. 1. 해시기반 라우팅 클라이언트 사이드 라우팅HashRouter는 URL의 해시 # 부분을 사용하여 클라이언트 측 라우팅을 구현합니다. URL 구조일반적으로 URL은 http://example.com/#/home과  같은 형태를 갖습니다. 서버 요청 회피해시 프래그먼트 ( #이후의 부분을 말합니다 ) 는 http 요청시 서버로 전달되지 않습니다. 따라서 페이지를 새로고침해도 서버측에서 404오류가 발생하지 않습니다. 이 부분이 중요하니 좀 더 자세하게 살펴볼게요. 해시 프레그먼트 #는 어떻게 서버 요청을 회피하고 404 오류를 방지하는가!  일단 해시 프래그먼트는 브라우저에서만 사용해요. 브라우저는 이 부분을 사용해서 페이지 내의 특정 위치로 스크롤하거나,.. 2024. 11. 17.
해시 라우터 그리고 package의 homepage 필드 배포를 하게 되면 서버에다가 1개만 배포할 일은 개인 개발자로서 거의 없습니다. 한 개의 서버를 빌리면 우리는 거기에다가 이것저것 다 넣고 싶어지죠. 지출을 많이 하고 싶지 않아서 그렇습니다. 이 때, 해시 라우터, package.json의 homepage 필드를 한번 쯤은 보게 됩니다. 리액트는 결국 SPA이기 때문에 어디에서 이 싱글 페이지를 돌게 할건지 꼭 명시해줘야해요.  살펴볼까요?  1. pack.json의 homepage 필드 설정에 대해서 보겠습니다. homepage 필드는 어플리케이션이 배포될 기본 경로를 지정합니다.  그리고, 빌드 시에 생성되는 정적파일 (static)들이 올바른 경로를 가리키도록 합니다. homepage를 설정하면 빌드된 파일들이 해당 경로들을 기준으로 assets를.. 2024. 11. 17.
자료형에 대해서 알아볼까요 Move 언어는 자산 관리와 보안을 중시하는 블록체인 환경에 맞추어서 다양한 자료형을 제공합니다. Move의 자료형은 크게 기본 자료형과 복합 자료형으로 나눌 수 있습니다. 1. 기본 자료형 Primitive Types 1.1 정수형 Unsigned IntegerMove는 다음과 같은 부호없는 정수형을 지원합니다.- u8 : 8비트 정수, 값 범위는 0부터 255- u64 :  64비트 정수, 값 범위는 0부터 2^64 -1 - u128 : 128비트 정수, 값 범위는 0부터 2^128-1 Move의 정수형은 모두 부호가 없기 때문에, 음수 값은 사용할 수 없으며, 정수만 사용해야 합니다. 자산의 개수나 특정 값들을 나타내기 위해 주로 사용되며, 산술 오버플로우는 Move의 검증 시스템에서 자동으로 체크.. 2024. 10. 27.
반복문을 쓸 수 없다면, 반복 작업을 어떻게 하나요? Move는 반복문 (for, while 등)을 지원하지 않지만, 재귀함수와 조건문을 통해서 반복적인 작업을 수행할 수 있습니다. Move에서 반복문을 지원하지 않는 이유는 무한 루프를 방지하고, 블록체인 환경에서의 계산 자원을 효율적으로 사용하기 위함입니다. 대신, 주어진 작업을 반복적으로 수행해야 할 경우 재귀적 접근 방식을 사용해야 합니다. 다음은 Move에서 반복문 대신 재귀를 사용하는 방법과 그 예시입니다. 1. 재귀를 통한 반복작업Move는 재귀함수를 지원하므로, 함수가 특정 조건에 도달할 때까지 자신을 호출하도록 하여 반복작업을 수행할 수 있습니다. 예를 들어서, 1부터 n까지의 합을 구할 때 재귀를 사용할 수 있습니다.module ExampleModule{ public fun sum_recu.. 2024. 10. 27.
Move의 특징 Move는 페이스북의 리브라 화폐 프로젝트를 위해서 개발된 스마트컨트랙트 프로그래밍 언어입니다.Rust에서 영감을 받아서 설계된 부분이 많고, 특히 메모리 안전성, 자원관리, 소유권 개념 등에서 유사한 점이 많습니다. Move는 특히 블록체인 상에서 디지털 자산의 안전한 이동과 소유권 관리에 특화된 언어로, 스마트 컨트랙트를 작성하기 위해서 처음부터 설계되었습니다. 이로 인해서, Move는 Rust 보다도 더 엄격한 자원관리 시스템과 보안성을 제공합니다. 1. 자원 Resource 타입과 소유권 관리Move는 자산을 자원타입(resource type)으로 선언하고, 이 자원은 복사할 수 없으며 단 하나의 소유자만 가질 수 있습니다. 이것은 블록체인에서 자산의 중복과 무단 사용을 방지하기 위한 특화된 기능.. 2024. 10. 27.
왜 리액트 배포하고 새로고침하면 404에러가 뜰까? 리액트는 SPA입니당.  우리는 이것저것 클릭하면 주소가 /something , /something/1 뭐 이런식으로 바뀌는걸 보지만 사실은 그냥 하나의 index.html파일에 js로 동적으로 브라우저가 휘리릭 바꿔주고 있을 뿐이에요. 사실 우리는 계속 같은 놈을 보고 있습니더..바로 루트에 있는 index.html 파일이요.  그리고 브라우저가 페이지에 들어가는 것은 해당 url에 index.html 파일을 내놔라! 하는 GET 요청을 보내는 것이에요. 그런데 말이죵 그럼 리액트로 빌드한 웹페이지에서 ~~~~~/testPage 에 들어가 있다고 쳐봅시당. 근데 새로고침했어요.그럼 우리는 어떤 url한테 index.html을 내놓으라고 GET 요청을 보내는 걸까요? 바로 ~~~~/testPage에요.근.. 2024. 10. 11.
코드 스플리팅 SPA 싱글 페이지 어플리케이션의 단점은 처음 페이지 로드 시 당장 보지 않을 요소들까지 전부 로드한다는 것이다.그렇기 때문에 처음 로드 이후에 작동이 하나의 어플리케이션처럼 부드럽게 작동하기 때문에 이 점은 이점으로 작용할 수 있지만,페이지 안에 너무 많은 요소들이 있을 경우에는 이를 한번에 로드하는 것을 막아야 한다.  React.lazy로 감싼 컴포넌트는 단독으로 쓰일 수 없고, React.suspense 컴포넌트의 하위에서 렌더링 되어야 한다.  1. Route level- 라우트마다 다른 컴포넌트로 관리를 하고 있을 경우에, 각 라우트를 import 함수를 통해 분리된 빌드 파일로 관리할 수 있다.- 유저가 다른 페이지로 넘어갈 때만 그 페이지를 비동기적으로 로딩할 수 있다.- 초기 렌더링 시간.. 2024. 10. 10.
아이폰에서의 100vh는 뷰포트의 높이가 아니다?! 웹앱을 개발해서 테스트 배포를 했다.  근데 응?!  푸터가 안보이는 것이다.  보통 처음에 프레임만 잡고 그 안의 것들을 컴포넌트화해서 나눠서 개발한다. 그런데 맨 상위 프레임에 나는 분명히 100vw와 100vh 를 주었기 때문에 모든 요소가 화면에 보여야 하는데 푸터가 안보이는 것이다!  무엇이 원인인지 가설을 세우면서 고민해보았다. 1. 다른 요소에 가려졌다. 2. 100vh가 내가 아는 100vh가 설마 아닌가 ( 아니었으면 좋겠다 ) 1은 충분히 그럴 수 있다. 왜냐하면 푸터를 fixed로 뷰포트 기준 맨 하단에 잡아놨었는데, 이것이 메인 화면의 zindex에 밀려서 가려졌을 수도 있다.  는 무슨.. 그럴 수 없다... 난 메인 화면에 zindex를 주지도 않았고, 여기에 출처 불명의 라이브.. 2024. 10. 8.
Batching Batch "일괄"Batching "일괄처리" "Batching is when React groups multiple state updates into a single re-render for better performance."배칭은 더 나은 성능을 위해서 리액트가 여러개의 상태를 한번의 리렌더링에 업데이트 하는 것을 이야기 한다.- Dan Abramov React Developer  - 단기간에 일어나는 상태변화를 매번 렌더링하지 않고, 일괄 처리한다.- 리액트 이벤트 단위로 배칭이 발생한다. - 배칭은 리액트의 상태 값을 일정한 주기로 처리하는 작업. 이벤트로 인해 변경되는 점이 하나든 여러개든 일정한 주기에 맞춰서 다 같이 처리될 수 있도록하는 리액트의 내부기능. 상태값 변경 > 변경된 상태값을 .. 2024. 10. 4.
@import vs link CSS 적용 방법- 인라인- 내부 스타일링- 외부 스타일링- @import- link  1. 문서에 default.css 적용하는 방법 2. default.css 파일 내에 header.css를 @import @charset "utf-8";@import "header.css"; /* 문자 형식 */@import url("header.css"); /* url 형식 */   link가 더 효율적이다.@import는 직렬로딩link는 병렬로딩  출처: CSS 적용을 위한 또 다른 방법, @import :: About Web (tistory.com) 2024. 9. 23.

티스토리툴바