react 썸네일형 리스트형 [트위터] Webpack 리액트 컴포넌트 분리 안녕하세요. 서비스 기획자 소소한 G입니다. 오늘은 트위터 예제를 이용하여 리액트 컴포넌트 분리하는 방법에 대해 배워보아요. twitter 홈 만들기 컴포넌트 분리(button, sidebar), svg 불러오기를 통해서 왼쪽 메뉴를 만들어봅시다. components 폴더를 생성하여 컴포넌트로 분리할 button, Sidebar 폴더를 생성합니다. 우선 Sidebar 부터 분리해보자. [Sidebar] 1. index.jsx 에서 기본 설정을 해준다. 그리고 css module을 사용해서 스타일을 사용하기 위해서 아래와 같이 scss 파일도 import 해 준다. 전체적인 Sidebar 의 index.jsx의 코드는 아래와 같다. 1. Sidebar의 parameter 안에 titleImg, list 데.. 더보기 [webpack] webpack이란? 안녕하세요. 이제 막 기획자로 시작한 아기 기획자 소소한G 입니다. 비전공자 출신으로 IT 웹 기획자로서 살아남기위해 일주일에 두번 프로트엔드 개발 수업을 듣고 있어요. 온전히 비전공자의 시선으로 꼼꼼하게, 원초적으로 설명드리려고 합니다. 저처럼 초보자 웰컴이에용 오늘은 webpack에 대해서 알아보려고 해요. webpack이란? - 모듈 번들러이다. (모듈 번들러에는 webpack과 pacel 등이 있다) - 모듈 번들러 : 여러개의 나누어져 있는 파일들을 하나의 파일로 만들어주는 라이브러리 웹페이지에서는 페이지를 보여주기 위한 수많은 자바스크립트 파일을 서버에 요청한다. 그래서 웹페이지를 보여주기 위해 서버와 여러번 통신하게 되는게 비효율적이다 라고 볼 수있다. 이런 문제를 해결하기위해 최신 자바스크.. 더보기 [마이리얼트립] Hook 이용하여 반복 리스트 컴포넌트화(배열) 안녕하세요. 이제 막 기획자로 시작한 아기 기획자 소소한G 입니다. 비전공자 출신으로 IT 웹 기획자로서 살아남기 위해 일주일에 두번 프로트엔드 개발 수업을 듣고 있어요. 온전히 비전공자의 시선으로 꼼꼼하게, 원초적으로 설명드리려고 합니다. 저처럼 초보자 웰컴이에용. 앞의 포스팅에 이어, Hook을 이용하여, 함수형 컴포넌트를 사용하면서 마이리얼트립에서 반복되고 재 사용될 부분을 연속적으로 리스트를 가지고 있고 이를 하나의 배열로 가지고 오는 상태로 컴포넌트화 시켜볼거에요. State Hook을 사용한 앞의 포스팅은 아래 링크에서 참고해주세요. https://hjp-recipe.tistory.com/38?category=835412 [마이리얼트립] State Hook을 사용하기(+컴포넌트화) 안녕하세요... 더보기 [리액트] 이론 2_이해하기 React란? - SPA에 특화된 Framework (SPA 작업을 하는데 있어 효율적인 개발이 가능하도록 돕는 틀) - 서버에서 데이터가 내려오든 클라이언트에서 데이터를 들고 있어서 데이터를 내려주든 페이지에서 하나의 레이아웃이 완성되는 것 즉, 데이터에 반응해서 페이지 레이아웃을 그려주는 것 React는 어떻게 동작할까? Angular, vue, svelte, react 이 네가지는 공통적으로 데이터 철학을 가지고 있다. 각각 다 다른 개발자들이 개발했기 때문에 프로세스는 다르지만 가지고 있는 구조는 동일하다. SPA Framework의 내부동작 방식 [Rendering Engine에 대해 다시한번 정리해보자] 기계는 0과 1밖에 알지못해서 브라우저와 통신하기위해 중간에서 OS가 기계와 브라우저와 통.. 더보기 이전 1 다음
