Web/HTML, CSS, Javascript (16) 썸네일형 리스트형 [Javascript] 동작 원리 [Javascript는 어떤 원리로 돌아가는 걸까?] 싱글 스레드? 콜스택? 말은 많이 들어 봤지만, 막상 설명하자니 입이 안떨어졌습니다.. 자바스크립트는 웹 브라우저에 내장된 엔진으로 돌아가게 되는데, 엔진은 이와 같이 구성되어있습니다. Memory Heap - 변수, 함수 등의 메모리 할당이 일어나는 곳 Call Stack - 호출 스택이 쌓이는 곳 그리고 대표적인 자바스크립트 엔진은 구글 크롬에서 사용중인 V8! (8기통 엔진을 의미하는 명칭) [그렇다면 v8엔진에서는 무슨 일을 하는 걸까?] 자바스크립트 소스코드를 가져와 Parser에게 넘긴다. Parser는 파싱을 통해 AST(Abstract Syntax Tree)로 변환시킨다. AST를 인터프리터를 통해 byte code로 변환(Ignitio.. Javascript module 타입의 cors 문제 이렇게 module타입으로 js import를 하게되면, cors에러가 뜨게 됩니다. file:///~~ 요런 url이 cors에 의해 block 되었다는 것인데요..ㅠ npm으로 매우 간단하게 해결할 수 있습니다. http-server를 활용하는 것입니다. npm install http-server -g index.html이 있는 경로에서 npx http-server 실행 http://127.0.0.1:8080 에 접속! (포트 바꾸고 싶다면 npx http-server -p 포트번호) 끝! 조금 더 편하게 하고자 한다면 package.json에 script를 등록하면 됩니다. "scripts": { ..., "start": "npx http-server -p 8000" }, [Javascript] ios Momentum Scrolling Issue(탄력스크롤) ios는 탄력스크롤이라는게 있죠? 스크롤에 관성도 있고 끝에 도달하면 바운스도 됩니다. 아래 css를 통해 이를 적용하는데요.. -webkit-overflow-scrolling: touch; 하지만 문제가 있습니다. 스크롤 중일 때에는 scrollTop이 업데이트 되지 않는다는 것입니다..! 제가 진행중인 프로젝트에서 element들이 추가됨에 따라 스크롤 높이를 계산해서 스크롤 위치를 재설정해줘야 하는 경우가 있었는데, scrollElement.scrollTop = 0; 이렇게만 쓴다면, 스크롤 관성은 그대로 유지되고 element는 추가되서 뚝뚝 끊기는 현상이 발생할 수 있습니다. (주로 역방향 스크롤시...) 위에 언급한 프로젝트에서 역방향 스크롤시, dom이 추가되고 추가된만큼 계산해서 스크롤 위.. [Javascript] ios 한글 조합 문제 ios 13이상에서는 받침이 완료되지 않은 문자에 대해서 buffer에 저장되버립니다. 받침까지 완료가 되어야만 제대로 출력이 되고, 아닌경우는 받침이 필요없지 않는한 이상한 현상을 겪게 됩니다. ex) '아아' 라는 문자 전송 후, input = ''으로 입력값을 초기화 해줘도 다음에 'ㅇ'을 입력하면 '앙'이 출력됩니다. 이런 그지같은 현상 때문에 여러 방법을 시도해봤는데요..! 한가지 방법은 input의 focus를 없앴다가 다시 focus 시켜주는 방법입니다. 입력이 완료되면 blur 후 다시 focus 해주는 방식인데, 해결이야 되지만 키보드가 내려갔다 다시 올라오는 불편한 상황이 연출됩니다..ㅜㅠ 그러다 아래 참고로 적어둔 포스트에서 답을 얻었습니다. (감사합니다..!) 간단히 해결책만 말하자.. [Javascript] RxJS - Subscription https://rxjs.dev/guide/subscription 번역 오역 부분이나 조언(?)은 알려주시면 감사하겠습니다. Subscription 구독이란? 구독은 일회용 자원, 일반적으로 Observable의 실행을 나타내는 객체입니다. 구독은 unsubscribe라는 중요한 메소드를 가지고 있습니다. 이는 인자를 갖지 않고, 구독이 잡고있던 자원을 처리합니다. RxJS 이전버전에서는, 구독이 "일회용"으로 불렸습니다. import { interval } from 'rxjs'; const observable = interval(1000); const subscription = observable.subscribe(x => console.log(x)); // Later: // This cancels th.. [Javascript] RxJS - Operators https://rxjs.dev/guide/operators 번역 오역 부분이나 조언(?)은 알려주시면 감사하겠습니다. RxJS는 Observable이 기본이지만, 대부분 연산자에 유용합니다. 연산자는 복잡한 비동기코드를 선언적 방식으로 구성하는데 필수적인 부분입니다. 연산자란? 연산자는 함수입니다. 2종류의 연산자가 있습니다 : 파이프형 연산자들은 observableInstance.pipe(operator()) 구문을 사용해 Observable로 파이프 될 수 있습니다. 이는 filter(...)와 mergeMap(...)을 포함합니다. 호출되면 Observable 객체를 변경하지는 않습니다. 대신, 새로운 Observable을 반환합니다. 구독 로직은 첫번째 Observable에 기반합니다. 파이프형 .. [Javascript] RxJS - Observer https://rxjs.dev/guide/observer 번역 오역 부분이나 조언(?)은 알려주시면 감사하겠습니다. Observer 관찰자(Observer)란 무엇인가? 관찰자는 Observable에서 전달된 값들의 소비자입니다. 관찰자들은 간단히 Observer에서 전달하는 각각의 알림 유형들(next, error, complete)의 콜백들의 모음입니다. 아래는 전형적인 Observer 객체입니다 : const observer = { next: x => console.log('Observer got a next value: ' + x), error: err => console.error('Observer got an error: ' + err), complete: () => console.log('O.. [Javascript] RxJS - Observable https://rxjs.dev/guide/observable 번역 오역 부분이나 조언(?)은 알려주시면 감사하겠습니다. Observable Observable은 여러 값의 지연푸시 모음입니다. 그들은 다음 표에서 누락된 자리를 채웁니다. SINGLE MULTIPLE Pull Function Iterator Push Promise Observable 예제. 아래 예제는 구독(subscribe)됐을 때, 동기적으로 값 1,2,3을 즉시 넣고, 1초 뒤에 4를 넣고 끝내는 Observable입니다. import { Observable } from 'rxjs'; const observable = new Observable(subscriber => { subscriber.next(1); subscriber.nex.. 이전 1 2 다음
