전체 글

(React 다국어 웹 만들기) 2. 다국어 변환을 돕는 모듈 설치(react-i18next와 i18next)

0. 모듈 설치 이제 react에서 사용할 국제화를 도울 모듈을 설치해야한다. 2개인데 react-i18next와 i18next이다. npm i react-18next i18next 공식 사이트에는 --save를 넣으라고 하지만, npm 5 버전부터는 자동으로 dependency에 추가해주기 때문에 입력할 필요가 없다. 설치된 이후에 JSON 파일을 체크해보면 된다. 설치 매우 잘된다. 1. 기본적인 t 함수 사용법 위에서 설치한 모듈을 사용해보자. 기본적인 사용 방법은 다음과 같다. import i18n from "i18next"; import { useTranslation, initReactI18next } from "react-i18next"; i18n .use(initReactI18next) .i..

(React 다국어 웹 만들기) 1. Vite를 통한 React 프로젝트 세팅

프로젝트 세팅 터미널에서 yarn create vite를 통해 vite 세팅을 실행시키고, 메뉴에서 React -> Javascript 스택을 입력한다. Vite를 통해서 만든 프로젝트는 임의로 다른 실행 명령(script)이 삽입되어있다. 확인해보고 해당 명령어를 쳐보자. 오류가 날 경우 만약에 vite command not found가 뜰 경우에는 vite 모듈이 설치가 안되어 있는 것이다. npm i vite@latest로 과감히 최신 버전을 설치한다. npm install vite@latest 테스트 프로젝트에 특정 버전을 명시하는 것은 하남자 특이다. 설치한 이후에 개발 실행(dev)을 해보면 아래와 같이 뜬다. 이렇게 웹 페이지가 뜨면 정상적으로 프로젝트가 세팅되었다.

Photopea는 어떻게 Javascript로 고성능을 낼까?

1. 코드 스타일을 정하자 프로그래밍을 하다보면 자신만의 스타일을 정해야할 때가 있습니다. 특히 성능을 위해서는 일관적인 아키텍처를 따르는 것이 좋죠. 웹에서 사진을 편집하는 포토피아는 어떻게 자바스크립트로 그렇게 고성능을 낼 수 있을까요? 먼저 자바스크립트를 하려면 자바스크립트를 알아야하겠죠. 포토피아는 https://www.w3schools.com/js/ 에서 배우라고 조언합니다. JavaScript Tutorial W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Pyt..

성공하기 위한 단 하나의 프로그래밍 언어 "Javascript"

0. 1인 개발자의 시대 뱀파이어 서바이벌(게임), 커피 한 잔(소개팅 앱), 포토피아(Photoshop 대체)의 공통점이 있다. 바로 프로그램을 '혼자서' 개발했다는 것. 앞에 언급한 것들 말고도 1인 개발자로서 성공한 굵직한 프로그램들은 수도 없이 많다. 혼자서 무언가를 개발한다는 것은 외롭고 힘든 일이지만 다른 사람들을 위한 아키텍처를 설계할 필요가 없고 제품 방향도 내가 원하는 대로 설정할 수 있으며 수익을 독식할 수 있다는 장점이 있다. 혼자서 프로그램으로 창업한다면 어떻게 돈을 벌 수 있을까? 어떤 제품을 만들어야 성공할 수 있을지는 약한 기획력을 가진 내가 이야기할 수는 없고, 대신 몇 개의 주변 사례를 모아서 적어보려고 한다. 1. 웹은 죽지 않는다. 내가 하고 싶은 이야기는 이다. 뱀파이..

(짧은생각) 어차피 관은 1인용이다.

살다 보면 인생은 혼자 사는 것이다는 것을 많이 느낄 때가 있다. 힘들 때 주변에서 도와준다고 하더라도 결국 본인이 이겨내고 살아가야한다. 세상을 살아간다는 것은 사회와 조화롭게 사는 것도 있지만 그 누가 비판하더라도 강철 멘털로 자기중심을 지키는 것도 중요하다. 그런 의미에서 어차피 관은 1인용이라는 말은 생각보다 쓸데없는 문장 같다. 태어나서 있는 인큐베이터도 1인용이 아닌가? 모든 생명은 혼자 와서 혼자 가지만, 그 과정은 너무 다양하므로 굳이 세상에 혼자만 있다고 여길 필요는 없어 뵌다.

(짧은생각) 공산품에 정 주는 것 아니다.

[ 카메라가 사고 싶어졌다. ] 다시 카메라 뽐뿌가 왔다. 베트남 냐짱 여행을 준비하면서 오랜만에 EOS 6D를 꺼냈다. 여행지에 큰 카메라를 들고 가면 잃어버릴 수 있다는 불안함과 작은 카메라를 가지고 있으면 일상을 찍기 쉽지 않을까라는 생각이 들면서 컴팩트카메라를 하나 사볼까 생각이 들기 시작했다. 소니 ZV-E10, 리코 GR3, 후지필름 x100v.. 어렸을 때라면 부담스러웠을 법한 기계들도 경제생활을 하면서 한 번쯤은 도전해 볼 만하게 느껴졌다. 저렴하면 100만원 이하, 비싸봤자 200만 원 남짓이라면 사회생활하면서 취미로 가져가도 되지 않을까 싶었다. 그런데 당분간은 사지 않기로 했다. 고금리 시대에 소득도 많이 늘지 않았고 투자 소득이 커지고 있지도 않다. 개인 프로젝트도 시작하지 못했는데..

React에서 동적으로 스타일링하기 (삼항연산자, CSS 적용)

리액트에서 강력한 부분이 바로 조건부 렌더링이다. 조건부 렌더링에 대해 알아보기: https://ko.reactjs.org/docs/conditional-rendering.html 조건부 렌더링 – React A JavaScript library for building user interfaces ko.reactjs.org 이 부분은 JSX에서만 적용되는 것이 아니라 CSS 스타일링에서도 적용이 가능하다. 아래는 예시이다. import React, { useState } from 'react'; import Button from '../../UI/Button/Button'; import './CourseInput.css'; const CourseInput = props => { const [entered..

ChatGPT의 향후 수익성과 선점효과?

ChatGPT에 관한 통계들 제작자 OpenAI 사용자 수 23년 1월에 1억명 돌파 일일 방문자 수 2,500만 명 총 방문 수 약 6억 뷰 이상 (Similarweb 추정) 지식기반 2021년까지의 자료 일일 쿼리 수 약 1,000만 건 (추정) 예상 수익 23년말 2억 달러 예상 현재 무료인 ChatGPT에 이어 ChatGPT Plus를 $20에 내놨다. 월 운영 비용이 약 3백만 달러로 추산되고 있는데 운영 비용 이상의 수익은 금방 돌파할 것으로 보인다. SNS에서는 유료 구독자 수가 100만 명을 넘겼다는 루머도 돌고 있다. OpenAI에서는 ChatGPT 말고도 DALLE 2를 가지고 있고, 마이크로소프트(이하 MS)는 github copilot으로 엄청난 생산성의 바람을 일으키고 있다. 이번..