전체 글
-
"클린 코드" 는 "방어운전" 과 같다.ReactJS 2023. 10. 21. 07:20
사실 팀 프로젝트를 할 때마다 클린 코드의 중요성을 체감하고 있지만, 이번 프로젝트는 무려 디렉터, 기획팀, UI/UX 디자인 팀, 개발팀(프론트,백엔드), 운영팀이 함께 작업을 하는 내 인생 나름 대규모 프로젝트여서 클린 코드의 "필요성"을 아주 깊게 느끼는 중이다. 오히려 상대적으로 1인 프로젝트, 소규모 프로젝트에서 클린 코드가 그렇게 중요하지 않았기 때문에 내가 "재사용성" 높은 코드를 짜는 데 귀찮음을 느꼈다는 걸 깨달았다. 클린 코드의 정의 클린 코드는 일반적으로 유의미한 변수 이름, 한 개의 함수 당 하나의 역할, 이해하기 쉬운 로직 등을 합쳐 알아보기 쉬운 코드를 의미한다. 맞는 말이다. 나는 여기에, 협업을 하면서 느낀 React 에서의 클린 코드를, 중요도 순으로 개인적으로 정의하고 싶..
-
당신이 async await 을 사용할 때 자바스크립트는..JavaScript 2023. 10. 14. 22:52
출처 : 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 / 이웅모 지음 자바스크립트는 비동기 처리를 할 수 없다 자바스크립트의 실행 컨텍스트까지 공부하고, 자바스크립트 엔진이 어떻게 동작하는 지 아는 사람이라면, 자바스크립트는 단 하나의 실행 컨텍스트 (콜스택) 을 갖고, 싱글 쓰레드로 동작한다는 사실을 알 것이다. C를 공부할 때는 함수를 비동기로 처리하기 위해 멀티 프로세스, 멀티 쓰레드 방식을 이용했다. 하지만 자바스크립트는 멀티 쓰레드를 지원하지 않으므로, 이를 할 수 없다. 그럼에도 우리는 자바스크립트에서 비동기 처리를 한다. 어떻게 된 일일까? 자바스크립트의 비동기 처리 방법 자바스크립트는 아주 내 마음에 쏙 드는 방식으로 비동기를 처리한다. 자바스크립트의 실행 환..
-
React.memo, useMemo, useCallback 진짜로 언제 사용해야 할까?ReactJS 2023. 10. 14. 05:56
일단 당연한 사실들을 한번 짚어보자 React.memo: 컴포넌트 매핑 함수로 컴포넌트를 캐싱해서, 컴포넌트의 state 가 변경되지 않았음에도 쓸데없이 리렌더링을 방지함 useMemo: 컴포넌트가 렌더링 중에 생성하는 변수를 캐싱하여, 변수를 생성할 때 관여하는 인자가 바뀌지 않으면 변수를 새로 생성하지 않음 useCallback: useMemo 의 함수 버전 useMemo 로 객체를 캐싱하고, useCallback 으로 이벤트 핸들러 함수를 캐싱해서 컴포넌트의 prop 으로 전달해주면, memo로 캐싱한 컴포넌트는 prop 이 바뀌지 않은 것을 제대로 인식하고 리렌더링 하지 않는다. (안그러면 React.memo 의 prop 비교 방식이 shallow copy 이기 때문에, 단순히 이전 prop 과의..
-
포트폴리오 페이지 (I AM INWOO) 회고회고 2023. 10. 13. 23:45
개발 시작 : 2023년 9월 20일 배포 시작 : 2023년 10월 12일 (총 22일) https://github.com/stripy1026/portfolio GitHub - stripy1026/portfolio Contribute to stripy1026/portfolio development by creating an account on GitHub. github.com FRONTEND: Next.js 13.4.19 (App router) react 18.2.0 typescript 5.2.2 tailwindcss 3.3.3 DB: mongoose 7.6.1 (MongoDB ODM) typegoose 11.6.0 최초 배포 성능 테스트 포트폴리오 기획 때 고민했던 것 1. 프론트엔드 개발자는 웹 페..
-
내가 1인 프로젝트에서 더이상 리액트를 사용하지 않는 이유기록 2023. 9. 20. 00:42
이번에 포트폴리오 웹 페이지를 만들기 위해, React 를 사용할 것인지 Next 를 사용할 것인지에 대해 많은 고민을 했다. 개인적으로 혼자서 https://wak-quotes.vercel.app/ 를 개발할 때, 넥스트의 강력한 기능들이 참 마음에 들었다. 리액트 기반 프레임워크답게 routing, data fetching 등등 많은 기능들이 정리되어 있고, 개발자의 선택에 따라 SSR, CSR 을 선택할 수 있다는 점도 마음에 들었고, (정적 페이지가 SEO 면에서 매우 유리하다고 느꼈다) 풀스택 프레임워크라는 점도 좋았다. 여러모로 1인 개발을 하기에 정말 부족함 없는 프레임워크였다. 그러나 포트폴리오 페이지를 만들 때, Next 의 많은 기능들이 다 필요가 없다는 생각이 들었다. 단순히 SPA ..
-
다익스트라 알고리즘은 이렇게 쓰는 게 맞다!알고리즘 2023. 8. 18. 02:22
최단 경로 알고리즘 문제를 풀기 위해, 처음 다익스트라 알고리즘을 공부하면서 너무 헷갈렸다. 개념 자체는 우선순위 큐를 사용한 BFS이기 때문에 하나도 어렵지 않다. 근데 왜 헷갈렸느냐? 인터넷에는 수많은 버전의 제각기 다른 다익스트라 알고리즘들이 있었다. 알고리즘 문제를 푼 사람들의 코드를 보면, 다들 다익스트라의 개념은 맞지만 조금씩 다르게 구현해서 쓰고 있었다. 그 중에는 쓸데없이 성능상 저하가 있는 코드도 있었고, 이런 특수한 케이스에서는 틀릴 것 같은데? 싶은 코드도 있었다. 따라서 나는 알고리즘 문제를 풀기에 가장 "적합한" 다익스트라 알고리즘의 코드를 만들었다. (내 머리에서 가장 적합하다고 생각한 것이기 때문에, 이보다 더 좋은 구현이 있을 수도 있지만) 다음 블록에 내 다익스트라 알고리즘..
-
C++ for vs for_each 반복문 속도 비교알고리즘 2023. 7. 25. 21:49
알고리즘 공부를 하면서, 보통 시간제한 1초 이하로 주어진 문제들은 반복문을 1억번 이하로 순회할 수 있다. 순서대로 순회하는 일이 필요할 때 보통 배열을 사용하게 되고, 배열을 순회할 때 C++11 이상부터는 다양한 방법을 제공한다. 그 중에는 내가 좋아하는 for_each 메쏘드도 있고, 간편한 문법을 제공하는 range-based for 문도 있다. 시간 복잡도는 코더의 역량으로 최대한 최적화 하면 되는 문제인데, 어떤 방법을 사용하여 배열을 순회할 때 최대한 시간적 이득을 볼 수 있을까? 3가지 배열 순회 방법의 속도 비교 이제부터 비교해보겠다. 전통적인 for 문 (for int i = 0; i < n; ++i) {} for_each 문 (arr.begin(), arr.end(), [](elem..
-
HTML - 시맨틱 태그는 뭐고, 왜 사용해야 할까 ?웹 브라우저 2023. 4. 5. 17:10
첫 웹 팀프로젝트를 할 때, 나는 컴포넌트를 만들 때 모든 요소를 다 div 로 만들었다. html 태그에 뭐가 있는지 잘 모르기도 했고, 그렇게 만들어도 동작하고 보여지는 데에 아무 문제가 없었기 때문이다. 하지만 중간에 팀원에게 시맨틱 태그를 이용하라는 말을 들었고, 그 이유를 물어봤을 때 단순히 가시성이 좋기 때문이라는 대답이 돌아왔다. 그래서 div 대신에 시맨틱 태그를 쓰려고 해봤지만, 사실 잘 와닿지 않아서 대충 한 감이 있다. 하지만 프로젝트가 끝나고 혼자 HTML 과 CSS 를 공부하면서, 시맨틱 태그라는 것이 생각보다 중요하다는 것을 깨달았다. 개념은 어렵지 않기에, 간단히 시맨틱 태그를 왜 사용하는지에 대해 알아보고, 어떻게 사용하는 지 알아보자. 출처: Do it! HTML5 + CS..