민희의 코딩일지

SKT FLY AI Challenger 4기 프로젝트 프론트엔드 개발하면서 앱 상에서 미술작품의 사진을 찍어 크롭한 뒤 찌그러진 사진을 평평하게 펴주어야 했다. 사용자가 미술작품의 사진을 찍고 모서리에 맞게 크롭해주면, 평평하게 펴주는 기능을 구현하고자 이와 관련된 React Native 라이브러리를 찾아보았다. 그 과정에서 react-native-document-scanner-plugin이라는 오픈 소스를 찾게 되었고, 이를 활용해본 내용을 이번 포스팅에서 정리해보고자 한다. react-native-document-scanner 라이브러리는 아이폰 유저들에게 친숙할 것이다. 그 이유가 아이폰 메모앱의 문서스캔과 동일한 기능을 수행하기 때문이다. 이 라이브러리는 말그대로 최적의 문서스캔을 위한 라이브러리..

#1. ios/Pods 에러 cd ios (Podfile이 있는 디렉토리) sudo arch -x86_64 gem install ffi arch -x86_64 pod install #2. react-native에서 활용할 수 있는 tailwind.css 라이브러리 nativewind, tailwind-rn, twrnc 크게 이 세종류인것같은데, 나는 twrnc로 진행하였다. https://www.npmjs.com/package/twrnc?activeTab=readme twrnc simple, expressive API for tailwindcss + react-native. Latest version: 3.6.7, last published: 18 days ago. Start using twrnc in ..

1- Next.js 의 장점 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크이다. (*React는 라이브러리이다.) React로 개발할 때 SPA를 이용하여 CSR(Client Side Rendering)을 하기 때문에 좋은 점도 있지만, 검색엔진 최적화 부분에 취약하다. (SEO) CSR를 하면 첫페이지에서 빈 html을 가져와서 JS 파일을 해석하여 화면을 구성하기 때문에 포털 검색에 거의 노출될 일이 없다. 그러나, Next.js에서는 Pre-Rendering을 통해 페이지를 미리 렌더링하며 완성된 html을 가져오기때문에 사용자와 검색엔진 크롤러에게 바로 렌더링된 페이지를 전달할 수 있다. 원래 React의 방식 (4단계에 화면보임) SSR ..

1- useContext란? React 에서 데이터의 흐름은 위 → 아래 (부모 → 자식)로 Props 를 통해 전달한다. Props 를 사용하여 데이터를 전달할 때는 부모 컴포넌트가 자식 컴포넌트 태그에 일일이 Props 를 넣어 단계별로 전달해줘야 한다. (Prop Drilling: 가장 아랫단에 있는 컴포넌트만 데이터가 필요해도 전달하는 과정에서 데이터는 중간 컴포넌트를 거쳐야 한다. Main 컴포넌트는 데이터가 필요없는데도 Profile 컴포넌트에 데이터를 전달하기 위해서 데이터를 Props 로 받은 뒤 다시 Props 로 넘겨주어야 한다.) 부모 컴포넌트 (App) 자식 컴포넌트 (Header) 앱 내부에서 수많은 컴포넌트들이 공통적으로 필요한 전역적인 데이터가 있을 때 Props 를 이용해서 ..

1- Ajax란? Asynchronous JavaScript And XML: 자바스크립트를 사용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고받는 기술이다. 서버와 비동기적으로 통신함으로 인해 전체 웹페이지를 다시 불러오는 동기 방식과는 다르게 해당 부분의 사용자 인터페이스만을 갱신할 수 있다. (ex. 페이스북에서 좋아요 버튼이 눌릴때마다 페이지가 리렌더링되는 것을 방지) Ajax 사용법 JQuery 설치하여 $.ajax() 사용 axios 설치하여 axios.get() 사용 npm install add axios --save 순수 자바스크립트 문법 fetch() 사용 2- Fetch 란? fetch("", { method: "POST", headers: { "Content-Type": "appl..

1- TailWindCSS란? HTML 안에서, CSS 스타일을 만들 수 있게 해주는 CSS 프레임 워크이다. CSS 프레임 워크란? 레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음이다. CSS 프레임워크 for React JS Tailwind CSS Material UI React Bootstrap Semantic UI Ant Design Materialize Tailwind CSS의 장점 https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentatio..

구조 분해 할당이란? (ES6) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식이다. Clean Code를 위해서 사용한다. 1- 객체 구조 분해 할당 function buildAnimal(animalData) { let accessory = animalData.accessory, animal = animalData.animal, color = animalData.color, hairType = animalData.hairType; } let obj = { accessory: 'horn', animal: 'horse', color: 'pupple', hairType: 'curly' } function buildAnimal(animalData){ let ..

1- Component ‘props’라는 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는 React Element를 반환한다. Class Component React.Component 클래스를 상속 클래스는 return 문을 사용할 수 없으므로, 클래스형 컴포넌트에서는 JS를 반환하기 위해 render() 함수를 사용한다. Function Component props로 받을 객체 인자를 정의하고, JSX를 반환하는 것을 기본 형태로 갖춘다. return 문에서 JSX를 반환할 수 있다. Props, State는 데이터를 다룰 때 사용한다. 2- Props (properties) 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이다. 부모 컴포넌트로부터 받는 데이터이기 때문에 자식 컴포넌트에서느 변경할..