요즘의 우리가 알고 있는 JavaScript의 역할-> 웹 서버-> 데스크탑 어플리케이션-> 모바일 어플리케이션-> 기타 등등 역할이 매우 넓다 ! 원래 자바스크립트의 역할은 HTML, CSS와 함께 웹 페이지를 개발하기 위해 만들어진 언어라는 것 ! HTML- 요소들의 내용, 배치, 모양을 정하기 위해 사용되는 언어- 색상이나 디자인 등의 수정은 불가- 웹의 뼈대 🦴 CSS - 요소들의 색상, 크기 등 스타일을 설정할 수 있음- 웹의 피부 🫥 JavaScript- 웹 내부에서 발생하는 다양한 기능을 만들 수 있음- 웹의 근육 💪🏻 JavaScript는 어떻게 실행될까?JavaScript 엔진을 통해서 실행된다 -> 이 엔진 없이는 자바스크립트 실행은 커녕 해석조차 불가능하다. JavaS..
알고리즘 풀이를 하다 보니 어느 순간 Math 메서드들이 헷갈리기 시작하여.. 차이를 정리해두려고 한다! 자바스크립트 Math 객체는 다양한 수학적 연산을 수행하는 메서드를 제공한다. 그중에서도 Math.floor(), Math.ceil(), Math.round(), Math.trunc()는 숫자를 정수로 변환하는 데 자주 사용된다. 비슷해 보이지만 각각 동작 방식이 조금씩 다르기 때문에 헷갈리기 좋다 ㅠㅠ 뭐가 조금씩 다른지, 어떤 상황에 무엇을 사용하면 좋을지 정리해보자!Math.floor()주어진 숫자와 같거나 작은 숫자 중에 가장 큰 정수를 반환한다. 즉, 소수점 이하를 버리고 내림한다.Math.floor(4.9); // 4Math.floor(4.1); // 4// 음수는 절대값이 더 큰 정수로..
요즘 프론트엔드 개발자 구인글을 몇 개만 살펴봐도 필수 자격 요건에 React는 빠지지 않고 등장한다. 또한 현재 사내 기술 스택 역시 리액트를 메인으로 사용하고 있기도 하다.그렇다면 왜 우리팀은 리액트를 사용하고 있으며 여러 기업에서도 프론트엔드 개발자의 필수 스택일까? (그만한 이유가 있어서 일텐데,, )먼저 리액트의 컴포넌트, 가상돔 등 기초 개념에 대해 알아보도록 하자 👀 ReactReact는 Facebook(현재 Meta)에서 개발한 'UI를 구축하기 위한 자바스크립트 기반의 라이브러리'이다. 전 세계에서 Node.js 다음으로 점유율이 높은 웹 개발 기술이다. 2023년 기준으로 전 세계 웹 개발자의 40.58%가 리액트를 사용한다고 한다. 흔히 아는 인스타그램, 페이스북, 에어비엔비, 디스..
리액트로 프로젝트를 진행하다보면 useEffect를 반드시 한 번은 사용해야할 상황이 온다. useEffect는 컴포넌트의 생명주기 동안 발생하는 여러 작업(데이터 패칭, 구독 설정, 타이머 설정, 상태 변화 감지 등)을 처리하는 데 필수적인 훅이다.그럼 useEffect란 무엇이며 어떤 형태들이 존재하는지 알아보자! useEffect란컴포넌트가 마운트 되었을때, 업데이트 되었을때, 언마운트 되었을때 특정 작업을 실행시켜주고 싶다면 useEffect를 사용해야한다. 기본적으로 useEffect 훅은 인자로 콜백함수를 받으며, 원하는 작업의 코드를 콜백함수 내부에 작성해주면 된다.콜백함수란, 다른 함수의 인자로 전달된 함수를 의미한다. useEffect의 형태1.첫 번째 형태로는, useEffect의..
리액트로 개발할 때 함수형 컴포넌트를 사용한다면, 리액트의 hooks를 활용할 수 있다.그중에서도 useState에 대해 알아보자! 🤩 State란먼저 State란, 컴포넌트가 가질 수 있는 상태를 의미한다. 예를 들어 시계라는 컴포넌트가 있다면 이 시계는 상태값으로 현재 시간을 가지고 있을 것이다. useState가 컴포넌트의 상태를 간편하게 생성, 업데이트할 수 있도록 도구를 제공해 준다. 위와 같은 방식으로 state 생성과 동시에 가져야 할 초기값을 useState 함수의 인자로 넣어주면 state와 setState라는 두 가지 요소를 배열 형태로 리턴해준다. 현재 상태값은 state 변수에 들어있고, state를 변경시키고 싶을 때는 setState를 이용하여 변경시켜 줄 수 있다. stat..
리액트 프로젝트 생성시 UI만 제공되기 때문에 직접 구축해야하는 것들이 많아 번거로운 점이 있다. CRA (Create React App)는 Webpack, Babel 등의 도구를 직접 설정할 필요 없이, 기본적인 개발 환경을 자동으로 구성해주기 때문에 많은 개발자들이 사용하는 도구이다. Node.js 설치는 필수이며 IE는 지원하지 않는다 😂 리액트 프로젝트 생성하기- Reactnpx create-react-app 폴더명 - React + typescriptnpx create-react-app 폴더명 --template typescript + 참고로 폴더를 한 번 더 만들지 않고 현재 파일에 생성하고 싶다면 npx create-react-app . npx create-react-app . --temp..
