Dog foot print

Electron with svelte 초기 세팅하기 requirement 일렉트론 윈도우에서는 svelte를 사용 할 수 있어야 한다. 유용한 플러그인 및 모듈을 설치하여, 깔끔한 폴더 구조를 만들어야 한다. svelte와 일렉트론에서 typescript를 사용 할 수 있어야 한다. svelte에서는 scss를 사용 할 수 있어야 한다. svelte에서 최신 문법을 사용 할 수 있어야 한다. svelte에서는 css초기화가 되어야 한다. svelte에서는 css 브라우저 접두사가 붙어야한다. 환경 OS : mac big-sur 11.3 NODE : 14.16.1 NPM : 6.14.12 YARN : 1.22.10 svelte 사용하기 SVELTE TEMPLATE설치 Note : npm , node , y..

회사는 바삐 돌아가고, 공부 할 내용은 많아, 기획 되어있던 시리즈가 진도를 못나가고 있다. 그래서 많은 이들이 실수 할 만한 내용에 대해서 작성해보려 한다. 이 내용은 타입스크립트로 작성되어 있는 함수형 컴포넌트를 사용하지만, REACT의 특징을 어느정도 익힌 사람이라면 이해 할 수 있도록 작성되어 있다. Map 을 통한 컴포넌트로의 매핑 Map 메서드는 배열을 재구성하는 용도로 사용되는 배열 메서드이다. 배열 타입이라면 map 메서드를 가지고 있다. 혹시라도 map 메서드가 익숙하지 않은 사람을 위해 간단한 예를 들어보자 . Common.js에서의 사용 const numbers = [1,2,3,4,5]; const addedTwoInNumbers = numbers.map((number)=>{ retu..

서론 이번 주 목요일 드디어 계명대학교에서 마지막 시험을 치뤘다. 후련한 마음이 앞서며 나를 괴롭혔던 많은 비효율적인 학교 행정과 수업에서 벗어난다 생각하니 춤이라도 추고 싶은 심정이다. 대학교 수업과 개발 일을 병행하면서 지내다 보니 너무 자기계발에 소홀했다는 생각도 들고, 개발 도중에 웹소켓이라는 놈의 정체에 대해서 늦게 알기도 해서 웹소켓을 응용하여, 병원 홈페이지나 중고차 사이트에서 사용하는 1:N 채팅을 만들어 볼까 싶어 기획하였다. 1 : N 채팅은 고객은 사이트 관리자와만 채팅이 가능하지만, 사이트 관리자는 대화를 시도한 모든 사용자들과 소통이 가능하다. 여기에 조금 덧 붙여 기존 1:N 채팅 프로그램은 종료시에 더 이상의 소통이 불가능 하지만, 이 프로그램은 종료하여도 다시 접속 할 수 있..

소중한 분의 제안으로 가족, 여자친구, 친구들을 대구에 두고 대구에서 전라남도 여수에 프로그래머로써 첫발을 딛게 되었다. (혹시 여수 생활은 어때요 라고 물어볼 사람을 위해 말하자면 관광도시라 주변에 바다와 섬만 있을 줄 알았던 여수는 생각보다 좋은 인프라를 가지고 있다. ) 아침과 오전 책 소프트 스킬 , 신의 시간술에서 추천한대로 아침에 조금 일찍 일어나 근처 산책을 다녀왔다. 전날 회사 사람들이랑 등산을 다녀와서 가기 귀찮았긴 하지만 그래도 아침부터 머리 돌릴려면 조금 몸을 푸는게 어떤가 해서 다녀왔는데 생각보다 괜찮았다. 이렇게 15분간의 산책을 마치고 귀찬더라도 그냥 아침 밥 챙겨먹고 풀세팅하고 회사 사람들과 카풀해서 출근했다. 회사에 도착해서 간단히 아이템 상세 설명듣고 드디어 코드를 받았다...

React 로 Calendar app만들기 - 5 클릭 한 날짜 표시하기 금일은 클릭하거나 최초 RCA 마운트 시 오늘에 해당하는 날에 Day컴포넌트에 색상을 다르게 해주는 작업을 할 것입니다. 그리고 캘린더에서 이번 달이아닌 부분을 클릭하게 되면 해당 달력으로 이동되게 끔 할 예정입니다. /src/App.js import React, { Component } from 'react' import Header from './Header' import Calendar from './Calendar' import moment from 'moment' import './style/RCA.css' export default class App extends Component { state = { calendarYM..

React로 만드는 calendar app만들기 Calendar 날짜 표현하기 금일 만들어 볼 것은 calendar에 날짜를 표시하는 부분입니다. 날짜를 표시하고 최초 마운트 시 오늘에 해당하는 날짜가 검게 표현되어야 합니다. 또한 토요일과 일요일은 평일과 다르게 색상을 표현해야 합니다. 마지막으로 이번 달이 아닌 날이 달력에 표시되게 되면 흰색으로 표현되게 끔 해야합니다. Issue 발생 ! 평소 달력은 이렇게 5주가 보통 정상적이지만 달에 따라서는 6주인 경우가 존재하고 2월의 경우 4주가 존재하는 경우가 있습니다. 달력이 만약 5주에서 6주 그리고 4주로 계속해서 레이아웃이 변경 되는 경우 사용자가 불편함을 느낄 가능성이 매우 높습니다. 그렇기에 우리는 5주를 기본 주로 두고, 6주인 경우 23일과..

React로 Calendar app만들기 -3 Calendar container 요일 표시하기 이번 작업은 요일을 표시하는 Datehead component를 작업할 예정입니다. 현재 우리의 달력 app은 한글로 이루어져 있지만 사용자에 따라 영어로 sun, mon, tue, wed, thu, fri, sat,로 표현도 가능하고 한자로 日, 月, 火, 水, 木, 金, 土 로 표현 가능합니다. 그렇기에 개발자의 편의성을 위하여 Dateheader component로 요일에 대한 표현을 전달하면 요일을 표시하도록 구상했습니다. 이 과정에서 생각해볼 수 있는 것은 다형성의 원칙으로 인하여 “sun, mon, tue, wed, thu, fri, sat”도 요일을 모은 표시 형식이며, [‘sun’, ‘mon’, ..

React로 Calendar App 만들기 – 2. 헤더 만들기 헤더에 나타나는 표시사항으로는 현재 표시하고 있는 달, 오늘 날짜, 월 이동 입니다. 위의 모든 내용들은 App component에서 관리되고 Header component로 props로 전달할 겁니다. 앞서 말했듯이 이 프로젝트는 Date객체가 아닌 외부 라이브러리인 moment.js를 사용해서 더욱 빠르게 project를 향상 시키는 방법을 사용하도록 할겁니다. Moment.js의 설명은 git의 moment.js 페이지를 참조 해주시기 바랍니다. Yarn add moment 명령어를 통하여 해당 프로젝트 폴더에 moment 라이브러리를 설치하도록 합니다. 이후 app.js에서 moment를 import하고 header component..