영부터 구까지 영부터 구까지

함수 선언문 vs 화살표 함수함수 선언문 (Function Declaration)화살표 함수 (Arrow Function)주요 차이점리액트에서의 사용 예시자바스크립트, React에서 함수 선언문과 화살표 함수는 함수를 정의하는 두 가지 주요 방식이다. 둘은 기본적인 문법 차이부터, this 바인딩 방식, 호이스팅 처리까지 여러 면에서 차이를 보인다. 특히, React와 같은 모던 웹 개발에서 두 방식은 각기 다른 상황에서 유용하게 사용된다. 이번 포스팅에서는 함수 선언문과 화살표 함수의 특징을 비교하고,각각의 장단점과 실용적인 실용적인 사용 사례를 살펴보고자 한다. 또한, React에서 두 방식의 차이가 어떻게 컴포넌트 개발에 영향을 미치는지에 대해서도 다루어,개발자들이 보다 효율적으로 함수를 선택하고 ..

리액트 컴포넌트클래스형 컴포넌트와 함수형 컴포넌트이제 함수형 컴포넌트만 쓰세요- 리액트 컴포넌트 리액트 컴포넌트를 작성할 때 클래스형과 함수형의 두 가지 방식으로 작성할 수 있다. 아직까지 두 방식 모두 지원하고 있지만,공식적으로 리액트에서는 더 이상 클래스 컴포넌트 방식을 사용하지 말기를 권장한다. 따라서 되도록 클래스형 컴포넌트를 배우지 않아도 되지만,레거시(Legacy) 유지 보수 차원에서 간단하게 살펴보고자 한다.- 클래스형 컴포넌트와 함수형 컴포넌트 리액트 프로젝트를 초기 생성하면 함수형 컴포넌트 방식으로 코드가 작성되어 있다. 해당 코드를 리액트 방식으로 변경하면 아래와 같이 변경할 수 있다. 나는 TypeScript를 사용하여 앞으로도 .tsx 파일을 작성할 것이고,아래의 예시 코드에 있는 ..

문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/135808 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 입출력 예kmscoreresult34[1, 2, 3, 1, 2, 3, 1]843[4, 1, 2, 2, 4, 4, 4, 4, 1, 2, 4, 2]33 풀이function solution(k, m, score) { let answer = 0; const sorted = score.sort((a, b) => b - a); for(let i=0; i  함수 solution은 세 개의 매개변수를 받는다.    1..

문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/42840 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 입출력 예answersreturn[1,2,3,4,5][1][1,3,2,4,2][1,2,3] 풀이function solution(answers) { const answer = []; const ans1 = [1, 2, 3, 4, 5]; const ans2 = [2, 1, 2, 3, 2, 4, 2, 5] const ans3 = [3, 3, 1, 1, 2, 2, 4, 4, 5, 5]; const an..

문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/136798 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr  입출력 예 numberlimitpowerresult53210103221 풀이function solution(number, limit, power) { const attackPoint = new Array(number).fill(0); for(let i=1; i limit) { attackPoint[i] = power; } } return attackPoint.red..

문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/12901 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 입출력 예abresult524"TUE" 풀이function solution(a, b) { const date = new Date(2016, (a-1), b); const days = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"] return days[date.getDay()];} 함수 solution은 두 개의 매개 변수를 받는다.    a. 월    b. 일 먼저, D..

바벨 (Babel)웹팩(Webpack)ViteSWC리액트와 바벨, 웹팩, Vite요약- 바벨(Babel)  ==>  언어의 장벽을 허무는 번역기 프런트엔드에서 자주 사용하는 바벨(Babel)은 과거 바벨탑 이야기에서 이름을 가져왔다. 바벨탑에서 사람들은 언어가 달라 협업에 실패했지만, 바벨은 서로 다른 자바스크립트 언어 규약을 웹 브라우저가 이해할 수 있는 코드로 변환합니다.  - ES6의 등장과 브라우저 문제 2009년 ES5 이후, 2015년 ES6(ECMAScript 2015)가 등장했다. ES6는 let, const, arrow function 같은 새로운 문법을 도입했지만, 당시 브라우저는 이 최신 문법을 제대로 지원하지 못했다. 특히 Internet Explorer(IE) 같은 브라우저는 ES..

npm, npx, yarnnpm (Node Package Manager)npx (Node Package Execute)yarn비교패키지 버전 읽는 법- NPM, NPX, YARN 본격적으로 React를 공부하려고 할 때, 터미널에 가장 먼저 치는 명령어 형식이 있다. 바로 npm(yarn) 또는 npx가 포함된 명령어이다. 이게 뭔지 알고 써야하지 않을까? 해서 포스팅하게 되었다. npm, npx, yarn은 무엇일까?- NPM (Node Package Manager)  npm은 Node Package Manager의 약자로 Node.js의 기본 패키지 관리자이다. npm은 Node.js와 함께 설치되며, Node.js 애플리케이션의 종속성을 관리하고 패키지를 설치, 업데이트, 제거하는 데 사용됩니다. ..