전체 글 (25) 썸네일형 리스트형 [HTML5/JavaScript] 직소퍼즐 만들기 - 1 : 파일 입력 안녕하세요, 김선진입니다. 주말에 블로그 글을 3개나 써야 해서(업보...) 시리즈물로 쓰려고 직소퍼즐 만들기를 기획했는데요, 코딩하는 동안 스크린샷찍는 걸 까먹어서... 1탄에서는 input과 canvas를 이용해서 입력받은 이미지를 4*4로 쪼개서 퍼즐 박스에 넣는 것입니다. const numColsToCut = 4; const numRowsToCut = 4; function allowDrop(ev) { ev.preventDefault(); } function updateImageDisplay() { const preview = document.querySelector('.preview'); const input = document.querySelector('input'); while(preview... [VueJS] VueStyledComponent 안녕하세요, 김선진입니다. 여러분은 컴포넌트를 만들 때 scss와 styledcomponent중에 뭘 더 선호하시나요? 저는 원래 회사 내 프로젝트에서는 scss를 쓰고 있었는데요, 이번에 별도 프로젝트를 진행하면서 scss의 불편한점이 있다고 생각했습니다. (지극히 주관적임) 1. 자식 컴포넌트에 props에 따라 클래스 바인딩을 해줘야 함(클래스가 존재해야 함) 2. 1번이 아니면 style바인딩 해야함(스타일을 쓰면 위계를 좀 더 생각하며 짜야함) 특히 이번 프로젝트에서는 '테마'를 적용할 수 있게 코딩하는 게 목표였는데요, scss를 통해 테마를 적용하려 하다 보니 메인 테마 컴포넌트에 다른 컴포넌트들이 전부 디펜던시를 가지게 되는 문제가 발생했습니다. 저는 메인 스타일 컴포넌트를 몰라도 테마를 .. [Vue js] Vue js에서 axios를 이용한 HTTP 통신 구현하기. 깃허브 블로그에 방문자 수 세는 기능을 안달았더니 유입량을 알 방도가 없어서 이번 포스트는 티스토리에 작성하기로 했다. 아래 이사한 블로그는 2주 뒤까지는 댓글 기능과 방문자수 기능을 달 생각이다... 이번 포스트는 아래 포스트에서 연재중인 PWA 모임 어플리케이션에서 HTTP 통신부 구현할 때 했던 생각과 코드다. https://junnis0123.github.io/2020/07/25/codingTogether.html [Vue js] Vue js + PWA 모임 어플리케이션 만들기 1.기획 - DOG FOOT 안녕하세요, 김선진입니다. 기존에 개발하던 딜리장터 프로젝트 에서 firebase 로그인을 버리고 코그니토 로그인으로 롤백하는 걸로 결정났습니다…. 열심히 달았는데 슬퍼져 vue 개발 하면서 기.. [Vue.js] 동적으로 rowspan이 있는 table 만들기 --- layout: post title: "[Vue.js] 동적으로 rowspan이 있는 table 만들기" date: 2020-01-21 15:37:31 +0900 --- 안녕하세요, 김선진입니다! vue 에는 동적 엘리먼트 생성 방식으로 아주 쉽고 유용한 v-for 구문이 있습니다. 이 v-for를 이용해서 rowspan이 있는 테이블을 만드는 방법에 대해 작성해보려고 합니다. # 기존 테이블 구조 생각하기 html으로 table에 rowspan을 생성하는 방법을 생각하면 쉽게 만들 수 있습니다. rowspan이 딱 하나 있을 경우는 아주 쉽죠. 3칸 행 병합 예시 예시 예시 예시2 예시2 예시2 첫 행에서 병합할 셀에 대해서만 rowspan 속성값을 병합하고 싶은 행 개수 만큼 주면 됩니다. 그러.. [Vue.js] 이모지 입력이 되지 않는 TextArea Component 만들기 --- layout: post title: "[Vue.js] 이모지 입력이 되지 않는 TextArea Component 만들기" date: 2020-01-08 15:37:31 +0900 --- 안녕하세요, 김선진입니다! 회사에서 개발 프로젝트를 진행하던 중, 이모지 입력을 막아야 하는 일이 있었는데요, 필터나 다른 귀찮은 방법 대신 mixin을 적용해서 이모지 입력만 막는 커스텀 텍스트 에리어 컴포넌트를 만들었습니다. 차근차근 커스텀 컴포넌트 만들기에 대해 작성해보겠습니다! # Custom TextArea Component 만들기 ## vue file 만들기 우선, 커스텀 컴포넌트를 만들 뷰파일을 하나 생성해주세요. 이름은 CustomTextArea 로 하겠습니다. template에 아주 간단하게 tex.. 날아갔다. 날아간 걸 계기로 git 블로그로 이사하겠습니다. 열심히 쓴 거 전부 날아가서 아주 화가나네요. [Vue] regex를 적용한 TextInput에서 값 업데이트가 제대로 되지 않는 현상 0. 서론 반나절동안 저를 괴롭힌 부분이었습니다. 커스텀 텍스트인풋 컴포넌트를 만들었는데 도무지 값 업데이트가 되지 않는것이었죠. 이모지를 regex로 거르고 input 리스너를 통해 emit을 하는데, 분명 값은 제대로 깔끔한 텍스트가 넘어오는 반면, 보이는 부분의 값은 변하지 않는겁니다... 1. 원인 아주 당연한 원인이었습니다. 입력 : 1234덜덜 입력 : 1234덜덜😀 -> regex -> 1234덜덜 아시겠나요? 바로 실제 값이 변하지 않아서 렌더링을 하지 않았던 겁니다. 너무 충격적인 이유로 고민했네요. 2.해결법 간단하게 vm.$forceUpdate(); 한줄 추가해주시면 됩니다. [ReactNative] JWT를 이용한 회원관리 어플리케이션 만들기(1) - 프로젝트 생성하고 필요한 화면 만들기 안녕하세요. 이번 토이프로젝트는 React Native을 이용해 JWT 인증 구현입니다. 로그인, 회원가입 API는 서버개발자분께 제공받았으며 온전히 클라이언트 개발기입니다. RN을 사용한지 1년이 지나서 새로 공부하는 느낌으로 개발을 진행하고 있네요. (1년 전 작품이 궁금하시다면 오른쪽 링크를 봐주세요. https://www.youtube.com/watch?v=DsoK0rjWyM8) 개발환경은 Window10 입니다. 나중에 앱 빌드를 위해 회사 맥북으로 옮기게 되겠지만, 대부분의 개발은 윈도우 기준으로 진행됩니다. Window에서는 ios 빌드가 되지 않기 때문에 expo를 이용해서 개발해보도록 하겠습니다. 1년 전에는 create-react-native-app 명령어로 프로젝트를 init했는데 요.. 이전 1 2 3 4 다음
