Web Front-End

새로운 React앱을 생성하면 여러 폴더와 파일들이 생기는데, 그중 가장 핵심이 되는 파일은 다음 3가지 이다.

App.js 파일의 App 컴포넌트 구조를 참고해 새로운 컴포넌트를 만들고, 파일로 분리해 관리한다.

마치 HTML 태그의 속성처럼, 한 컴포넌트의 요소에 props value를 지정하면 다른 컴포넌트에서 그 value에 값을 넣어 사용할 수 있는 것이다.

사용자가 알 필요가 없는 데이터를 내부에서 은닉하는 것. 즉, 캡슐화를 통해 코드를 리펙토링 하는 것이 좋은 사용성을 만드는 핵심이다.

이 글에서는 next.js 프레임워크를 사용한 리액트 프로젝트에 CSS 모듈을 적용하는 방법과 classnames 라이브러리를 이용해 여러 개의 className을 적용하는 방법을 정리했다.

실제로 웹 서버를 만들때는 쿼리스트링을 먼저 지정하고 그 쿼리스트링으로 URL을 연결한다. 하지만 이 우리의 목적은 쿼리스트링을 읽고 다루는 방법을 학습하는것이기 때문에, 반대로 URL에서 쿼리스트링 데이터을 parse(추출)하는 방법을 알아볼 것이다.

쿼리스트링에 따라서 data디렉토리에 있는 적절한 파일을 읽어 불러오는 작업을 해볼 것이다. 각 페이지 마다 다른 내용을 일일이 html 파일에 적어줄 필요가 없어 훨씬 깔끔하고 유지보수가 용이한 웹 어플리케이션이 될 것이다.

웹브라우저로부터 POST method로 전송받은 데이터를 파일로 저장하고, 작성한 글과 내용을 볼 수 있는 페이지로 Redirection하는 방법을 정리했다.

CSS 기초 레이아웃을 배웁시다