React 입문

17년차 금융권 jQuery 웹 개발자 대학생 시절 벤처를 거쳐 졸업 후 대기업 신입사원으로 들어와 현재는 금융권의 시스템을 운영하고 있는 내가, 어떤 일을 하는 사람인지 참 애매합니다. 사실 온전한 개발자로 일한 시간은 그리 길지 않고, 대부분의 시간을 PM이나 P

만들려고 하는 화면을 간단하게 Component 단위로 한 번 쪼개어 보겠습니다. Header 화면 최상단의 Header 영역입니다. Header Component는 처음에는 화면 제목을 표시하다가 사용자의 요청에 따라 아래와 같은 기능을 구현합니다. 돋보기 버튼

개발할 Concept를 잡았다면 이제 개발할 수 있는 환경을 설정해 보겠습니다. 코드 편집기 코드 편집기는 사실 큰 상관도 없고 손에 익은 편집기나 IDE를 사용하면 됩니다. 여기서는 일단 대중적으로 많이 사용하는 JavaScript 개발 도구인 VSCode를 사용하

환경설정까지 완료했으니 프로젝트 구조를 잡은 후 "Hello World"를 화면에 출력해보도록 하겠습니다. public 경로 생성 먼저 html, css, image 등 static한 resource를 보관하고 context root가 될 경로를 생성하겠습니다. 최상

프로젝트 구조를 잡고 메인 화면에 "Hello World"까지 출력해 보았습니다. 이제 화면의 제목과 검색 기능을 담당하는 Header 영역을 만들어보겠습니다. Header나 Footer 등 독립적인 기능을 담당하는 요소를 Component라고 부릅니다. 우리도 프로

이제 화면에 Header 영역까지 만들어 보았습니다. 다음은 뉴스, 도서, 영화 중 검색할 API를 선택할 수 있는 Tab Menu 부분을 만들어 보겠습니다. TabList 요건 확인 Tab Menu의 요건은 아래와 같습니다. 최초에는 뉴스가 "선택됨" 상태로 표시됩

지난 게시글까지 화면 상단의 Header와 Tab Menu까지 만들어 보았습니다. 일단 화면이 잘 동작하는지 확인해 보시고 다음 부분을 진행하시면 됩니다. ListView Component 먼저 /src/components/view/ListView.jsx 파일을 하나

지난 게시글에서는 NAVER API를 호출해서 데이터를 받아오고 정리되지 않은 형태로 <li>로 출력하는 부분까지 진행해 보았습니다. 남겨진 문제점은 아래 내용 정도입니다. 한 가지씩 해결해보도록 하겠습니다. ListView css 추가 dangero

저번 게시글에서는 NAVER API에서 데이터를 받아와서 News 목록을 표시하는 부분까지 작성해 보았습니다. 이번에는 거의 유사한 형태에서 Layout만 변경하는 도서 목록을 만들어 보겠습니다.먼저 book API에서 응답으로 전달해주는 데이터는 아래와 같습니다.데이

뉴스 목록의 Layout과 도서 목록의 Layout까지 구현해 보았습니다. 이제 실제로 Tab Menu를 click하면 해당 tab으로 이동해서 각자 tab에 맞는 API를 호출하여 데이터를 가져오는 부분까지 구현해 보겠습니다. 먼저 생각해보면 어느 tab을 선택했는

저번 게시글이 너무 길어질까 우려하여 전체적인 프로젝트 구조나 소스 정리를 따로 하지 않았습니다. 이번 게시글은 저번 게시글에서 했던 내용을 Wrap-up 하겠습니다.전체적인 내용이 종료되면 github에 정리하여 공유하겠습니다.현재까지의 프로젝트 구조는 아래와 같습니