useRef는 DOM 을 선택하는 용도 외에도 다른 용도가 한 가지 더 있다. => 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것 useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않는다. 리액트 컴포넌트에서의 상태는 상태를 바꾸

자바스크립트의 JS와 XML의 X를 합친 말로,JS 코드 내부에 태그 기반의 HTML 구문을 바로 써서React 엘리먼트를 정의하게 해주는 자바스크립트 확장 문법이다.사용하기 복잡한 자바스크립트의 createElement 개념을 간소화하였다.깔끔하고 가독성이 좋다. (

FunctionComponent 타입의 줄임말React + Typescript 조합으로 개발 시 사용하는 타입 중 하나함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입클래스형 컴포넌트에서 함수형 컴포넌트로 넘어오면서 쓰게 된 타입인데, 여

React에서 서버 사이드 렌더링(SSR)을 간편하게 해주는 프레임워크Next.js는 기본적으로 서버 측에서 React코드를 실행한다.React.js를 서버 측에서 pre-rendering하여 html을 생성하고, 브라우저에게 보내준다.그 후 브라우저에서 React를

Next.js는 'public' 디렉토리에 여러가지 정적 파일을 보관하고 <Image> 태그를 사용하여 꺼내올 수 있다.public 폴더 내부에 이미지 파일(예: jpeg 파일)을 넣어주고public 폴더에 저장된 파일의 이름과 pages 폴더에 저장된 파일의 이

최근 다양한 모바일 장비를 사용 ⇒ 다양한 클라이언트를 고려해야 함 ⇒ 특화된 처리를 위한 API 조합이나 처리 필요이를 위한 해결 방법으로 BFF(Backend for Frontend) 패턴이 존재BFF 패턴은 API 게이트웨이와 같은 진입점을 하나로 두지 않고 프론

Svelte는 인터랙티브 웹 사이트를 구축하는 툴이다.2021년 stackoverflow 개발자 설문조사'가장 많이 사랑받는 웹 프레임워크'에서 1위를 차지했다.Svelte가 무엇이고 어떻게 동작하는지리액트와 무엇이 다른지어떻게 리액트보다 더 빠른지왜 개발자들에게 이토

출처: 노마드코더 - 개발자라면 알아야 하는 Big O알고리즘의 속도는 컴퓨터 하드웨어 자체와의 속도와는 별개로그보다는 ‘완료까지 걸리는 절차의 수’로 정의된다.예를 들어, 같은 작업을 수행하는 데 5개의 스텝이 걸리는 알고리즘이 10개 스텝이 걸리는 알고리즘보다 우수

Test-Driven Development테스트 코드를 먼저 만들고, 실제 프로덕션 코드를 나중에 만드는 개발 방법설계 및 실제 개발을 먼저 하고 이후에 테스트 코드 작섯ㅇ테스트 코드를 가장 먼저 작성한 후에 설계를 하고 이후에 개발 진행출처: 테코톡 - 피카의 TDD

'리액트 크로스 브라우징'을 검색하면서 '엣지 익스플로러 차이'를 찾아보다가 발견한 기사이다. 읽으면서 중요한 부분은 굵은 글씨로 처리해보았다. 인터넷 익스플로러(IE)는 올해 6월 15일자로 사라지지만 엣지와의 호환 모드는 2029년까지 지원한다고 한다. 아..😱

프론트엔드 개발자라면 무조건 책임지고 신경써야 하는 부분프로젝트 기간 동안 가장 마지막 쯤에 하는 단계굉장히 귀찮지만 꼼꼼하게 봐야 하는 부분웹 사이트 또는 웹앱이 어느 브라우저나 디바이스이든 상관 없이원하는 결과물이 나오도록 확인하고 수정하는 단계IE, 크롬, 사파리

SCSS는 SASS 3번째 버전에서 추가된 것으로SASS의 모든 기능을 지원하면서 CSS 구문과 완전히 호환되도록 만들어졌다.중첩을 통해 부모 요소를 반복 기술하지 않고 사용할 수 있다.$를 앞에 붙인 변수를 사용하여 공통된 속성을 재활용할 수 있다.@mixin으로 함

어떤 운영체제나 브라우저를 사용하여도하나의 소스로 만들어진 동등한 수준의 정보에 접근이 가능하도록,즉 플랫폼과 상관없이 같은 컨텐츠를 볼 수 있도록 만든웹에서 표준적으로 사용되는 기술이자, 웹 개발자들 사이의 규칙의미를 가진 시맨틱 태그를 사용하여 마크업을 한다.다양한

클라이언트와 서버 간의 JWT 토큰 인증 절차에는 AccessToken, RefreshToken, AccessToken 만료시간 등 여러 개념이 사용된다.하지만 이번 포스트에서는, 처음부터 전체 과정을 보지 않고 기본 단계에서부터 차차 살을 붙여보기로 한다.먼저, Re

웹 사이트에 대한 검색엔진 로봇들의 접근을 조절해주고 제어하며,로봇들에게 웹 사이트의 사이트맵이 어디 있는지 알려주는 역할을 한다.주의: 여기서의 사이트 맵은 수집 로봇을 위한 XML 사이트 맵이며, 웹 사이트의 메뉴 전체를 보여주는 사이트 맵을 의미하는 것은 아님ro

보통 자바스크립트로 앱을 개발한다고 하면 리액트, 앵귤러, 뷰 등의 프레임워크를 사용하여 SPA를 개발하게 된다.SPA란 Single Page Application의 약자로,하나의 페이지로 구성된 웹 어플리케이션을 말한다.SPA로 만들어진 사이트를 이용할 때 헤더는 고

특정 위치에서 발생한 이벤트가 최상위 요소까지 올라가며 연속으로 발생하는 현상을 의미한다.세 개의 div 태그에 모두 클릭 이벤트를 등록하고 클릭 시 logEvent 함수를 실행하는 코드이다.최하위 요소인 <div class="three"></div>를 클릭

출처: 코딩애플 리액트 강좌자바스크립트는 일반적으로 코드를 작성하면 동기적(synchronous)으로 처리된다.이 말은 코드가 윗줄부터 차례로 실행된다는 것을 의미한다.하지만 특정 함수들을 사용하면 코드를 비동기적(asynchronous)으로 실행 가능하다.오늘 살펴볼

출처: 프론트엔드 3주차 수업 (Core Javascript 1)현재 실행 중인 코드가 끝나야 다음 코드를 실행= 현재 실행 중인 task가 종료할 때까지 다음 task는 대기장점: 코드 실행 순서가 보장된다.단점: 현재 실행 중인 task가 끝날 때까지 다음 task

깃허브 저장소영문/한글, 브랜드명/제품명을 고려하여 사용자가 원하는 영양제를 보다 쉽게 찾을 수 있도록 설계한다.검색 성능을 최적화한다.이번 과제를 하며 debounce를 적용해보았다. 검색창에 입력을 하면 입력하는 글자마다(한글은 초성, 중성, 종성 모두) 렌더링이