개발

https://chrome.google.com/webstore/detail/오늘-전장/eohfbgfljglffaofibdphglklbeffkig?hl=ko&authuser=0 파이널판타지14 온라인 pvp 컨텐츠 중 전장은 매일 종류가 바뀝니다. 전장 종류는 제압, 봉바, 쇄빙, 온살으로 총 4가지이고 적힌 순서대로 컨텐츠가 교체됩니다. 오늘 순서인 전장을 인게임 밖에서는 확인 할 방법은 없습니다. 이를 해결하기 위해서 만든 확장프로그램입니다. [기획] 왜 만들었나요? 이 게임에는 전장 이라는 컨텐츠가 있다. 전장은 제압, 봉바, 쇄빙, 온살 총 4가지 맵이 존재한다. 이 맵은 고정된 순서로 24시간에 한 번씩 바뀐다. 문제는 게임에 접속하지 않고 오늘 순서인 전장을 확인할 방법이 없다. 이걸 해결하기 ..

만든 계기 웨일 스토어 글자수 시기 사이드 확장 프로그램 링크 웨일 브라우저 자주 사용한다ㅎㅎ(사이드 앱, 모바일 투명화 최고). 책 리뷰 글자수가 공미포 250자가 넘어야 했는데 디자인이 마음에 드는 글자수 세기 확장 프로그램 없더라.사이드 프로젝트 주제 찾을 때라서 친구랑 같이 직접 만들기로 했다. 디자인부터 시작하기 일단 기존 글자수 세기 사이트 래퍼런스 조사하고, 각자 디자인 해왔다. 팀원 한 명이 최대한 네이버 브라우저의 사이드바라서 네이버 느낌에 묻어가자고 했다. 그 점에 모두 동의해서 초록색 계열로 진행했다. 작은 기능을 나누는 게 더 힘들구나 여태껏 개인 프로젝트만 해와서 팀프로젝트를 하고 싶다는 생각으로 시작한 프로젝트였다. 문제는 너무 간단한 기능만 필요해서 역할을 나누기가 민망했다. ..

💡요약 알고리즘의 효율 측정을 위해 빅오 표기법 사용한다. 빅오는 실행 시간이나 공간 복잡도에 대해 알려준다. 빅오는 정확도가 아니라 전체적인 추세가 중요하다. 빅오로 측정되는 알고리즘의 시간과 공간 복잡도는 하드웨어에 영향받지 않는다. 빅오란? 어떤 문제에는 해결법이 여러가지가 존재한다. 내가 사용한 방법이 여러 방법 중에서 가장 나은 방법인가? 에 대한 고민을 해결해주는 것이 빅오이다. 빅오는 숫자로 코드의 성능을 표기해준다. 알고리즘 효율성을 비교할 때 빅오 표기법을 사용한다. 알고리즘을 공부하려면 가장 첫 번째로 배워야한다. 코드 시간 재기 function addUpTo1(n) { let total = 0; for (let i = 0; i < n; i++) { total += i; } return..

해당 포스팅에서는 i18n의 의미와 바닐라 자바스크립트를 사용하여 국제화 하는 방법에 대해서 다룹니다. i18n이란? internationalization(국제화)의 축약형으로 웹사이트에서 다국어를 지원하는 것을 의미합니다. I18n은 영어 첫글자 "I" + 18글자 + "N"을 의미합니다. 비슷한 축약형으로 L10N(localization)이 있습니다. 라이브러리 명칭을 뜻하는 것이 아니라 국제화 행위 그 자체이다. 이에 관련된 유명한 라이브러리로 i18next가 이다. 기본적인 i18n 방법 // 번역 데이터 const en_US= { "이름" : "name" } const getEngText = function(string) { return en_us[string] } console.log(getE..

들어가며 이 포스팅에서는 React를 주로 사용하는 프론트엔드 개발자 대상으로 작성했으며 tailwind의 주요 컨셉과 장점, 설치방법, 다른 css 프레임워크와 비교된 사용 방법에 대해 다룹니다. Tailwind: 만족도 1위 Css 프레임 워크 tailwind는 2017년 11월에 출시한 css 프레임워크다. 사용량은 부트스트랩이 현저하게 높지만 몇 년 사이에 바로 치고 올라온 모습을 볼 수 있다. 특히 다른 프레임워크보다 만족도가 현저하게 높다. 사진에는 짤려서 나오지 않지만 부트스트랩은 만족도 9위이다. 과연 대체 다른 프레임 워크랑 얼마나 다르길래 만족도가 높은 것일까? Tailwind 주요 컨셉: Utility Class tailwind는 유틸리티 지향하여 유틸리티 클래스를 사용한다. tail..

이 포스팅은 자바스크립트 내장 객체 Date를 다루는 방법과 문제점, 문제점을 해결하기 위한 다른 라이브러리에 대해서 다룹니다. 💡 요약 자바스크립트 내장 날짜 API는 일관적이지 못해서 시간 관련 라이브러리를 사용하는 것이 좋다. 가장 유명한 moment.js 라이브러리는 사망선고가 내려졌다. 웬만해선 사용하지 말자. 대체 라이브러리는 dayjs, date-fns, luxon 등이 있다. 이중에서 마음에 드는 라이브러리 고르면 된다. 오늘 날짜를 생성하는 방법 자바스트립트에서 날짜를 생성하는 방법은 두가지다. 첫 번째는 Date() 함수만 호출하는 방법, 두 번째는 new Date() 로 호출하는 방법이다. const 함수로호출 = Date(); console.log(함수로호출) // Fri Jun 2..

들어가며 이 포스팅은 React TDD를 진행하기 위해 Mock 서비스를 만들고 싶어하는 사람을 대상으로 작성했습니다. MSW(Mock Service Worker)의 작동 방식과 설정 방법에 대해 다룹니다. 💡 요약 Mocking이란 실제 서비스 작성하기 정에 클라이언트에서 테스트를 하기 위해 가짜 서버를 만드는 것이다. MSW는 monkey patch 방식을 사용해서 Mocking 라이브러리 중에서 실제 서버와 가장 비슷하게 모킹해준다. MSW은 코드 작성하는 방법이 Rest, Graphql API 사용법과 비슷해서 편하다. Mocking의 정의와 장단점 일단 Mocking이란 말 그대로 모조품이다. 실제 서비스처럼 작동하는 가짜 서버를 만드는 것이다. 굳이 가짜 서버를 만드는 이유는 아래 장점을 확인..

해당 포스팅은 로그인 회원가입시 유효성 검사하는 방법에 대해 다룹니다. 💡 요약 React에서 유효성 검사하는 방법은 3가지가 있다. input 태그 고유 속성 사용, 라이브러리 없이 직접 script작성, 라이브러리 사용. 간단한 유효성 검사는 직접 작성해도 된다. 유효성 검사할 내용이 복잡해진다면 라이브러리를 사용하자. 라이브러리는 react hook form을 권장한다. 유효성 검사란 유효성 검사는 입력받은 데이터 값이 맞는지(유효한지) 확인하는 것을 의미합니다. 예를들면 비밀번호에 “8자리 이상 두 종류 이상의 문자 구성”라는 유효성 조건이 있다면 “1111”이라는 비밀번호를 입력할 경우 통과되지 않습니다. React에서 유효성 검사를 구현하는 방법은 크게 3가지가 있습니다. 첫 번째는 html요..

이 포스팅에서는 React 폴더 구조 형식에서 대표적인 방법 두 가지, 자주 사용하는 폴더명, 실제 서비스 폴더 구조 예시 등을 대해 다룹니다. 💡 요약 리액트 공식문서에서는 정확한 가이드를 제시하지 않는다. 권장 사항은 딱 두개이다. 3번 혹은 4번 이상의 중첩을 피하기. 너무 깊게 생각하지 않기. 사용되는 폴더 구조 중 인기있는 방법은 두 가지가 존재한다. 기능이나 라우트에 의한 분류와 유형에 의한 분류이다. 인기는 후자가 더 많다. 기능이나 라우트(페이지)에 따른 분류 라우트로 구분된 페이지 폴더 안에 같이 두는 방법이다. 페이지에 필요한 테스트 파일과 UI를 제작하여 한 폴더에 넣는다. 역할에 따른 분류 페이지가 아닌 역할에 따라 컴포넌트를 분리하는 것이다. 이 경우에는 컴포넌트 자체는 로직이 들..

Docker란 무엇인가? 컨테이너 기반 가상화 도구 컨테이너를 사용하여 응용프로그램을 더 쉽게 만들고 배포하고 실행할 수 있도록 설계된 도구이며 컨테이너 기반의 오픈소스 가상화 플랫폼이며 생태계이다. Docker가 왜 필요하지? 한 마디로 정의하면 내 컴퓨터에서는 안되는데? 이 문제를 해결해준다. 이걸 environment disparity라고 칭한다. 웹 사이트를 돌리기 위해서는 기본적으로 Frontend + Backend + Database가 필요하다. 하나의 프로젝트만 진행한다면 상관없지만 만약 여러가지 프로젝트를 돌릴 경우를 생각해보자. 프로젝트A에서 Frontend의 nodejs 구버전을 사용하는데 프로젝트B에서는 신버전을 사용한다면 충돌이 발생한다. 이를 해결하기 위해서 처음 등장한 건 vir..