React & React Native (16) 썸네일형 리스트형 15가지 리액트 프론트엔드 인터뷰 대비 질문과 답변 15 React Interview Questions with Solutions - SitePoint Prepare for React interview questions that are key to understanding and working effectively with React, with additional links for further learning. www.sitepoint.com 본문은 위의 블로그 글을 발췌, 번역하였습니다. 15 React Interview Questions with Solutions 전 세계에서는 개발자에 대한 수요가 공급을 앞지르고 있으며, 리액트의 인기는 사그라들 기미가 보이지 않습니다. 경험이 적은 개발자(또는 일정 기간 취업시장에서 멀어져 있던 개발자)에게는 면.. 8가지 React 프론트엔드 디벨로퍼 인터뷰를 위한 QnA 8 React Front-End Developer Interview Questions (With Answers) | Kambu Front End Developer is a very coveted role in IT. We share eight of our preferred React Front End developer interview questions and answers. www.kambu.pl 상단의 블로그에서 발췌하여 번역한 글입니다. 프론트엔드 디벨로퍼는 회사에서 매우 중요한 역할을 맡고 있고 그렇기 때문에 기술적으로 앞서 있어야하며 최신 트렌드에 민감해야 합니다. 지원자들의 이해하기 위해 우리는 몇가지 특정 질문들을 뽑아 보았고, 이 블로그에서 프론트엔드 디벨로퍼의 인터뷰 질문과 그 대답들을 .. REST api를 이용한 리액트 로그인 구현 소프트웨어 설치 Node.js NPM 리액트 앱 만들기 먼저 create-react-app을 실행하여 새로운 리액트 프로젝트를 시작해준다. npx create-react-app frontend 생성한 폴더로 접근한다. cd frontend 패키지추가하기 (yarn 또는 npm) Material UI react-router-dom Sweetalert npm i @material-ui/core @material-ui/icons react-router-dom sweetalert 예제에서는 로그인에서 프로필 화면으로 전환되도록 라우터를 걸어주고 있다. 더보기 ReactJS: REST API를 통해 로그인 및 프로파일 페이지 만들기 ReactJS : REST API 를 통해 로그인 LOGIN 및 프로파일 PROF.. 리액트 개발자라면 알아야한 15가지 커스텀 훅스 (번역) 본 글은 Nilanth의 '리액트 컴포넌트를 가볍게 하기위한 15가지 커스텀 훅스'를 번역한 내용입니다. 출처 ▼ 더보기 https://javascript.plainenglish.io/15-custom-hooks-to-make-your-react-component-lightweight-8b59b122d83a 15 Custom Hooks to Make your React Component Lightweight Here are the 15 custom hooks to make your React component lightweight javascript.plainenglish.io 리액트 훅스는 리액트 커뮤니티에서 트렌딩되고있는 단어입니다. 리액트 훅스에 대해서 리액트 디벨로퍼라면 알았으면 좋겠습니다. 간단.. JavaScript 문자열 반으로 나누기 && 특정 문자 포함시 들여쓰기 (\n) Math.ceil로 자바스크립트 문자열 나누기를 구현한다. Math.ceil로 _text.length / 2 값을 올려준 뒤 middle 함수에 저장해서 구할 수 있다. 문자열을 나눌 때, 이등분이 아닌 특정 문자를 찾아 들여쓰기 할 수 있다. 간단 생활코딩 - Redux ♑️ 시작하기전에 리액트 클론 코딩을 진행하면서 Redux에 대한 개념이 희미하게 잡혔다고 생각하는데 이고잉님 수업을 들으면서 다시 한 번 짚어가보자. Redux Single Source of Truth "하나의 상태"를 갖는다. How? 인가된 사용자만이 (dispatch, useReducer)를 통해서 데이터를 보낼 수 있다. getState를 통해서 데이터를 가져갈 수 있다. 리덕스를 쓰면, 상태 관리를 컴포넌트 바깥에서 한다! 스토어 설정 리덕스를 프로젝트에서 적용하면 스토어라는 녀석이 생겨 스토어 안에는 프로젝트의 상태에 관한 데이터들이 담겨 있다. 컴포넌트의 스토어 구독 컴포넌트 하나가 스토어에 구독을 합니다. 구독을 하는 과정에서, 특정 함수가 스토어한테 전달이 됩니다. 그리고 나중에 스토어.. 웹 게임을 만들며 배우는 React 틱택토 & 지뢰찾기 틱택토 리덕스의 핵심인 useReducer 리덕스의 대부가 리액트 팀에 합류를 하면서 많은 개념을 가져왔다. 하지만 소규모 앱에서는 리덕스 라이브러리 대신 useReducer와 contextAPI를 쓸 수 있지만, 큰 규모의 비동기 작업에는 리덕스를 쓰는 것이 효율적이다. ※ 승자가 나올수 없는 게임 틱택토 Structure TicTacToe.jsx → Table → tr → td (state는 틱택토에서, 클릭하는 건 td에서 관리한다.) state가 많아질수록 관리가 힘들어지기 때문에 useReducer를 쓴다. reducer, action, dispatch의 관계 state안에 데이터가 있다면 직접 수정 불가능하다. 수정시 action을 만들어서 수정 action을 만든 후 dispatch에 하면 .. 템플릿 리터럴 Template Literal과 조건문 함수 리액트에서 컴포넌트화시키듯 jQuery에서도 템플릿 리터럴을 활용해볼수있다. {템플릿 리터럴을 활용한 간단한 예제} let price = 8.99, tax = 0.1; var netPrice = `Net Price:$${(price * (1 + tax)).toFixed(2)}`; console.log(netPrice); // netPrice:$9.89 만약 템플릿 리터럴에서 함수를 쓰고 싶다면 아래와 같이 myFunction안에서 변수 fixTitle을 선언, title: function()안에서 조건문으로 두가지 다른 값을 return 해줄 수 있다. 결과 title >= 7자가 넘어갈 시, 문자를 7자리수까지 표현해주고 나머지는 '...'로 처리 title 이전 1 2 다음
