✨ Front-end67 [JavaScript] - 동기(synchronous)와 비동기(Asynchronous) 동기(synchronous) 동기는 데이터 요청과 결과가 한자리에서동시에 일어나는 것이다. 사용자가 데이터를 서버에 요청한다면, 그 서버가 데이터 요청에 따른 응답을 다시 사용자에게 리턴해주기 전까지 사용자는 다른 활동을 할 수 없으며 기다려야한다. 즉, 한 개의 데이터 요청에 대한 서버의 응답이 이루어질 때까지 계속 대기해야만한다. 비동기(Asynchronous) 비동기는 동시에 일어나지 않는다. 서버에 데이터를 요청한 후 요청에 따른 응답을 계속 기다리지 않아도 되며 다른 외부 활동을 수행해도 되고, 서버에게 다른 요청사항을 보내도 상관없는 것이다. https://bright-landscape.tistory.com/414 [JavaScript] - 비동기(Asynchronous) async와 awai.. 2023. 12. 27. [JavaScript] 호이스팅이란? 호이스팅이란? 코드가 실행하기 전 변수선언 / 함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상이다. 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, const, let, function, class)을 스코프에 등록한다. 코드 실행 전 이미 변수선언 / 함수선언이 저장되어 있기 때문에 선언문보다 참조 / 호출이 먼저 나와도 오류 없이 동작함. 즉, 변수와 함수선언은 호이스팅의 대상이며, 변수는 선언과 동시에 'undefined'로 초기화된다. 함수는 함수 전체가 끌어올려진다.단, 함수 표현식은 변수에 할당되는 부분만 호이스팅되며, 함수 전체는 끌어 올려지지 않음. console.log(x); // undefined var x = 5; foo(); /.. 2023. 12. 26. [JavaScript] - 비동기(Asynchronous) async와 await HTML 삽입 미리보기할 수 없는 소스 주어진 코드는 JavaScript에서 Promise 객체를 사용하는 예시이다. 이 코드는 'Gird_1' 이라는 객체에 대해 read( ) 메서드를 호출하고, 해당 메서드가 완료된 후 enableButtons( )함수를 호출한다. 이러한 코드는 비동기 작업을 처리할 때 사용된다. 그렇다면 위 코드를 동기로 바꾸려면 어떻게 할까? HTML 삽입 미리보기할 수 없는 소스 주어진 코드를 await과 async을 사용해 리팩터링하려면 함수를 async 함수로 정의하고, await 키워드를 사용해 비동기 작업을 기다려야한다. 이렇게하면 코드가 더 명확하고 간결해질 수 있다. await 키워드는 read( ) 메서드가 완료될 때까지 기다린다. 그리고 read( ) 메서드가 완.. 2023. 12. 14. [Spring-Boot , React] 스프링부트와 React 연동하기 0. Redux DevTools 구글에 Redux DevTools를 치고 Crome에 추가시켜준다. https://start.spring.io/ 먼저 위 사이트에서 스프링 프로젝트를 하나 생성해서 SpringBoot로 Gradle해왔다. 1. 프론트에서 React설치하기 npx create-react-app fronted 비주얼스튜디오에서 React를 설치한다. fronted 해당 폴더에서 npm start로 해서 리액트가 실행되면 리액트 실행까지 완성이다. 2. Proxy 설정하기. ( CORS 관련 오류 방지를 위해 proxy를 설정 ) npm install http-proxy-middleware --save CORS (Cross Origin Resource Sharing) 서버와 클라이언트가 동일한.. 2023. 9. 26. [React] 에러 react-scripts 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다. 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 오류가 떴을 때, npm update 수행 이후 npm start를 다시 해보면, 정상적으로 실행 된다. 2023. 9. 26. [React] Redux 사용 (store, actions, reducers, dispatch) Redux란? Redux는 JavaScript 애플리케이션의 상태 관리 라이브러리로서, 애플리케이션의 상태를 효율적으로 관리하고 상태 변화를 예측 가능하게 만든다. Redux를 사용하면 애플리케이션의 상태를 하나의 전역 객체인 "스토어 (store)"에 저장하고, 이를 관리하며 갱신할 수 있다. Redux의 핵심 구성 요소 4가지 Store (스토어): Redux 스토어는 애플리케이션의 상태를 담고 있는 객체다. 모든 상태는 스토어에 집중적으로 관리된다. Actions (액션): 액션은 애플리케이션에서 스토어로 데이터를 전달하는 객체다. 액션은 어떤 변화가 일어나야 하는지 설명하며, 스토어에서 이를 기반으로 상태를 변경한다. Reducers (리듀서): 리듀서는 액션에 따라 상태를 어떻게 변경할지를 정의.. 2023. 9. 25. [React] Redux 개념과 동작원리 Redux Redux는 리액트 없이도 사용할 수 있는 상태관리(state management) JavaScript 라이브러리이다. 애플리케이션의 많은 부분에 필요한 "전역" 상태를 관리하는 데 도움이 된다. 왜 필요함? 상태관리가 왜필요할까? 하나의 컴포넌트가 사용하는 데이터 역할을 상태라고 본다. state 는 자주 변하고 상황에 따라 최상위 루트까지 접근을 해야하는데, 매번 props로 계속 내려주는 비효율적인 일을 생략하고, 최단거리로 사용할 수 있다. 그래서 예측이 가능하고, 예상대로 작동할 것이라는 확신을 갖도록 도와주기 때문이다. react에서는 상태와 속성(props)을 이용한 컴포넌트 단위 개발 아키텍처를 배웠다면, Redux에서는 컴포넌트와 상태를 분리하는 패턴을 배운다. Redux의 구.. 2023. 9. 25. [React] Router -2 Nested(중첩) Router 및 Param, Navigate Nested Router 태그 안에는 태그가 존재할 수 있다. 이 경우 내의 페이지 안에 하위 경로를 설정해 지정할 수 있는데, 이것을 Nested Router라고 한다. App.js 내에 를 표시하고 싶을 경우 이라는 태그를 사용해 활성화 시킬 수 있다. IndexPage.js home이나 hello 경로로 들어갔을 때 , App.js에서 분명 IndexPage 말고도 아래에 Route가 두개 더 있어서 떠야하는데 안뜬다. 이 없어서 그렇다. Outlet을 추가해야 중첩 Router를 사용할 수 있어 위와 같이 아래에 있던 도 추가 된 것을 볼 수 있다. ReactRouterHooks React Router에는 여러 hook들을 제공하는데, 그 중 3가지 useParams - URL 파라미터 정보를 가.. 2023. 9. 22. [React] Router -1 세팅 및 style 적용 방법 Link, NavLink Router란? 라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다. 다양한 주소의 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜 주는 작업이라고 볼 수 있다. npm install react-router-dom router를 쓰기 위해선 설치해줘야 할 코드가 위에 있다. 이후 npm start를 통해 페이지를 띄우자. BrowserRouter.js HTML 삽입 미리보기할 수 없는 소스 위 js파일을 하나 만들어주고, component > Hello.js, Home.js component 폴더를 만든 후 그 경로 안에다가 Hello와 Home js를 만들어 content 부분을 넣어준다. App.js react-router-dom에서 BrowserRouter, Route, Routes.. 2023. 9. 22. [React] useReducer 사용 예제, useState와의 차이점 useReducer란? 복잡한 상태 관리를 간편하게 처리하기 위해 사용되는 함수이다. useReducer를 사용하면 컴포넌트의 상태를 관리하고 상태를 변경하는 로직을 더 구조적으로 작성할 수 있다. const [state, dispatch] = useReducer(reducer, initialState); state: 현재 상태를 나타내는 값 dispatch: 상태를 변경할 때 사용하는 함수 reducer: 상태를 변경하는 로직이 담긴 함수 initialState: 초기 상태를 설정하는 값 useReducer는 보통 컴포넌트에서 사용할 상태 관리 로직을 별도의 함수인 reducer에서 처리하도록 하는데, 이러한 방식은 상태 관리 로직을 컴포넌트 밖에 둠으로써 코드의 재사용성과 유지보수성을 높인다. use.. 2023. 9. 22. [JavaScript] Json으로 Operation(연산) 기본적으로 단순 문자열을 조합하여 키 값쌍으로 데이터를 뽑아낼 수 있다. ex) 변수에 문자열을 주고, 변수와 문자열을 더해서 키 값쌍을 구할수도 있다. {[one]: value} : 객체 비구조화 할당을 사용하여 one 변수의 값에 해당하는 속성을 추출하고 그 값을 value 변수에 할당한다. one 변수의 값은 "sports"이므로, 실제로는 {[sports]: value}가 되며, 객체의 속성명 "sports"에 해당하는 값을 value에 할당한다. default 매칭되는 데이터의 변수가 일치하지 않는데, 이때 default 값을 지정해줌으로써 console에서 찍을 수 있다. default 값은 연산을 넣어서 사용할 수도 있다. arrow 함수로도 나타낼 수 있다. for Object for..... 2023. 9. 22. [JavaScript] Distructuring의 개념과 사용 방법 Distructuring이란? ~의 구조를 파괴하다. 라는 의미이며, 기존 변수 할당 방식을 마치 배열처럼 선언해 분할할당하도록 하는 기능이다. Array 분할 할당 ex1) ex2) Object 분할할당 2023. 9. 21. 이전 1 2 3 4 ··· 6 다음
