프론트엔드 스터디에서 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 사용하기 -> 리액트

리액트는 SPA 방식으로 라우팅을 구현한다.React-Router-Dom은 리액트의 라우팅 관련 라이브러리로 현재 v6까지 발표되었다.이전 버전인 v5와 v6는 문법적으로 차이가 있다. v6의 문법과 함께 v5에서 어떻게 바뀌었는지 정리해보겠다.React-Router-

리액트에서 스타일링을 하는 방식은 3가지가 있다.기존의 방식과 동일하게 css 파일을 따로 분리하여 사용하는 방식이다.기존에 html 파일에서 css 파일을 연결할 때는 <link> 태그를 사용하여 연결하였지만, 리액트에서 css를 연결할 때는 import를 사용

📚프론트엔드 기술 면접 대비 스터디 1주차브라우저 렌더링 과정을 설명해주세요호이스팅에 대해서 설명해보세요클로저는 무엇인가요? 원리와 왜 사용하는지 설명해주세요 2주차스코프란 무엇인가요?실행 컨텍스트에 대해서 설명해주세요Async, Await와 Promise의 차이는

- 220606 ~ 220607 드디어 2주간 프로젝트를 마치고 리액트 수업을 시작했다. 프로젝트 회고도 조만간 작성할 예정이다. 리액트는 이번이 처음 접하는 건데 왜 요즘 강세인지 바로 알 것 같다. 아직 헷갈리긴 하지만 jsx 문법이 너무 편리한 거 같다. 코드를