기술 메모장 14

입사 후 첫 버그를 잡다! HTML Drag&Drop API

첫 버그를 잡아보자 입사 후 간단한 웹뷰 페이지를 클론하는 과제로 진행하였고 이후 사내에서 사용하는 컨텐츠 관리 페이지(CMS)를 담당하게 되었다. 처음에는 코드를 분석하면서 나에게 새로운 기술스택(Ant Design,Typescript) 에 익숙해지는 연습을 하였다. 그러던 도중 처음으로 버그를 고쳐달라는 요청사항이 들어왔다. 드래그&드롭 으로 어떤 컨텐츠의 순서를 변경하는 리스트의 드래그 기능이 아예 동작을 하지 않았던 것이다. 아예 동작을 하지 않았던데 왜 이제 발견되었는지 모르겠다.. 아마 자주 쓰는 기능은 아니였나보다. 해당 부분의 코드를 살펴보니 라이브러리 없이 HTML Drag&Drop API 로 구현이 되어있었고 간단한 기능인만큼 빠르게 공부하여 라이브러리 없이 직접 만들어 고치기로 하였다..

기술 메모장 2022.07.24

if(kakao) 2021 구경 후기

11월은 개발자의 달인건가 이상하게 11월에 대형 기업들의 컨퍼런스 , 개발관련 행사들이 많이 열린다. 이젠 전통이 된건가 ... 여튼 올해도 다양한 기업들의 컨퍼런스가 11월에 열렸고 올해도 코로나때문에 전부 온라인으로 진행하였다. 오프라인 행사를 딱 한번 가본 적이 있다. 아무것도 모르는 새내기였는데 들리는 것이 없어도 굿즈 모으는 맛, 사람 구경하는 맛에 꽤 재밌게 다녀왔다. 이번 글에서는 11/16 ~ 11/18 열린 잠깐 구경해본 if kakao 2021 에 대해 후기를 남기고자 한다. if kakao 2021 ?? https://if.kakao.com/ if(kakao)2021 함께 나아가는 더 나은 세상 if.kakao.com 매년 열리는 카카오의 기술 컨퍼런스이다. 이렇게 다양한 주제에 대..

기술 메모장 2021.11.20

[CRA 없이 리액트하기] #2 webpack,babel 설정해보기, 후기

지난 글 #1 에서는 리액트 개발환경 설정에 필요한 cra , webpack 과 babel 에 대하여 알아보았다. 이번에는 실제로 webpack 과 babel 을 어떻게 사용하는 지에 대한 것과 개발 서버를 띄울 수 있는 설정과 , 여러 파일들을 묶어 하나로 번들링하는 빌드 작업 설정을 해보는 글을 작성 해볼 것이다. 파일 구조 설정 CRA 를 사용할때와 동일하게 파일 구조를 잡으려고 한다. src 안의 index.js 는 밑에서 작성할 Entry Point , 즉 시작점이 되며 저 파일에 연결된 수많은 파일들이 있을 것이다. public 의 index.html 은 이렇게 생겼다. index.js 에서 id 가 root 인 div 태그를 불러와 react 와 연결 할 수 있게 하였다. 빌드를 하면 여기(..

기술 메모장 2021.11.04

[CRA 없이 리액트하기] #1 리액트와 CRA , 프론트엔드 개발 환경 설정에 대한 공부를 해보며

몇달 전 리액트를 처음 배우면서 별 다른 환경설정 없이 바로 프로젝트를 만들 수 있는 CRA 라는 것으로 프로젝트를 시작했다. 아직도 리액트 프로젝트를 만들때 CRA 를 유용하게 사용한다. 분명 환경 설정에 대한 시간소비 없이 금방 코드에 집중 할 수 있게 해주는 좋은 툴이지만 어떻게 구성되어있는지는 한번쯤은 알아놔야 할 것 같았다. CRA 를 사용하지 못할 때가 오면 아무것도 할 수 없을 것 같았고 그러기는 싫었다. 그래서 리액트 프로젝트를 다른 방식으로 설정하는 방법에 대하여 공부를 해보았고 이번에는 리액트 프로젝트를 만드는 방식에 대하여 알아보는 글을 작성 해 볼 것이다. 리액트와 CRA(Create React App) 리액트는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 라고 공..

기술 메모장 2021.11.03