개발공부/javascript6 [Javascript] React와 Vue, Angular의 차이점 회사를 알아보고 있는데 생각보다 Vue를 쓰는 곳들도 많아서 이번에 공부 할 겸 React와 Vue, Angular의 차이점을 적어볼까한다 무언가 표로 정리해보고 싶었는데 표 정리를 좀 어렵구나 ㅎㅎ 왜 다들 글로 풀어냈는지 알겠다 그래도 좀 보기 편하게 장표는 그대로두고 장표에 대한 설명을 부가적으로 적어보자! No Angular React Vue 1 구글에서 지원 페이스북의 지원 Evan You 개인이 유지보수 2 큰 커뮤니티 가장 거대한 커뮤니티 상대적으로 작지만 충분한 커뮤니티 3 양방향 바인딩 단방향 바인딩 양방향/단방향 둘 다 가능 4 x Virtual Dom Virtual Dom 5 단일 파일 컴포넌트(Single File Component) 6 프레임워크 라이브러리 프레임워크 중요하지 않은.. 2022. 4. 19. [javascript]이벤트 버블링과 캡처링에 대해 이벤트 버블링와 캡처링에 대한 글을 써볼까한다 사실 이전에는 용어가 낮설어서 어려운 내용일까봐 걱정했는데 코딩하면서 계속 사용하고 있었던 이벤트 버블링!!!! 이벤트 버블링과 캡처링을 알아보기 전에 이벤트의 개념부터 알아보쟈 첨부터 이벤트버블링, 캡처링을 알아봐서 그런가 더 어렵게 느껴져서 처음부터 정리를 해봅니다! 이벤트란? 웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것 우리가 평소에 - 마우스로 로그인 버튼을 클릭하거나, - 인풋박스에 커서를 아웃하거나 , - 더블클릭하거나 - 텍스트를 드래그하여 선택하거나 - 페이지 로딩이 완료되어간, - 페이지가 다른곳으로 이동 될 때 이 모든 것들이 이벤트라고 한다 진짜 너무 너무 잘 사용하고.. 2022. 4. 19. 자바스크립트 변수 var, let, const 차이점 어느덧 변수차이도 블로그에 적는 날이 오는구나 뭐가 다른거지? 하고 const만 썻던거 같은데 면접용 말고 한번 정리하면 좋을 듯 싶어서 이해하기 쉽게 정리를 해두려고 한다 1. var 예전에는 자바스크립트 변수선언이 var만 가능했다고한다. var로 변수 선언을 했을 때의 가장 큰 특징은 중복 선언이 가능하다는 점 var a = 100 console.log(a) //결과값 100 var a = 200 console.log(a) //결과값 200 var a = 300 console.log(a) //결과값 300 여기서 변수명을 같은 a로 쓰고 있는데, 같은 변수명을 계속 선언해주어도 에러가 나지 않는다 선언 해줄 때마다 값이 초기화 되는거라 최종적으로 저장되는 값은 마지막에 선언해준 300으로 나오게 된.. 2022. 4. 18. 자바스크립트 [React] Component & props & state 개념 이해 📃 리액트는 *컴포넌트 기반의 view를 중심으로 한 라이브러리이다. 곧, 리액트는 레고 ! 컴포넌트를 블록이라고 표현 할 수 있는데 why ? ! 블록 (=컴포넌트)를 가지고 레고 (=리액트)를 만들 수 있으니깐요! 🤷♂️ 도대체 Component & props & stae가 ..뭔대!? 📌 Component (컴포넌트는 레고에서 "블록"을 담당하는 것과 같은 의미) - 클래스형과 함수형으로 나눌 수 있지만 앞글에서 말한것과 같이, 리액트 자체에서 함수형 사용을 권장하고 있다고 합니다! ( 대신, 이전에 짜인 코드의 경우 클래스형도 있을 수 있으니 회사 입사 할 때 코드를 보고 이해 할 수 있어야하니 클래스형도 공부하면 좋은것!) 예를들면, 아래 네이버의 컴포넌트를 무엇일까? (정답이 아닐 수 있습니.. 2022. 1. 23. 자바스크립트 리액트 라이프사이클의 이해 📃리액트 라이프사이클이란? 리액트는 *컴포넌트 기반의 view를 중심으로 한 라이브러리이다. 컴포넌트의 라이프 사이클(= 컴포넌트의 생명주기)는 정말 중요한 개념인데, 컴포넌트가 *렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클입니다. * 컴포넌트: 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈 * 렌더링 : React입장에서 rendering은 data를 html로 변환해서 renderer에게 전달하는 일괄 작업 ✔️ 컴포넌트는 생성 > 수정(업데이트 > 제거 ✔️ 생성은 처음으로 컴포넌트를 불러오는 단계 (= 모듈을 불러오는 단계) ✔️ 수정(업데이트)는 사용자의 행동( 클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트가 됨! - pro.. 2022. 1. 23. javascript 로딩 후 바로 실행 코드 (jQuery 활용) 자바스크립트에서 로딩 후 바로 실행코드에 대해서! 자바스크립트에서도 로딩 후 바로 실행코드는 여러가지가 존재하지만! 내가 배운 ready 부분에 대해 어떻게 실행 시키는지 궁금해서 찾아보았고 기록용 기본적으로 ready 코드를 사용하려면 꼭 jQuery import 해줘야지 가능한 부분이니 상단부분에 들어가있는지 확인! jQuery ready 를 활용한 로딩 후 바로 실행코드 $(document).ready(function () { listing(); }); *기본 고정코드 (빨간색) / 변경 가능한 값(파란색) $(document).ready(function () { listing(); }); function listing() { console.log('화면 로딩 후 잘 실행되었습니다'); } chec.. 2021. 12. 28. 이전 1 다음 반응형
