개발관련

개발관련/자바스크립트 팁

그래서 Top 이 어딘데? getBoundingClientRect().top element.offsetTop 차이점

TOP 에는 여러 종류가 있습니다. 커피? 롤? JAVASCRIPT 에서 TOP을 구하는 방법은 여러가지가 있습니다. offsetTop, getClientRects().top 매번 프론트엔드 UI, 애니메이션을 개발 할 때는 Element의 좌표가 중요한데 항상 헷갈리는 부분입니다. 이번 기회에 확실하게 각 차이점이 무엇인지 알아보고 어떤 경우에 사용하는지 확인해보겠습니다. 위 그림처럼 div를 배치 했습니다. https://stackblitz.com/edit/js-xtkggx?file=index.js const inner = document.getElementById('inner'); console.log('inner.top', inner.offsetTop); console.log('inner.top'..

개발관련

IOS 앱 개발할때 테스트 시 테스트 플라이트( TestFlight )로 테스트 하는 방법

IOS 아이폰용 앱을 개발하다가 빌드를 해서 테스트를 해보려고 테스트 플라이트( TestFlight )이용하는 방법 입니다 안드로이드의 경우 APK 파일을 바로 설치할 수 있지만 iOS iPhone 의 경우 제한이 있습니다. 그래서 개발자 계정으로 등록이 되어 있지 않아도 테스트 할 수 있는 방법 중에 하나인 테스트 플라이트를 이용하는 방법을 공유합니다 1. 아이폰에서 테스트 플라이트 어플 다운로드 저는 이전에 앱 테스트 한 게 있어서 앱 설치가 뜨지만 처음 설치하면 아무것도 뜨지 않습니다. 위의 이름 아이콘을 클릭하면 현재 활성화된 애플 계정 정보를 볼 수 있습니다. 현재 활성화 된 애플 계정 정보 와 디바이스 정보를 알 수 있습니다 2. 애플 스토어 커넥트에 등록 해준다. https://appstor..

개발관련

Mobx 심화 mobx의 reactions 종류 autorun, reaction, when

Mobx observable의 state가 변경되면서 부수적으로 발생하는 기능 autorun autorun(effect: (reaction) => void effect 함수 내부의 obsevable를 subscribe 합니다. obsevable이 변경되면 autorun 를 실행시킵니다 autorun은 초기화시 실행 됩니다. reaction reaction(() => value, (value, previousValue, reaction) => { sideEffect }, options?) autorun 보다 더 세밀한 제어가 가능 2가지 인자를 받는데 첫번째 함수의 observable를 추적하고 renturn 값을 2번째 함수에서 사용합니다. 첫번째 함수에서 쓰인 observable의 변화에만 반응합니다...

개발관련

MobX Modifiers란? observable shallow,ref,deep

MobX Modifiers MobX Modifiers는 observable 프로퍼티의 변화에 대한 행동을 정의 하는 역할을 한다. observable observable 프로퍼티의 깊이를 정하는 Modifier deep, shallow, ref 등이 있다. observable.deep observable의 기본 동작 modifier. 모든 depth 를 observer 한다. 객체를 깊이 관찰 가능하게 만드는 데 추가 노력이 필요하지 않다. 편하다 개꿀 👍 @observer class Model extends Component { @observable user = { name: "myName", friends: [{ name: "firendName" }] }; @action editUser = () =>..

개발관련/자바스크립트 팁

[git] git rebase 란

merge vs git rebase merge master 와 feature/a 를 머지 할 경우 git은 제 3의 별도의 merge 커밋을 만들고 만들어서 두 브랜치를 머지 합니다. rebase 위 에서 2라는 커밋은 master 와 feature/a 의 merge base 입니다. rebase 라는 건 말그래도 base를 다시 만든다는 뜻입니다. HEAD 가 feature/a 이 인 상태에서 git rebase master 를 하면 현재 마스터의 최종 커밋부터 feature/a 브랜치가 생성 됐다고 변경 합니다. 1 ⇒ 2 ⇒ 3 ⇒ a 1 위 의 형태로 히스토리가 정리 됩니다. 반대로 HEAD 가 master인 상태에서 git rebase feature/a 를 하면 현재 머지베이스를 feaure/a..

개발관련/자바스크립트 팁

VS CODE TIP

shell code 등록 하기 vscode 명령어 팔레트(단축키 cmd+p) 에서 code 검색 Shell Command : Install "code" command in PATH 를 실행해주면 터미널에서 code 를 사용할수 있게 된다. 위 처럼 code 명령어를 사용하면 해당 경로에서 vscode 를 실행 시킬수 있다. 사용 예시 $ git config --global core.editor "code" $ git config --global -e 전역 git 설정 vscode 에디터로 실행할수 있다.

개발관련/자바스크립트 팁

실무에서 값을 할당 할때 많이 사용하는 자바스크립트 연산자

or 연산자 ( || ) const detaultValue = param || "value"param 변수에 falsy 값 ("" , null, undefined) 등 값이 들어올 경우 기본값을 주기 위해 사용한다. 널 병합 연산자 ( ?? ) const foo = null ?? 'default string'; console.log(foo); // expected output: "default string" const baz = 0 ?? 42; console.log(baz); // expected output: 0바로 위의 or 연산자의 경우 0,"" 가 모두 falsy 값이기 때문에 null,undefined 와 0,"" 를 구분할수 없다. 이를 구분 해주기 위한 연산자 이다. and 연..

개발관련/매일 코딩 테스트 챌린지

[프로그래머스] 제일 작은 수 제거하기 (JavaScript)

문제 출처 문제 요약 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. 문제 풀이 function solution(arr) { const min = Math.min(...arr) const i = arr.findIndex(num => num === min) arr.splice(i,1) if(arr.length > 0){ return arr } return [-1] } 결론 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

개발자 Dane
'개발관련' 카테고리의 글 목록 (10 Page)