개발63 React 13 변경점 중요한 것만 빠르게 짚어보기 오늘의 5분 개발지식 라디오! 안녕하세요~ 오늘은 NextJs가 2022년 10월말에 새로 메이저 넘버링 업데이트가 되어 간략하게 살펴보려고 합니다. 새롭게 13버전이 출시되었네요~ 먼저 page폴더가 없어지고 app폴더가 생깁니다. 그와 동시에 예약된 파일명들을 통해서 주로 많이 사용되는 기능들을 쉽게 추가할 수 있게 되었습니다. 간략하게 살펴보자면 기존에 pages안에 생성하던것과 동일하게 자신이 생성하고 싶은 경로명으로 폴더를 생성하면되는데요, 각각의 파일이 개별적인 경로가 되던 것이 이제는 page.js가 UI를 나타내도록 변경되었습니다. 화면을 보시면 예전에는 pages 폴더 하위의 모든 파일들이 하나의 경로였다면 이제는 app하위에서 page라고 지어진 파일만 접근이 가능합니다. 예전에는 컴포.. 2023. 4. 26. Rendering pipeline 쉽게 이해하기 오늘의 5분 개발지식 라디오! 안녕하세요~ 오늘은 브라우저에서 유저의 눈에 보이도록 렌더링을 하기까지의 과정을 간략하게 정리해보려고 합니다. 렌더링 파이프라인의 처음 시작은 HTML과 CSS를 파싱하는 작업부터 시작합니다. 개발자가 작성한 HTML과 CSS를 분석하여 각각의 태그들의 구조도인 Document Object Model, DOM을 만듭니다. 트리형태로 생성이 되기때문에 DOM트리라고도 합니다. CSS도 비슷한 방식으로 각각의 태그들이 가져야될 스타일을 트리형태로 생성하는데 이것을 CSS Object Model, CSSOM 트리라고 합니다. 이 과정에서 유의할점은 DOM트리 생성을 위해 HTML을 파싱할때, script 태그를 만나게되면 병렬로 진행하는 것이 아니라 잠시 파싱을 멈추고 scrip.. 2023. 4. 26. Debounce vs Throttling 이해하기 안녕하세요 기존의 영상들과 더불어 이제 면접에서 나오는 질문들이나 주제들을 모아서 면접지식 시리즈를 시작해보려고 합니다. 오늘은 프론트엔드 쪽으로 취준을 하시면 자주 나오는 질문인 쓰로틀링과 디바운스에 대해서 알아보려고 합니다. 쓰로틀링과 디바운스 모두 프론트엔드에서 성능 최적화를 위해서 사용됩니다. 특정 이벤트에 로직을 붙일 때 로직이 실행되는 횟수를 제한하는 것이 목적이지만 동작방식이 조금씩 차이가 있는데요, —- 먼저 쓰로틀링입니다. 쓰로틀링은 한번 로직이 실행되고 나면이후 정해진 시간동안은 해당 로직의 실행을 막는 방식입니다. 화면에서 보이다시피 처음 0초에 이벤트가 발생되었기때문에 로직이 실행됩니다. 현재 화면의 예시는 쓰로틀링을 3초로 걸었기때문에 1초와 2초에 발생한 이벤트에 대해서는 로직이.. 2023. 4. 26. [디자인패턴] Facade패턴 쉽게 이해하기 안녕하세요~ 오늘은 Facade pattern에 대해서 이야기해보려고 합니다. > 어원 Facade pattern은 소프트웨어 디자인 패턴 중 하나인데요, 주로 객체지향 프로그래밍에서 많이 쓰입니다. ‘파사드’라는 단어를 사전에 검색해보면 “건물의 정면”이라는 뜻으로 나옵니다. 여기서 추측할 수 있듯이 어떠한 코드의 정면, 껍데기 역할을 하는 오브젝트를 두는 패턴을 뜻합니다. > 설명 어떻게 생각하면 추가적인 레이어를 하나 더 두는 것인데요, 이렇게 하는 이유는 주로 복잡한 코드를 감추기 위해서입니다. 일종의 추상화와 비슷하다고 생각하시면 됩니다. 복잡한 내부로직을 그대로 노출시켜서 사용하게하면 복잡하니, 좀 더 쉽게 셀계된 인터페이스인 파사드 객체를 노출시키는 것입니다. 이 파사드 객체가 내부로직을 호.. 2023. 4. 26. Dependency Injection이 무엇인지 알아보자 오늘의 5분 개발지식 라디오! 안녕하세요~ 오늘은 dependency injection, 의존성 주입에 대해서 이야기해보려고 합니다. 단어 자체가 직관적이지 않아서 저도 처음에 이해할때 많이 헷갈렸는데요, 의존성 주입이라는 용어에서부터 시작해보겠습니다. 일단 의존성이라는 단어부터 보면 좋을 것 같은데요, 의존성이란 말 그대로 하나의 코드가 다른 코드에 의존하는 상태를 뜻하는데요, 쉽게 말하자면 A라는 코드가 B라는 코드를 사용한다면, A는 B에 의존하고 있다, 혹은 의존성이 있다라고 말할 수 있습니다. 주입이라는 말은 말그대로 “넣어주다”라는 말인데요, 합쳐서 보면 의존성 주입이라는 용어는 의존성이 있는 코드, 객체를 넣어준다~라는 말입니다. 조금 더 실사용 예시로 풀어서 생각을 해보면, A라는 클래스가.. 2023. 4. 26. Typescript가 무엇일까? 기본 개념 알아보기 오늘의 5분 개발지식 라디오! 안녕하세요~ 오늘은 타입스크립트에 대해서 이야기해보려고 합니다. > 생긴 이유 (장점) 일단 타입스크립트가 왜 생겼는지를 먼저 알아보려고 하는데요, 타입스크립트랑 이름이 비슷한 친구가 있죠? 네 맞습니다. 자바스크립트가 있는데요, 타입스크립트는 이 자바스크립트에서 파생된 언어입니다. 자바스크립트는 동적 타입 언어로 개발자들이 코딩을 할 때 각 변수들이 어떤 타입인지를 명시하지 않습니다. 때문에 개발을 하다보면 로직상의 오류로 개발자가 의도한 타입이 아닌 경우가 있는데요, 예를 들어 a와 b를 더하는 함수를 작성했다고 했을 때, 위의 코드는 에러없이 동작하는 매우 정상적인 코드입니다만, 개발자의 의도는 이게 아니죠. 이렇게 오류없이 돌아가지만 의도한 동작이 아닌 경우도 있고,.. 2023. 4. 26. 이전 1 2 3 4 5 ··· 11 다음
