전체 글 (214) 썸네일형 리스트형 defer & async in script tag 일반적으로 script태그를 아무런 속성없이 가져오게 되면 브라우저 HTML을 파싱하는 도중 멈추고 해당 스크립트를 가져오고 실행할 때까지 기다렸다가 다시 HTML을 파싱합니다. 이는 JavaScript코드가 DOM Tree에 접근하여 이를 수정할 수 있기 때문입니다. async 와 defer 속성을 사용한다면, script태그를 만나도 HTML파싱이 중단되지 않습니다. 또한 두 속성을 동시에 적는다면 async 가 적용되고, async 를 지원하지 않는 브라우저는 defer로 fallback이 일어납니다. script 태그의 defer속성은 페이지가 모두 로드되고 나서 해당 스크립트가 실행됨을 나타냅니다. defer 속성은 불리언(boolean) 속성으로 명시하지 않으면 false를 가지게 되고 명시하.. [FEConf Korea] 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다. 이강의는 FEConf Korea 강의를 보고 정리한 자료입니다. TDD. Test Driven Development 궁극적 목표는 Clean code that works. 작동하는 깔끔한 코드이다. Testable 한 code를 어떻게 작성하는가? Seperation of Concerns, 관심사의 분리를 통해서 testable한 코드를 작성합니다. 이 관심사의 분리를 지키지 않으면 거대한 진흙덩어리 코드가 만들어진다. TDD 예제1 Redux -> 리액트의 관심사 때문에 쓴다. 리액트의 관심사는 state reflection, 상태의 반영이다. 상태의관리는 신경쓰지 않음. 컴포넌트에 상태가 전달이 된다면 화면을 리렌더링해야한다. 그렇기 때문에 리액트는 상태의 관리에 대해서는 관심이 없다는점 SRP (S.. eager evaluation과 lazy evaluation 프로그래밍 언어에서 '표현식'이라는 용어는 리터럴, 연산자, 변수,함수 호출등이 복합적으로 구성된 코드를 말합니다. 예를 들어, 1 + 2는 1과 2라는 리터럴과 덧셈연산자 + 로 구성된 표현식입니다. 표현식은 항상 컴파일러에 의해 계산법(evalutaion)이 적용되어 어떤 값이 됩니다. 1 + 2 표현식은 컴파일러에 의해 3이라는 값이 됩니다. 이와 같이 컴파일러는 표현식을 마주치면 계산법(evalutaion)을 적용해서 어떤 값(value)를 만듭니다. 계산법에는 조급한 계산법 (eager evaluation) 과 느긋한(또는 지연) (lazy evalutaion) 두가지가 있습니다. 1 + 2 예제의 경우는 eager evaluation을 적용한 것입니다. 컴파일러가 함수를 표현식을 마주친다고 해.. [SLASH 21] 실무에서 바로쓰는 Frontend Clean Code 토스 개발자 컨퍼런스 진유림님의 강의를 정리했습니다. 클린코드라 하면 '명확한 이름', '중복 줄이기'를 먼저 말하곤하는데, 실무에선 이 외에도 좀 더 섬세하게 코드를 정리하는 스킬이 필요합니다. 1. 실무에서 클린 코드의 의의 2. 안일한 코드 추가의 함정 3. 로직을 빠르게 찾을 수 있는 코드 4. 액션 아이템 실무에서 클린 코드의 의의 흐름 파악이 어렵고 도메인 맥락 표현이 안되어 동료에게 물어봐야 알 수 있는 코드가 회사마다 존재한다. 이런 코드는 개발할 때 병목이되고 유지보수할 때 시간이 오래걸리며 심하면 기능추가가 불가능한 상태가 됩니다. 실무에서 클린코드의 의의는 유지보수 시간의 단축입니다. 동료, 혹은 과거의 내가 짠 코드를 빠르게 이해할수있다면..!! 읽기 좋은 깔끔한 코드는 코드리뷰의 .. [Modern JavaScript Deep Dive] closure 클로저는 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어 (예: 하스켈, 리스프, 얼랭, 스칼라등)에서 사용되는 중요한 특성이다. 클로저는 자바스크립트 고유의 개념이 아니므로 글로저의 정의가 ECMAScript 사양에 등장하지 않는다. MDN 에서는 클로저를 다음과 같이 정의한다. A closure is the combination of a function and the lexical enviroment within which that function was delared. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10.. 3584. 가장 가까운 공통 조상 문제의 중요한 점은 마지막에 주어지는 두 노드가 서로 부모가 될 수 있다는 점입니다. 그러니까 둘다 거슬러 올라갈 때 자기 자신도 포함해서 거슬러 올라가 줘야합니다. import sys T = int(sys.stdin.readline()) for _ in range(T): N=int(sys.stdin.readline()) p_list=[0 for _ in range(N+1)] for _ in range(N-1): p,c=map(int,sys.stdin.readline().split()) p_list[c]=p a,b=map(int,sys.stdin.readline().split()) a_parent=[a] b_parent=[b] while p_list[a]: a_parent.append(p_list[a]).. [Summer/Winter Coding(~2018)] 지형 편집 ⭐️ 지형 편집 문제를 처음 접했을 때 백준에서 풀어본 문제랑 거의 동일하다는 것을 느꼈습니다. 문제는 높이는 최소 1, 최대 300으로 제한하고 있습니다. 당연히 높이마다 탐색해서 최소값을 구하는 것 보다 최소 높이와 최대 높이를 정해서 이분탐색하는게 더 빠를 것 같습니다. def solution(land, P, Q): answer = 1e9 min_height = 1e9 max_height = 0 for i in range(len(land)): for j in range(len(land[0])): max_height = max(max_height, land[i][j]) min_height = min(min_height, land[i][j]) def find_value ( h, land): cnt =0.. [React] Infinite Scroll 진행하고 있는 프로젝트에 infinite scroll (무한 스크롤)을 구현하고 싶어서 공부하게 되었습니다. 우선 최종적으로 만들고 싶은 상황은 다음과 같습니다. 서버에서 데이터를 가져온다. (n개씩) 스크롤이 하단에 닿으면 로딩을 보여주면서, 다음 데이터를 fetching 한다. 더이상 불러올 데이터가 없다면, 로딩하지 않는다. Infinite Scroll를 구현하는 방법에는 크게 세가지가 존재합니다. onScroll event Intersection Observer API useRef onScroll event onScroll event를 이용해서 사용자가 scroll을 한다면 이벤트를 발생시키고, scroll위치가 페이지의 끝에 닿았는지 판단합니다. 끝에 도달했다면 새로운 컨텐츠를 로딩하기 위한 요.. 이전 1 ··· 23 24 25 26 27 다음
