m2ndy 개발 블로그

✅ Webpack 이란?Javascript로 만든 어플리케이션을 위한 정적 모듈 번들러. 즉, 웹 어플리케이션을 구성하는 css, javascript, image 등의 웹 자원을 각각의 모듈로 간주한 뒤, 이들의 의존성 관계를 결합하여 하나의 결과물을 만들어주는 도구이다. Webpack은 프로젝트에서 필요한 모든 모듈을 매핑하고, 하나 또는 여러 개의 번들 파일로 결합하여 의존성 그래프를 생성한다. 이를 통해 웹 어플리케이션의 성능을 최적화하고, 모듈화를 통해 코드의 유지보수성을 높일 수 있다. 또한, 어플리케이션의 로드 시간을 줄이며, 사용하지 않는 코드를 제거하는 tree shaking을 통해 최종 번들 크기를 줄일 수 있다. webpack.config.js 파일을 통해 설정을 할 수 있으며, 진입점..

리액트에 대해 잘 안다고 생각했던 내가 무지했었음을 깨닫고처음부터 차근차근히 배워갔던 레벨 2였다.  미션 1. 페이먼츠 - Github : https://github.com/chosim-dvlpr/react-payments/tree/step2- 배포 주소 : https://chosim-dvlpr.github.io/react-payments/dist/- Storybook : https://6620c28ba5e20036aa444298-eyqndbcamz.chromatic.com/   [학습 목표]- 재사용 가능한 컴포넌트 만들기- Storybook 활용- 구성 요소들 간의 효율적인 상태 관리- Custom hook 적용하여 Form 관리 로직을 분리하고 재사용- Controlled & Uncontrolle..

우아한테크코스첫 날부터 미션 시작에, 연극 준비에, 정신이 하나도 없었던 것 같다. 적응하랴 미션하느랴 순식간에 레벨 1이 끝나버렸다. 잊기 전에 쓰는 레벨 1 회고.연극을 해야 한다구요?우테코를 지원할 때까지만 해도 연극을 해야 하는 줄 몰랐다. 사실 합격 하고 나서 지인이 알려주더라. 너 연극해야 된다고 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 사람들 앞에 나서는 건 조금 부담스럽긴 했지만, 뭔가 재밌을 것 같았다.아이디어를 내는 과정은 역시나 힘들었다. 이것저것 아이디어를 내 보기도 하고, 유행하는 영상들을 찾아보기도 하고. 우리 조는 '모두가 공통으로 알고 있는 소재'를 포인트로 했다. 모든 크루들의 공감을 불러일으키고 싶었다.그래서 한 크루의 실화를 바탕으로 한 '우테코 최종 코딩테스트'를 소재로 했다. 결과는 성공적..

우아한테크코스 로또 미션을 구현하며 web과 코드 사이의 상호작용을 컨트롤러에서 담당했는데,그 과정에서 this 바인딩 에러가 발생했다.  원인을 한 마디로 정리하자면, addEventListener 속성에서의 this 때문! class LottoWebController { #webBudget; async start() { document.querySelector("#content-box-input-budget").addEventListener("submit", this.handleWebBudget()); // 문제가 발생한 곳 } getWebBudget() { const webBudgetInput = document.querySelector("#budget").value; thi..

바닐라JS로 프로그램을 만들던 중 export에 대한 궁금증이 생겼다. (named) export vs export default export 한 모듈에 여러 개체들, 혹은 특정 개체만을 각각 가져올 수 있음 반드시 지정된 이름으로만 import 해야함import { hello } from './hello.js' export default 해당 모듈에 하나의 개체 (변수, 클래스, 함수 등)만 있다는 의미 ⇒ 해당 모듈의 전체를 export 하는 느낌 원하는 이름으로 import 가능import helloTest from './hello.js' 무엇을 사용해야 될까? airbnb convention에 의하면 내보내기 할 것이 한 가지이면 export default 사용하는 것..

먼저 아래 영상을 보면 이해를 쉽고 빠르게 할 수 있다! 실행 컨텍스트 코드가 실행되는 공간 실행 컨텍스트의 Call stack에는, 환경 레코드, 첫 번째로 실행될 함수, 첫 번째 함수가 종료되기 전 실행할 함수 .. 순서로 stack으로 쌓이게 된다. 후입선출 방식을 사용한다 => 나중에 실행되는 함수가 종료되어야만, 그 앞에 실행된 함수가 종료된다. 따라서 나중에 실행되는 함수에서 변수를 먼저 찾고, 바깥으로 나가며 찾는 방식으로 진행이 된다. 환경 레코드 : 실행 컨텍스트에 있는 변수들을 저장하는 공간 function greeting() { sayHi(); } function sayHi() { return "Hi!"; } greeting(); 시작 상태 call stack : [] 위 코드에서, ..

function solution(operations) { let arr = []; for (let i=0; i a - b); continue } if (num === '-1') { // 최솟값 삭제 arr.shift() continue } arr.pop() // 최댓값 삭제 } if (arr.length > 0) { return [Number(arr[arr.length-1]), Number(arr[0])] } retur..

SpringBoot JPA 공부를 위해 SpringBoot starter로 설치를 진행하려던 중, SpringBoot 2.x 버전 종료로 3.x 버전만 지원한다는 것을 깨달았다. 하지만 기존 진행했던 프로젝트를 복습하려 했기에 2.x 버전처럼 사용하려 했고 build.gradle만 기존 프로젝트를 참고하여 복붙했던게 화근이었을까. MemberRepositoryTest를 실행하려 했지만 아래와 같이 spring boot가 test를 찾지 못하는 에러가 떴다. Execution failed for task ':test'. > No tests found for given includes: [jpabook.jpashop.MemberRepositoryTest.testMember](--tests filter) * ..

// dueDates 배열을 순회하며 기준 값보다 큰 값이 나올 때마다 cnt를 answer 배열에 넣고, 리셋 // 7, 3, 9 => 7, 3 / 9 로 나눔 function solution(progresses, speeds) { let dueDates = []; let answer = []; for (let i=0; i standa..

기대로 가득 찬 2023년이었고, 목표를 반 정도 이룬 것 같다.   싸피 9기로 입과 하며 힘들지만 즐거운 일 년을 보낼 수 있었다..! 기본 베이스도 없는, 4년 동안 프로그래밍과 전혀 무관한 전공을 이수한 내가 전공자에 뒤지지 않는 실력을 키우기 위해서는 꾸준하게 노력하는 방법 밖에 없다고 생각했다. 월화수목일요일, 9 to 6 수업을 끝내고 저녁마다 사람들과 공부를 했고, 월요일에 있는 시험공부를 하기 위해 주말에도 낮부터 자정까지 스터디를 했다. 열심히 공부했던 덕분인지 우수 수료생으로 수료를 할 수 있었던 것 같다.👩‍🎓🤗             세 번의 프로젝트 동안에는 일주일 중 5일을 스터디 했을 때보다도 바쁘게 지냈다.        첫 번째 프로젝트를 할 때는 리액트를 처음 다뤄봤는..