pull to refresh를 구현하다가 막혔던 ios 이슈를 해결한 방법을 기록해보려고 한다. 현업에서 일하다 보면 내 블로그를 내가 참고하게 되는 일이 참 많다. 과거의 나에게 또 물을 수 있도록 미루던 블로깅을 이제서야 한다.🥲ios에서는 기본적으로 scroll

1. Next.js란? Next.js는 리액트 기반의 서버사이드 렌더링 프레임워크이다. React는 클라이언트 사이드에서만 작동한다는 특징이 있는데, 이로 인해 SEO 효과가 저조했으며 초기 렌더링시 성능 부담이 크다는 문제점이 존재했다. 이러한 문제점을 해결하기

자바스크립트에서History API는 history 전역 객체를 사용하여 브라우저의 세션 히스토리에 대한 접근과 조작 기능을 제공한다. 여기서 세션 히스토리는 페이지 방문 이력을 의미한다. 즉, 세션은 유저가 새 페이지를 열 때마다 쌓이며, 이를 통해 브라우저에서 앞으

모달 예시웹개발을 하다보면 자주 접하게 되는 UI 중 하나가 모달 혹은 팝업이다. 그런데 이런 모달이나 팝업을 띄웠을 때 고려해야 하는 것 중 하나가 바로 뒤로가기 버튼이다.UX적으로 생각해보았을 때 모달은 페이지 변경이 아닌 레이어 위에 쌓이는 형태이기 때문에 라우팅

프론트엔드 스터디에서 eject를 해보게 되었는데, eject를 하고 나니 Parsing Error가 뜨면서 파일마다 빨간줄이 뜨고 난리가 났었다.ㅠㅠ생각보다 간단하게 해결이 되었는데, 여러 삽질 끝에 해결한 방법을 공유해보겠다.우선 eject가 무엇인지 알고 들어가자

CRA 환경에서 eject하지 않고 Craco를 활용하여 절대경로 설정할 수 있다. 구글링 해보면 craco-alias를 활용하는 방법이 많이 나오는데, 현재는 지원하지 않는다고 한다. 몇 시간의 삽질 끝에 성공한 craco만으로 적용하는 방법을 정리해보려고 한다.\*

Vue MVVM 패턴의 ViewModel 레이어에 해당하는 화면(View)단 라이브러리 ✨Vue의 핵심 - Reactivity (반응성) -> 데이터가 바뀌면 변화를 감지하고 알아서 화면에 반영함 1. 뷰 인스턴스(instance) 인스턴스는 뷰로 화면을 개발하

8월 말부터 취준을 시작하여 감사하게도 한 달만에 취업이 되었다. 한 달 동안 면접을 보러 다니면서 느낀 점은 질문 내용이 다 비슷해서 단골 질문 리스트만 잘 공부해가면 기술 면접은 문제 없다는 것이었다. 그래서 내가 면접 대비하면서 공부하고 실제로 받았던 질문 리스트

앞서 말한 HTTP의 특징으로 인해 쿠키, 세션 외에도 JWT 인증 방식을 사용한다. JWT(Json Web Token) 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰을 의미합니다. JWT 정보를 request에 담아 사용자응 정보 열람, 수정 등 개인적

CSR(Client Side Rendering)은 렌더링이 클라이언트 측에서 발생한다.CSR은 유저가 웹사이트에 방문하면 브라우저가 서버에 콘텐츠를 요청하고 서버는 빈 뼈대만 있는 html을 응답으로 보내준다. 이 때문에 처음에 접속하면 빈 화면만 보인다는 문제점이 있

1. This this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 자바스크립트의 this는 호출에 따라 달라진다. 1-1. 기본

1. 브라우저 렌더링 과정 DOM 생성 렌더링 엔진은 HTML 문서를 파싱하여 HTML 문서에 있는 모든 것들로 DOM을 구성한다. CSSOM 생성 렌더링 엔진은 DOM을 생성하다가 css 태그를 만나면 css를 파싱하고 CSSOM을 만든다. CSSOM은 DOM이

1. 호이스팅 호이스팅(Hoisting)은 변수 선언문이 마치 호이스팅 최상단에 끌어올려진 듯한 현상이다. 실제로 선언문이 있는 코드라인을 물리적으로 최상단으로 끌어올린 것이 아니라, 자바스크립트 엔진이 먼저 코드 전체를 스캔하면서 변수를 실행 컨텍스트에 미리 기록해두

프로젝트 주제: 공간 대여 예약 플랫폼프로젝트명: TWOGATHER(투게더)제작 기간: 22.07.04 ~ 22.07.24 (3주)기술 스택 프론트엔드: React, JavaScript, Styled-components, Axios 백엔드: TypeScript, N

- 220627 ~ 220628 서버사이드 렌더링 > - 렌더링 방식 CSR - Client Side Rendering SSR - Server Side Rendering SSG - Static Site Generation ISR - Incremental Static

1차 프로젝트를 마친 후 바빠서 미뤘던 프로젝트 회고를 작성해보고자 한다.프로젝트 주제 - 캡슐커피 쇼핑몰프로젝트명 - ${elicebucks} (엘리스벅스)제작 기간 - \[220523 ~ 220605] 2주간 진행기술 스택 - Vanilla js, Node js,

- 220620 ~ 220621 crud의 전체적인 내용 정리와 상태 관리 훅에 대해서 학습했다. 온라인 강의 실습 내용이 유독 어려웠는 데, 기본 개념이 제대로 학습되지 않은 상태에서 코드를 짜려하니 너무 힘들었다. 그래서 결국은 혼자 블로깅 하면서 따로 개념 학습을

1. Redux Redux는 앱 전체 상태를 쉽게 관리할 수 있는 라이브러리이다. Redux는 리액트만을 위한 라이브러리는 아니며, 다른 언어에서도 사용할 수 있는 라이브러리이다. Redux를 사용하면 앱 전체 상태 관리 뿐만 아니라, 비동기 처리 상태 관리에 용이하

0. 상태 관리 기술 상태 관리 기술이란, 여러 컴포넌트에서 데이터를 공유하는 것을 의미한다. 상태 관리 기술을 도입하면 데이터 관리를 더욱 효율적으로 할 수 있고, 성능과 네트워크를 최적화하는 데 유리하다. 로직이 복잡해지고, 잘못 사용한다면 되려 성능이 악화될 수

- 220613 ~ 220614 > - 리액트에서는 인라인으로 스타일을 넣는 방법이 권장된다. 각각의 컴포넌트를 만들어서 재사용하기 편하기 때문 컴포넌트에 컨텐츠를 넣으면 props에 childern으로 전달된다. styled-components 사용하기 -> 리액트