0youn 0youn

회사에 입사하고 다사다난한 생활을 지내고 마침내 앱을 배포했다. 앱이 출시된지 2주정도 지난 시점에서 뒤를 돌아보며 다사다난 했던 첫 서비스 배포 후기를 남기려 한다!! 1. 1인 개발은 너무 힘들다 하지만 한 번 정도는 해볼만 하다...?!? 처음 입사했을 땐 회사에서 바이앱스라는 업체를 이용하여 카페24에서 호스팅한 웹앱을 서비스 하고 있어서 그 웹앱을 관리하는 업무를 했었다. 이 때 까지만 해도 이미 작업된 코드를 수정하는 업무여서 큰 어려움이 없었으나 고난과 역경은 개발을 시작한 이후 시작 됐다. 첫 번째 역경은 설치된 모듈끼리 버전이 꼬였는지 도저히 잡을 수 없는 에러가 발생했던 것이었다. 구글에 검색해도 불분명한 답변만 계속 되고 회사에 계신 백앤드 시니어분도 구체적인 답변을 주시지 못하셔서 ..

오늘도 올리는 삽질로그... 회사에서 개발하고 있는 앱에 push 알람을 사용해야 할 필요가 있어 firebase를 사용하려고 세팅을 시작하던 중 공식 문서들을 열심히 보고 xcode에서 열심히 sdk 설정을 해도 계속 에러가 떠서 절망에 빠져있던 찰나 열심히 firebase를 뒤지다 보니 아래와 같은 해결법을 얻었다 https://firebase.google.com/docs/ios/setup?hl=ko#available-pods Apple 프로젝트에 Firebase 추가 | Firebase Documentation 의견 보내기 Apple 프로젝트에 Firebase 추가 기본 요건 다음을 설치합니다. 프로젝트가 다음 요구사항을 충족하는지 확인합니다. 프로젝트에서 다음 플랫폼 버전 이상을 타겟팅해야 합니다..

요새 몸 건강도 안좋고 해서 포스팅을 안하고 있었는데 오늘 할 포스팅 내용의 원인을 정확히 몰라 이건 꼭 기록해둬야겠다 싶어서 남기려 한다. rn에서 onLayout 이벤트를 사용하여 컴포넌트의 크기와 위치를 계산하여 특정 버튼을 클릭하면 해당 컴포넌트의 위치로 스크롤 되게 하는 코드를 짜놧었다. 근데 dev 환경에서 실행 했을 때는 잘 되던 친구가 빌드를 해서 실제로 실행하려고 보니 해당 컴포넌트가 호출 될 때 마다 앱이 꺼지는 현상이 발생했다. 원인을 찾던 중 onLayout이 실행 될 때 발생한다는 것을 깨닳고 별의 별 노가다를 다 해봣는데 정상적으로 실행이 안되서 왜 이러나 고민하던 찰나 다른데에서는 onLayout이 정상적으로 실행되고 있어 2개를 비교해보니 아주 약간의 차이가 있었다. { ca..

RN에서의 애니메이션은 복잡한듯 복잡하지 않고 안복잡한듯 복잡하다... 사용할 때 마다 찾아보는 나의 기억력이란.... 그래서 그냥 간단하게 자주 사용하는 것만 정리해서 써놓고 참고하려 정리해 봐야겠다!! 일단 RN에서는 애니메이션 전용 태그가 따로 있다. 그래서 Animated를 react-native 모듈로부터 호출해 와야 한다. import {Animated} from 'react-native'; 호출했다면 useRef 훅을 이용하여 Animated 인스턴스를 생성해야 하는데 아래와 같이 해주면 된다. const position = useRef(new Animated.Value(0)).current; 저 Animated.Value 매서드에 들어가는 전달인자는 애니메이션의 초기 값이다. 이렇게 설명하..

position fixed를 사용하고 싶은가? 아쉽지만 RN에는 fixed 옵션이 없다 ㅜㅜ 하지만 구현하는 방법은 있는데 바로 position absolute를 이용하는 방법이다. 이는 absolute가 가지고 있는 특징을 이용하여 꼼수를 쓰는 방법이라고 난 말하고 싶은데 사용해보면 생각보다 쉽게 구현할 수 있다. 먼저 absolute가 가진 속성을 이해해야 하는데 absolute는 부모 요소의 위치에 영향을 받는다 즉 부모의 위치가 고정이면 absolute를 사용하는 자식 요소의 위치도 고정이라고 할 수 있다. 자 그러면 어떻게 사용해야 할 지 알아보자 native에서 scroll은 항상 scrollview나 flatList를 사용하게 된다. 이를 사용하면 scrollview 내부에서 스크롤을 하게 ..

버튼을 클릭하면 자동으로 위치를 이동시키려 하는데 해당 요소의 값을 가져오는 방법을 알고 싶었다. view 속성중 onLayout을 이용하면 가능한데 아래와 같이 사용한다. { setIndex(route.id); setTimeout(() => { _scrollTo(); return onPress(route); }, 50); }} onLayout={e => { const layout = e.nativeEvent.layout; setDataSourceCords(() => layout); }} 위와 같이 사용하면 layout에 아래와 같은 데이터 형식이 반환된다. {"height": 33.904762268066406, "width": 49.904762268066406, "x": 417.9047546386719..

자바 스크립트의 기본적인 보안을 위한 토큰과 세션에 대해 포스팅 해보자! Session이란 웹 사이트의 여러 페이지에 걸쳐 사용되는 사용자 정보를 저장하는 방법을 뜻한다. 사용자가 브라우저를 닫아 서버와의 연결을 끝내는 시점까지를 세션이라고 한다. 세션은 다른 보안 수단과 달리 서버 측에 데이터를 저장하고 세션의 키 값을 클라이언트에 저장하는 방식을 사용한다. Session 동작 순서 Session은 session을 생성하는 요청-응답 처리와 이후 이 세션을 가지고 요청과 응답을 처리하는 2가지 방법으로 구성된다. 클라이언트에서 서버에 요청을 보낸다. 서버는 클라이언트를 식별하는 session id를 생성한다. 서버는 session id로 key와 value를 저장하는 Httpsession을 생성하고, ..

javascript의 this는 신기한 친구다. 환경에 따라 가리키는 대상이 달라지기 때문인데 오늘은 this와 실행 컨텍스트에 대해 포스팅 하고자 한다. this란 this는 일반적으로 메소드를 호출한 객체가 저장되어 있는 속성이다. this는 함수를 호출하는 방법에 의해 결정되는데 이게 무슨말이냐면 실행하는 동안의 할당에 의해 설정될 수 없고 함수가 호출될 때 마다 다를 수 있다는 뜻이다. this는 크게 4가지의 경우에서 각각 가리키는 객체가 다르게 설정된다. 기본 바인딩 암시적 바인딩 명시적 바인딩 new 바인딩 기본 바인딩 일반적으로 함수 내부에서 this를 사용할 경우 이 this는 javascirpt의 실행 환경의 전역 객체인 window를 가리킨다. function testCode(){ c..