분류 전체보기
-
[ Project ] React 재사용 버튼 컴포넌트 만들기Project 2023. 9. 1. 23:34
- 재사용 가능한 컴포넌트 여러 곳에서 사용되는 컴포넌트는 공통 컴포넌트로 만들어 사용하는 게 좋은 점이 많다. 1. 반복적인 코드를 작성하는 것은 시간과 노력을 낭비하는 것이므로, 공통 컴포넌트를 만들어 재사용함으로써 중복 코드를 줄일 수 있다. 2. 중복 코드가 많으면 동일한 로직 또는 스타일을 변경할 때 여러 위치에서 수정을 해야 할 수 있다. 공통 컴포넌트를 사용하면 하나의 위치에서만 수정을 하면 되므로 유지 보수가 훨씬 용이하다. 3. 요구 사항 변화나 기능 추가 시 공통 컴포넌트를 기반으로 확장하는 것이 더 쉽다. 등등 매우 많다. - 버튼 컴포넌트 버튼 컴포넌트는 프로젝트에서 빠질 수 없는 컴포넌트 중 하나이다. 지난 테오의 스프린트 때 만들었던 프로젝트에서 버튼 컴포넌트를 구현했던 코드를 ..
-
[ Error ] The Edge Function "middleware" is referencing unsupported modules:Error 2023. 9. 1. 14:01
Next.Js vercel 배포 중 에러 Next.Js 13 , Vercel 배포 중 마지막 단계에서 오류가 발생했다. 에러 메세지는 다음과 같다. The Edge Function "middleware" is referencing unsupported modules: - index.js : ./resvg.wasm?module, ./yoga.wasm?module 해결법 gpt 답변도 해결책이 되지 않았고 구글 검색을 해도 게시글 개수가 거의 없었는데, vercel 깃허브 issue에 등록되어 있는 답변을 통해 해결할 수 있었다. -> (해당 Issue 게시글) Next.Js 버전을 13.4.4에서 13.4.3으로 다운그레이드하여 해결할 수 있다. 해당 에러에 관련된 게시글이 검색해도 없어서, 누군가에게 도..
-
[ Project ] Next.js 13 다크모드 적용기Project 2023. 8. 30. 18:08
- 구현 방향 현재 프로젝트에 Styled-component를 사용하고 있다. 해당 스택 기준으로 다크 모드를 구현할 수 있는 방법은 두 가지로 추려지는데 첫 번째로는 Theme Provider 사용, 두 번째로는 Css variable 사용하는 방법이 있다. 그 중 벨로퍼님의 의견을 참고하여 Css variable 방법을 채택하여 구현했다. 벨로퍼님 다크모드 글 - 스타일 설정 디자이너 없이 진행하고 있는 프로젝트라서, dark mode, light mode 색상 선택이나 디자인 적인 부분을 생각하고 기획하는데 시간이 은근 쓰였다. 단순히 디자이너의 영역이라고 생각하면 스트레스였지만, 프론트엔드 개발자로서 나쁠 것 없는 역량이라 생각하며 . . 😊 객체에 각 모드별 스타일 색상을 정의하고 Css var..
-
[ PS ] 프로그래머스 LV2 리코쳇 로봇Algorithm/Problem Solving 2023. 7. 5. 11:20
https://school.programmers.co.kr/learn/courses/30/lessons/169199 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이 게임에서 말의 움직임은 상, 하, 좌, 우 4방향 중 하나를 선택해서 게임판 위의 장애물이나 맨 끝에 부딪힐 때까지 미끄러져 이동하는 것을 한 번의 이동으로 칩니다. 문제 조건 중에서 장애물이나 맨 끝에 부딪힐 때까지 미끄러져 이동하는 것을 한 번의 이동으로 계산한다. BFS 템플릿에서 장애물이나 맨 끝에 부딪힐 때까지 While문으로 직진하는 부분이 응용된 문제이다. - Javascript..
-
[ 회고 ] 테오의 스프린트 15기Review 2023. 7. 4. 18:29
- 테오의 스프린트 지원 계기 꽤 오래전부터 테오의 스프린트를 알고 있었지만, 참여하면 1인분은커녕 짐이 될 거라는 걱정에 매번 지원을 미뤘었다. 협업 과정을 몇 번 경험해 보고 리액트도 익숙해질 무렵에 테오의 스프린트 15기 모집 공지가 올라왔다. 6일간 기획부터 개발 및 배포까지.. 말 그대로 스프린트다. 지원 목적은 개발적인 부분도 중요하지만, 시간이 촉박한 상황을 마주하면 어떤 태도로 협업에 임하게 될지 궁금하기도 했다. 무엇보다 이제는 1인분은 할 수 있을 것 같다는 생각에 고민 없이 바로 지원했다 - ! 진행 프로세스 6월 21일 (수) - 6월 26일 (월) 6일간 진행되는데 21일 첫 날에 팀 선정이 이뤄지고 22, 23일에 기획 단계가 진행된다. 24, 25, 26일에 개발 및 배포 단계..
-
[ JS ] PromiseJavascript 2023. 6. 13. 12:58
Promise ? 프로미스는 비동기 작업을 편리하게 처리할 수 있도록 ES6부터 도입된 기능입니다. 즉, 자바스크립트 비동기 처리에 사용되는 객체입니다. 프로미스 도입 이전에 콜백 함수로 비동기 처리를 하면 Callback Hell을 직면했습니다. 이러한 문제점을 Promise를 사용함으로써 해결할 수 있습니다. - Callback Hell const printNumber = (number, cb) => { setTimeout(() => { console.log(number); if (cb) { cb(number + 1); } }, 1000); }; printNumber(1, (number) => { printNumber(number, (number) => { printNumber(number, (num..
-
[ 회고 ] 5월Review 2023. 6. 6. 15:19
5월 - 원티드 프리온보딩 인턴십 - 넘블 토이 프로젝트 - 유데미 X 웅진씽크빅 10주 완성 프로젝트 캠프 : 프론트엔드 (React) 지원 - 백엔드 협업 프로젝트 - 원티드 프리온보딩 인턴십 나에게 프론트엔드 개발에 흥미를 가져다준 전환점과 같은 귀한 시간이었다. 참여했을 당시에 custom hook조차 모르는 상태였고, 설계에 대한 고민 없이 오로지 구현만을 위한 코드였다. 인턴십 기간 동안 근거를 가지고 코드를 작성하는 다른 분들의 태도를 보고 많은 것들을 배우고 흡수할 수 있었다. 너무 배우기만 해서 다른 분들에게는 미안한 마음이 . . 인턴십 마지막 프로젝트를 마치고 컴포넌트 설계에 대한 내용을 다룬 컨퍼런스를 찾아보며 어떤 고민을 가지고 설계해야하는지에 대해 생각해 보는 시간을 가졌다. 🔗..
-
[ Data Structure ] Priority Queue 우선순위 큐Data Structure 2023. 5. 29. 20:56
우선순위 큐 - 들어온 순서 상관 없이 우선순위가 높은 순으로 나가는 자료구조 - Queue와 차이점 : Queue는 First-In-First-Out 들어온 순서대로 나간다. 구현 - Heap 자료구조를 사용하여 구현한다. ( Max Heap ) - 새로운 요소를 삽입하는 push - 가장 큰 값을 반환하는 pop class Heap { constructor() { this.heap = []; } push(newValue){} pop() } push push(newValue) { const heap = this.heap; heap.push(newValue); let crnt_idx = heap.length - 1; let parent_idx = Math.floor((crnt_idx - 1) / 2); ..