본문 바로가기
반응형

전체 글 395

[리액트] 글로벌한 웹을 향하여 (react-i18next, 다국어지원) 들어가며 이번 글에서는 글로벌한 웹을 위해서 react i18n를 적용하는 방법과 나름의 best practice에 대해 적어보겠습니다. 이 글은 아직 이제 막 프로젝트에 i18n을 던지려는 용기 있는 개발자를 위한 글이며, 더욱 위대한 웹을 위한 글이기도 합니다. 이직이 어느정도 마무리되었고, 사이드 프로젝트도 마무리하고 새로운 아이템을 찾는 피벗 중이어서 갑자기 시간이 붕 떴습니다. 그래서 이래저래 책을 읽으며 여유있는 시간을 즐기고 있는데 기존 프로젝트를 정리도 하면서 문서화를 하다 i18n에 대해 정리해보려고 이렇게 글을 작성하게 되었습니다. best practice는 아니지만 better practice이기를 바라며 react- i18n 적용하는 방법을 시작해보겠습니다. i18n 이란? i18n.. 2022. 5. 29.
[개발지식] 구글 엔지니어는 이렇게 일한다 - 타이터스 원터스 외2 [ 선택 이유 ] 구글러가 전하는 문화, 더 이상 무슨 말이 필요한가 모든 개발자들의 성지인 구글에서 문화를 널리 전파하는 도서라고 생각하고 바로 신청했습니다. [ 본문 ] 이 책은 홀로서기에 두려운 개발자을 위한 책이라고 단언합니다. 저는 사수가 없는 개발자였습니다. 그래서 일정관리, 대화방법, 컨벤션 등을 홀로 찾아가며 배우는 수밖에 없습니다. 그래서 대부분 블로그나 컨퍼런스를 통해 내용을 채우는데 블로그, 콘퍼런스 경우는 짧은 시간과 어그로를 위해 핵심 내용만을 주로 언급하다가 끝이 납니다. 물론 이런 내용도 충분히 감사하고 영광스러운 일입니다만, 더 많은 지식을 습득하는 입장에선 매우 아쉽습니다. 그리고 이 책은 이러한 아쉬움을 덜어주기 위해 충분한 사례와 경험담을 통해 구글의 문화에 대해 알려주.. 2022. 5. 25.
[개발환경] package.json 다이어트 여정기 (depcheck, npm-check) 들어가며 개발을 진행하다 보면 어느 순간 package.json이 생각지도 못하게 길어진 것을 확인할 수 있습니다. 누군가 꾸준히 package를 관리한다면 좋겠지만 막상 그렇게 하기가 쉽지 않습니다.c 또한 길어진 package.json이 서비스상에서 큰 문제가 있는가라고 물어본다면, 번들링 툴들이 tree shaking를 통해 안 쓰는 라이브러리를 제거해주기 때문에 큰 문제가 안됩니다. 하지만 배포할때에 있어서 해당 모듈을 설치 -> 빌드하는 과정을 거치기 때문에 불필요한 모듈은 제거하는 게 좋습니다. 이번 글에서는 프로젝트에서 package.json를 다이어트하는 과정을 대한 글입니다. 다이어트 방법론 라이브러리 주인찾기 일단 라이브러리 주인 찾는 방식은 간단합니다. 해당 코드를 누가 추가했는지 확.. 2022. 5. 19.
[백준] 2109번 순회강연- 자바스크립트 [ 문제 설명 ] 2109번: 순회강연 한 저명한 학자에게 n(0 ≤ n ≤ 10,000)개의 대학에서 강연 요청을 해 왔다. 각 대학에서는 d(1 ≤ d ≤ 10,000)일 안에 와서 강연을 해 주면 p(1 ≤ p ≤ 10,000)만큼의 강연료를 지불하겠다고 알려왔다. www.acmicpc.net [ 아이디어 ] 일단 가장 비싼 강의 순으로 정렬 DeadLine(d)일 안에서만 하면 Price(p)를 주지만 빨리 한다고 돈 많이 주는 건 아니므로, 늦게 할 수 있으면 최대한 늦게 강의를 한다.-> 즉 데드라인 기준일부터 계산하여 하루씩 차감( 그 사이에 다른일이 들어온다면 먼저 하기 위함) [ 코드 ] // input 파싱 let input = require("fs").readFileSync("/dev.. 2022. 5. 16.
[역사판타지] 삼국지 공손찬 아들이 되었다 (완) - 마음의음식 ★★★☆☆ 작품 소개 공손찬의 아들이 되었다. 삼국지 세계로 들어섰다. 장르 : 역사판타지 진행 상황 : 총 218화 ( 본편:218, 외전:0) / 완 작가 소개 작가 : 마음의음식 작가의 다른 작품 : 삼국지 마등의 아들이 되었다. 삼국지 마초 특징 [회빙환][공손혁][천하통일][완] 리뷰 현대의 소방관이 공손찬의 아들인 공손혁으로 환생하여 천하통일을 하는 과정을 그린 일대기입니다. 백마의종을 가진 쩌리이미지로 나오는 공손찬의 아들이 되어 적당한 현대지식과 역사지식을 가지고 선전하는 모습을 확인할 수 있는 소설입니다. 나름 성장형 소설 삼국지의 군웅이라고 할 수 있는 공손찬의 아들이지만, 창기인 어머니로 인해 제대로 대접받지 못하는 주인공, 공손혁입니다. 그런만큼 초반부분에서는 집안의 지원을 받는다기보다는 인정.. 2022. 5. 11.
[리액트] 다이나믹한 웹을 향하여 (framer-motion, lottie) 들어가며 텍스트로 이뤄졌던 웹이라는 공간이 이미지, 스타일을 넘어 동적이고 유저와 티키타카하는 공간이 되어가고 있습니다. 이런 공간을 만들어야 하는 프론트엔드 개발자로서 항상 css는 두려움과 귀찮음의 공간이기 마련입니다. 하지만 디자이너님이 뽑아준 대로 이쪽으로 나왔다 저쪽으로 들어가는 화려한 애니메이션과 이미지를 멋지게 랜더링 하고 조작할 수 있게 도와주는 좋은 라이브러리들이 있습니다. 이번 글에서는 바로 css로 하기 어려운 작업을 간단하게 도와주는 라이브러리 2개를 소개해드리는 글입니다. 바로 lottie와 framer-motion입니다. 그럼 한번 프로젝트에 적용을 하러 가보겠습니다.!! framer-motion 란? framer-motion의 공식문서상 이를 아래와 같이 설명하고 있습니다. M.. 2022. 5. 7.
[역사판타지] 삼국지천하 : 여포로 살다 (완) -aquablue ★★★☆☆ 작품 소개 응? 내가 여포라고? 곧 반란을 일으킬 거라고? 저기요? 삼국지 대표 깡패 여포. 여포의 삶은 평범한 소시민의 심장에 너무 안 좋습니다. 과연 겁쟁이 여포는 원래의 여포보다 더 나은 삶을 살 수 있을까? 장르 : 역사판타지 진행 상황 : 총 401화 ( 본편:401, 외전:0) / 완 작가 소개 작가 : aquablue 작가의 다른 작품 : 회귀한 기사는 후회하고 싶지 않다 특징 [회빙환][여포][삼국지][대체역사][전쟁물][완] 리뷰 제가 가장 좋아하는 삼국지 대체역사물입니다. 이번 소설에서 주인공은 바로 인중여포 마중적토의 주인공 여포 봉선입니다. 현대에서 삼국지 게임을 좋아하고 그중 여포 덕후였던 주인공이 실제로 여포에 빙의하게 되면서 바뀌는 대체역사소설입니다. 그럼 리뷰 시작하겠습니다... 2022. 4. 30.
[플러터] 로그인 경험을 한단계 끌어올리기 (feat.웹뷰 리액트) 들어가며 사이드 프로젝트를 하면서 브라우저로 제공하던 서비스를 웹뷰형태로 확장을 했습니다. 근데 간편 로그인이 제대로 동작하지 않는 문제가 발생했고, 결국 플러터에서 로그인을 처리하여 브라우저에 넘기는 식으로 리펙토링했던 경험에 대해 살펴보겠습니다. 문제 인식 | 간편 로그인이 안되요 일단 간편 로그인이 무엇인지에 대해 살펴보겠습니다. 사이드 프로젝트에서 카카오톡을 이용한 간편 로그인을 지원하고 있습니다. 바로 아래 사진을 보면 브라우저의 경우 카카오톡으로 로그인 버튼을 누르게 되면 해당 핸드폰에 카카오톡이 설치되어 있으면 별도의 입력 없이 카카오톡으로 인증을 하고 로그인이 완료됩니다. 물론 카카오톡에서 해당 서비스(여기서는 사이드 프로젝트)에서 로그인을 허용하겠냐는 다이얼로그 창과 함께요. 쨋든 이게 .. 2022. 4. 26.
[개발지식] sms 문자를 파싱해서 정리해보자 들어가며 삼성전자 또는 LG에서 혼수로 가전제품을 구매하게 되면 상품권, 캐시백을 통해 혜택을 줍니다. 일반적으로 혜택 금액은 수백만 원이고 , 그에 따라 실구매가랑 결제금액이 차이가 납니다. 그런데 이게 왜 개발글이냐 하면, 상품권을 직접 지료상품권으로 주는 경우도 있지만 저의 경우에는 문자로 받았습니다. 근데 문제가 되는게 이런 문자를 1만 원권~ 10만 원권으로 총 250만 원 73개의 문자로 받았습니다. 그래서 이걸 직접 가서 지료상품권으로 바꿔야 하는데 문자로 관리하기가 불편해서 이걸 Excel로 옮기는 과정을 한번 해보았습니다. Step 1 : 문자들 뽑기 일단 저는 안드로이드폰임으로 문자를 가져오는데 앱의 도움을 빌렸습니다. 사용한 앱은 SMS Backup & Restore 이고 검색해보면 .. 2022. 4. 24.
[무협판타지] 사부님은 구독중 (완) - 흑야 ★★★★☆ 작품 소개 , , 무림의 위대한 전설이었지만, 그들도 천상에선 말단 신선들일 .. 장르 : 무협판타지 진행 상황 : 총 425화 ( 본편:425, 외전:0) / 완 작가 소개 작가 : 흑야 작가의 다른 작품 : 태극무존, 무당권왕, 적룡마제 특징 [선협물][신선물][장삼봉][달마][천마][BJ물][유쾌함][완] 리뷰 잘보이는 무림티비처럼 BJ소재를 특이하게 가져온 소설 "사부님은 구독중"입니다. 평소에 좋아하던 흑야님의 새로운 소설이고 개인적으로 좋아하는 선협물 느낌도 나서 좋았습니다. BJ 트렌드를 반영한 신무협 이건 장점이자 단점이 될 수도 있는 것인데, 이때까지 정통 무협을 주로 써 왔던 흑야 작가님이 트렌드에 맞춰 제목부터 신무협스러운 소설을 내신 겁니다. 그래서 최신 트렌드에 맞는 참신한 소재와.. 2022. 4. 20.
[무협판타지] 창천무신 (완) - 담호 ★★★★☆ 작품 소개 천하를 독패(獨覇)하던 최강의 무인. 세상을 발아래 두고, 이윽고 등선마저 이루어 선계에 오르다. 하지만……. -저런 혈성은 받아서는 안 돼요. 돌려보내세요. 신선들의 방해를 받아 다시 세상으로 추락했다. “야이 미친 신선 새끼들아아아아!” 눈을 떠 보니 어느새 시간은 육십 년이 훌쩍 지났고. “내가 누구라고?” “남궁세가 둘째 아드님이십니다.” 남궁세가? 내가? 남궁세가아아? ……좋아, 다 넘어가겠어. 부자니까. 근데 내 몸이 왜 이 모양이냐? 이 신선 놈들이 대체 나한테 무슨 짓을 한 거야? “한 번 한 등선, 두 번은 못 하겠어?” 두고 보자, 반드시 등선해서 모조리 박살을 내 주마! 장르 : 무협판타지 진행 상황 : 총 730화 ( 본편:730, 외전:0) / 완 작가 소개 작가 : 담.. 2022. 4. 7.
[리액트] useEffect와 useLayoutEffect | 비교시리즈 들어가며 리액트를 사용하다 보면 useEffect와 useLayoutEffect 훅을 마주하곤 합니다. 생긴 것도 비슷하고 실제 공식문서상에서도 둘은 같다고 말합니다. 오히려 useEffect 쓰라고 합니다. 그래도 useLayoutEffect를 만든 이유가 있을테고, 저 또한 깜빡임 관련된 이슈를 수정하기 위해 useLayoutEffect를 사용했습니다. 그래서 이번 글에서는 useEffect와 useLayoutEffect에 대한 설명과 코드 단에선 어떤 차이가 있는지 알아보도록 하겠습니다. 질문 | useEffect 와 useLayoutEffect를 비교해라 useEffect는 랜더링된 이후에 동작하는 hook이고 useLayoutEffect는 랜더링 되기 이전에 동작하는 hook이다. 네 끝났습니다.. 2022. 3. 31.
[무협판타지] 잘 보이는 무림티비 (완) - 고하솜 ★★★★☆ 작품 소개 강호의 안위가 시청자 여러분의 손에 달렸습니다. '구독'과 '좋아요' 버튼 부탁드릴게요. 장르 : 무협판타지 진행 상황 : 총 206화 ( 본편:206, 외전:0) / 완 작가 소개 작가 : 고하솜 작가의 다른 작품 : 안보이는 투명추 특징 [회빙환][BJ물][아카데미물][개그물][다양한 세계관][완] 리뷰 본래 현대의 대학생이었던 성태민이 인생떡상을 위해 유튜브 방송을 준비하려다 감전사를 당해서 무협에서 환생하는 지극히 현실적인 소재입니다. ㅋㅋ 방송을 준비하려다 죽은만큼 환생자 특전으로 유튜브 기능과 함께 환생을 하게 되었고 조회수 = 내공 이라는 매력적인 소재로 내용을 풀어갑니다. 환생 특전이 유튜브라니 일반적인 환생물의 경우 미래의 지식을 바탕으로 현재를 떡상시키는 소재가 많습니다. 그.. 2022. 3. 14.
[현대판타지] 참모총장이 되어보기로 했다 (완) - Dr.두돈반 ★★★☆☆ 작품 소개 수천 번을 회귀해도 바뀌지 않는 것 하나가 있었으니. “하아-.” 그것은 바로 군대였다. 장르 : 현대판타지 진행 상황 : 총 235화 ( 본편:234, 외전:1) / 완 작가 소개 작가 : Dr.두돈반 작가의 다른 작품 : - 특징 [회빙환][루프물][군대물][국뽕물][완] 리뷰 필명부터 군인물 전문인 느낌이 물씬 풍기는 Dr.두돈반님의 신작을 리뷰해보겠습니다. 무한회귀자, 군인이 되다 주인공인 강민은 수천번의 인생을 반복하여 회귀하는 이능력자입니다. 그래서 회귀 때마다 새로운 인생을 살고 도전하고 또 쟁취했죠. 그러다 보니 재벌도 하고 의사도 하고 이것저것 해보는데 군인, 그것도 참모총장은 안 해봐서 해보려고 하는 회차의 이야기입니다. 정확히는 이전 생에서 군인 시절 사고를 당해 죽게 되었.. 2022. 3. 4.
[GraphQL] 그래프QL 인 액션 - 사메르 부나 작품 소개 한 정보만 한번에 딱! API를 위한 쿼리 언어 그래프QL 그래프QL은 클라이언트와 서버 간 통신을 더욱 효율적으로 만든다. 기존에 클라이언트는 여러 번의 요청을 통해 얻은 많은 데이터에서 필요한 정보를 찾아야 했지만 그래프QL을 사용하면 단 한 번의 요청으로 필요한 정보만 얻어낼 수 있다. 이 책에서는 그래프QL로 데이터 API 서비스를 만들고, 최적화하고, 클라이언트에서 사용하는 과정을 하나씩 살펴본다. 실용적인 예시를 바탕으로 그래프QL을 사용하는 데 필요한 문법부터 디자인 원리와 운영 노하우까지 익혀 웹 개발의 생산성을 한껏 높여보자. 작가 소개 작가 : 사메르 부나 리뷰 프론트엔드 진영은 React로 재편되고 있습니다. 그리고 그 React는 페이스북이 만들었죠. 그런 곳에서 Grap.. 2022. 2. 25.
[무협판타지] 무림학관 전설의 기수가 되었다 (완) - 시저디 ★★★★☆ 작품 소개 태산학관 전설의 기수, 건륭 17기. 한낱 무림맹 정보원이었던 내가 그들의 동기가 되었다. 장르 : 무협판타지 진행 상황 : 총 273화 ( 본편:273, 외전:0) / 완 작가 소개 작가 : 시저디 작가의 다른 작품 : 로맨스 판타지로 떨어진 S급 헌터 특징 [회빙환][아카데미][현대화][게임시스템][태산학관][북해][완] 리뷰 알콩달콩한 아카데미물을 보려다 전쟁의 피폐함을 느끼게 한 소설입니다. 무림맹 군사부 소속 정보원이 중원에 침입한 마교에 의해 목이 잘리는 순간 과거의 인물로 회귀, 빙의하여 마교를 막아내는 소설입니다. 유쾌한 아카데미물은 멈춰! 대부분의 아케데미물은 주인공과 히로인의 꽁냥꽁냥 그리고 외부의 큰 위험으로부터 대동 단결하여 위기를 해쳐나가는 서시로 진행이 됩니다. 이 소.. 2022. 2. 18.
[리액트] 유령 의존성부터 시작된 yarn berry 도입기 동료 개발자의 기능을 확인하다가 제 환경에서만 동작하지 않는 에러를 발견했습니다. 이번 글에서는 문제 발생부터 원인 파악, 그리고 해결한 방법. 그다음에 유령의존성이 발생한 이유, yarn berry를 도입하여 휴먼에러를 방지한 후기에 대해 정리해보았습니다. 문제 발생 문제의 발견은 git pull를 하고 제 컴퓨터에서 yarn start를 한 시점부터 시작됩니다. 특정 기능이 추가돼서 확인차 기능을 사용했는데 다음과 같은 에러와 함께 기능이 동작을 안 합니다. [Mobx] Observable arrays cannot be frozen 해당 에러가 발견된 위치를 추적해보니 immer의 produce를 사용하는 코드에서 발생했습니다. 에러 로그를 보면 Mobx의 Observable arrays는 froze.. 2022. 2. 16.
[무협판타지] 천검기협 (완) - 은열 ★★★★☆ 작품 소개 스스로를 하늘에게 ‘선택받은 자’라 생각하며 세상을 지배한 이들이 있었다. 그들로 인해 생겨난 십 년간의 기나긴 환란과 영웅들의 항쟁. 그리고 여섯 스승이 중원의 운명을 걸고 보낸 한 명의 제자. 너희가 하늘이라면, 나는 하늘을 자르는 검이 될 것이다. 그리 다짐하며 왔건만…….누구도 나한테 뚱땡이로 올 거라고는 하지 않았잖아! 어쨌든 기왕 온 거, 세상을 구원…… 구원…….젠장, 일단 살부터 빼자. 장르 : 무협판타지 진행 상황 : 총 425화 ( 본편:425, 외전:0) / 완 작가 소개 작가 : 은열 작가의 다른 작품 : 패월진천, 무당기협 특징 [회빙환][영물][다양한 스승][정사마 대통합][개그물][암중세력][완] 리뷰 개인적으로 좋아하는 작가님이신 은열님의 천검기협입니다. 전작인 무.. 2022. 2. 7.
[리액트] VAC 패턴 적용 후기 및 장단점 VAC 패턴을 접하고 리뷰? 글을 쓴 지 어느덧 반년이 되었습니다. 나름 빨리 글을 작성한 것인지 이젠 VAC 패턴을 검색하면 상위에 랭크되는 글이 되었네요. 글을 작성한 이후로 새로운 프로젝트에 VAC 패턴을 적용해서 프로젝트를 진행해보았습니다. 나름 장점도 있었고 단점도 있어서 이번 글에선 요런 내용들을 정리해보면서 후기를 작성해보려고 해요. VAC 패턴이란 ? View Asset Component의 준말로, JSX와 Style를 관리하여 UI와 비즈니스 로직을 분리하는데 목적을 둔 컴포넌트 설계 방법론입니다. 위의 사진이 VAC 패턴을 설명하는 가장 기초적인 이미지인데요. 사진으로 느낌이 안 오니 직접 코드를 보면서 살펴보겠습니다. const SpinBox = () => { const [value,.. 2022. 2. 3.
[퓨전판타지] 죽지않는 엑스트라 (완) - 토이카 ★★★★☆ 작품 소개 공전의 히트를 친 게임 [요마대전 3]에는 갖가지 방식으로 맨날 죽는 엑스트라가 있다. 게임상에서의 활약상은 코딱지만큼도 없는 주제에 사망씬마다 전용 CG까지 달려 있는, 제작진의 사랑을 독차지한 이 엑스트라의 이름은 에반 디 셰어든! ......이것이 바로 이 게임 속 세상에 환생한 내가 갖게 된 이름이었다. 젠장!! 주인공도 아닌 매번 죽는 엑스트라로 환생한 나 살려야 한다! 어떻게든, 무슨 수를 써서든! 살아남아야 한다! 장르 : 퓨전판타지 진행 상황 : 총 500화 ( 본편:500, 외전:0) / 완 작가 소개 작가 : 토이카 작가의 다른 작품 : 로그인하자마자 VIP, 쏘지마라 아군이다!, 나 홀로 로그인 특징 [던전물][회빙환][착각물][하렘물][게임빙의물][엑스트라][요마대전][개.. 2022. 2. 1.
[Next] localstorage를 사용하는 방법 #1 localStorage 란? 웹 스토리지 객체(web storage object)의 한 종류로 sessionStorage와 함께 브라우내 내에 key-vale 쌍을 저장할 수 있도록 해주는 Web API입니다. Window.localStorage - Web API | MDN localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. developer.mozilla.org Why web storage | 영속성 web storage를 쓰는 가장 큰 이유는 영속성에 있습니다. localStorage는 브라우저가 다시 실행되어도 데이터가 사리지지 않고 남아있습니다. sessionStorage는 어떻냐구요?.. 2022. 1. 28.
[VSCode] Prettier format on save 느려진 후기 들어가며 코드 컨벤션은 협업에 있어서 아주아주 중요합니다. 그러고 이런 컨벤션은 필연적으로 자동화가 되어야합니다. 그렇지 않고 사람의 수고가 개입되면, 수고스러움이 귀찮은 누군가각 컨벤션을 깨드리게 되며 그 이후에는 더욱 빠른 속도로 악화됩니다. ( 공유지의 비극 , repo는 공유지임으로 더욱 신경써야한다) 그래서 자동화를 위해 eslint와 prettier란 툴이 가장 많이 쓰입니다. 이번 글에선 그중에 prettier에 대한 간단한 설명과 함께 적용방법, 그리고 느려진 prettier의 원인을 찾아본 내용을 적어보겠습니다. Prettier 란? An opinionated code formatter - 코드 포멧터다 Supports many languages - 많은 언어를 지원한다. Integrat.. 2022. 1. 15.
[무협판타지] 남궁세가 막내공자 (완) - 테양이 ★★★★☆ 작품 소개 천하제일 남궁세가에서 태어난 재능 없는 폐품, 막내 공자 남궁대소. 20살의 나이에 단전을 잃고 어이없게 죽음을 맞이한 그가 별안간 19년 전으로 회귀하게 된다! “뀨아?” 회귀한 그의 계획은 바로 남궁세가로부터 도망치는 것! 주어진 자신의 운명에서 기를 쓰고 벗어나려는 남궁대소의 험난한 일대기가 시작된다! 장르 : 무협판타지 진행 상황 : 총 550화 ( 본편:550, 외전:0) / 완 작가 소개 작가 : 테양이 작가의 다른 작품 : 별의 목소리가 들려 특징 [회빙환][남궁세가][천무지체][개그물][다양한 세계관][완] 리뷰 언제쯤 완결이 날까 기다렸다가 이번에 확인을 하니 완결이 나서 한 번에 몰아서 본 남궁세가 막내 공자입니다. 회귀를 하고 남궁세가를 벗어나기 위해 고군분투하지만 결국에 .. 2022. 1. 11.
[Next] Tailwind CSS 도입 및 세팅(feat.Next 12) Tailwind CSS 란? 공식홈페이지의 설명을 살펴보겠습니다. "HTML에서 떠나는 일 없이 빠르게 모던한 웹사이트를 빌드해줄수 있게 하는 프레임워크" 라는 설명으로 시작합니다. 어떤걸 보여주는가 | BEM 전통적인 방식의 CSS 중에 유명한 것으로는 BEM이 있습니다. BEM은 Block, Element, Modifier의 앞글자들을 합친것으로 각각 __와 --로 구분합니다. .header__navigation--navi-text { color: red; } 이렇게 class를 통해 스타일을 정의하고 각각의 HTML element에 입히게 되는 구조입니다. 따라서 어떻게 보이는가 보다는 "어떤걸 보여주는가" 에 초점을 맞춘 방법론입니다. 예를 들자면 위의 CSS는 header 블록의 navigati.. 2022. 1. 5.
[리액트] React.memo를 이용해 성능 최적화를 해보자 React.memo가 필요한가? 어느 때와 같이 기획문서를 보고( 실은 기획자가 없어서 뇌리에 스치는 게 기획) 컴포넌트를 만들고 있었습니다. 이번엔 차트와 관련된 컴포넌트를 구현하고 있어서, Plotly 라이브러리를 활용해 미리 만들어놨던 컴포넌트에 테스트를 붙이고 구현하고 푸시를 했습니다. 문제 인식 | 성능이 구려 푸시를 하면 일단 기분이 좋기 때문에 완성된 모습을 뿌듯하게 쳐다보고 있는데 자꾸 버벅이는 느낌이 들어 바로 파고들어가 봅니다. 콘솔 창을 열고 확인을 해보니 같은 요청이 여러번 날아가는 것을 확인했습니다. 데브툴로 봐도 같은 prop임을 확인했습니다. 같은 요청 & 같은 데이터 --> 여러번 랜더링 -> 잘못된 구조 --> 최적화라는 뇌피셜 로직이 수행되었고 바로 어떤 컴포넌트인지 확인.. 2022. 1. 3.
[역사판타지] 삼국지 : 업어 키운 엄백호 (완) - 잠룡 ★★★★☆ [ 작품 소개 ] 엄백호로 천하통일에 실패한 나는 ‘똘똘한 책사 한 명만 있었으면’ 하고 잠에 드는데··· 눈을 뜬 나에게 엄백호가 찾아와 도와달라고 청한다? “어서 이곳을 떠나야 합니다.” 엄백호군의 책사가 된 나의 천하통일 도전이 시작된다! 장르 : 역사판타지, 삼국지판타지 진행 상황 : 총 225화 ( 본편:225, 외전:0) / 완 [ 작가 소개 ] 작가 : 잠룡 작가의 다른 작품 : - [ 특징 ] [삼국지][엄백호][빙의물][책사물][완] 삼국지 게임을 즐겨하던 현대의 주인공이, 엄백호로 천하통일을 하려다가 실패하고 잠들었는데 일어나 보니 삼국지 속의 새로운 인물 잠룡으로 빙의되면서 소설이 시작됩니다. 엄백호가 자신을 2번 찾아온 (이고초려) 상황이라 군사로 임관하게 되면서 삼국지 초반부인 만.. 2021. 12. 31.
[무협판타지] 운룡회귀 (완) - 달한 ★★★☆☆ [ 작품 소개 ] 황명을 받아 영수를 사냥하는 신기영 참룡반의 반주 항몽. 신수(神獸) 기린을 상대하던 중, 동료의 갑작스러운 공격을 받아 정신을 잃는다. 눈을 뜨고 보니 25년 전 곤륜산. 뭐야? 진짜 돌아온 거야? 조상님들이 공덕을 하늘 끝까지 쌓으셨나. 이 정도로 운이 좋아도 되는 거야? 이렇게 된 이상, 회귀 전에는 꿈도 못 꾼 영물을 모조리 손에 넣어주마. 장르 : 무협 판타지 진행 상황 : 총 300화 ( 본편:300, 외전:0) / 완 [ 작가 소개 ] 작가 : 달한 작가의 다른 작품 : 천년방사 [ 특징 ] [선협물?][영수][사흉수][사영수][회귀물][곤륜][완] 선협인듯 아닌듯 경계에 서있는 소설입니다. 한 십 년 전에 이런류가 나왔다면 신선한 무협이라는 말을 들었을 소재인데 요새 선협.. 2021. 12. 31.
[Adsense] 구글 핀번호 1년 만에 온 후기 (feat.3회 실패) 제가 개인적으로 존경하는 개발자 분 중에 주니어분들께 코드 리뷰나 지식 공유를 할 때 블로그 주소를 던져주시는 분이 계셨습니다. 솔직히 너무 멋졌고 그런 블로그를 가지고 싶어 하나씩 글을 작성한지 어느덧 2년째가 되었습니다. 처음에는 자바스크립트 문법을 정리하는 글부터 썼고 최근에는 트러블슈팅이나 개발과정에서 경험했던 내용을 정리하고 있습니다. 다행스럽게도 블로그는 꾸준히 성장하여 작년에는 일일방문자 200명대, 올해는 300명대에 진입할 수 있었습니다. 이런 와중에 구글 애드센스로 구글 주식을 사보자는 발칙한 생각을 하게 되었고 현시점 기준으로 대충 300개월을 해야 한주를 살 수 있는 상황입니다... 그런 와중에 붙여 놓았던 구글 애드센스에서 주소 인증 요청이 받게 되었고, 내가 처음으로 글로벌 대기.. 2021. 12. 22.
[Next] 웹페이지의 성능 개선을 해보자 #2 (feat.LightHouse) [Next] 웹페이지의 성능 개선을 해보자 #1 (feat.LightHouse) 최근 들어 Next.js를 접하고 너무 재밌어서 기존에 미뤘던 프로젝트를 Next.js로 마이그레이션 해봤다. 바로 내 포트폴리오 사이트였는데, 2019년도인가 처음 fork를 뜨고 가져와서 내용만 업데이트를 all-dev-kang.tistory.com 이전 글에 이어서 이번에도 계속 진행해보도록 하겠습니다. 이번에는 Accessibility에 대해서 점수를 올려보도록 해보겠습니다. Accessibility 란? Accessibility 이란 해당 웹사이트에 장애가 있는 사람들이 사용할 수 있도록 설계 및 개발되는 것을 의미합니다. 따라서 다음과 같은 모든 장애에 대해 인식하고 개발하기를 권장하고 있습니다. 시각 : 시각 장.. 2021. 12. 22.
[Next] Susponse, Error Boundary 적용 후기(feat.SWR) 도입부 [리액트] React-query 도입과 Suspense, Error Boundary를 적용 React-query는 왜 도입했는가? 실제로 처음 접한 라이브러리는 react-query가 아닌 swr입니다. 진행하고 있는 사이드 프로젝트가 Next를 사용하고 있고 그래서 자연스레 swr를 도입했습니다. 사용하다 보 all-dev-kang.tistory.com 먼저 위의 글을 읽고 오시면 React-query 또는 SWR을 이용해 Susponse와 ErrorBoundary를 처리하는 구조을 왜 적용하려는 지에 대한 의문이 약간이나마 해소되실 겁니다. 다시 한번 상기해보면 SWR의 useSWR은 다음과 같은 형태를 가지고 있고 data와 error 주고 해당 값을 통해 상황에 맞는 랜더링을 하도록 예시를.. 2021. 12. 20.
반응형

티스토리툴바