반응형 전체 글116 2020 Log 2020년이 마무리 되고, 2021 신축년이 밝았다. 대다수 사람들이 그러하듯 코로나라는 바이러스와 함께한 2020년은 그닥 좋지 못한 한 해였던것 같다. 코로나로 인해 2020년은 기존과 많이 다른 삶을 살았다. 감염예방을 위한 마스크의 일상화, 재택근무, 모임 제한... 등 코로나 예방 수칙 아래 통제된 생활을 해야만 했다. 또 몇년 전부터는 해마다 해외여행을 한번씩 다녔었는데 올해는 그러지 못했다. 그 대신 넷플릭스, 유튜브 등의 컨텐츠를 시청하며 2020년은 그 어느 해보다 더 빨리 지나간듯하다. 역시나 한 해를 마무리하는 2020 개발 회고록을 블로그를 통해 써보려고 한다. 2020 목표했던 일 토이프로젝트 2020년은 토이프로젝트를 통해 개발자로서 한층더 성장하려고 했다. React, Node.. 2021. 1. 1. Click Event 와 DOM 다루기 (Pure Javascript) 순수 자바스크립트로 특정 DOM Element에 Click Event를 추가 하는 방법은 아래와 같습니다. var divElement = document.getElementById('sample'); divElement.addEventListener('click', (e) => { // To do something... alert('Click'); }); document로 부터 element를 찾음. addEventListener(type, event) 메서드를 통해 이벤트 추가 웹개발자라면 위 코드 정도는 구글링 없이도 충분히 알 수 있을 겁니다. 그렇다면, 아래와 같은 간단한 문제를 해결해 봅시다. 아래 html에서 click 한 요소의 색깔을 변경 해보세요. 월 화 수 목 금 토 일 #sample .. 2020. 12. 19. React 에서 활성화된 focus 해제(blur) 방법. [feat. Typescript] 모바일 웹브라우저를 통해서 React로 작성된 웹페이지 이용할 때 input box에 텍스트 입력시 하단 영역에 키보드가 표시되게 됩니다. 보통은 입력완료하고 다음 단계 진행 시 해당 키보드 영역은 사라지게 되는데요. 여기서 입력하다가 중간에 다른 작업을 수행하려하려 키보드 영역을 사라지게 하고싶다면. 해당 input box에 onBlur 이벤트를 호출해주면 됩니다. 아래와 같이 말입니다. (Typescript코드입니다. 그냥 React에서는 document.activeElement.blur() 해주면 됨) function App() { const otherOneTouch = useCallback((event: TouchEvent) => { (document.activeElement as HTMLElem.. 2020. 12. 3. React 에서 WebSocket 활용하기 (feat. Typescript) React에서 Websocket 연결 및 간단 사용방법에 대해서 정리합니다. 서버단 코드는 따로 없습니다. 서버는 있다고 가정합니다. ^^: React + Typescript 환경의 프론트 엔드 코드만 있어요. (웹 소켓 서버 구축은 검색해보면 많이 나와요...Pass) 01. CRA로 프로젝트 생성하기 create-react-app ws-example --typescript 위 같은 커맨드로 React 프로젝트를 생성합니다. 02. Package 구조 └─src │ App.css │ App.tsx │ index.tsx │ ├─components │ Chatting.tsx │ TextInputBox.tsx │ └─websocket WebSocketProvider.tsx 필요없는거 날리고 간단하게 위와 같.. 2020. 9. 16. React 에서 Canvas 활용하기 (feat. Typescript) React를 활용해서 canvas를 그림판처럼 활용해보는 예제입니다. 01. CRA를 이용해 프로젝트 생성 create-react-app canvas-example --typescript --typescript를 붙여서 React + Typescript 트프로젝트를 생성합니다. 02. canvas element 추가 import React, { useRef } from 'react'; import './App.css'; interface CanvasProps { width: number; height: number; } function App({ width, height }: CanvasProps) { const canvasRef = useRef(null); return ( ); } App.default.. 2020. 9. 11. [Kotlin] Springboot + WebSocket 사용법 Kotlin + Springboot 환경에서 WebSocket(웹소켓)을 사용하기 위한 방법을 기술합니다. 간단한 채팅앱을 만들어 보며 WebSocket 설정과 사용법을 알아보겠습니다. (백엔드. 즉, Kotlin + Springboot + Gradle 환경 구성에 대한 내용만을 다루었습니다.) 01. 모듈 생성/다운로드 https://start.spring.io/를 통해 Springboot를 위한 모듈을 생성해봅니다. 위와 같이 설정 체크 해주고 GENERATE 클릭 해서 zip파일을 다운 받습니다. 다운받은 zip파일 압축 해제 하고, IDE에서 해당 프로젝트를 추가해봅시다. 그리고 build.gradle.kt 파일을 열어보면 아래와 같습니다. plugins { id("org.springframewo.. 2020. 6. 7. [Kotlin] Springboot + Redis 사용법 Redis는 메모리 DB로 일반적인 DB(disk를 사용)보다 속도가 빠릅니다. 그렇기 때문에 대량의 데이터를 다루는 서비스에서 캐시 서버로서 많이 사용됩니다. 해당 글에서는 코틀린을 사용해 Springboot + Redis 연동 및 간단한 사용방법을 정리합니다. 01. Dependency 추가 build.gradle.kt 파일을 열어 아래와 같이 Redis 사용을 위한 lib를 추가해줍시다. ...(중략) repositories { mavenCentral() } dependencies { implementation("org.springframework.boot:spring-boot-starter-web") implementation("org.springframework.boot:spring-boot-s.. 2020. 4. 26. [Kotlin] Springboot + Mybatis 사용법 ORM 기술인 JPA를 사용해서 DB 데이터 조작, 조회를 하면 편하지만 때론 SQL만으로 쿼리를 짜서 조회할 상황도 있을 것이라 생각됩니다. MySQP + JPA 셋팅 방법은 여기 있습니다. https://basketdeveloper.tistory.com/74 [Kotlin] Spring boot에서 MySQL + JPA 사용법 지난번 Springboot + gradle 설정(https://basketdeveloper.tistory.com/73)에 이어 Spring boot에서 DB(Mysql) 간단 연동법과 JPA를 사용하는 방법을 정리해봅니다. 01. build.gradle.kt 에 Dependency 추가 impo.. basketdeveloper.tistory.com 이번에는 Kotlin +Spr.. 2020. 3. 28. [독서]소프트웨어 장인 개발자 필독서라 불리는 "소프트웨어 장인"을 읽고 요약/정리 해봅니다. 중소기업 개발 프로세스와 애자일 첫 회사를 중소SI기업에서 시작했었다. 프로젝트를 수주하면, 고객이 원하는 장소로 파견을 가게 되었고, 전통적인 개발방법론인 Waterfall 방식으로 개발프로세스를 시작했다. 간단히 아래의 절차를 밟은 것 같은 기억이 있다. 요구 분석 : 기획자가 담당한다. 회사 다니면서 기획자랑은 일상적인 대화는 나눈적이 없다. 하지만 개발을 시작하게되면 가장 많이 소통하게 되는 직원이었다. 화면 설계 : 역시 기획자가 담당했었다. DB 설계 : 화면설계서를 기반으로 개발자가 수행한다. 퍼블리싱 작업 : 개발자가 DB 설계를 할 때, 퍼블리셔가 수행한다. 개발 : 화면설계서를 보면서 퍼블리싱 산출물에 데이터를 입히.. 2020. 3. 1. [Kotlin] Springboot에서 MySQL + JPA 사용법 지난번 Springboot + gradle 설정(https://basketdeveloper.tistory.com/73)에 이어 Spring boot에서 DB(Mysql) 간단 연동법과 JPA를 사용하는 방법을 정리해봅니다. 01. build.gradle.kt 에 Dependency 추가 import org.jetbrains.kotlin.gradle.tasks.KotlinCompile import org.springframework.boot.gradle.tasks.run.BootRun plugins { id("org.springframework.boot") version "2.2.4.RELEASE" id("io.spring.dependency-management") version "1.0.9.RELEASE.. 2020. 2. 23. [Kotlin] Springboot + Gradle 시작하기 최근 회사에서 Kotlin으로 개발을 하게 되어 새로운 언어를 공부해야 됬는데요... 코틀린(Kotlin)은 이전까지 안드로이드 개발. 즉, 앱개발 할 때 사용되는 언어라 생각했습니다. 2017년 구글에서 안드로이드 개발언어로 코틀린을 정식으로 채택하고, 앱 개발 관련 공식문서들도 코틀린을 예제로 작성되는 등을 미뤄볼 때, 모바일 앱 개발자는 무조건 해야겠구나 생각했습니다. 하지만!!! 요즘은 Kotlin으로 서버 개발을 하는 회사도 있다고 하네요. Kotlin도 Java와 같이 JVM에서 돌아가기 때문에 Java랑 완벽히 호환이 되고, 최근 Typescript 같은 인기 많은 언어처럼 Null Safety, 함수형과 같은 특징을 가지고 있어 서버개발에 채택되는 경우가 점점 많아지는 추세라고 합니다. 기.. 2020. 2. 22. React 메뉴 활성/비활성 상태 관리하기 대부분의 웹사이트는 현재 표시하는 메뉴가 어떤 메뉴인지 사용자에게 알려줍니다. 색깔을 다르게 표시한다던가 해서 말이죠. 이번에는 React로 Menu에 대한 상태 관리 방법을 간단하게 정리해봅니다. 상태관리 도구는 Redux를 사용합니다. 아래 예제는 타입스크립트를 사용했습니다. 01. index.ts / App.ts // index.ts import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import store from "./store/configureStore"; ReactDOM.render( , document.getElementById('root')); // App.ts import React f.. 2020. 2. 5. 이전 1 2 3 4 5 6 7 ··· 10 다음 반응형
