props  1. props 부모 컴포넌트로부터 전달된 속성값, 상속받은 속성값자식 컴포넌트에서는 props 변경 불가능 -> 변경은 부모 컴포넌트에서  자식 컴포넌트에서는 부모 컴포넌트에서 전달된 props를 함수의 파라미터로 받아서 사용한다.이전 3-2장에서 커스텀 컴포넌트인 MyButton 컴포넌트에 title 속성을 부모 컴포넌트인 App.js에서 props로 전달해 설정해보겠다.  App.js에서 title에 My Button 글자를 전달하고,MyButton 컴포넌트의 함수에 파라미터로 props를 전달받아 버튼 title을 설정했다. export default function App() { return ( My Button Component );}impor..

컴포넌트  1. 컴포넌트 재사용 가능한 조립 블록 요소로 부모로부터 받은 props나 state에 따라 다양한 기능을 수행한다.  1️⃣ 내장 컴포넌트 View, Text, Button 등 다양한 내장 컴포넌트가 존재한다.내장 컴포넌트는 아래 사이트에서도 확인 가능하다. https://reactnative.dev/docs/components-and-apis Core Components and APIs · React NativeReact Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you ..

시작하며  3장 실습을 시작하기 위해 먼저 프로젝트를 생성해주겠다. 아래의 코드로 Expo 환경의 프로젝트를 생성해주었다.+ 생성 과정 중 expo -g cli가 node 환경과 맞지 않아 ExpoProject 폴더를 새로 생성한 후 로컬로 expo를 설치해주었다. + 에러가 났던 코드WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: npm i exponpx create-expo-app 프로젝트 이름 --template blank //js 환경의 expo 프로젝트 생성  + 노트북 web 환경에서 Expo 프로젝트 화면을 열기 위해 추가로 라이브러리를 설치해주었다.터미널에서 프로젝트를 실행한 ..

12기 POSCO x Codingon 웹 풀스택 과정에는 수료 혜택이 존재하는 데 그것은 바로바로 일본 여행이었다...!!!처음부터 기대하고 고대하던 일본 여행⭐⭐  첫 해외여행이었기 때문에 여권 발급부터 스타트⚡여권 사진 기준이 엄격해서 사진때문에 구청을 3번이나 왔다갔다 했다는 건 안비밀....힘들었다.... 겨우겨우 사진이 통과되고 드디어 받은 여권..!! 이제야 내가 해외여행을 간다는 게 실감이 됐다ㅋㅋㅋㅋㅋㅋ   일본 여행이 계획된 후부터 친구와 어떤 걸 할지 계속해서 이야기를 나눴지만...아는 게 없다보니 사실 숙소 예약, 지역 선택 정도만 하고 나머지는 정말 그냥 가서 돌아다녀 보자 하는 마음으로 계획했다...... 원래 여행 스타일은 매우 계획적이고 시간까지 정해놓고 가는 성격이지만..왜인..

REBORN  멋쟁이 사자처럼 동아리 여대 연합으로 진행된 해커톤인 여기톤에서 모두 다른 학교의 새로운 팀원들을 만나 개발을 진행하게 되었다. 프론트엔드 역할을 맡았으며,해커톤 조건인 HTML, CSS, JavaScript만을 이용해 개발을 진행했다.  백엔드에서 Django를 사용했기 때문에 템플릿이 존재하는 폴더 경로가 중요했고,페이지 연결과 기능 연결은 대부분 장고 언어로 진행할 수 있었다. 여기톤을 진행하면서 가장 신경을 썼던 부분은피그마 디자인으로 요구된 화면 크기와 비율, 폰트 등 모든 요소의 세부적인 디테일이었다.  너무 감사하게도 기획/디자인을 맡은 팀원분이 꼼꼼하게 개발 화면에 대한 피드백을 주셨고,여백, 폰트 두께 등 디테일함을 놓치지 않고 작업을 이어나갈 수 있었다.  개발을 진행하다..

검색 기능은 백엔드에서 처리하는 것보다 프론트에서 filter 메소드를 활용해 간단하게 구현하기로 팀원들과 서로 이야기를 나누었고, 따라서, 리뷰 목록에서 검색 기능을 구현한 과정을 적어보려 한다.  검색어를 입력할 수 있는 input 창은 공동 컴포넌트로 독립적으로 구현했으며,해당 컴포넌트로 필요한 검색어를 props로 전달해 검색이 가능하도록 해주었다. Search searchOpt={"검색할 제목을 입력하세요."} search={SearchValue} />   사용자가 입력한 검색어에 따라 리뷰 목록을 filter를 이용해 필터링해준 후,리뷰 제목을 기준으로 검색 기능이 작동하도록 코드를 작성했다.  reviewArr.filter: reviewArr 상태에서 제목(rev_title)이 검색어를 포함..

리뷰 목록 페이지는 table 형태로 작성된 모든 리뷰를 사용자가 확인할 수 있게 구현했다. 특히,프로젝트의 목적이라고할 수 있는 리뷰 인증 여부 또한 목록에서 확인이 가능하도록 구현했다.  처음에는 인증된 리뷰만 사용자가 볼 수 있도록 하려고 했으나,리뷰 커뮤니티인데 인증이 실시간으로 이루어지지 않아 사용자가 리뷰를 보지 못하게 되는 불편함을 덜고자모든 리뷰 목록을 보여주되 인증 여부를 추가로 표시하는 것으로 UI를 수정해 개발을 진행했다.   리뷰 목록 데이터를 연결하는 과정에서는 관리자 계정과 일반 사용자 계정을 분리해주어야 했기에if - else 문을 사용해 상황을 나눠주었다. 일반 사용자 계정일 시 GET 요청으로 리뷰 목록만을 불러와 상태관리되고 있는 배열에 저장해주고,관리자 계정일 시 GET..

리뷰를 작성할 수 있도록 글 쓰기 페이지를 구현했는데,리뷰 이미지를 넣고, 글을 강조할 수 있는 꾸밈 요소를 구현하기 위해 React-Quill 라이브러리를 활용하기로 결정했다. 글을 작성할 수 있는 라이브러리 중 가장 많이 활용되고 있는 라이브러리이기 때문에 React-Quill을 활용하기로 결정했고,React-Quill 의 꾸밈요소는 필요한 요소들로만 편집이 가능하기 때문에 편리하다는 것이 장점이다.   먼저 리스렌즈 리뷰 작성에는 이미지 업로드와, 글씨 크기, bold, underline 조정이 필요했기 때문에 toolbar를 편집해 필요한 요소들만 넣어주었다. const modules = {    toolbar: {      container: [        ["image"],        [{..

메인 페이지는 가전 구독 리뷰 커뮤니티인 만큼 렌탈 가능한 가전 제품과해당 제품에 대한 리뷰를 한눈에 볼 수 있도록 Swiper 배너를 이용해 메인 화면을 구성했다.  리뷰 또한 swiper를 이용해 다양한 리뷰를 확인할 수 있도록 구현했다. 메인페이지에서 맡은 역할은 서버에서 데이터를 불러와 프론트 페이지와 연결하는 부분이었다.  가장 먼저 useEffect를 활용해 컴포넌트가 마운트 될 떄 axios 요청으로 서버에서 제품 데이터와 리뷰 데이터를 불러올 수 있도록 했다. 서버에서 가져온 데이터들은 useState를 이용해 배열로 저장해두었으며,TypeScript를 활용하기 때문에 외부 ts파일에 활용할 데이터의 타입부터 먼저 정의해주었고, 정의해둔 타입을 불러와 배열의 타입도 지정해주었다. const..

리스렌즈 프로젝트는 가전 구독 리뷰를 주제로 리액트, 타입스크립트를 활용한 프로젝트이다.  타입을 효율적으로 관리하고 컴파일 과정에서 타입 오류를 잡아 코드의 안정성을 높이기 위해 타입스크립트를 선택해서 프로젝트를 진행하게 되었다.  가장 먼저 구현한 컴포넌트와 페이지인 헤더, 로그인, 회원가입 페이지에 대해 설명하려 한다.  1. 헤더 컴포넌트 헤더 컴포넌트를 구현하면서 가장 신경을 많이 쓴 부분은 웹, 모바일 레이아웃 변경과 메뉴 토글이었다.  특히나 레이아웃은 잘못 구현한다면 사용자가 페이지를 이용함에 있어서 불편함을 느끼는 것으로 직결되기 때문에 반응형 레이아웃을 구성하고자 했다. 웹 환경에서는 한눈에 메뉴 이동 navigation을 확인할 수 있도록 nav bar 형태로 만들어주었고,모바일 환경..