본문 바로가기

분류 전체보기

 (90)
리액트 네이티브는 무엇인가? iOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크 기존에는 앱을 개발하기 위해서는 안드로이드는 kotlin과 java를, ios앱은 swift와 objective-c가 필요하다. 각각의 언어로 앱을 개발해야 하기 때문에, 각 분야의 개발자가 필요하고 그에 따라 유지보수 비용도 많아질 수 밖에 없는 구조이다. 이것을 해결하는 것이 하이브리드 웹앱이다. 웹을 구동하면, 앱 화면을 웹 화면으로 표시하고 웹 기술로 기능을 구현하는 방식이다. 하지만, 브라우저에서 제공하는 성능 이상으로 발휘할 수 없기때문에, 여러가지 하이브리드 앱기술이 나오게 되었다. 자마린, 리액트 네이티브, 플루터 등이 있는데, 나는 우선 리액트를 배워왔기에, 비교적 학습비용이 낮은 리액트 네이티브를 우선적..
리액트 this키워드 문제 testdome에서 재미난 리액트 문제를 발견했다. 지금은 비록 사용하지 않는 클래스 컴포넌트이지만, this키워드를 이해하기 좋은 문제라 생각하여 해설해보려고 한다. 문제는 일단 다음과 같다. ( 출처: testdome ) // React is loaded and is available as React and ReactDOM // imports should NOT be used const sampleOptions = [ { id: "753", title: "This is the first option" }, { id: "035", title: "This is the second option" } ]; class OptionsShower extends React.Component { constructor..
그래서 웹이란게 뭔데? 우리가 사용하는 인터넷과 웹은 같은 것일까? 웹과 인터넷은 다르다. 인터넷은 통신망이며, 웹은 그 위에서 동작하는 서비스이다. 웹 1.0을 지나, 현재 웹 2.0을 사용하고 있으며 우리 시대는 이제 웹 3.0으로 나아가고 있다. 웹 1.0 웹 1.0은 읽기 전용(read-only)기능이 가장 크다. (단방향) 정보 제공자와 사용자가 엄격히 구분되어 있다. 대표 사례로는 네이버, 야후, 구글 등 검색포털등이 있다. 핵심기술은 HTML이다. 웹 2.0 읽기뿐만 아니라, 쓰는 기능까지 추가되었다. (양방향) 정보 제공자임과 동시에, 사용자가 될 수 있다. 페이스북, 블로그, 유튜브 등 여러가지 플랫폼들이 이에 속한다. 핵심기술로는 AJAX, XML 등이 있다. WEB 3.0은 그렇다면..? 웹 3.0은 ‘시맨..
[ 애플 웹사이트 클론 ] 비디오에 스크롤 애니메이션 적용하기 비디오를 스크롤 애니메이션으로 보여주기 위해서는 세 가지의 방법이 존재한다. 비디오의 길이를 이용해서, 스크롤된 비율에 따라 비디오의 해당 구간을 보여주는 방식 비디오 프레임대로 이미지를 추출해서, 각 구간의 이미지를 보여주는 방식 위와 비슷하게 이미지를 추출해서, 캔버스태그에 각 구간의 이미지를 그려 보여주는 방식 첫 번째의 비디오를 그대로 사용하는 방식은 이미지를 추출해서 사용하는 방식보다 부드럽지 못하고, 파일크기가 조금 더 커지기 때문에 패스했다. 두 번째 방식은 확장성면에서 세 번째 방식보다 떨어진다고 생각했다. 지금은 하나의 이미지만을 화면에 보여주기 때문에, 큰 문제가 없을 것으로 보이나, 훗날 여러 개의 이미지를 겹쳐서 보여줘야하는 경우가 생길때 이미지태그는 여러 개의 이미지태그를 사용해야..
[ 애플 웹사이트 클론 ] 특정 구간에 스크롤 애니메이션 적용하기 스크롤이 될때마다, 현재 보고있는 스크롤섹션을 지정해주었으면 이제 지정된 스크롤섹션마다의 애니메이션을 적용해주어야 한다. 그러기위해서는 다음과 같은 값이 필요하다. 해당 스크롤섹션 내에서 스크롤이 어느 정도 내려갔는 지 애니메이션에 필요한 스타일 시작지점과 끝지점 다음과 같이 변수명을 설정해준 뒤, 시작값, 마지막값, 시작지점과 끝지점을 할당해준다. messageA_translateY_in: [20, 0, { start: 0.15, end: 0.2 }] 위의 변수명을 통하여 다음과 같이 해석할 수 있다. translateY로 20%에서 0%로 움직이게되고, 해당 스크롤섹션에서 15%에서 시작해 20%에서 끝이난다. calcValues라는 함수를 만들어, 특정 css값을 주는 계산을 실행해준다. funct..
[ 애플 웹사이트 클론 ] 현재 스크롤 섹션에 따른 아이디값 부여 현재 스크롤섹션의 아이디값에 따라 다른 태그들을 보여주기 위해서, 아이디값을 부여해보자. 아래와 같이 CSS가 적용이 되어있다. .sticky-elem { display: none; position: fixed; top: 0; left: 0; width: 100%; } #show-scene-0 #scroll-section-0 .sticky-elem, #show-scene-1 #scroll-section-1 .sticky-elem, #show-scene-2 #scroll-section-2 .sticky-elem, #show-scene-3 #scroll-section-3 .sticky-elem { display: block; } 기존의 sticky-elem이라는 class는 display:none;이기 때문..
[ 애플 웹사이트 클론 ] 현재 스크롤 섹션 지정하기 스크롤 섹션마다의 높이를 세팅했으면, 이제 스크롤을 내릴 때마다 몇 번째 스크롤 섹션에 있는 지 지정을 해주어야한다. 스크롤이 내려갈때마다, 현재 스크롤섹션을 감시하는 함수를 만들어주어야한다. 순서는 다음과 같다. 이벤트리스너 "scroll"이 실행될때마다, 함수가 실행되도록 한다. 그 함수에는 스크롤높이에 따라 현재 섹션을 지정해준다. 가장 먼저, 다음과 같은 변수를 선언해준다. let yOffset = 0; let prevScrollHeight = 0; // 현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤섹션높이들의 합 let currentScene = 0; //현재 활성화된 (눈 앞에 보고있는 씬 = 스크롤섹션) yOffset은 현재까지 스크롤된 높이를 알려주는 변수이다. prevScro..
자바스크립트 동작원리 동작원리를 알아보기 전, 동작에 필요한 엔진을 살펴보자. 여러가지 자바스크립트 엔진 중에서 가장 많이 사용하는 V8엔진에 대해 알아보자. 구글의 V8엔진은 다음과 같이 구성되어있습니다. 메모리 힙(Momory Heap) 과 콜 스택(Call Stack) 두 가지로 구성되어있습니다. 메모리힙에서는 메모리 할당이 발생하고, 콜스택은 코드가 실행될 때마다 스택이 하나씩 쌓이는 곳입니다. 이 V8엔진이라는 것은 결국 자바스크립트를 바이트코드로 컴파일하고 실행하는 방식입니다. 그리고 대부분이 사용하는 크롬웹브라우저는 V8엔진이 탑제된 자바스크립트 런타임입니다. 여기서 런타임이란, 프로그래밍 언어가 구동되는 환경을 말합니다. 추가적으로, V8엔진은 자바스크립트 엔진임과 동시에 웹 어셈블리 엔진이기도 합니다. 웹 어..

티스토리툴바