👩‍💻 가연의 개발자취 📚

Intro오늘부터 REST API에 대한 강의를 듣고 Node.js Express를 활용해 데이터 CRUD 실습까지 진행하였다.REST API 강의가 끝나고 백엔드 서버를 구현하는 실습 강의까지 듣게 될 예정이다.팀 프로젝트 전에 미리 백엔드까지 공부할 수 있어서 좋았다.   오늘 학습한 내용REST API= REST + API API (Application Programming Interface): 다른 소프트웨어에서 접근할 수 있게 제공되는 연결 방식 Interface는 정보를 주고 받을 수 있는 매개라는 의미이다.유저 인터페이스, 모니터, 키보드, USB, 한국어 등등이 인터페이스라 불릴 수 있다.  REST (Representational State Transfer): 분산 하이퍼미디어 시스템을 ..

Intro프로젝트 마지막날!주말과 오늘까지 피드 검색 & 피드 게시글 올리는 화면을 구현하였다.   프로젝트 진행사항피드 검색 기능 태그를 검색하는 기능을 추가했다.검색어와 같은 태그가 포함되어 있는 피드만 리스트로 보여준다.결과가 없을 경우 검색결과가 없습니다라는 문구를 보여준다.최근 검색어는 가장 최근에 검색한 키워드가 맨 위에 오고 자바스크립트의 Set을 사용해 중복을 없애주었다.  피드 새글 작성 & 사진 올리기react-native-camera-roll 라이브러리를 사용하여 핸드폰의 사진 앱에 접근하여 사진을 올릴 수 있는 기능을 구현하였다.const fetchImages = () => { CameraRoll.getPhotos({ first: 100, }).then(res =..

Intro프로젝트 세팅과 간단한 디자인 완료 후, 오늘부터 본격적으로 개발에 들어갔다.   프로젝트 진행사항React-native-navigation: 페이지 이동을 위해 navigation 라이브러리를 사용했다. react-native-vector-icon를 추가해 하단 탭을 아이콘으로 구현했다. 타입스크립트에서는 탭이나 페이지 컴포넌트가 받는 params 타입 지정이 필요했다.export type RootStackParamList = { Splash: undefined; MainTab: undefined; SearchResult: { keyword: string } | undefined; Chat: undefined; NewPostDetailPage: { images: ImageType[] ..

Intro지난 React Native 강의를 토대로 오늘부터 또 다른 개인 프로젝트가 시작됐다.SNS와 비슷한 오운완 피드 앱을 제작하는 것이다.  프로젝트 진행 사항프로젝트 필수 기능피드 리스트피드 검색피드 업로드코멘트 리스트/코멘트 작성DM 리스트DM 상세화면그 외 선택으로 구현 가능한 기능은 아래와 같다.로그인/회원가입프로필/프로필 수정알림함팔로우/팔로워앱 설정  프로젝트 기획/디자인"오운완"이란 단어를 들으니 요즘 빠져있는 클라이밍이 생각났다.클라이밍을 좋아하는 사람들만의 SNS를 만들면 좋을 것 같아 클라이밍을 주제로 잡고 디자인해 보았다. 필수 기능을 포함하는 앱을 시간 내에 만들기 위해선 많은 기능을 추가하진 못했다.  프로젝트 세팅이번 프로젝트에선 JS가 아닌 TS를 사용하여 개발해보기로 ..

Intro 오늘부터는 대표적인 sns인 인스타그램과 비슷한 앱을 클론코딩하는 실습 강의를 듣게 되었다. 어려우면서도 그럴듯한 앱이 만들어 지는 게 또 신기하고 그랬다. 오늘 학습한 내용 SNS 개발 클론코딩 필요한 라이브러리 목록 react navigation react native swiper react native video react native fast image react native modal 프로젝트 세팅 1. 프로젝트 시작 npx react-native@latest init ProjectName 2. ios bundle install cd ProjectName cd ios bundle install bundle exec pod install 3. packages install "react-..

Intro 앱에서 자주 쓰는 카메라 연결과 앱 아이콘 설정, 스플래시 화면 설정, 폰트 설정에 대해 알아보았다. 오늘 학습한 내용 앨범 가져오기 https://github.com/react-native-cameraroll/react-native-cameraroll GitHub - react-native-cameraroll/react-native-cameraroll: CameraRoll is a react-native native module that provides access to the CameraRoll is a react-native native module that provides access to the local camera roll or photo library. - react-native..

Intro 오늘은 어제에 이어 리액트 네이티브의 더 다양한 컴포넌트들을 알아보고 실습해 보았다. 오늘 학습한 내용 FlatList : 대용량 데이터를 한 번에 처리할 수 있는 컴포넌트 단점으로는 동적 데이터 처리에 렌더링이 많이 필요하고 부모 컴포넌트가 렌더링 될 때 FlatList도 리렌더링 된다는 점이 있다. 그래서 보통 useCallback으로 처리한다. } keyExtractor={item => item.id} ListHeaderComponent={() => ( 2022년 2월 7일 )} showsVerticalScrollIndicator={false} /> ✅ iOS 시뮬레이터에서 리액트 네이티브 디버깅 여는 법 ▫️ Flipper 설치 ( ▫️ 시뮬레이터에서 Cmd ⌘+ D→ open debu..

Intro 오늘은 React Native에서 자주 사용하는 기본 컴포넌트를 알아보고 코드에 직접 적용해보는 실습 강의를 들었다. 오늘 학습한 내용 View, Text 가장 많이 쓰이는 기본 컴포넌트는 View, Text이다. 👩‍💻 View는 html의 div 태그와 비슷한 역할을 한다. 무조건 flex와 함께 쓰여 alignItems, justifyContent로 정렬을 할 수 있다. Text는 기본 글자 컴포넌트로 글자를 넣으려면 Text를 사용해야 한다. 👩‍💻 allowFontScaling={false}로 설정하면 개인 디바이스에서 글씨를 크게 했을 때 같이 커지는 것을 막는 설정을 할 수 있다. (default=true) React Native {test}React Native {test}Rea..

Intro 리액트 프로젝트가 마무리되고 오늘부턴 React Native에 대한 강의가 시작되었다. 오늘 학습한 내용 React Native의 탄생 PDA 등장과 피처폰의 시대를 지나 스마트폰이 등장한 이후 앱 개발의 패러다임 변화가 일어났다. iOS나 안드로이드 앱을 개발하는 개발자가 많아졌고 iOS와 안드로이드 앱을 별도로 개발해야 하는 단점을 보완하고자 앱 안에 웹을 불러오는 웹앱과 하이브리드 앱이 등장했다. 더불어 등장한 크로스 플랫폼은 웹을 띄우는 방식이 아닌 앱을 만들어 여러 플랫폼에서 동작 가능한 기술이다. 대표적으로 React Native와 Flutter, Xamarin이 있다. React Native는 2015년 3월 페이스북 F8 컨퍼런스에서 공식 발표했으며 초기 버전은 iOS 지원에 초..

Intro데브코스에서 첫 프로젝트가 마무리되었다.주말 포함 일주일 간 진행된 프로젝트였는데 필수 구현사항은 모두 구현해서 다행이었다. 휴,,그래도 욕심으론 더 응용해서 추가 기능도 넣고 싶었는데 그러지 못해서 아쉬웠다.   프로젝트 결과vercel로 배포https://project1-react-js-bootstrap-three.vercel.app/ Gayeon's Video Editor project1-react-js-bootstrap-three.vercel.app  프로젝트 폴더 구조📦src ┣ 📂assets ┃ ┣ 📜github_icon.png ┃ ┗ 📜video_placeholder.png ┣ 📂components ┃ ┣ 📜CustomButton.js ┃ ┣ 📜Footer.js ┃ ┣ ..