티스토리

shaking blog

검색하기

블로그 홈

shaking blog

88240.tistory.com/m

shaking 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

[CSS] z-index 에 대해서 z-index 의 특징 z-index 값이 클 수록 위로 올라온다. ex) A 의 z-index 는 0, B 의 z-index는 1 일 경우 z-index 값이 같을 경우 나중에 배치된 레이어가 위로 올라온다. ex) A 와 B 의 z-index 모두 0 인데, html B 가 더 나중에 배치된 경우 태그 깊이가 같은 것 끼리만 비교가 된다. ex) A 는 z-index가 2, B 는 z-index 1, C 는 z-index 3 일 때 A > C > B 순으로 나타난다. A B C → A 와 B 중 A z-index 값이 더 크므로 A가 B 보다 위로 위치한다. → B 와 C 중 C z-index 값이 더 크므로 C 가 B 보다 위로 위치한다. 즉, 부모 영향을 받으니 아무리 z-index 값이 크더라도.. 공감수 0 댓글수 1 2024. 1. 24.
지원 브라우저 확인 하는 사이트 https://caniuse.com/ 공감수 0 댓글수 0 2024. 1. 17.
맥북에서 Apple 기기 테스트 하는 방법 spotlight 검색 열기 (command + space bar) simulator 검색 docker 위의 simulator 아이콘 에서 마우스 오른쪽 → device 선택 공감수 0 댓글수 0 2024. 1. 17.
Storybook Button Example (feat. vue) Start package.json 에 다음과 같이 명령어를 넣는다. "scripts": { "dev": "vite", ... "preview": "vite preview", "storybook": "storybook dev -p 6006" }, 다음 명령어를 통해 Storybook 을 실행할 수 있다. npm run dev:storybook http://localhost:3003 로 Storybook 이 자동 실행 된다. Button Example 1. Button Story 를 추가해봤다. 2. 전체적인 코드를 먼저 대략적으로 말하자면, Button Component 에서 label, primary 여부, size, backgroundColor 를 props 으로 받고 click 이벤트를 세팅했다. 스.. 공감수 0 댓글수 0 2024. 1. 17.
Storybook 시작하기 (feat. vue) Install 1. Storybook CLI 사용해 설치한다. npx sb init 루트 안에 .storybook 과 storybook-static 추가된다. package.json 에 명령어 추가된다. ... "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook" ... 2. .gitignore 에 다음과 같이 추가한다. .storybook storybook-static 3. Stroybook 을 다음 명령어로 실행한다. npm run storybook http://localhost:6006 로 Storybook 자동 실행 된다. Setting .storybook/main.js 에서 스토리 위치 외 Storybook 에 .. 공감수 0 댓글수 0 2024. 1. 17.
[Vue] Vue2 에 Composition API 적용하기 Composition API 설치 install npm install @nuxtjs/composition-api --save plugin 추가 https://bitbucket.org/backpackr/web.idus.com/src/f71db99f7dbd/plugins/composition-api.plugin.ts nuxt.config.ts > buildModules 추가 buildModules: [ ... '@nuxtjs/composition-api/module' ], Composition API 사용 하기 Composition API import import {reactive, ref} from "@nuxtjs/composition-api"; setup()에 전달된 인자에 대한 타입을 추론하려면, de.. 공감수 0 댓글수 0 2024. 1. 17.
[GIT] 방금한 commit 취소 (하고 다시 stage 로 복구) 이전에 작성했던 git 에서 commit 취소 하는 방법은 : https://88240.tistory.com/523 reset 명령어를 통해 commit 한 내용을 모두 지우는 것인데, commit 을 하지 않아야할 상황에 잘못 commit 해서 commit 실행취소처럼 다시 stage 에 복구시키는 명령어에 대해 메모한다. 명령어는 다음과 같다. git reset HEAD^ 공감수 0 댓글수 0 2024. 1. 17.
[GIT] git 에서 pull 받으려 할 때 다음과 같이 error 날 경우 hint: You have divergent branches and need to specify how to reconcile them. hint: You can do so by running one of the following commands sometime before hint: git config pull.rebase false # merge hint: git config pull.rebase true # rebase hint: hint: You can replace "git config" with "git config --global" to set a default hint: preference for all repositories. You can also pass --rebase, --no-r.. 공감수 0 댓글수 0 2024. 1. 17.
intellij 에서 treeview 안보일 때 https://apeltop.blogspot.com/2018/06/intellij.html 공감수 0 댓글수 0 2023. 5. 16.
[Vue] Composition API Vue3 에서 달라진 점 https://v3.ko.vuejs.org/guide/migration/introduction.html#주목할-만한-새로운-기능들 시작하기 | Vue.js 시작하기 INFO Vue.js의 새로운 기능에 대한 정보가 필요하신가요? 그렇다면 필수가이드를 확인하세요. 이번 가이드는 Vue 2 경험이 있으면서, Vue 3 변경사항 및 새로운 기능을 배우고 싶은 사용자를 v3.ko.vuejs.org https://composition-api.nuxtjs.org/ Nuxt Composition API Vue 3 Composition API in Nuxt composition-api.nuxtjs.org Composition API 탄생 배경 1. Options.. 공감수 2 댓글수 0 2022. 3. 21.
[Typescript] 타입스크립트 성능 고려하기 - 컴파일하기 쉬운 코드 작성 1. 타입간 merge 가 필요할 때는 type 보다 interface 를 사용하자. - 객체 사용 시 type 과 interface 는 다음과 같이 유사하게 사용 되고 있다. interface Foo { prop: string }; type Bar = { prop: string }; - 그러나 타입간 merge 가 필요할 때는 interface 의 extends 를 사용하는 것이 성능상으로 유리하다. interface 는 단순히 객체에 대한 모양으로 표현하기 때문에 여러개가 올 경우 단순히 merge 만 하면 되지만, type 은 객체 뿐만 아니라 원시타입도 올 수 있기 때문에 재귀적으로 속성을 merge 하고 그로인해 때로는 naver 가 나오면서 제대로 merge 가 안되는 경우도 있다. - 또한 .. 공감수 1 댓글수 0 2022. 3. 21.
[Vue] "이 사이트에서 나가시겠습니까?" 구현하기 form 형식에 페이지에서 input 에 입력한 정보들을 저장하지 않고 페이지를 새로고침 하려하거나 다른 페이지로 나가려 할 때 "이 사이트에서 나가시겠습니까?" 라는 window 경고창을 본 적이 있을 것이다. 이를 구현하기 위해서는 window 에서 지원하는 beforeunload 라는 이벤트를 사용하면 된다. 우선 변경사항이 있는지 확인하는 플래그 변수는 isLeaveSite라고 하자 (ture이면 사이트를 종료하겠다는 것) 그리고 mounted 와 beforeUnmount 안에 다음과 같이 beforeunload 이벤트를 등록, 해지하는 코드를 입력한다. mounted() { window.addEventListener('beforeunload', this.unLoadEvent); }, before.. 공감수 2 댓글수 0 2021. 12. 2.
[GIT] Jetbrains IDE에 gitflow 설치 plugins.jetbrains.com/plugin/7315-git-flow-integration 공감수 0 댓글수 0 2020. 12. 4.
[Javascript] ios App 에서는 window.open 동작 하지 않는다. ios App 에서는 window.open 이 동작하지 않는다. window.open('/'); window.location.href 으로 대체해서 사용하자. function loadlink() { if (typeof (window.open) == "function") { window.open("http://www.stackoverflow.com"); } else { window.location.href = "http://www.stackoverflow.com"; } } https://stackoverflow.com/questions/11816380/window-open-does-not-work-on-ios-app-using-phone-gap 공감수 6 댓글수 0 2020. 1. 8.
[GIT] remote 에 올라간 git tag 삭제 git push --delete origin YOUR_TAG_NAME https://stackoverflow.com/questions/5480258/how-to-delete-a-remote-tag 공감수 1 댓글수 0 2019. 11. 8.
X-Forwarded-For(XFF) 란? XFF는 HTTP Header 중 하나로 HTTP Server에 요청한 Client의 IP를 식별하기 위한 표준이다. (XFF 헤더는 HTTP 프록시나 로드 밸런서를 통해 웹 서버에 접속하는 클라이언트의 원 IP 주소를 식별하는 사실상의 표준 헤더이다.) 웹 서버나 WAS 앞에 L4 같은 Load balancers 나 Proxy server, caching server 등의 장비가 있을 경우 웹서버는 Proxy server 나 장비IP에서 접속한 것으로 인식한다. 그렇기 때문에 웹서버는 실제 클라이언트 IP가 아닌 앞단에 있는 Proxy서버 IP를 요청한 IP로 인식하고, Proxy장비 IP 로 웹로그를 남기게 된다. 즉, 클라이언트 IP ⟶ Proxy 서버 및 장비 ⟶ 웹 서버 이 때 웹프로그램에서는 .. 공감수 2 댓글수 0 2019. 8. 14.
[GIT] fatal: remote error: CAPTCHA required intellij 나 사용중이던 IDE 에서 기존 비번이 여러 요청으로 lock 이 걸렸거나 비밀번호를 변경해서 다시 재설정이 필요할 때 git 을 사용하면 다음과 같은 에러가 난다. fatal: remote error: CAPTCHA required 이럴 때 git 계정 사이트로 가서 다시한번 로그아웃 후 로그인 하면 해결 된다. 참고사이트 : https://androphil.tistory.com/705 공감수 0 댓글수 0 2019. 7. 17.
[Vue.js] Event Handling 1. v-on 디렉티브를 사용하여 DOM 이벤트를 실행할 때 사용 한다. Add 1 v-on 을 대체해서 @을 사용할 수 있다. Add 1 2. 이벤트 전파 이벤트 전파로 원하는 이벤트 외에 다른 이벤트까지 발생하는 상황 발생할 경우 이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일이고, event.preventDefault() : 기본 이벤트의 자동 실행을 중지시킴 event.stopPropagation() : 이벤트의 전파를 막음 Vue 에서는 다음과 같이 이용되고 있다. Add 1 prevent 외에 다른 수식어는 다음과 같다. @click.stop : 이벤트 전파 중단시킴 @click.capture :.. 공감수 0 댓글수 1 2019. 7. 11.
[GIT] commit 취소 : git reset 방금 local stage 에서 commit 을 했는데 취소하고 싶다면 reset 을 하면 된다. 특히, reset 중 다음과 같이 네종류가 있는데 commit 하기전 상태는 유지하면서 commit 명령어를 친 것만 취소하고 싶다면 soft나 mixed 를 사용하면된다. soft 는 해당 파일들은 staged 상태로 워킹 디렉토리에 보존하고 (즉, 해당 파일들은 unstaged 상태로 워킹 디렉터리에 보존), mixed 는 해당 파일들은 unstaged 상태로 워킹 디렉터리에 보존한다 (즉, 해당 파일들은 unstaged 상태로 워킹 디렉터리에 보존). 또한, hard 는 commit 뿐만 아니라 해당 파일들 모두 삭제. 즉, 모두 취소(reset)을 해버린다. 참고 사이트 : https://gmlwjd.. 공감수 0 댓글수 0 2019. 7. 3.
[GIT] revert/reset 취소하기 : git reflog git reflog 위 명령어를 치면 다음과 같이 그동안 내가 git에서 해왔던 명령어들이 나열된다. bcbb527ba (HEAD -> hotfix/test, origin/master, master) HEAD@{0}: reset: moving to bcbb527bafee735f1f0724aa5688dd4808428e27 8133014db HEAD@{1}: commit: 테스트 bcbb527ba (HEAD -> hotfix/YAPCtest, origin/master, master) HEAD@{2}: reset: moving to bcbb527bafee735f1f0724aa5688dd4808428e27 fbe20a4f8 HEAD@{3}: reset: moving to fbe20a4f8c3782ba714368.. 공감수 0 댓글수 0 2019. 7. 3.
[CSS] deep selector 부모 컴퍼넌트에 있는 엘리먼트 뿐만 아니라 자식 컴퍼넌트에도 동일한 클래스명이 있다면 전부 적용 CSS 에서 사용 하는 방법 .parent-class >>> .child-class { /* ... */ } // 1번째 사용 방법 .parent-class[data-v-f3f3eg9] .child-class { /* ... */ } // 2번째 사용 방법 SCSS 에서 사용하는 방법 .parent-class { // 1번째 사용 방법 : 이 방법은 deprecated 될 예정이라 2번째 사용 방법으로 사용하자 & /deep/ .child-class { background-color: #000; } } .parent-class { // 2번째 사용 방법 &::v-deep .child-class { backgr.. 공감수 1 댓글수 0 2019. 6. 27.
[CSS] Flex Div 안에 이미지 사용시 IE Bug IE 에서 flex div 안에 이미지를 넣고 flex 크기에 따라 이미지 크기도 가변되도록 넣어놓았을 시 resizing 이 안되는 버그가 있다. 예를들어 이미지 원본 사이즈가 500px * 500px 인 이미지가 300px * 300px 인 이미지로 resizing 되면서 다음 그림 처럼 위아래 여백이 발생을 한다. 위와 같은 현상이 일어났을 때 방면으로 이미지를 감싸고 있는 flex div 에 다음과 같이 css 로 min-height 값을 넣어주면 해결된다. min-height: 1px; 참고 사이트 : https://github.com/philipwalton/flexbugs/issues/75 공감수 0 댓글수 0 2019. 6. 27.
[Javascript] 교집합, 차집합, 배타적논리합 다음과 같이 두개의 배열이 있었을 때 let arr1 = [1, 2, 3]; let arr2 = [2, 3, 4, 5]; 두 배열의 값들을 비교하여 합, 교, 차의 값을 구하고 싶다면 다음과 같다. 1. 차집합 let difference = arr1.filter(x => !arr2.includes(x)); // 결과 1 2. 교집합 let difference = arr1.filter(x => arr2.includes(x)); // 결과 2, 3 3. 배타적논리합 let difference = arr1 .filter(x => !arr2.includes(x)) .concat(arr2.filter(x => !arr1.includes(x))); // 결과 1, 4, 5 참고 사이트 : https://stacko.. 공감수 4 댓글수 0 2019. 6. 27.
[GIT] tag 삭제 명령어 # git tag -d 1.0.0 공감수 0 댓글수 0 2019. 4. 15.
Upsource IntelliJ에 연동하는 방법 우산, Upsource는 Jetbrains 에서 개발한 Code Review Tool 이다.Jetbrains 계일인 IntelliJ 에 호환도 잘돼서 Code Review 할때 굉장히 편하다. 1. [Prefereneces] - Plugins 로 들어간다음 Upsource 로 검색 해서 다음 툴을 설치한다. 2. 설치 완료 후 IntelliJ 를 재시작한다. 3. 다시 IntelliJ 가 켜지면 다시 [Prefereneces] 에서 Tools - Upsource - Connection 에 들어가서 Server URL 에 미리 세팅되있는 Upsource URL 을 입력한다. 4. Test Connection 을 눌른 후 연동에 성공하면 Apply 로 환경설정을 종료한다. 다음은 Test Connection.. 공감수 0 댓글수 0 2019. 1. 9.
[Algorithm] Codility Lesson 2-1 A non-empty array A consisting of N integers is given. The array contains an odd number of elements, and each element of the array can be paired with another element that has the same value, except for one element that is left unpaired. For example, in array A such that: A[0] = 9 A[1] = 3 A[2] = 9 A[3] = 3 A[4] = 9 A[5] = 7 A[6] = 9 the elements at indexes 0 and 2 have value 9, the elements at i.. 공감수 0 댓글수 0 2019. 1. 9.
[Algorithm] Codility Lesson 1 재직중인 회사에서도 채용 시 코딩테스트로 쓴다고 해서 들어 봤는데 기출 문제도 있는지 몰랐다가 우연히 알게되서 Codlility Lesson 을 통해 알고리즘 공부를 하고 있다.하나씩 풀다보면 와, 참 이 함수를 이렇게 쓰기도 하는 구나 같은 함수 사용에 재발견도 하고-어떻게 하면 좀 더 효율적인 코드가 되는지. 가끔 내 코딩력에 한계도 느끼는 재미(?)가 쏠쏠하다.그리고, 문제 하나당 내 답과 찾아본 답을 기록하려고 한다. 물론, 언어는 Javascript 이다. A binary gap within a positive integer N is any maximal sequence of consecutive zeros that is surrounded by ones at both ends in the bi.. 공감수 0 댓글수 0 2019. 1. 8.
[JavaScript] 16진수와 10진수, 8진수, 2진수 변환하기 - toString, parseInt 정수 9(10진수)를 2진수로 변환하면 1001 이다. 이렇게 10진수를 2진수로 변환할 땐 다음과 같다. let dec = 9; let hex = dec.toString(2); 이처럼 10진수를 2진수로 변환할 땐 toString 함수를 사용하면 된다. 10진수를 15진수로 변환할 때도 마찬가지이다. let dec = 123; let hex = dec.toString(16); // 결과는 7b이다 그렇다면 반대로 16진수를 10진수로 변환하고 싶다면 어떻게 해야할까? 다음과 같이 parseInt 를 사용 하면 된다. let hex = "7b"; let dec = parseInt(hex, 16); // 결과는 123이다 16진수를 2진수로 변환하고 싶으면 10진수로 바꿨다 다시 2진수로 하면 되고, 8진.. 공감수 0 댓글수 0 2019. 1. 5.
[JavaScript] 배열 요수 중 최대값, 최소값 구하기 - reduce 함수 활용 다음과 같이 배열 안에 여러 숫자 요소가 있을 때, const array = [1, 6, , 7, 16, 22, 32, 34]; 최대값과 최소값을 구할 때 reduce 함수를 사용하면 쉽다. // 최대값 구하기 var max = array.reduce((previous, current) => { return previous > current ? previous:current; }); // 최소값 구하기 var min = array.reduce((previous, current) => { return previous > current ? current:previous; }); 위 예시에서 보는 바와 같이 reduce 함수는 기본적으로 첫 번째 인자로 function 을 받습니다. 하지만, 두 번째 인자로 .. 공감수 0 댓글수 0 2019. 1. 4.
IntelliJ 에서 저장할 때마다 eslint 적용하는 방법 1. 매크로 설정을 IntelliJ 에 적용한다.복사할 경로 : ~/Library/Preferences/IntelliJIdea2018.2(사용중인 IntelliJ 버전에 따라 다름)/options/ 파일명 : macros.xml 2. 완료후 IntelliJ 를 재시작 해야 적용 된다. 추가로 매크로에 단축키 적용하고 싶다면 다음을 진행한다. 1. IntelliJ 상에서, [Preferences] - [Keymap]에서 lint fix 검색 2. Macros > lint fix and save all 을 select 하고 마우스 오른쪽 클릭하면 메뉴가 활성화 되는데, 거기서 Add Keyboard Shortcut 선택한다 (키보드 단축기 추가 메뉴이다) 3. 기존에 save all 단축키였던 cmd + s.. 공감수 0 댓글수 0 2018. 12. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.