전체 글235 [React] React를 왜 만들었을까? 안녕하세요, 개발자 Sean입니다. 프론트엔드 면접을 보시다보면 아마 많은 분들이 "React는 왜 만든 걸까요?"라는 질문을 받곤 합니다. 개발에 대해 아무 몰랐던 옛날에는 그냥 어플을 잘 만들려고 만든거 아닌가?라고 생각했는데, 어느정도 경험이 쌓이고 나서 생각해보니 면접관 분들이 듣고자 하는 대답은 따로 있었던것 같다는 생각이 듭니다. 근데 여기에 대해 React를 만든 개발자가 직접 작성해놓은 글이 있다는 사실 아시나요? ㅎㅎ 오늘은 관련 글을 번역해 옮겨볼까 합니다. Why did we build React? 이미 수많은 자바스크립트 MVC 프레임워크가 있음에도 불구하고 왜 우리는 리엑트를 만들었으며 왜 리엑트를 사용해야 하는 걸까요? 리엑트는 MVC 프레임워크가 아닙니다. 리엑트는 compos.. 2023. 2. 17. [Canvas] window.requestAnimationFrame이란 안녕하세요, 개발자 Sean입니다. 본격적으로 3D관련 기술 공부를 시작했는데 window.requestAnimationFame이란 메서드를 보고 정리해 두면 좋겠다 생각되어 정리해 올려봅니다. MDN의 정의에 따르면 아래와 같습니다. **window.requestAnimationFrame()**은 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메서드는 리페인트 이전에 실행할 콜백을 인자로 받습니다. const animate = () => { window.requestAnimationFrame(animate); ctx.clearRect(0,0,canvasWidth, canvasHeight); particle.dr.. 2023. 2. 15. [Algorithm] DP - Coin change 안녕하세요 :) 개발자 sean입니다. 휴가 다녀오고 오랜만에 포스팅을 하는 것 같습니다. 2주간 코드는 거들떠 보지도 않고 놀다 오니 코드 감각이 떨어진 듯하여 오늘은 감을 끌어올릴 겸 dp 문제를 풀어보았습니다. 아니나 다를까 코딩 실력이 default로 돌아갔더군요... The Coin Change Problem이란 문제를 풀어보았는데 결국에는 못풀어서 다른 사람의 풀이를 참고해 풀었습니다. 이럴 땐 정말 자괴감이 들곤 합니다만 뭐 어쩌겠습니까 배울 것이 많이 남아 있다는 건 성장할 수 있는 여지가 많이 남아있다는 것이고, 또 어플만드는데는 전혀 문제가 되지 않는걸요 껄껄.. ㅠㅠ 그래도 포기하지 않고 끝까지 풀이에 성공한것을 위안 삼아 멘탈 잡고 한번 풀이를 해보도록 하겠습니다. 제가 풀이한 정답.. 2023. 2. 9. [React] 모바일 청첩장에 벚꽃 배경 만들기 안녕하세요, 개발자 Sean입니다. 오랜만에 포스팅할 시간이 생겨서 글을 적어봅니다. 친형이 결혼을 하게 되어 갑작스레 모바일 청첩장을 만들어 달라는 부탁을 받아 흔쾌히 그러겠다고 했습니다. 근데 하루도 지나지 않아 언제 다 되는지 주변에서 아우성이네요;; 그냥 뚝딱하면 만들어지는 줄 안 모양입니다 ㅠㅠ 그래도 친형 결혼식이니 조금은 신경을 써서 만들고 싶어 배경에 예쁜 벚꽃이 휘날리는 그럼 청첩장을 후다닥 만들어 주었습니다. 퇴근하고 쉬질 못하니 엄청 피곤하긴 하네요. 아래는 벚꽃이 흩날리는 이펙트의 스크린샷입니다. 시간이 넉넉하면 직접 만들어보고는 싶었는데 기한이 빡빡하다 보니 오픈 라이브러리를 이용했습니다. 라이브러리나 오픈 코드들이 여러 개 있긴 했지만 제가 선택한 라이브러리는 react-snow.. 2023. 1. 10. [OpenGL] OpenGL이란 무엇인가 - 1 안녕하세요, 개발자 Sean입니다. 오늘부터 본격적으로 OpenGL과 WebGL에 대해 공부를 시작해보려 하는데요, API 공부에 앞서 OpenGL의 역사에 대해 알 수 있는 좋은 책이 있어 번역해 옮겨보려고 합니다. Preface: What is OpenGL? OpenGL이란 무엇일까요? 가장 기초적인 설명을 드리자면, OpenGL은 개발자가 그래픽 하드웨어와 소통할 수 있도록 도와주는 소프트웨어 인터페이스라고 할 수 있습니다. 물론 이것보다 더 많은 설명이 필요합니다. 그래서 이 책에서는 독자들을 위해 OpenGL의 디테일한 부분까지 설명하고 있습니다. 두 손으로 직접 코딩하기에 앞서 독자 여러분들은 컴퓨터 그래픽과 OpenGL의 역사에 대해 조금 알고 갈 필요가 있습니다. 서문에서는 다음과 같은 주.. 2022. 12. 16. [React] 최초 렌더링에서 useEffect 실행 생략하기 안녕하세요, 개발자 Sean입니다. 오늘 플랫폼 테스트 진행 중 이상한 버그 하나를 발견했습니다. 차트를 그리는 페이지에서 차트 세팅을 변경해 적용하면 변경된 세팅이 아닌 이전 세팅값으로 차트가 그려지는 현상이었습니다. 왜 이런 현상이 발생하는지 조사해보니, 초기 렌더링 때 상태변화가 이루어지지 않은 상태에서 이전 상태 값으로 차트를 그렸기 때문에 문제가 발생하는 것을 확인할 수 있었습니다. 개인적으로 올바른 해결방법은 아니라고 생각하지만 급한데로 우선은 useEffect에서 초기 렌더링일 때는 함수 실행을 스킵하도록 코드를 짰더니 문제가 해결되긴 했습니다. 방법은 여러가지가 있을 수 있겠지만 제가 사용한 방법은 useRef를 활용하는 것이었습니다. const notInitialRender = useRe.. 2022. 12. 14. [Algorithm] queens-attack-2 풀이 안녕하세요 개발자 Sean입니다. 오늘은 queens attack이라는 문제를 풀어보았습니다. 해답 코드는 아래와 같습니다. function queensAttack(n, k, r_q, c_q, obstacles) { // Write your code here let left = 1; let right = n; let high = n; let bottom = 1; const equation = (x) => x + (r_q - c_q); const revEquation = (x) => -x + (r_q + c_q); const getX = (y) => y - (r_q - c_q); const getrevX = (y) => - y + (r_q + c_q); let hightLeft = revEquation(1.. 2022. 12. 3. [React] React-dnd 사용방법 안녕하세요, 개발자 Sean입니다. 오늘은 플랫폼 상단 탭의 Drag and Drop 기능 리펙터링을 진행했습니다. 베타 테스트용으로 급하게 만드느라 기존의 드래그 앤 드롭은 html5에서 기본적으로 지원하는 내장 기능을 이용해 구현해 놓은 상태였습니다. 하지만 ui/ux가 다소 엉성(?)하고 이를 해결하려면 여러 부수적인 코드를 많이 만들어야 하는 까닭에 많은 사람들이 이용해 안정성을 입증하면서 개발자의 의도대로 커스터마이징이 용이한 React-dnd를 사용하기로 했습니다. 완성된 동작은 아래와 같습니다. React-Dnd를 이용한 드래그 앤 드랍 하지만 사용하는 개발자 수에 비해 어딘가 부실한 설명으로 이해하는데 시간이 다소 걸렸습니다. 따라서 많이 부족하지만 다른 분들의 시간을 아껴드리기 위해 간단.. 2022. 11. 29. [Algorithm] non-divisible-subset 문제 풀이 안녕하세요, 개발자 Sean입니다. 재미 삼아 코딩 문제나 풀어볼까... 하고 HackerRank의 문제를 풀어보았는데요, 해결하는데 꼬박 하루가 걸려버렸네요 ㅠㅠ 시간 복잡도 때문에 런타임 에러가 발생해 꽤나 애를 먹다가 결국 다른 분들의 풀이를 한번 살펴봤는데 풀이를 봐도 이해가 안 되는 부분이 있어 고생을 꽤나 했습니다. 일단 저의 풀이는 아래와 같습니다. function nonDivisibleSubset(k, s) { // Write your code here const counter = new Array(k).fill(0); s.forEach((el, i) => { counter[el%k]++; }) let result = 0; if (counter[0] > 0) result++; if (k%2.. 2022. 11. 28. [Subset] reduce와 map을 이용해 subset 구하기 const getAllSubsets = (arr) => { return arr.reduce((subsets, value) => { return subsets.concat(subsets.map((subset) => [...subset, value])) }, [[]]) }; 2022. 11. 27. [React] 리엑트 코딩 팁 안녕하세요, 개발자 Sean입니다. 퇴근 시간 버스를 놓쳐서 블로그 글을 읽던 와중 꽤 괜찮은 글이 있어 번역해 옮겨 봅니다. 더 나은 리엑트 코드를 위한 팁 코드를 잘 작성하는 것이 왜 중요할까요? 이유는 코드는 가능한 깔끔할수록 유지보수에 용이하기 때문입니다. 좋은 개발자가 되기 위해서, 작동하는 코드가 아닌 작동하는 좋은 코드를 작성할 줄 아는 것은 중요합니다. 그래서 아래에 리엑트를 처음 배울 때 알았으면 좋았을 몇 가지 팁을 공유해 드립니다. Use fragments 리엑트에선 하나의 컴포넌트에 여러 개의 자식 컴포넌트를 리턴할 수 없습니다. 만약에 그런 시도를 하게 된다면 이런 에러 메시지를 보게 될 것입니다. "Adjacent JSX elements must be wrapped in an e.. 2022. 11. 16. [Next] next.js github으로 배포하기 안녕하세요, 개발자 Sean입니다. 저번 주 시작한 회사 블로그 만들기 프로젝트가 끝나 관련해 포스팅을 해보려고 합니다. 3주는 예상한 프로젝트였는데 6일 만에 기능 구현 및 배포가 끝나 버렸네요. next.js의 낮은 러닝커브 덕분인 것 같습니다. 이번에 처음 next.js를 이용하면서 MPA, SSR 애플리케이션을 제작해 보았는데요, 상당히 많은 것에 대해 생각해 보고 오히려 SPA와 React.js에 대해 더 깊게 이해하게 된 것 같습니다. 재미있었습니다 ㅎㅎ 거두절미하고 제가 만든 블로그 어플리케이션은 아래와 같은 방식으로 작동합니다. 1. 데이터 분석가가 주피터 노트북을 이용해 만든 .ipynb 파일을 .json 확장자로 변경한 뒤 2. next.js 어플리케이션의 src/contents 폴더 .. 2022. 11. 14. 이전 1 2 3 4 5 6 7 8 ··· 20 다음
