- 전체보기(26)
- TIL(15)
- React(6)
- js(3)
- deepdive(3)
- hooks(3)
- review(2)
- cors(2)
- vue(2)
- network(2)
- CSS(2)
- Component - Presenter(1)
- test(1)
- 자료구조(1)
- http(1)
- REST(1)
- SSR(1)
- 시간복잡도(1)
- hackathon(1)
- codesquad(1)
- 알고리즘(1)
- MVC(1)
- Recoil(1)
- Q&A(1)
- ts(1)
- useEffect(1)
- useState(1)
- e2e(1)
- 책(1)
- 책 리뷰(1)
- 에러해결(1)
- error(1)
- REST API(1)
- MVVM(1)
- Big O(1)
- v model(1)
- useRef(1)
- this(1)
- 테스트코드(1)
- 실행 컨텍스트(1)
- useLayoutEffect(1)
- virtual DOM(1)
- MVI(1)
- CSR(1)
- Flux(1)
Warning: Cannot update a component (`A`) while rendering a different component (`B`). To locate the bad setState() call inside `B`, follow the stack trace as described in *** 에러 해결
이 에러는 A 컴포넌트를 변경할 때 B 컴포넌트를 업데이트 할 수 없다는 내용이다. 리액트 깃허브에서 친절하게 에러가 난 부분을 설명해주고 있다출처 : facebook React GitHub(https://github.com/facebook/react/issu
테스트 코드 작성하는 이유
장점사람이 수행해야 하는 반복된 테스트를 자동화 할 수 있음 (비용 감소)사람이 수행하는 것보다 훨씬 빠르게 테스트할 수 있음사람이 수행하는 것보다 더 신뢰할 수 있음단점감각적인 요소(시각, 청각) 등 사용자 경험과 관련된 문제를 찾아낼 수 없음실제 환경에서 벌어지는
양방향 바인딩 - v-model
프론트엔드에서 입력 양식을 처리할 때 입력 요소의 상태와 자바스크립트의 상태를 동기화해야 하는 경우가 있는데, 이 작업을 단순화 하고 양방향으로 데이터 바이딩할 수 있게 Vue.js에서 제공하는 메서드 입니다v-model 속성은 v-bind:value와 v-on:inp
개발자의 글쓰기
많은 개발자들이 어려움을 겪고있는 문제개발 하면서 느끼는 문서의 중요성되도록 주석이 필요 없게끔 하되, 한번에 파악하기 어려운 곳에는 주석을 작성한다.API문서를 볼 때 검색해서 예제를 보고 따라하는 경우가 존재한다.이런 독자를 위해서는 같은 주석이라고 해도 반복해서
FE MV* (2)
Flux는 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처 스타일대규모 애플리케이션에서 데이터 흐름을 일관성 있게
FE MV* (1)
View (화면)웹 프론트에서 최종적으로 HTML과 CSS로 만들어지는 결과물을 의미함즉 최종 사용자에게 무엇을 UI로 보여주기위한 역할Model (데이터)데이터를 다루는 영역Model의 범주javascript의 Object서버의 API로 받는 데이터Controller
Vue 입장에서 작성한 Vue VS React & Vue 기본 문법
프레임워크 vs 라이브러리 특징 FrameWork 원하는 기능 구현에 집중하여 개발할 수 있도록 필요한 기능을 갖추고 있는 것 일정한 형태를 가지고 다양한 형태의 결과물을 만드는 것 Library 소프트웨어를
반응형 디자인
PC || Tablet영역들이 가로로 여러 줄 배치 됨Mobile영역들이 세로로 한줄 씩 배치 됨PC, Tablet, Mobile 등 각각의 기기별로 웹 페이지가 최적화되어 보여지는 기능.화면이 작은 기기에서는 작은 화면으로 최적화해서 보여주고 큰 화면을 가진 기기에서
useLayoutEffect vs useEffect
MountUpdate (when state changes based on any event)UnMountRun lazy initializer RenderReact updates DOMRun Layout EffectsBrowser paints the screenRuns
React - useRef Hook
useRef는 .current프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. 본질적으로 useRef는 .current프로퍼티에 변경 가능한 값을 담고 있는 상
React - Virtual DOM
Document Object Model (문서객체모델)의 약자이다.문서 객체 란 Web Browser 안에서 HTML 문서에 JavaScript 가 접근할 수 있도록 <html 태그> 들을 객체 (object) 로 만든 것이다. DOM은 애플리케이션의 UI를 나타
React - useState는 동기적 비동기적
들어가기 전에 useState 란 useState는 컴포넌트에서 state값을 추가할때 사용된다. 함수형 컴포넌트에서는 클래스형 컴포넌트처럼 state를 사용할 수 없어, Hook을 사용해서 state와 같은 기능을 할 수 있도록 만들어주었다. state와 Hook
TS 랜덤 rgb 색상 구하기
랜덤하게 0 ~ 255 사이의 숫자를 3개 구한다.랜덤하게 구한 r, g, b를 16진수 값으로 변경시켜 주고 소문자로 나온 값을 대문자로 변경시켜준다.16진수로 변경된 값을 \`4. 유효한 랜덤의 RGB 값을 구하고 한 번 더 16진수로 변화 후 앞에 #을 붙인 후
SSR과 CSR
SSR이란 단어 그대로 서버에서 렌더링 작업을 하는것을 의미합니다. 기존에 존재하던 방식으로 사용자가 웹페이지에 접근할 때 서버에서 페이지에 대한 요청을 하며 서버에서는 html, view와 같은 리소스들을 어떻게 보여질지 해석하고 렌더링하여 사용자에게 반환합니다.위의
프론트엔드에서 CORS 에러 해결하기
npm install http-proxy-middlewaresrc 폴더안에 ( /src/setupProxy.js )밑에 처럼 설정끝
CORS 란
다른 출처의 리소스를 사용하는 것에 제한 하는 보안 방식URL의 Protocol, Host, Port를 통해 같은 출처인지 다른 출처인지 판단할 수 있다.ex) http://github.com:443 : http : 프로토콜, github.com : 호스트,
브라우저의 렌더링 과정
브라우저 렌더링 과정 HTML, CSS, JS, Image, Font, File 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받는다. 렌더링 엔진은 서버로부터 응답된 HTML,CSS를 파싱하여 DOM과 CSSOM을 생성한 후 이들을 결합하여 렌더 트리를 생성한다