본문 바로가기

전체 글

 (77)
리렌더링 방지에서 React memo 와 key prop의 비교 웹 페이지 성능을 개선하는 간단한 미션을 진행할 때, list에 map을 돌린 컴포넌트를 최적화 할 일이 생겼습니다. 그런데 배열의 item을 화면에 그릴 때 key도 식별가능한 값을 이용해서 item을 인식할 수 있고, memo는 값을 저장해서 리렌더링을 막을 수 있고... 뭔가 애매한 느낌이 들었습니다. key만 사용해도 어떤 컴포넌트가 바뀌었는지 리액트가 인식할 수 있는거 아닌가요? memo만 사용해도 컴포넌트를 재사용 가능한 것 아닌가요? 역할을 정확히 알아야 헷갈리지 않습니다. 1. Key의 역할 쉽게 말해서 key는 dom 과 virtual dom이 diff되는 알고리즘에 영향을 줘서 key가 같다면 reconcile을 막아줍니다. 2. memo의 역할 memo는 컴포넌트의 prop을 비교해서..
공화주의 - 모리치오 비롤리 를 읽고... 자유민주주의 공화국이라고 하는 곳에 살고 있다. 어렸을 때 부터 자유와 민주에 대해서는 수 없이 들어왔다. 하지만 '공화'가 무엇을 의미하는지는 단 한번도 배우지 못했던 것 같다. 공화주의에 관심을 가지게 된 계기는 좀 더 사소하다. 요즘 '토스'라는 기업이 눈에 밟히는데 토스에 대해서 알아보던 중 토스의 창업주가 치과의사를 때려치고 토스회사를 세우게 된 계기가 이 '공화주의'라는 책을 읽고 난 이후라고 한다. 내 속에는 위인이나 대단한 업적을 이룬 사람들의 공통점을 찾고자 하는 작은 열망이 있는 것 같다. 바로 도서관에 달려가서 공화주의를 빌렸다. 책은 길지 않았지만 다른 철학과 인문학 서적이 그렇듯이 쉽게 읽히지는 않았다. 책의 내용은 간단하다. 공화주의는 자유주의와 똑같이 자유에 대해서 다루는 한 ..
에드거 앨런 포 단편선 - 애드거 앨런 포 보통 도서관에 갈 때면 어떤 책을 빌릴지 미리 정해놓고 가는 편입니다. 그런데 가끔은 아무 계획없이 몸만 달랑 갈 때가 있습니다. 그날이 그랬습니다. 아침에 지각을 면하기 위해서 반납할 책만 들고 갔다가, 그대로 나오기는 허전해서 서가를 잠깐 돌아보던 중 단편선이 눈에 띄었습니다. 지금까지 무라카미 하루키나 다른 작가들의 단편선을 읽을때면 짧고 읽기도 편하면서 습작이라고 생각하며 읽으니 꽤 흥미로웠던 책들이 있었기에 이번에는 이 녀석이다 라는 느낌이 팍 왔습니다. 에드거 앨런 포 단편선은 어린시절 추억이 떠오르게 해 주었습니다. 무서운게 딱 좋아 라는 책을 아시나요? 그때는 정말 무서웠는데, 웹툰으로 나와서 보니 그저 그랬던 기억이 납니다. 이 단편선도 나이를 많이 먹어서인지, 책이 나오던 시대에 비해서..
배포할 때 환경변수 숨기기(with dotenv) 지금까지는 개인 dev에서만 확인 할 수 있는 개발을 해왔었습니다. 백엔드와 협업을 할 때에도 연결되는지와 결과물이 잘 나오는지만 봤지 실제 프로덕트로 이어지지는 않았었습니다. 우테코 lv3를 진행하면서 실 사용이 가능한 서비스를 만들기 위해서 배포를 하고, 오픈소스로 git 레포를 관리하다보니 ip와 같은 환경변수들을 숨겨야 할 일이 생겼습니다. 수동으로 같이 작업하는 사람들끼리만 알고 있다가 배포할 수 도 있지만, 현재 프로세스에서 젠킨스 등 다양한 도구를 사용하고 있기 때문에 자동화가 가능할 것이라고 생각했습니다. 작업은 아래와 같이 진행하였습니다. 1. .env 분리하기 //.env API_URL = http://localhost:3000 와 같은 식으로 .env파일을 src 디렉토리 아래에 분리..
돈의 심리학 - 모건 하우절 을 읽고... 이제는 잠깐 경제서적을 멈춰도 좋지 않을까 하는 생각이 들게 만들었던 책이다. 오해하지는 마시라.. 책이 안 좋았다는 것은 아니고 오히려 책이 좋았기 때문에 돈의 심리학을 그만 읽어야겠다는 생각을 했다. '나와 너는 다른 게임을 하고 있다' '아무도 미치지 않았다' 코딩공부를 하면서 '그때는 맞고 지금은 틀리다' 라는 이야기를 참 많이 듣는다. 아마 이런 제목의 책도 있는 걸로 아는데 참 좋은 이야기다. 상황은 언제나 바뀌고, 거기에 맞춰서 행동해야 한다. 언제나 맞는 원칙은 없다. '적당히 합리적인 것이 낫다' 라는 챕터는 그래서 옳은 말인 것 같다. 누구나, 최대의 이익을 얻고, 최소의 손해를 보고 빠지고 싶어한다. 하지만 그것은 이상일 뿐이다. 물론 가능할 수는 있지만 일반 원칙을 벗어나려면 정말정..
Normalizing State Shape(상태를 이쁘게 관리하는 법) - 리덕스 공식문서 읽기 Before Reading 실무에서 어플리케이션들은 복잡하게 얽히고 연결된 데이터를 다뤄야 합니다. 예를 들면, 블로그 에디터(ex 티스토리)는 많은 포스트를 가지고, 각각의 포스트는 여러 코멘트를 가지고, 포스트와 코멘트는 또 누가 썼는지를 알아야하고.... 복잡합니다. 이런 어플리케이션의 데이터는 아래와 같은 모양일 것입니다. const blogPosts = [ { id: 'post1', author: { username: 'user1', name: 'User 1' }, body: '......', comments: [ { id: 'comment1', author: { username: 'user2', name: 'User 2' }, comment: '.....' }, { id: 'comment2',..
Batching에 관하여(리액트 setState 비동기 묶지 않고 따로따로 처리 하기) 리액트를 처음 배울때 당황했던 부분이 있다. 간단한 계산기를 만드는 미션이었는데, setCount를 하는데 잘 동작하지 않았다. 아래 예시코드를 보아라 ## batching이란? export default function App() { const [count, setCount] = useState(0); const onClick = () => { setCount((prev) => prev + 1); setCount((prev) => prev + 1); setCount((prev) => prev + 1); }; return ( {count} 올리기 버튼 ); } 이런식으로 작성했더니, count 가 1씩 증가하지 않고 한번에 3씩 증가했다. 내가 보고 싶었던건 1,2,3 이 다르륵 하고 올라가는 거였는데 ..
실험실의 쥐 - 댄 라이언스 를 읽고... 점점 취업이 다가오면서, 혹은 나이를 먹어가면서 무엇을 어떻게 하면서 살아야할지 고민이 참 많다. 도서관에서 무슨 책을 읽을까 하다가 '왜 일할수록 우리는 힘들어지는가' 라는 작은 글귀에 매혹돼서 책을 빌렸다. 무엇을 어떻게 해야할지 책이 직접적인 답을 주지는 않았지만, 책을 다 읽은 지금은 무엇을 피해야 하는가 정도는 다시 생각해 볼만한 시간이 아니었나 싶다. 책의 중점사항은 실리콘 밸리의 기업문화에 대한 비판이다. 나는 이게 꽤 감명깊었는데, IT쪽 개발자로써의 취업을 원하는 나로써는 우테코를 다니면서도 실리콘밸리에서 흘러들어온 개발자 문화였었구나 하는 것들이 꽤 있었고, 우테코가 아니라도 애자일이라던지 하는 기업들에서 도입하고자 하는 여러가지 개념들이 꽤 많이 등장했기 때문에 흥미로웠다. 회고가 그..

티스토리툴바