grace's dev_note

자바스크립트의 표준화 마이크로소프트는 자바스크립트의 파생 버전인 JScript를 IE에 탑재했다. 그런제 문제는 JScript와 자바스크립트가 적당히 호환되었다는 것이다. 즉, 각자 자사 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 경쟁적으로 추가하기 시작했다는 것이다. 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했고, 결과적으로 모든 브라우저에서 정상적으로 동작하는 웹페이지를 개발하기가 무척 어려워졌다. 이에 따라 표준화된 자바스크립트의 필요성이 높아지기 시작했고, 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구 ECMA 인터내셔널에 자바스크립트 표준이 요청했으며 자바스크립트는 ECMAScript로 명명되었다. 자바스크립트의 ..

지난 2021년을, 그리고 코드캠프 4기를 되돌아보며 회고록을 작성해보려한다. 20살이 되고(빠른년생이라 19살이지만) 거의 8년의 기간을 개발과는 거리가 먼직업으로 살아왔다. 많이 즐겁기도 했고 보람차기도 했다. 하지만 그만큼 힘든 일도 많았다. 앞으로 나는 일해 온 시간보다 일해야할 시간이 더 많이 남았고, '사람'들과의 '소통'을 좋아하는, 그리고 일을 좋아하는 나를 위해서 새로운 일을 찾아 떠난 한 해였다. 우연히 만난 '개발자'의 꿈 간호사로 일한지 4년차, 엄청난 번 아웃이 찾아왔다. 그도 그럴게, 휴학 한 번 없이 대학을 졸업하고 쉬는 시간 없이 계속해서 일을 해왔고 어쩌면 그런 이유로 쉬는 날에도 쉬지 못하고 계속해서 공부하고 움직였다. 그리고 지쳤다(...) 인생은 긴 마라톤인데 너무 숨..

mobile에서는 키보드를 화면에서 사용한다. 키보드가 팝업 될때 ios는 괜찮지만 android는 키보드의 세로 높이에 맞춰서 세로 화면의 길이가 달라진다. 그로 인해 애써 만들어놓은 디자인이 망가지고 하는경우가 있다. 그 문제 점을 해결하는방법은 의외로 간단하다. code change 우선 react-native project 안에서 android 폴더로 들어간다. 그곳에는 java로 작성된 안드로이드 네이티브 언어가 들어가 있다. 다음의 path로 이동! ./android/app/src/main/AndroidManifest.xml다음 파일을 실행하면 xml로 작성된 코드가 보일 것이다. android:windowSoftInputMode="adjustResize"그 안에서 activity 섹션에서 위..

yarn add @react-navigation/bottom-tabsimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; const Tab = createBottomTabNavigator(); function MyTabs() { return ( ( ), tabBarLabel: "홈" }}/> ); } 해당 탭 네이게이션에 아이콘으로 이미지를 넣어주고 싶다면 Image source로 똑같이 넣어주면 가능

Async-Storage 모바일 앱에는 당연히 브라우저 저장소가 없겠죠? 모바일 개발환경에는 대신에 AsyncStorage가 LocalStorage 대신 사용됩니다. 기존에는 react-native에서 Async Storage를 가져올 수 있었는데요. 현재는 deprecated 되었습니다. 사용을 해도 되지만, 앞으로 업데이트 될 예정이 없다는 뜻입니다. 때문에 react-native docs를 읽어보시면 community package를 사용하라고 되어있는데요. 이 community package 안에 **@react-native-async-storage/async-storage**가 있습니다. 이 패키지는 npm에서도 확인할 수 있습니다. Installation # npm npm install @re..

React-Navigation React Native에서는 앱 내 화면 간 전환을 처리하기 위해 라이브러리로 react-navigation을 사용합니다. React-Navigaton 설치 react navigation 설치 링크 react navigation 설치 명령어 입니다. # npm npm install @react-navigation/native # yarn yarn add @react-navigation/native 또한, react-native-screens와 react-native-safe-area-context가 있습니다. 이 라이브러리는 react navigation을 통해 탐색된 컨테이너를 앱에 노출해주기 위해 사용해야하는 종속 라이브러리입니다. 이것들을 함께 설치해주도록 하겠습니다...

React-Native 작동원리 React Native의 작동원리를 이해하기 위해서 몇 가지 알아야할 것이 있습니다. React Native앱은 크게 두 가지 부분으로 구성되어 있는데요 Native부분과 JS 부분입니다. Native 부분은 Android/iOS Device(Java/Objective-C)가 담당하는 부분으로 UI를 렌더합니다. JS 부분은 React 관련 코드가 실행되는 스레드입니다. Native Bridge Main Thread와 JS Thread는 Native Bridge를 통해 소통합니다. 클라이언트-서버가 통신하는 것과 비슷한데, 각 부분에서 전달되는 정보가 JSON object 형태로 변환되어 전달됩니다. 이 부분에서 전달되는 양이 많아지면 병목현상이 생기면서 앱이 느려지겠죠?..

React-Native 설치 본격적으로 React-Native 프로젝트를 시작해봅시다. React-Native 설치 링크 모바일 개발이 처음인 경우, Expo를 사용하는 것이 좋습니다. Expo는 React Native를 기반으로 구축되었으며 Android Studio나 Xcode를 설치하지 않고도 프로젝트를 실행할 수 있어 편하지만 제공되어진 API만 사용이 가능하며 Object-C, Swift, Java, Kotlin으로 작성된 Native Module은 추가할 수 없습니다. 또한, 모든 Expo SDK 솔루션으로 빌드되어 빌드하는 데 시간이 오래걸립니다. 이와는 다르게 React Native는 설정하는 데는 오래걸리지만 모든 라이브러리를 사용할 수 있고 자유도가 높아 여러가지 기능을 사용하여 앱을 ..

IDC DevOps 개발자가 배포운영까지! 하지만 서비스가 커질수록 DevOps팀이 분리되어진다. HTTP(HTML, HyperTextMarkupLanguage) JSX, Javascript XML, Extensible MarkupLanuage SMTP FTP ** scrapping ** og(openGraph) 웹에서 특정 주소를 입력했을 때 미리보기를 제공해주고싶을 경우 meta tag에 작성하여 웹 주소의 title, image, description 등을 미리 보여주는 것. @ twitter도 있음 서버사이드렌더링과 서버사이드렌더링이 아닌 것의 차이! 우리가 axios.get을 할 때 받아오게되는 소스코드는 useQuery까지 기다려주지 않고 처음 받아온 데이터만 화면에 그려주게된다. 만약 다이나..

https://domain.gabia.com/regist/today_domain https://cloud.google.com/free graphql vs REST-API 기존 REST-API READ axios.get(api주소) put, post, delete graphql은 endpoint가 하나인 REST-API이며 항상 POST방식을 사용한다 { "query": "mutation createBoard { createBoard(createBoardInput: {writer:철수, password: 1234, title:제목, contents:내용}) {_id, title, write, contents}}" } optimistic ui 작업량이 적은API 99% 이상 성공 가능한 API 만약에 실패하..