본문 바로가기

전체 글312

[오픈소스][JS] react-daumpost-hook 나는 오픈소스에 관심이 많다. 개발자라는 직업을 선택하고 장인이라는 것을 목표로 하는 입장에서는 당연히 기존의 구루들의 활동에 대해서 깊이는 아니더라도 자세히 알아볼 필요가 많았고, 그러다보니 그들이 말하는 오픈소스 활동 이라는 것에 많은 공감대를 가지게 되었다. 리액트 같은 멋진 오픈소스들을 접하면서 사용할때 마다 그런 가치들에 대한 긍정이 더욱 강화된 편이다. 본질적으로 실력을 키우고 개발자로 성공(실력을 인정받고 그만한 명예와 대우)하는 것을 목표로 삼은 입장에서는 여러 구루들의 활동을 간접적을 접할때 마다 나도 빨리 실력을 키워서 저런걸 하고 싶다 라는 생각을 가지게 되는 건 그렇게 이상한 편이 아니라고 생각한다. 실제로 내가 생각하던 수준의 오픈소스 활동은 아니지만 내가 기여 할 수 있는 기회가.. 2021. 11. 20.
[웹챗] 리액트 컴포넌트 구조 및 소켓 서버 초기 설정 프론트엔드 지난번 프론트 엔드의 경우 app.tsx 즉 애플리케이션 라우트까지 진행을 마쳤다. 이번 작업의 경우 기본적인 DOM 레이아웃과 컴포넌트 구조를 잡는 선까지 작업을 진행했으며, 당연히 간단한 테스트 코드를 먼저 작성하는 방식(TDD)으로 진행했다. (TDD를 따로 정리해서 포스팅해야 할 필요성이 있긴 한 거 같다. 정의 내리기 힘들다.) 스타일의 경우 채팅창 소켓 통신에 대해서 어느 정도 구현을 마친 후 기획에 따라서 구현하기로 정했기에 비교적 간단한 작업이었다. 작업에는 총 8 커밋이 소요되었다. 먼저 지난번의 임시로 구현해놓은 '/' 라우트 부분을 pages/main.tsx로 분리했고 main에 기획한 레이아웃인 header, main, footer 구조를 만든 후 해당 부분을 따로 com.. 2021. 11. 18.
[웹챗] 프론트 ENTRY 구성 및 벡엔드 repo 생성 프로젝트 Repo https://github.com/yoonjonglyu/webChat GitHub - yoonjonglyu/webChat: 간단한 채팅 웹 간단한 채팅 웹. Contribute to yoonjonglyu/webChat development by creating an account on GitHub. github.com 기본적인 환경 설정은 끝났고 react와 recoil를 통한 번들링 entry와 앱의 시작점이 될 app entry를 만들어줘야 한다. 크게 거창하게 할 것은 없고 보편적으로 나누는 방법대로 index.tsx와 app.tsx로 나누어서 세팅했다. index.tsx 코드 import React from 'react'; import ReactDOM from 'react-dom.. 2021. 11. 17.
[웹챗] 프로젝트 환경설정 프로젝트 Repo https://github.com/yoonjonglyu/webChat GitHub - yoonjonglyu/webChat: 간단한 채팅 웹 간단한 채팅 웹. Contribute to yoonjonglyu/webChat development by creating an account on GitHub. github.com 이번 사이드 프로젝트의 경우 오픈소스 채팅 모듈 개발 및 NPM 배포를 목적으로 하다보니 프론트, 벡엔드 서버가 둘 다 필요하다. 프론트엔드의 경우 기존의 웹팩 템플릿을 만들어 둔게 있어서 그걸 토대로 repo를 만들고 이번 프로젝트에 사용 될 기술스택들의 기본 설정들을 마무리 했다. 설치 완료한 모듈들 목록은 대략 이렇다. 그냥 평범하게 많이 쓰이는 것들로 react, .. 2021. 11. 16.

티스토리툴바