리액트

https://www.tutorialspoint.com/compile_java_online.php

https://www.delftstack.com/ko/howto/java/how-to-sort-a-map-by-value-in-java/

int main() // 실행 함수.{ mytest1(); //mytest2();}// 주석/\* test떡볶이는 6470000원 어치,감자튀김은 6988000원 어치,모듬 튀김은 666777원 어치,김말이 튀김은 8900000원 어치,계란 튀김은 70000원 어치,순

강의를 듣고 중요한 부분을 정리해 보겠다. props state event 를 잘 다루어야 할 것 같다.

폴더부터 만들게요 😉sparta_react라는 폴더를 만들어주세요!windows: C드라이브 아래에!osx: macintosh HD → 사용자 → 내 컴퓨터 이름 아래에!13) NVM으로 노드 버전을 관리해보자NVM(Node Version Manager)을 왜 써야할

JSX

17) JSX 사용법 훑어보기

함수형 컴포넌트클래스형 컴포넌트

1) 가상돔이란?2) 라이프 사이클이란?\*\*코드스니펫 - 라이프 사이클 예제\*\*이 코드를 붙여넣고 콘솔 창에 어떤 순서로 찍히는 지 확인해봅시다!라이프 사이클 함수가 어떤 순서로 움직이는 지 보면 이해하기 쉬울 거예요.LifecycleEx.js 파일을 만들고 →

👉 Single Page Application! 말 그대로 서버에서 주는 html이 1개 뿐인 어플리케이션이에요.전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(=정적자원들)을 내려준다면, SPA는 딱 한번만 정적자원을 받아옵니다.왜 굳이

👉 SPA는 주소를 어떻게 옮길 수 있을까?html은 딱 하나를 가지고 있지만, SPA도 브라우저 주소창대로 다른 페이지를 보여줄 수 있어요.이렇게 브라우저 주소에 따라 다른 페이지를 보여주는 걸 라우팅이라고 부릅니다.전부 직접 구현하나요? → 이미 만들어진 라우팅

링크텍스트(1) 리덕스 Store를 Component에 연결한다.(2) Component에서 상태 변화가 필요할 때 Action을 부른다.(3) Reducer를 통해서 새로운 상태 값을 만들고,(4) 새 상태값을 Store에 저장한다.(5) Component는 새로운

1) keyframes 사용하기 링크텍스트2) keyframes으로 움직이는 동그라미 만들기Box를 동그랗게 만들고, 링크텍스트

🔐 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요?유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요?답변정의: 유사 객체 배열은 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다.요소를 수정하는 방법Array.fr

🔐 부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다.컴포넌트 A의 state가 {nam

🔐 양방향 바인딩은 무엇일까요? 양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요.(부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.)답변 링크텍스트

🔐 event listener는 등록되면 반드시 해제되어야 합니다.클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!)그럼 라이프사이클 메소드를 사용할 수

🔐 리액트에서는 DOM 요소에 접근하기 위해 주로 ref를 씁니다.domcument.getElementsByClassName 등을 쓰는 게 아니라 ref를 쓰는 이유는 무엇일까요?답변ref를 이용하여 DOM에 접근하는 이유는 가상DOM에 접근하기 위함입니다.일반적인

SPA(Single Page Application) 최초 한 번 페이지 전체를 로드한 후 데이터만 변경하여 사용. 즉, 웹 사이트의 전체 페이지를 하나의 페이지 담아, 서버로부터 새로운 페이지를 불러오지 않고, 화면을 동적으로 표현하는 것을 웹 사이트나 웹 애플리

🔐 s3 버킷에 배포한 뒤, 어떤도메인.com이 아닌 어떤도메인.com/login 등 페이지로 이동하면 왜 오류가 날까요?답변 React나 Vue 같은 SPA 라이브러리 또는 프레임워크를 사용하게 되면 클라이언트 사이드의 라우팅을 사용하게 됩니다. 즉, 별다른 설정

🔐 컴포넌트 A는 리덕스 스토어를 구독하고 있습니다. 리덕스에 저장된 데이터가 변경되었을 때(A가 구독 중인 값이 변경되었다고 가정합니다.), 어떤 과정을 거쳐 컴포넌트 A가 변경된 값을 가져올 수 있는 지 흐름을 그려볼까요?답변

GitHub에 있는 코드를 로컬로 Clone하여 디버깅해보고 공부해보려고 할때 Clone해온 프로젝트에 npm start를 하면 실행이 되지 않는다 내 경우엔 다음과 같은 오류 메시지가 나왔다 yarn이든 npm이든 실행이 안되면 우선

리덕스를 사용함에 있어 좀 더 편의성있게 사용할 수 있게 해주는 툴이다.해당 리덕스 reducer 있는 파일과 configStore 파일에 위와 같이 toolkit을 import해주고,처럼 사용하는 것은 맞으나reducer와 action creator 부분이 다르다이렇

🔐 옵셔널 체이닝이란 뭘까요? 어떤 경우에 사용할까요?답변 ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다. ex>

🔐 파이어스토어에서 데이터를 가져오기까지 기다렸다가 가져오는데 성공하면 alert을 띄워 알려주려고 합니다. 어떤 방법을 써서 구현할 수 있을까요?답변 링크텍스트

🔐 을 사용할 때, 을 함께 사용하면 리덕스 데이터가 초기화 되는 것을 볼 수 있습니다. 왜 초기화 되는 지 생각해봅시다.답변 form의 submit : 데이터를 웹서버에 전송 form(submit)을 사용하면 페이지에 reload가 발생 → 리덕스의 store

🔐 새로고침 시에도 리덕스 내의 데이터를 유지하려면 어떤 방법을 써야할까요?답변state를 LocalStorage, SessionStorage에 직접 저장, 삭제유지하고 싶은 데이터를 LocalStorage, SessionStorage에 저장Redux-Persist

Presentational and Container Component Pattern➡️ 데이터 처리와 데이터 출력을 분리하는 패턴입니다.✏️ Container Components : how things work컨테이너 컴포넌트에서는 주로 데이터 fetch가 이루어 지게

관심사의 분리를 더 잘할 수 있다.이 패턴 방식으로 Component 를 작성하면 작업을 하는 앱 과 UI 를 보다 이해하기 쉽게 만들 수 있습니다.재 사용성을 높일 수 있다.완전히 다른 곳으로부터 온 여러 상태(state) 라 할지라도, 이를 표현하기 위해 같은 Pr

먼저,자바스크립트는 싱글 쓰레드로 동작하는 언어입니다. (메인 쓰레드 하나와 콜스택 하나로 구성되어 있어요!)그리고 비동기 작업을 동시에 할 수 있어요.오잉?🤢 1번에 1개의 작업만 할 수 있는데, 어떻게 동시 실행을 할까요?→ 자바스크립트는 코어 엔진만 가지고 돌

async, await await \- async의 짝꿍이에요. (async 없이는 못씁니다!) \- async 함수 안에서만 동작합니다. \- await는 프라미스가 처리될 때까지 기다렸다가 그 이후에 결과를 반환해요! 👉 await를 만나면

Hook 탄생으로 인해 function component에서 state을 가질 수 있게 되었다.만일 앱을 react hook을 사용하여 만든다면 class component, render 등을 안해도 된다는 뜻이다.모든 것은 하나의 function이 되는 것 함수형 프

정규식 리터럴은 스크립트가 불러와질 때 컴파일된다.정규식이 상수라면, 이렇게 사용하는 것이 성능을 향상시킬 수 있다.생성자 함수를 사용하면 정규식이 실행 시점에 컴파일된다.정규식의 패턴이 변경될 수 있는 경우, 혹은 사용자 입력과 같이 다른 출처러부터 패턴을 가져와야

💡 서버랑 통신하기클라이언트는 서버에게 요청을 보내고, 응답을 받아온다.미리 약속한 주소로 (url)어떤 요청을 보낸다. (type)필요하다면 서버가 일하기 위해 필요한 자료와 (data)누가 요청했는 지 알려주면 된다. (auth) → 토큰을 전달해주면 누가 요청했

프론트엔드/백엔드 동시 개발을 위해 API를 확정지었더라도, 백엔드가 API 개발을 마쳐야만 프론트엔드가 실제 API를 바탕으로 화면을 만들 수 있다는 단점이 있습니다.이를 극복하기 위해, 현업에서도 많이 사용하는 Mock API 기법을 소개합니다.postman 활용,

https://velog.io/@solmii/React-Native에서-Plotly.js로-차트-만드는-이야기-3ie8b25m

무한스크롤을 구현하는 방법은 크게 두가지.스크롤 위치에 따라 구현하는 방법스크롤 위치 + throttle(or debounce) 사용먼저 스크롤의 위치를 감지해보자화면 전체의 높이 - (스크롤의 위치 높이 + 위에서부터 현재 화면의 높이)= 아래에 남은 높이아래에 남은

스크롤이벤트를 attachment하여 현재 스크롤위치를 계산해서맨 끝에 스크롤되었을 때 다음 데이터를 fetch하는 방법을 사용한다.스크롤마다 한번의 이벤트가 발생하므로(거의 픽셀단위) 성능이슈를 예방하기 위해 쓰로틀링 적용을 고려해야한다.스크롤방식처럼 1픽셀 1이벤트

최대 콘텐츠풀 페인트(LCP, Largest Contentful Paint)는 페이지의 메인 콘텐츠가 로드되었을 때 페이지 로드 타임라인에 해당 시점을 표시하므로 사용자가 감지하는 로드 속도를 측정할 수 있는 중요한 사용자 중심 메트릭입니다. LCP가 빠르면 사용자가

react v16.6 이후부터는 코드 스플리팅을 위한 내장 함수인 React.lazy와 Suspense 컴포넌트가 생겼습니다.그 전 버전에서는 import 함수를 통한 비동기 로딩을 하며, 클래스형 컴포넌트를 사용해야 합니다.우선 자바스크립트 함수를 비동기 로딩해보겠습

싱글페이지 어플리케이션에서 번들 사이즈가 커지면 로딩속도나 성능면에서 문제가 생길 수 있다. 코드 스플리팅은 이것들을 여러개의 번들로 나누거나 동적으로 import 하는 기법을 말한다.React가 자체적으로 제공하는 React.lazy나 React.suspense도 있

Express.js는 Node.js의 핵심 모듈인 http와 Connect 컴포넌트를 기반으로 하는 웹 프레임워크다.NodeJS의 웹프레임워크를 사용하면 간편하게 웹서버를 구축 할 수 있습니다.웹프레임워크 종류는 대표적으로 Express, Koa, Hapi 등이 있는데

npx eslint --initnpm i eslint -D

https://ichi.pro/ko/react-selectleul-sayonghamyeon-seontaeg-ganeunghan-menyuleul-swibge-mandeul-su-issseubnida-102933182537945

https://surprisecomputer.tistory.com/14

Network 정보 (ICE Candidate) 교환하기세상 어딘가에 있는 상대 peer 를 찾아 연결을 맺기 위해선, 네트워크 정보를 교환해야합니다. 이 때, 중간 매개자 역할로서 별도의 서버인 Signaling Server 가 필요합니다. 순서는 다음과 같습니다.s

STUN 서버stun 은 Session Traversal Uilities for NAT의 약자이다.NAT환경에서는 Private IP를 별도로 가지고 있기 때문에 Peer to Peer(이하 P2P) 통신이 불가능 하다. 따라서 클라이언트는 자신의 Public IP를

원래 React 프레임워크없이 TOAST UI View와 Editor를 적용했었다.해당 프로젝트를 하면서 React로 바꾸고 싶어서 코드를 싹 다 갈아엎고 있다.사실 CSS는 부트스트랩과 복사 붙여넣기가 있으니 빨리 적용 가능했지만 TOAST UI 라이브러리 적용하는

단순히 props로 받은 데이터를 onClick 이벤트가 발생했을 때 파라미터로 넘겨줄 생각이었다. 근데 뜬금없는 에러가 발생..셀렉터 클릭이벤트 발생시, 함수를 호출하여 해당 함수 내부에서 setState를 하게 되니 무한 리로딩이 발생하였다.해결방법화살표함수를 on

기본적으로 사용할 명령어https://flexboxfroggy.com/justify-contentflex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.center: 요소들을 컨테이너의 가운데로

react-router-dom v6에서는 useHistory();를 이용하여 다른 라우터에 접근하는것이 아닌, useNavigate()를 이용한다.문제는 redux middleware에서 페이지 넘기기를 시도하려고 할때 useCreateBrowserHistory를 co

항해99와 함께한 마지막 실전 프로젝트티밍 바로가기프로젝트에서 가장 신경쓰고 익히기 위해 애쓴 webRTC를 어떻게 이해하고 사용했는지 정리해보도록 하겠다.웹/앱에서 별다른 소프트웨어없이 카메라, 마이크 등을 사용해서 실시간 커뮤니케이션을 제공해주는 기술입니다.웹 상에

git log커밋 기록을 확인하고,git reset HEAD~4최근 4개의 커밋을 삭제하겠다.git push -f 로컬브랜치 원격브랜치원격의 커밋 내역도 업데이트 하겠다.

항해99 5기를 수료하였습니다. 수료하고 항해가 끝나도, 여전히 이력서 쓰랴, 포트폴리오 수정하랴, 코테준비하랴 바쁘게 지내는건 마찬가지네요 스스로 만족할 때까지 바쁘게 지낼 생각입니다. 각설하고 후기 시작하겠습니다. 1. 항해99 참여 계기 항해99에 참여하

FragmentDataMasking