전체 글

넘블 딥다이브 <흔들리지 않는 단단한 프론트 개발하기 - 패션 이커머스 편> 회고록

흔들리지 않는 단단한 프론트 개발하기_패션 이커머스 편 이제는 진짜 기본기에 충실한 개발자로 거듭날 때 www.numble.it 신청 계기 우연한 계기로 넘블이라는 서비스를 알게 되었고 이전에 참여하고 싶었던 딥다이브를 신청 기간을 착각해서 놓쳤던 적이 있어서 ㅠ... 새로운 프론트엔드 영역 딥다이브가 올라오길 기다리다가 참여하게 되었다. 최근 이직을 생각하면서 사이드 프로젝트 등을 보강해두어야겠다는 생각도 했고 새로운 기술 스택을 이런 식의 프로젝트를 진행하면서 공부하게 되면 좋을 것 같아서 신청하게 되었다. 최근에 전역 상태 라이브러리와 비동기 통신 등을 잘 구현하는 방식을 고민하고 있었고, 관련 부분을 잘 연습하고 공부할 수 있는 주제라고 생각해서 신청하게 되었는데, 결론부터 말하자면 아쉬운 부분이..

[번역] 서버 사이드 자바스크립트에 필요한 것

본 포스팅은 What Server Side JavaScript needs 글을 번역한 것입니다. 오역, 잘못된 내용이 있을 경우 댓글로 알려주시면 감사하겠습니다 🙏 서버 사이드 자바스크립트 기술은 오랫동안 존재해 왔습니다. 1996년, Netscape는 서버 소프트웨어에서 서버 사이드 자바스크립트를 제공했으며, Helma도 상당한 기간동안 존재해 왔습니다.[1] 그러나 지난 몇 년 동안 서버 사이드 개발은 크게 변화했습니다. Aptana의 Jaxer는 클라이언트와 서버 양쪽에서 실행되는 자바스크립트 환경이라는 혁신적인 관점을 제시합니다. 매우 편리한 커뮤니케이션과 클라이언트와 서버 사이에서 편하게 코드를 공유할 수 있는 점은 서버에서 자바스크립트를 실행하는 것의 큰 이점입니다. Jaxer와 Helma는 ..

[번역] 웹의 과거와 미래, 서버 사이드 렌더링

본 포스팅은 The Future (and the Past) of the Web is Server Side Rendering 글을 번역한 것입니다. 오역, 잘못된 내용이 있을 경우 댓글로 알려주시면 감사하겠습니다 🙏 스위스 지하실에 서버가 있던 시절에 서버가 제공할 수 있는 것은 정적인 HTML뿐이었다. 운이 좋다면 이미지를 볼 수도 있었다. 현재는 웹 페이지가 데이터를 여러 소스로부터 가져와서 실시간으로 데이터를 가공하고 유저가 상호작용할 수 있게끔 하면서 웹 페이지가 온전한 앱이 될 수 있다. 이것은 웹의 사용성을 크게 향상시켰지만 용량, 대역폭, 속도 등에서 비용이 발생하게 되었다. 지난 10년간 데스크톱 웹 페이지 용량의 중앙값은 468KB에서 2284KB로 늘어났고, 이는 388.3% 증가한 것이..

자바스크립트와 프로토타입 알아보기

들어가며 알고리즘 문제를 풀면서 어떤 객체가 특정 key를 가지는지 확인해야 할 상황이 있었다. 평소 객체가 특정 key를 가지는지 확인하기 위해 in 연산자를 주로 사용했기 때문에 in 연산자를 사용해 문제를 풀었는데, 다른 답안을 참고하던 중 Object.prototype.hasOwnProperty() 메소드를 접하게 되었다. MDN의 in 연산자에 대한 설명을 보면 in 연산자는 명시된 속성이 명시된 객체에 존재하면 true를 반환합니다.라고 되어있다. hasOwnProperty() 메소드 역시 hasOwnProperty() 메소드는 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값을 반환한다.라고 되어 있는데 둘의 차이가 무엇일지 궁금해졌다. 검색해보니 in의 경우 해당 객체의 프로토타입..

[Next.js] 국제화(i18n) 자동화 시스템 구축하기

올해 초 OKR을 작성하면서 빠르게 이루고 싶었던 목표 중 하나가 사내 서비스 국제화(i18n) 자동화 시스템을 구축하는 것이었다. 지난 번 프로덕트 런칭을 준비하면서 i18n 관련 노가다 작업(복붙이나 json 컨플릭트 해결 등...)이 너무 비효율적이라는 생각이 들었기 때문이다. 자동화 시스템을 구축하면서는 Toast UI 유동식님의 자동화 가이드 포스트를 많이 참고했다. 한 번 시스템을 설정해두니 번역할 키를 하나씩 추가하지 않아도 되어 만족도가 높은 작업이었다. 👍 본 포스팅에서는 국제화 자동화 가이드를 따르면서 헷갈렸던 부분이나 보완한 부분 등을 위주로 설명을 덧붙여보려고 한다. package.json & Dockerfile 업데이트 scan:i18n - 번역할 키 값을 스캔해서 스캔한 키 값을..

[React] Web API를 활용한 영상 녹화 구현하기

🏃‍♀️ 들어가며 최근 웹 사이트 상에서의 영상 녹화를 구현할 일이 있었다. 1. 사용자가 웹 사이트 상에서 녹화되는 영상을 실시간으로 확인할 수 있어야 하고 2. 녹화된 영상을 서버에 업로드하거나 다운로드할 수 있어야 했다. '웹캠 녹화'라는 키워드로 검색하면 웹캠으로 영상을 녹화할 수 있는 사이트들이 몇 개 나오는데 Web API를 활용하면 정말 쉽고 간단하게 그런 사이트들에서 제공하는 기능을 거의 그대로 구현할 수 있다. 이번 글에서는 이 사이트에서의 영상 녹화 기능을 비슷하게 따라 만들어 보면서 영상 녹화를 어떻게 구현했는지 기록해두려고 한다. 🛠️ 구현하기 API(Application Programming Interface)란 개발자가 복잡한 기능을 더 쉽게 만들 수 있도록 프로그래밍 언어로 제..

[알고리즘] 최대공약수, 최소공배수, 유클리드 호제법

✅ 최대공약수 1. 완전 탐색(Brute Force) 두 자연수 a, b (a { const min = num1 0; i--) { if (num1 % i === 0 && num2 % i === 0) { return i; } } } 2. 유클리드 호제법 유클리드 호제법을 이용해 재귀적으로 최대공약수를 구하는 방법. const gcd = (num1, num2) => { if (num2 === 0) return num1; return gcd(num2, num1 % num2); } ✅ 최소공배수 두 자연수 a, b의 최대공배수는 a * b / (a, b의 최대공약수)라는 공식으로 쉽게 구할 수 있다. const lcm = (num1,..

[번역] useMemo와 useCallback 제대로 알고 사용하기

이 글은 How to useMemo and useCallback: you can remove most of them 를 번역한 글입니다. 의역이 다수 포함되어 있고, 잘못된 내용은 지적해주시면 감사하겠습니다 👍 리액트를 처음 접해보신 게 아니라면, 여러분은 아마 useMemo와 useCallback 훅을 이미 알고 계실 것입니다. 그리고 여러분이 중간 규모나 큰 규모의 애플리케이션을 만들고 있다면, 여러분의 앱에는 "이해할 수 없는 useMemo와 useCallback의 체인으로 이루어져 있어 코드를 읽거나 디버깅할 수 없는" 몇몇 부분들이 존재할 것입니다. 이 훅들은 어느새 모든 곳으로 퍼져 나가서 여러분은 단지 이 훅들이 어디에나 있고, 여러분 주변의 모든 사람들이 이 훅들을 사용한다는 이유만으로 이..