Front-End(Web)/React - 프레임워크(React, Next)
-
[Next.js] Pre-RenderingFront-End(Web)/React - 프레임워크(React, Next) 2021. 7. 7. 01:45
오늘도 역시, Next.js의 주요기능인 Pre-Rendering에 대해 포스팅하려고 한다. 이전에, Next.js 입문에서 작성한 Pre-Rendering 부분을 좀 더 구체화하며, 관련된 메서드까지 소개하기 위함이다! * 이전 포스팅(Next.js 입문) : https://abangpa1ace.tistory.com/177 [Next.js] Next.js 입문 🤔 Next.js를 시작하며.. 정말 오랜만에 블로그를 쓰는것 같다. 이제 입사 1개월이 되어 task를 맡기도 하고, 구현에 맘이 앞서다 보니 중간중간 찾아본 주요한 정보들을 정리하는 시간을 가지지 못 abangpa1ace.tistory.com React 개발을 하면서, Data Fetch를 위해 componentDidMount() 라이프사이클..
-
[Next.js] Dynamic Routes(페이지 이동)Front-End(Web)/React - 프레임워크(React, Next) 2021. 7. 1. 21:32
오늘은 next.js의 주요 기능 중 하나라고 할 수 있는, 페이지의 구성과 이동(라우팅)에 대해 포스팅하려고 한다. 사실, React에서도 라우팅에 관한 서드파티를 지원한다.(React-Router-DOM) 이를 통해, 라우터 경로별로 컴포넌트를 그린다. Next도 비슷한 원리로 라우팅을 지원할 것이며, React-Router와는 다른 차이점 혹은 장점이 있기에 사용되는 걸거라 예상된다. 사용법과 그 장점에 대해 한 번 학습해보겠다! 🤍 Pages & Dynamic Routes Next.js 프레임워크의 사용규칙 중 하나는 바로, 페이지 컴포넌트들은 반드시 Pages 디렉토리에 담아야한다는 것이다. 그 이유는, 이 Pages 디렉토리 경로값이 곧 우리가 이동할 페이지 컴포넌트의 경로값이 되기 때문이다!..
-
[Next.js] Next.js 입문Front-End(Web)/React - 프레임워크(React, Next) 2021. 7. 1. 01:48
🤔 Next.js를 시작하며.. 정말 오랜만에 블로그를 쓰는것 같다. 이제 입사 1개월이 되어 task를 맡기도 하고, 구현에 맘이 앞서다 보니 중간중간 찾아본 주요한 정보들을 정리하는 시간을 가지지 못했다. 회사에서 FE 선임 개발자님, 그리고 기획 및 디자인과 함께 모바일 서비스를 만드는 사이드 프로젝트를 시작하게 되었다. React를 오랜만에 사용하니 떨리기도 하고, 새로운 기술을 적용할 생각에 우려가 앞서기도 한다. 이를 위한 학습 및 포스팅이 될 것 같다. 새로운 기술들 중, 요즘 화두가 되는 SSR을 지원하는 Next.js 프레임워크 적용에 흥미가 생겼으며, 사이드와 병행하여 가능한 학습도 같이해볼 생각이다! 🤍 Next.js 란? Next.js는 2016년 등장한 React 어플리케이션의 S..
-
[React] 공식문서 학습(문서) : 고급 안내서 (1), 작성중..Front-End(Web)/React - 프레임워크(React, Next) 2021. 5. 4. 21:30
고급 안내서는 카테고링 없이 심화기능이 열거되어 있다. 글을 정리하다 분량이 길어지면 나눌 생각이다. 💙 접근성 웹 접근성은 모두가 사용할 수 있는 웹사이트를 디자인, 개발하는 것을 의미한다. React는 접근성을 적극 지원하며, 대부분은 표준 HTML 기술이 활용된다. 0. 표준 및 지침 WCAG(Web Content Accessibility Guidelines) 라는 접근성을 갖춘 웹사이트를 만드는데 필요한 지침을 제공한다. (링크 : www.w3.org/WAI/standards-guidelines/wcag/) WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 문서는 접근성을 갖춘 JS위젯을 만드는 기술들을 제..
-
[React] 공식문서 학습(문서) : 주요 개념Front-End(Web)/React - 프레임워크(React, Next) 2021. 4. 28. 18:25
🧐 서론 문서의 첫 시작이었던 설치는 아무래도 개발보다는 전반적인 소개에 가까웠다. 이 주요개념을 공부하는 것이 React를 시작하며 허술했던 기반을 다져줄 수 있을거라 기대된다! (분량이 많다면 나누어야할듯) 💙 설치 1. Hello World ReactDOM.render( Hello, world!, document.getElementById('root') ); 모든 언어와 프레임워크를 시작하면 "Hello World" 출력이 첫 걸음이다. 이 역시, React의 가장 기본적인 조작으로 "Hello, world!" 글귀의 제목 엘리먼트(혹은 요소, 태그 등) 를 렌더링한 모습이다. 2. JSX 소개 const element = Hello, world!; React 컴포넌트가 반환해야 할 형태이며, 이는..
-
[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() 포스..
-
[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) 이란, 기..