본문 바로가기

전체 글

 (77)
JS와 import에 대하여... ESM과 CommonJS 요즘 토스 면접을 준비하느라 전에 봤던 토스 영상들을 부쩍 다시 찾아보게 된다. 박서진님의 '내 import 문이 그렇게 이상했나요?' 를 보고, 전에 발표했던 yarn berry를 바탕으로 import와 모듈에 관하여 정리하고자 한다. 모듈이 뭔데요 모듈은 쉽게 말해서 코드 뭉치라고 보면 된다. function add(a,b){ return a + b; } 와 같은 코드가 필요하다고 하자. 매번 필요할때마다 이 코드를 복사붙여넣기 해서 쓰는 것은 너무 비효율 적이기 때문에 우리는 모듈로 쓴다. 어떻게 쓰는건데 쓰는건 어렵지 않다. ESM과 CommonJS의 등장 이전의 상황부터 보자 // 박서진님 발표 예제입니다. 우리는 jquery를 불러쓰려면 저런 방식으로 써야 했다. html 문서 안에 scrip..
시계태엽 오렌지 - 앤서니 버지스 오랜만에 보면서 기분이 이상한 책이었다. 그리스인 조르바를 읽을 때도 그랬고, 시계태엽 오렌지를 읽을 때도 비슷한 느낌이었다. 스스로를 통제하지 못하고 무계획성을 보이는 캐릭터를 약간 증오하나보다. 누구나 그런 기질(마구잡이로 살고싶은)을 약간은 가지고 있는 것 같다. 그런데 나는 그런것들을 혐오하도록 자라온 듯 하다. ‘스톡홀름 증후군’이라는게 있다. 범죄자를 보다보면 범죄자에게 온정이나 동정을 느끼게 되는 증후군인데, 책이나 영화를 읽어도 주인공이 매력적일때 그런 감정을 느낀다. ‘친구’나 ‘타짜’의 주인공은 사실 나쁜짓(도박, 건달)을 하는 주인공인데 가까이서 바라보다보면 내 일인 것 처럼 느껴져 손에 땀을쥐고 ‘잡히지 않았으면..’하는 마음이 일곤한다. 허나, 시계태엽 오렌지는 그런 느낌이 하나도..
기깔나게 웹 성능 최적화하기 웹 성능 최적화? '웹 성능 최적화...' 들으면 가슴이 벅차오르지만 동시에 쉽지 않은 주제이기도 합니다. 구글 연구 자료입니다. 시간에 따라서 이탈률이 어마어마하게 차이가 나게 됩니다. 구글같이 큰 서비스는 로딩시간이 0.1초만 차이나도 엄청난 돈 차이가 날 것 같습니다. 웹 성능을 개선하려면 우선 사용자가 웹에 접근하게 됐을 때 무슨 일이 일어났는지 알아야합니다. 간단한 그림을 준비했습니다! 그림의 각 단계별로 최적화 하는 방법이 있습니다. 저는 프론트엔드 개발 담당이기 때문에 Client / Client Front Server 에서 최적화를 진행하였습니다. (글을 정리하다가 궁금해서 백엔드 크루에게 물어보니 Backend 단에서는 요청을 압축하기나 DB 접근시간을 줄이는 등의 최적화도 가능하다고 합..
타입스크립트는 만능이 아니다(feat 리액트 컴포넌트 타이핑하기) 안전한 개발은 매우 중요하다. 에러가 터졌을 때 뜨는 빨간 라인은 마치 들불이 번지는 것 처럼 개발자의 마음을 아프게 한다. 하.지.만. 더 마음 아픈것은 서비스중에 예기치 못한 에러로 불이 나는 것일 것이다. 오류는 일종의 불이다. 한 곳에서 장애가 나더라도 번지지 않도록 막는 것이 아주 중요하다. 이를 막기위해서 사람들이 여러가지 도구를 고안해냈고 핫 한 도구중 한 가지는 타입스크립트다!! 타입스크립트(TS)는 일종의 맞불처럼 미리 빨간불을 띄워줘서 (이것도 마음 아프긴 하다) 여러 오류들을 막아줄 수 있다. 과연 타입스크립트가 나를 오류로부터 자유롭게 해줄 수 있을까? PropTypes?? 리액트에는 TS가 등장하기 전 컴포넌트의 타입을 명시하기 위해서 PropTypes라는 것이 존재했다. 아 물론..
기깔나게 협업하기 인트로 우테코과정을 겪으면서 팀프로젝트와 근로활동 두 가지를 번갈아가면서 작업하기가 정말 쉽지 않았습니다. 가끔 채용공고를 보다 보면.. 일의 멀티태스킹이 가능한 사람을 찾는 공고를 볼 수 있습니다. 여러팀의 업무를 한명이 하는 경우도 있다고 하고, 프론트엔드가 보통 백엔드보다 적어서 더 많은 기능에 참여할 가능성이 높긴 하다고 합니다. 어린시절 어떻게 수학시간에 영어를 풀면서도 두 과목 다 성적을 유지했는지 참... 중간부터는 땡쿠 프로젝트와, 지원사이트 개발 두 팀에 팀문화를 적용해서 각 팀마다 협업을 위한 장치를 마련했습니다. 협업을 잘 하기 위해서 팀, 개인적으로 적용했던 방법을 소개하려고 합니다. 협업에서 중요한 것 혼자 개발하는 1인 개발자가 아니라면 타인이 작성한 코드를 보게 될 거 입니다...
기깔나게 webpack build 속도 최적화하기 안녕하세요! 오늘은 webpack 빌드속도를 개선했던 이야기를 해보려고 합니다. 저희 '땡쿠' 프로젝트는 CRA를 사용하지 않고 webpack을 이용해서 react project를 빌드해서 사용했었습니다. '왜 CRA를 쓰지 않았나요' 에 관한 이야기는 다음에 하기로 하고, 오늘은 '어떻게 webpack을 사용했나요' 에 초점을 맞춰볼까 합니다. 우리는 잘 하고 있었나? 예전에 '부탄' 이라는 나라가 행복지수가 가장 높은 곳으로 소개된 적이 있습니다. 지금은 그렇지 않은데요.. 기술이 발달하면서 부탄사람들이 다른 사람들은 어떻게 사나 알게 되면서 행복지수가 많이 감소했다고 해요. 왜 이런 이야기로 시작하냐고 하면... 저희 프로젝트가 그랬습니다... 웹펙으로 빌드하면서 빌드시간이 32초정도 걸렸습니다. ..
달려라 메로스 - 다자이 오사무 다자이오사무 단편집이다. 사실 책의 제목인 달려라 메로스보다는 축견담과 직소를 훨씬 재밌게 봤다. 나는 다자이 오사무라는 '사람'을 좋아하지 않는다. 일상에서 만나면 도무지 정이 가지 않을 스타일이다. 음침하고 가족들에게 식충이처럼 계속해서 돈이나 타 쓰는 모습이 답답하게 느껴진다. 하지만 그의 글은 뭔가 말못할 공감을 느끼게 한다. 직소에서 보여준 유다 이야기는 사랑이 혐오로 변해가는 과정을 보여준다. 반대로 축견담에서는 혐오가 사랑으로 변해가는 과정을 보여준다. 상반된 내용인데 두가지 스토리의 감정을 따라가는게 어색하지 않다. 어린시절에 공부를 지지리도 못하는 친구가 하나 있었다. 담임선생님께서 그 친구와 함께 공부를 해서 가르쳐보라고 짝을 시켜줬었다. 무언가를 가르쳐서 이 친구가 잘 따라오게 해야 ..
타입스크립트 조건부 타입 (Conditional type) 본 글은 이웅재님의 영상(https://www.youtube.com/watch?v=ViS8DLd6o-E) ~1:10:09 을 보고 제 나름대로 기억하기 위해서 정리한 글 입니다. 1. type과 interface의 차이? - 우선은 문법의 차이입니다. interface a { name: string; } type b = { name: string; }; 보면 interface 는 = 연산자 없이 사용하고 있습니다. - 두번째로는 vscode 내에서 사용할 때의 차이입니다. interface는 찍어봣을 때 a의 구조가 어떤지 알려주지 않지만, type alias인 b는 어떤 구조를 가지는지 알려줍니다. - 세번째는 기능차이입니다. interface는 선언병합을 제공하고 type alias는 제공하지 않습니..

티스토리툴바