이 기술 블로그를 만들기 위해 5년을 미뤘다.

SSR(Server-side Rendering) SSR은 서버에서 페이지를 렌더링하는 방식으로, Next.js와 PHP, ASP 등이 이에 속한다. SSR의 동작 방식은 다음과 같다. 1. 클라이언트가 특정 페이지를 요청한다. 2. 서버에서는 해당 페이지에 필요한 데이터를 포함한 HTML 파일을 클라이언트에 전달한다. 3. 클라이언트에서는 해당 HTML 파일을 파싱하면서 필요한 정적 리소스(CSS, 이미지 등)와 자바스크립트 파일을 다운로드하며, 페이지를 렌더링한다. 이 때 사용자는 렌더링된 페이지를 볼 수는 있지만 아직 클릭 등의 인터렉션은 할 수 없다. 4. 클라이언트에서 다운로드한 자바스크립트 파일을 실행한다. 5. 페이지 인터렉션이 가능해진다. SSR의 특징은 다음과 같다. 1. 최초 페이지 로딩..

커밋을 삭제하는 방법에는 여러 가지가 있다. 삭제하고자 하는 커밋이 직전 커밋인 경우에는 git reset 명령어로 간단하게 롤백이 가능하다. # git reset HEAD~1 # 최근 1개의 커밋 삭제 + 변경된 파일은 unstaging 상태로 유지 # git reset HEAD~n # 최근 n개의 커밋 삭제 + 변경된 파일은 unstaging 상태로 유지 # git reset --hard HEAD~1 # 최근 1개의 커밋 삭제 + 변경된 파일도 함께 되돌림 # git reset --hard HEAD~n # 최근 n개의 커밋 삭제 + 변경된 파일도 함께 되돌림 # git reset --hard [커밋ID]~n # 해당 커밋 ID 기준 n개의 커밋 삭제 + 변경된 파일도 함께 되돌림 만약 예전에 했던 커..

리액트 강의를 들으면서 인증 로그인 구현 과제를 통해 공부한 firebase auth 패키지 사용법을 정리했다. 먼저, firebase 콘솔에서 프로젝트를 생성해야 한다. 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.com 프로젝트 생성을 완료했다면 앱 등록 버튼을 클릭하여 웹 앱을 생성한 프로젝트에 등록하는 작업이 필요하다. 생성한 프로젝트 홈에서 앱 추가 버튼을 클릭한 후, 웹을 클릭하면 웹 앱에 Firebase 추가라는 화면으로 이동할 수 있다. 해당 화면에서 앱 닉네임을 등록하면 Firebase SDK를 추가할 수 있는 단계로 이동할 수 있다. Firebase SDK 추가 1. firebase 패키지 설치 # np..

오늘은 프론트엔드 개발에서 많이 사용되는 디바운싱과 쓰로틀링 개념에 대해 araboza. 디바운싱과 쓰로틀링은 성능을 목적으로 자바스크립트의 이벤트를 제어하기 위해 사용되는 기법이다. 디바운싱(debouncing) 디바운싱은 스위치 회로에서 채터링(바운싱) 현상을 해결하기 위해 사용되는 개념이다. 기본 상태가 LOW, 스위치를 눌렀을 때의 상태가 HIGH인 스위치가 있다고 하자. 스위치를 한 번만 눌렀다 떼는 경우에도 눌림 상태일 때의 지속 시간이나 외부 진동, 충격에 의해 스위치가 여러 번 눌린 것처럼 동작하게 되는데, 이러한 현상을 바운싱이라고 한다. 바운스 구간의 값을 무시하기 위해 처음 HIGH 값으로 상태가 바뀌었을 때부터 특정 시간 동안은 판단을 지연했다가 해당 시간 이후에도 HIGH 상태라면..

자바스크립트에서 배열을 정렬하기 위해서는 보통 sort() 메소드를 사용한다. 배열.sort([비교 함수]) 비교 함수는 ((이전 값, 현재 값) => { 정렬 가중치 함수 }) 형태로 이루어짐 정렬 가중치 함수는 특정 조건에 따라서 1, 0, -1 처럼 정렬의 기준이 되는 값을 리턴하거나 혹은 숫자 배열의 경우에는 가중치 자체가 되는 값을 리턴한다. sort() 메소드는 원본 배열을 변경하는 함수이며, 동시에 변경된 배열을 리턴하기 때문에 특정 변수에 sort된 배열 값을 저장할 수 있다. 그리고 비교 함수를 인자로 전달할 수 있다. 비교 함수는 다음과 같은 형태를 갖는다. // 조건에 따라 0보다 큰 수(1), 0, 0보다 작은 수(-1) 중 하나의 값을 반환한다. (prev, cur) => { //..

React로 개발을 하다 보면 정말 유용하게 많이 사용되고 있는 useEffect 훅에 대해 알아보자. useEffect 훅은 클래스형 컴포넌트의 componentDidMount + componentDidUpdate + componentWillUnmount의 기능을 담당하는 훅이다. 함수 컴포넌트 내에서 사이드 이펙트를 일으키는 함수들을 실행시키고자 할 때 사용된다. // 클래스형 컴포넌트 예시 class Example extends Component { componentDidMount() { // 컴포넌트가 마운트 되었을 때 실행되는 코드 } componentDidUpdate() { // 컴포넌트 리렌더링이 완료되었을 때 실행되는 코드 } componentWillUnmount() { // 컴포넌트가 언..

자바스크립트에서는 input type="file" 태그를 이용하여 이미지를 포함한 다양한 확장자의 파일을 업로드할 수 있다. 만약 이미지만 업로드하게끔 제한하고 싶다면 accept="image/*" 프로퍼티를 추가하면 된다. 이와 비슷하게 비디오 파일만 업로드하고 싶다면 accept="video/*", 오디오 파일만 업로드하고 싶다면 accept="audio/*" 이렇게 사용하면 된다. 혹은 특정 확장자만 허용하는 방법도 있다. 예를 들어 아래와 같이 작성하면 png, jpeg 확장자를 갖는 이미지만 업로드가 가능하다. // png, jpeg 확장자를 갖는 이미지만 업로드 허용 // 혹은 이제 업로드한 이미지 미리보기를 구현하는 방법을 알아보자. 미리보기를 구현하기 위해 널리 사용되는 두 가지 방법으로는..

2021년 11월에 드디어 react-router-dom v6 정식 버전이 출시되었다. 기존에 사용되던 버전 5와 비교하여 다양한 기능이 추가/삭제되면서 자잘한 문법 수정이 이루어졌으며, 패키지 번들 사이즈도 약 70% 이상 감소했다. 그리고 react-router-dom v6은 React 16.8 이상 버전에서 사용이 가능하다. 이 두 버전의 차이점에 대해 먼저 알아보고, react-router-dom 사용 꿀팁도 알아보자. Redirect 컴포넌트 삭제 버전 5에서 유용하게 사용되던 Redirect 컴포넌트가 삭제됐다. Redirect는 사용자가 유효하지 않은 path로 접근했을 때, 올바른 특정 path로 이동시킬 수 있도록 하는 컴포넌트이다. 따라서 버전 6에서는 서버 측에서 리다이렉트 처리를 하..

window 전역 객체 내에는 location, navigator, web storage 등 다양한 프로퍼티가 존재한다. var 키워드로 선언된 전역 변수 또한 window 전역 객체의 프로퍼티로 접근이 가능하다. window 전역 객체는 식별자 window.을 앞에 붙이지 않고도 객체 내 프로퍼티에 접근이 가능하다. const path = window.location.pathname; const path2 = location.pathname; console.log(path === path2); // true window.navigator에 포함된 값으로 userAgent라는 값에 접근이 가능한데, userAgent는 HTTP 요청을 보내는 디바이스와 브라우저 등의 사용자 식별 정보를 담고 있는 head..

리덕스 강의 과제를 따라하다가 아래와 같은 오류와 직면했다. 오류 내용을 천천히 읽어 보면 action에 직렬화가 불가능한 값을 전달했다는 뜻으로 해석할 수 있다. 여기서 직렬화란 redux에서 값을 주고받을 때 object 형태의 값을 string 형태로 변환하는 것을 말한다. (JSON.stringify) 역직렬화는 직렬화의 반대로, 문자열 형태의 객체를 다시 object 형태로 되돌리는 과정이다. (JSON.parse) Redux는 state, action에 직렬화가 불가능한 값을 전달할 수 없기 때문에 에러가 발생한 것이다. 해결 방법은 다음과 같다. 아래처럼 사용한 코드를 dispatch({ type: setMovies, payload: { movies } }); ↓ dispatch(setMov..