# FE
CORS?!
다들 웹 개발하시다보면 한번쯤 보시겠죠...저 친구는 흔히 CORS error 라고 명명하는데요. 여기서 CORS 는 Cross Origin Resource Sharing 의 약자입니다.🙋 아니 풀네임이 뭐던간에 저게 뭔데요?🤖 웹사이트에서 주소가 다른 서버로 요청
20210802
렌더링 최적화 이외에도 페이지 로드 과정을 최적화하는 것으로도 성능 최적화가 가능하다.첫번째로는 HTML 및 Css 코드를 올바른 장소에 작성하는 것이다. 예를 들어, Css 코드의 경우 렌더링 트리 형성 등을 위해 <head> 태그 내부에 임포트해야 하고, &l
20210801
렌더링 최적화에 대해서 깊히 공부하려다보니 브라우저의 구조 및 구성 요소나 작동 원리 등에 대해서 이해하고 있어야 렌더링 최적화또한 제대로 할 수 있을것 같아 브라우저 작동 원리에 대해서도 조금씩 공부를 시작했다.사용자가 url에 접속하면 이전에 접속한 적이 있는 페이
20210727
react의 hook 메서드중 하나인 useEffect는 DOM이 업데이트 된 후의 동작을 설정할 수 있는 side-effect 메서드로, react class 컴포넌트의 componentDidMount와 componentDidUpdate, componentWillUn
AACP 3일 간의 삽질..
사용자가 강좌를 추가할 때, 강좌를 수강하는 학생들도 추가하게 되는데 그 컴포넌트를 작성하였다. 정말 기본적인 CRUD이지만 내맘대로 코딩하다가 이런 사태가 발생했고 map을 통해 해결하였다. 근본적으로 하위 컴포넌트를 상태로 만든 것이 문제였고 이렇게 만들었어도 ma
javascript-promise패턴, async, await
try 블록 내에서 setTimeout 함수가 실행되면 1초 후에 콜백 함수가 실행되고 이 콜백 함수는 예외를 발생시킨다. 하지만 이 예외는 catch 블록에서 캐치되지 않는다.비동기 처리 함수의 콜백 함수는 해당 이벤트(timer 함수의 tick 이벤트, XMLHtt
DOM , Virtual DOM
실제로 웹 개발을 하시는 분들 ( 저 포함 😅 ) 중에서도 DOM의 존재를 알고 있지만 막상 설명을 잘 못하신다던가.. 정확하게 DOM 은 이거야! 라고 알고있지 않기도 하다.그래서 이번에는 나중에 누군가 DOM이 뭐야..? 라고 초등학생이 물어봐도 쉽게 설명할 수
CSR(Client Side Rendering)과 SSR(Server Side Rendering)
CSR(Client Side Rendering) 클라이언트 사이드 렌더링은 클라이언트 사이드에서 HTML을 반환한 후에, JS가 동작하면서 데이터만을 주고 받아서 클라이언트에서 렌더링을 진행하는 것을 말합니다. > 동작 과정 : HTML 다운로드 → JS 다운로드
이벤트 버블링, 캡처, 위임
이번 포스팅에서는 이벤트 버블링과 이벤트 캡처, 이벤트 위임에 대해 알아보겠습니다.이벤트 등록이란? 웹 애플리케이션에서 사용자의 입력을 받기 위해 필요한 기능입니다.이처럼 addEventListener() 웹 API는 웹 개발자들이 화면에 동적인 기능을 추가하기 위해
OSWSW 프로젝트 issue #4
위 사진과 같이 가격은 오른쪽에 정렬되고 메뉴 이름은 왼쪽에 정렬되어야 하는 UI의 경우메뉴에 float: left가격에 text-align:right속성을 부여하여 작성한다. 하지만 float으로 작성할 시 주의점이 있다. 우리 즉 개발자가 보기에는 화면에 "메뉴"가
React-Redux#2
containers도 만들어서 컴포넌트를 감싸는 컴포넌트를 만드는 작업이 번거롭고 시간이 걸린다. 또한, 중간에 container가 끼어들기 때문에 상위 컴포넌트에 있는 property를 또, 하위 컴포넌트로 전달해야 하는 일이 생긴다. 이를 해결하기 위해 React-
React-Redux#1
Redux는 무엇일까? > 상태를 중앙에서 관리하는 것을 통해서 데이터가 우리가 예측하지 않은 대로 변형되는 가능성을 낮춰주는 기술이다. > React, Redux 모두 개발의 복잡성을 낮춰주는 기술이다. React-Redux 라이브러리 > 를 사용하면 변경된 소식이