Runchi

JS로 HTML element를 다루다보면 , 과 같은 것을 마주할 때가 있다. 더 나아가 event를 다룰때는 screenX, pageX와 같은 좌표값을 보게 되는데 이에 대해 간단히 정리를 해보자. HTML element Client Height content + padding ==> 실제로 현재 browser에서 보이는 부분 offset Height…

SVG 란?? img file을 쓰다보면 png, jpg, svg와 같은 확장자를 많이 볼 수 있다. 정확한 특징은 모르지만 일반적으로 jpg가 용량을 적게 차지하고 png는 background를 투명하게 할 수 있으며 svg는 확대를 하거나 css로도 수정이 가능하다 그래서 오늘은 react에서 svg를 사용하는 방법을 기록해두려한다. 좀 더 자세히 s…

회원가입이 들어가 있는 서비스의 경우에는 의 사용이 필수적이다. 뿐만아니라 로 되어있는 사이트들은 구글봇에서도 더 높은 순위로 수집을 해간다고 하니 앞으로 웹을 개발함에 있어 필수 요소로 생각을 해야하겠다. 그런데 최근 외부 API사용으로 인해 로 요청을 해야하는 페이지가 있었고, 그로인해 사이트에 적용을 골머리 앓다가 최근 React 공부를 하며 보았던…

본 글은 Dropdown작성시 유의사항과 input text type의 required와 readonly에 대한 글입니다. 회사업무중… 특정 필드값을 필수로 받아서 넘겨줘야한다는 요청을 받았다. 동작하는 컴포넌트는 Dropdown인데, 서버단에서 처리하는게 아니라 클라이언트단에서 처리를 하고자 하니 간단하게 생각해보면 required라는 atrribute…

모바일에서 swipe를 구현하기 위해 Stackoverflow를 찾아보니 Detect a finger swipe through JavaScript on the iPhone and Android 이렇게 , 를 통해 구현했다. 그런데 이렇게 구현을 하고보니 문제가 있었는데 를 사용하다보니 가 발생할때마다 function이 여러번 실행되는 상황이 발생했다. …

퍼블리싱을 할때 컴포넌트를 적재적소에 배치시키고 싶을때가 아주아주 많다. 그럴때는 주로 같은 속성을 이용해 배치하고 있다. 그 중 를 이용하게되면 해당 컴포넌트가 마치 DOM으로 부터 공중에 붕뜨는 모양이 되어 이후에 잡아놓은 컴포넌트들이 흐트러지는 경우가 많았다 ㅠㅠ 그래서 라는 속성을 알고 있었음에도 를 이용한 positioning 을 지양…

웹 퍼블리싱을 하다보면 size를 지정할때  등과 같은 단위로만 표현이 애매할 때가 있다. ex) 글로벌 네브바의 height가 60px인데  body의 height를 100%가 아닌 글로벌 네브바만큼 빼고 지정하고싶을떄 지금까지는 SCSS에서만 해결되는 줄 알고 대략적으로만 맞춰서 퍼블리싱을 했었는데(바보다) 검색을 해보니 CSS에서도 연산자를 사용한 …

이번 시간에는 우리의 App에 Icon과 Loading화면(splash)을 부여해주도록 합시다. 아래 Icon과 Loading화면의 예시가 있습니다 Icon Untitled.png Loading화면 Untitled 1.png * Logo 만들기 ( 🔻 아래의 사이트를 사용하셔도 좋고 직접 Logo를 만드셔도 됩니다! ) Amazingly Simple Gr…

안녕하세요! 지난 시간 Navigation이라는 애를 추가하고 Calendar도 가져와서 사용한다고 많이 힘들었죠 😥이번시간에 기능만 조금더 넣어주면 Diary App이 완성되니까 달려봅시다 참 들어가기전 Diary의 Navigator를 사용함에 있어서 한가지 업데이트가 있었는데요 기존에 를 사용하거나 를 사용할때 에서 가져와 사용해줬는데요 react-…

8 RN Diary App 의 Layout만들기 멋-하 TodoApp으로 기본적인 RN의 구조에 대해서 공부하고 Weather App으로 API를 적용하는 방법을 공부하고 오늘은 Diary App을 통해 RN을 좀더 깊이 알아보도록 하겠습니다 0.0 App 생성하기 이제는 조금 익숙해지셨을거라 생각합니다 1. Navigation 만들기 Navigation…

안녕하세요! 1개의 App을 만들고 아주 기쁜마음으로 다음 App을 시작해보도록 합시다 제목에도 나와있듯 우리는 이번시간을 통해 API를 적용하는 방법을 중점적으로 배우게 될거에요 우리가 만들 App의 대략적인 모양입니다 그럼 이번시간에 나아갈 순서에 대해서 이야기를 해보도록 합시다 배경효과 주기 + 전체적인 구조 잡기 loading기능 넣어주기 weat…

안녕하세요! 여러분 지난시간까지 우리의 TodoApp Layout을 만들어 보았습니당 슬슬 RN에 만들기에 재미가 생기시나요!!!!!! 저는 재밌습니다.. 오늘 이시간에는 우리가 만든 Layout에 활력을 불어넣어 줄겁니다 = 기능을 넣어줄꺼에요 State라는 애를 이용할껀데요!! State는 React개념 설명할때도 언급을 했던 내용이지만 변경가능한 값…

안녕하세요 열어분 드디어 RN 으로 들어왔습니다. 우리는 지금부터 백문이불여일타 라는 말처럼 이론보다는 실습을 중심으로 공부해 나갈꺼에요 첫번째로 개발의 시작이라 할 수 있는 To-Do앱을 만들어 볼껍니다 우리는 저번 시간에 React의 기본개념에 대해서 공부를 했으니 실습을 하며 필요한 부분만 살펴보면서 넘어가도록 해요!! 프로젝트 생성 cmd창이나 s…

안녕하세요 여러분 지난 자료에서 바뀐 JS에 대해서 보고 오셨습니당 뭘 자꾸 RN이나 알려주지 사전지식을 풀고 있나 하시겠지만… 나중에 편하기 위해 지금 좀 고생한다고 생각해주세여 ㅎㅎ 그럼 바로 시작합시다 참 아래의 내용이 너무 어려워서 한번에 이해가 안되더라도 한번 두번 읽으시면서 아~ 이런게 있구나 해주셔도 나중에 많은 도움이 될거에요 React 페…

RN 들어가기전에 JS사전지식 안녕하세요!!! 본격적으로 React-Native 에 대해 들어가기전에 React-Native의 바탕이 되는 React 의 바탕 JavaScript에 대해서 알아보도록 합시다 👀 해당 자료는 빠르고 쉬운 이해에 포커스를 맞췄습니다. (자세한 JavaScript 자료는 나중에 꼭 공유하도록 할께요!! 필요하신 분이 계시다면..…

해당 자료는 2019 하반기 멋쟁이사자처럼 앱선도대학 커리큘럼을 위해 공부를 하며 만든 자료입니다. 따라서 지금보면 부족한부분이 많은점 참고 부탁드리겠습니다. (hooks를 사용하지 않는다던가.., 버전이 안 맞는다던가… ㅠㅠ) #1 React Native란 무엇일까 React Native Facebook 에서 만든 Open Source Mobile Ap…

React-Native 내 Device이용 앱실행(Android) 안녕하세요!! 우리의 휴대폰을 이용하여 App을 실행시켜보도록 하겠습니다. (일단 휴대폰에 expo앱이 깔려있다는 전제하에 진행하도록 하겠습니다.) 꼭 실제 휴대폰을 사용하지 않더라도 android studio나 xcode와 같은 것을 이용하면 가상 device로도 test 해볼수 있습니다…

React-Native expo시작하기 node.js 설치 npm이라는 패키지 매니저를 설치하기 위해 node.js를 다운로드 받을거에요. 대다수 사용자에게 추천하는 LTS버전을 본인 운영체제에 맞게 다운로드 해주세요. _2019-06-19__5.58.23.png Untitled.png terminal이나 cmd창을 실행해 node가 제대로 설치되었는지 …