본문 바로가기

전체 글30

React Native Navigation Navtigation 우선 어플의 Navigation을 이해하기 앞서 단어의 뜻을 이해하면, 항해와 운항을 의미한다. 말그대로 어플개발에 앞서 Navigtion 기능은 Application 쪽의 화면인 Activity 구성하며 화면의 흐름을 구성하는 요소라고 합니다. 위에 이미지는 어플이 흐름도의 이해를 위해서 붙여두었으며 이런식으로 페이지가 전환이 된다는 느낌을 주었습니다. 이미지를 보시면 어플의 Activity에서 다른 Activity로 넘어갈 수 있도록 흐름의 구조를 세팅하며, 페이지 전환을 돕도록 하는 기능이라고 보시면 됩니다. RN에서는 신기하게 RN 공식 홈페이지에서 이 Navigation을 지원하는 것이 아니라 다른 오픈소스를 통해서 사용을 합니다. 이야기를 듣기로는 RN에서는 자신들이 유지.. 2023. 11. 11.
Expo 프레임워크 자체 어플개발을 하면서 네이티브로 개발하거나 웹앱, 하이브리드 앱등 여러가지 방식 중 어떤 것을 결정하면 좋을지 고민을 하다가 expo 프레임워크를 이용하기로 하였습니다. expo프레임워크는 하이브리드 앱으로 expo로 개발했을시 조금더 쉽게 ios 어플이나, android 어플 개발하기가 쉬워진다는 이야기가 있었습니다. 그래서 expo를 결정하게 되었고, expo에 대해 깊이 정리를 해볼예정입니다. Expo Expo 프레임워크란 React Native를 조금 쉽게 만들 수 있게 도와주는 프레임워크입니다. RN(React Native)도 똑같이 하이브리드 앱으로 작동하며, RN or Expo 개발시 ios와 android어플을 더 쉽게 제작을 할수있습니다. 원래는 네이티브로 개발 할 때는 android와.. 2023. 11. 4.
VideoJS VideoJS 란? 저는 개발자로서 유튜브나 트위치 서비스를 운영하면서 어떻게 컨트롤을 제어하며, 미디어 컨트롤을 어떻게 제어하는지 궁금한 경우가 많았습니다. 그런데 마침 미디어 서비스를 개발하는 계기가 생겨서 어떻게 제작을 하면 되는지 검색을 하게 되었습니다. 미디어 라이브러리에는 Viblast, VideoJS, JW Player, Radiant Media Player, THEOplayer, Bitmovin, Shaka 등이 됩니다. 이렇게 라이브러리가 많은 것 중 제일 익숙하고 오픈소스로 유명한 VideoJS를 선택하게 되었습니다. VideoJS 는 웹사이트에서 미디어 서비스 기능을 사용하기 위한 Javascript or CSS 로 이루어진 라이브러리입니다. MP4 및 WebM과 같은 파일 형식을 지.. 2023. 10. 28.
[가비아] AWS Lightsail 도메인 연결하기 한번쯤은 개발을 하면서 도메인을 어떻게 연결하고, 우리들이 잘아는 큰 사이트에서는 도메인을 어떻게 연결하나 싶을 때가 있습니다. 그리고 도메인이라는 것은 어떻게 구하며 어떻게 이용 되고있는 것일까? 고민을 하고 있는 개발자에게 한번 도움을 드리기 위해 이렇게 글을 적게 되는거 같습니다. 아 ! ! 참고로 이 글은 이미 도메인, 서버 용어를 조금 알고 있는 사람에게 해당하는 글입니다. AWS Lightsail 세팅법, DNS, 도메인, ip에 관련된 글은 추후에 업데이트 될 예정입니다. 저는 우선 도메인을 사기위해 도메인을 관리하고있는 여러 기관중 가비아를 선택하여서 도메인을 구입하게 되었습니다. 가비아에서는 도메인을 생성한다는 느낌보다는 오히려 ICANN 도메인 관리 기관에 요청하는거에 가까운데요?? 그.. 2023. 10. 7.
배열 평탄화 작업 [ flat, flatMap ] - Javascript 2019년 1년차때 회사에서 배열을 풀어서 작업하는 과정이고 그때 그냥 map 함수와 foreach 등 여러가지 함수를 사용하며, 배열을 풀어내는 작업을 하다가 불편하여 한번에 할 방법이 없는가? 궁금해 했던 시기였다. ES10이 안정화 되기 전에 시기였다. const list = [1,3,4,5,[2,5,2]]; const array = [] list.forEach(v=>{ Array.isArray(v)? array.push(...v):array.push(v) }); console.log(array) 위에 해당하는 코드처럼 만들었다. 위에 코드에서 보면 concat() 을 이용한 방법도 있었지만, 나는 push를 이용하여 배열을 합쳤다. 위에 리스트가 [1,3,4,5,[2,5,2]] 였던 값이 code.. 2023. 9. 30.
SSR, CSR, Hybrid rendering SSR, CSR 저는 Next.js 옛날에 개발하면서 느끼고 있는 것이 있는데 조금 더 구체적으로 내용을 정리할 필요가 있다고 생각이 들어 블로그를 정리하게 되었습니다. Next.js에서는 어떤 형태로 브라우저가 활성화 되는지 그리고 Hybrid rendering 개념은 무엇인지? SSR과 CSR라는 개념의 정리가 필요해 보였습니다. SSR는 (Server-Side Rendering) 의미로 사용자가 웹페이지에 접근을 시점부터 발생하게 되는데, 페이지를 불러오기 전에 필요한 경우에는 서버에서 외부 API, 파일 시스템, 데이터가 가공처리, 헤더 설정 등을 데이터 가져오기 됩니다. 그다음으로는 HTML 생성을 하여 브라우저에서 페이지 표시를 하게 됩니다. 원래는 브라우저 실행순서가 더 깊게 있지만 SSR .. 2023. 9. 23.
Next.js 서버사이드 Cookie 삭제 Next.js에서는 미리 클라이언트 사이드 레더링에 들어가기 전에 서버사이드 렌더링을 접근하여 미리 데이터를 불러올 요소와 선행 작업을 해야될 데이터를 가공하거나 정의 할수있습니다. 이것을 Next.js 의 하이브리드 렌더링이라고 부릅니다. 하이브리드 렌더링 or SSR or CSR 에 대해서 알고싶으시면 아래의 링크를 들어가보시면 됩니다. 링크 export const getServerSideProps = async ctx => { const result = await checkLogin(ctx, false); ctx.res.setHeader('Set-Cookie', [`accessToken=deleted; Max-Age=0`, `testToken=deleted; Max-Age=0`]); if (resu.. 2023. 9. 9.
Ubuntu 20.04 오프라인으로 패키지 설치하기, 리얼텍 랜드라이버 우분투에서 리얼텍 랜드라이버가 설치가 안되어있어... 인터넷이 안되는 매우 난감한 상황이 일어났다. 그래서 해결방법을 찾다가 발견하것이 우부투 패키지를 오프라인으로 설치하는 방법이다.! 일단 make, ifconfig, 랜패키지, vim 기본적인 명령어가 다 되지않는상태에서 연결를 해보려고합니다. 방법은 간단합니다 우선 인터넷이 되는 환경에서 가상머신 우분투를 설치를하고나서!! >sudo apt install make ifconfig 등 여러가지 패키지를 설치를 해줍니다. 그리고 /var/cache/apt/archives 안에 들어가보시면 *.deb이런 확장파일이 있을겁니다. 그리고 tar로 압축을 해줍니다!! >tar -cvf package.tar ./*.deb 하고나서 usb로 오프라인 우분투에 옮깁.. 2020. 12. 24.
MongoDB 명령어 mongodb를 실행하는법 # 몽고디비 실행하기 # --dbpath 옵션을 사용해 데이터가 저장될 저장소를 지정합니다. mongod --dbpath path/to/data_store "" 부분은 제거하고 입력하시면 됩니다. -외부에서나 내부에서 접속 명령어- mongo -u "아이디" -p "패스워드" "외,내부아이피+/해당데이터베이스 이름" ex) mongo -u test -p password localhost:27017/test 들어가고나면 mongodb 쉘로 들어가게 되는데 그다음 명령어는 : 뒤로는 쉘에서 입력하시면 안됩니다.!! Database 데이터베이스 명령어 >db : 현재 사용중인 데이터베이스 확인 >use 데이터베이스명 : 데이터베이스 생성 >show dbs : 데이터베이스 리스트 확인.. 2020. 12. 24.