Front-End(Web)
-
[React] 공식문서 학습(문서) : 설치Front-End(Web)/React - 프레임워크(React, Next) 2021. 4. 23. 16:18
🧐 서론 최근 다른 글에서 언급했듯이, 기술면접을 몇 차례 거치면서 React의 기본적인 개념이 많이 부족하다는 점을 뼈저리게 느꼈다. 특히, 이러한 부분들은 React 공식문서에 잘 설명되어 있었기 때문에 진작 Docs 숙독을 선행하지 않은 점이 아쉽게 느껴졌다. 그렇기에 이 공식문서 학습 시리즈는 개념정리보다는 나의 자습노트의 형태가 될 것 같다. 다만, 공식문서의 순서를 따르면서 글을 정리할 것이기에, 일종의 Docs 가이드 라인을 만든다는 생각으로 정리해보겠다. 💙 설치 - 시작하기 "React는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리" 라는 명료한 소개로 Docs가 시작된다. 공식문서, 블로그, 플레이그라운드(CodePen 등) 에 대한 소스안내가 주로 이루어지고 있었다...
-
[React] useEffect 심화 학습Front-End(Web)/React - 프레임워크(React, Next) 2021. 4. 17. 16:28
🧐 서론 프로젝트나 과제에서 useEffect Hooks를 밥먹듯이 사용하였고, 이를 이해하기 보다는 레거시 코드와, dependency array(이하 deps) 대입 테스트를 통해 구현에 초점을 두기만 했었다. 최근, 면접에서 useEffect 관련한 이슈들이 많았고, 렌더링 최적화 등 고려해야 될 조건이나 작동원리를 제대로 모르고 썼다고 느꼈다. (실제 복수의 면접에서 이러한 부분을 지적받기도 함.) 앞으로 많은 프레임워크를 학습하기 전에 React를 다지는 목적으로 React Docs에 대한 공부를 전반적으로 진행할 예정이다. Docs 구성순서로 진행하기 앞서, useEffect에 대한 심화학습을 선행해보고자 한다! 💙 useEffect 기본 - React Hooks - useEffect() 포스..
-
[Javascript] ES6(ES2015)Front-End(Web)/Javascript 2021. 4. 9. 01:12
🧐 서론 드디어, 내가 이전부터 포스팅하고 싶었던 Javascript의 ES6 문법이다! 나는 2020년에 Javascript를 처음 공부했고, 오히려 ES6 문법을 당연하다는 듯이 사용하게 된 뉴비 중 한명이다. 😚😚😚 최근 면접 준비를 하면서, 특히 이전 문법과 비교하는 강의들을 보면 기능과 편의성 측면에서 많은 개선을 지원해준 ES6 버전이다. 이를 전체적으로 훑어보고 정리해봐야겠다고 생각했으며, 동시에 감사함도 느끼는 시간이 될 것 같다! 📒 ECMAScript (선행 개념들) Javascript의 ES6는 일종의 버전이다. 2015년 버전이며, 마치 아이언맨에서 MK6(마크6) 와 같이 생각하면 되겠다. 그렇다면 ES의 뜻은 무엇인지, 버전6이 같는 의미는 무엇인지 알기 위해선 우선 선행되는 개..
-
[Javascript] 이벤트(Event)Front-End(Web)/Javascript 2021. 3. 16. 13:56
React의 이벤트에 대해 포스팅하면서, Javascript에서의 이벤트 핸들링과 흐름, 관련된 개념들 역시 정리할 필요성이 있었다. Javascript 관련된 내용을 분리했으며, 이를 토대로 이벤트 위임까지 한번 정리해보도록 하겠다. 📒 Event Handling React 합성 이벤트의 다양한 attribute들을 알아보면서, 이벤트가 기본적으로 어떻게 브라우저에서 감지되고 전파되는지 공부할 필요를 느꼈다. 그래야, bubbles의 개념이나, eventPhase의 각 페이즈를 이해할 수 있겠다고 생각했다. 1. 이벤트 핸들링(Handling) 이벤트는 마우스 클릭이나 키보드 입력같이 일반적으로 사용자가 행하는 모든 동작을 일컫는다. 이러한 이벤트를 원하는데로 처리하는것을 이벤트 핸들링 이라고 한다. ..
-
[React.js] SyntheticEvent(합성 이벤트)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 15. 06:44
프로젝트를 진행하며 마우스 이벤트를 정리한다는게... 이벤트 공부로 판이 커져버렸다 😀😀 React 공식문서는 지원 이벤트를 "합성 이벤트" 개념과 함께 소개했고, 합성 이벤트를 공부하던 차에 이벤트 핸들링과 연계는 필연적이었기 때문이다. 이번 포스팅은, e(합성 이벤트)에 대해 자세히 공부하고, React가 지원하는 이벤트 종류를 한번 훑어보고자 한다! * 포스팅 : React 이벤트 핸들링(abangpa1ace.tistory.com/128) 📒 합성 이벤트(SyntheticEvent) 란? SyntheticEvent는 객체로 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper 객체이다. 대부분의 인터페이스는 브라우저 고유 이벤트와 같다. * 소프트웨어에서 래핑(Wrapping) 이란, 기..
-
[React.js] Event Handling(이벤트 처리)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 15. 06:25
React에서 컴포넌트를 만들면서, 다양한 이벤트와 연계해야되는 경우가 많이 발생한다. (클릭, input change 등) 특히, 이번 3차 프로젝트를 하면서, Navbar 메뉴들의 마우스 오버가 바뀔때마다 표현되는 서브메뉴가 달라지도록 만들어야했고, 여기에 하강 애니메이션까지 추가되야했다. 이를 구현하기 위해, React의 mouse 이벤트 종류와 차이점을 제대로 공부하는 기회가 되었고, 이벤트에 관한 포스팅 필요성을 느꼈다. 📒 이벤트 처리하기 React 요소의 이벤트 핸들링은 DOM에 대한 이벤트 핸들링과 매우 유사하다. 하지만, 아래와 같은 차이점은 있다. 이벤트 명을 소문자가 아닌 cammelCase로 작성한다. onclick(x) => onClick(o) 이벤트 핸들러를 문자열이 아닌 함수로..
-
[Javascript] 객체의 복사 (깊은 복사, 얕은 복사)Front-End(Web)/Javascript 2021. 3. 12. 17:43
🤔 서론 알고리즘을 풀거나, 웹페이지에서 배열상태를 최신화할때 경험했던 일이다. "나는 사본을 수정했는데, 왜 원본도 같이 바뀌지???" 자바스크립트에서 배열이나 객체를 복사하는데 다양한 방법이 있으며, 이들은 조금씩 다른 원리를 가지고 있던 것이다! 📒 복사 복사는 원본가 모두 같은 내용으로 사본을 만드는 작업이다. 원본과 사본이 각각 존재하며, 이들의 관계에 따라 복사종류를 구분할 수 있다. - 얕은 복사 사본을 만들어내지 않고 원본을 참조하도록 소위 "복사한 척" 을 하는 것이다. 1. 참조 할당 const arr1 = [1,2]; const arr2 = arr1; arr2[0] = 3; console.log(arr1[0], arr2[0]);// 3 3 가장 기본적인 형태이다. arr2 변수에 ar..
-
[React.js] Custom Hooks (Rules of Hooks)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 11. 05:09
이전에, 미니 프로젝트나 다른 함수형 코드들을 참고하다보면, useOOOO 형태의 몰랐던 Hooks 들이 가끔 보일 때가 있다. 이는, React에서 제공하는 Hooks API가 아닌, 개발자가 임의로 만든 Custom Hook 이라는 사실을 알게 되었다. 이 Custom Hook 의 개념과 의의(주는 반복의 최소화), 각종 사례를 공부하고, 3차 프로젝트가 스프린트보다 빨리 끝나게 되어 일부 반복기능을 커스텀 훅으로 수정해보려고 한다! 📒 Custom Hooks 소개 - Custom Hooks 를 왜 사용하는가? React의 Hooks 개념은 16.8버전(2019년 초) 에서 새로 추가되었다. 함수형 컴포넌트가 클래스형을 대체하도록 많은 기능을 지원하기 위해 등장했으며 아래와 같은 장점들을 뽐내며 소위..