본문 바로가기

리액트37

면접대비 질문 정리: 리액트(React.js) 면접질문 참고https://nomadcoders.co/community/thread/3979[diary] 프론트엔드 신입 면접 준비하기[면접준비] 프론트엔드 개발자 취업 면접 질문 및 답변 정리(64문)프론트엔드 면접질문 중요도별 정리[Frontend] 프론트엔드 주니어 개발자 면접 질문 (기술/인성) 1. 리액트란?✅ 답변UI를 구축하기 위한 자바스크립트 라이브러리입니다.프레임워크가 아니고 라이브러리라 다른 프레임워크에 간편하게 붙여서 사용가능합니다.SPA이며 component를 기반으로 하여 모듈형으로 ui를 구성합니다.컴포넌트 기반이라 생산성과 유지보수가 용이하며, virtual DOM으로 인해 앱의 효율성과 속도가 빠릅니다. 참고: https://manon-kim.tistory.com/entry/.. 2024. 4. 30.
리액트 공식문서 읽기 - 주요개념(State) State `state`: 리액트 컴포넌트에서 동적으로 변화하는 값을 관리하기 위해 사용되는 객체 State를 올바르게 사용하기 `setState()`: 컴포넌트의 state 객체에 대한 업데이트를 실행하는 함수. state가 변경되면 컴포넌트는 리렌더링 된다. setState()에 대해 알아야 할 것 1. 직접 State 수정 금지 //❌ this.state.comment = 'Hello'; //⭕ this.setState({comment: 'Hello'}); `setState()`를 이용해 state 값을 변경해야 한다. `this.state`는 constructor에서만 지정할 수 있다. 2. State 업데이트는 비동기적일 수 있다. React는 성능을 위해 `setState()` 호출을 단일 업.. 2024. 3. 19.
리액트 공식문서 읽기 - 주요개념(Lifecycle) Lifecycle const root = ReactDOM.createRoot( document.getElementById('root') ); function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); root.render(element); } setInterval(tick, 1000); 이전 섹션(엘리먼트 렌더링)에서 다루었던 시계 코드는 렌더링 된 출력값을 변경하기 위해 `root.render()`를 호출한다. 위 코드를 재사용 및 캡슐화 하면 아래와 같다. const root = ReactDOM.createRoot(document.getElementById("root")); function C.. 2024. 3. 18.
리액트 공식문서 읽기 - 주요개념(Components와 Props) Components와 Props 컴포넌트 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눌 수 있다. 개념적으로 컴포넌트는 JS 함수와 유사하다. 👉 `props`라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. //함수형 function Welcome(props) { return Hello, {props.name}; } //클래스형 class Welcome extends React.Component{ render(){ return Hello, {this.props.name} } } 👉 객체 인자를 받은 후 React 엘리먼트를 반환하는 유효한 React 컴포넌트 컴포넌트 렌더링 React는 사용자 정의 컴포넌트로 작성한 엘리먼트를 발.. 2024. 3. 18.
리액트 공식문서 읽기 - 주요개념(엘리먼트 렌더링) 엘리먼트 렌더링 엘리먼트 (!== 컴포넌트) React 앱의 가장 작은 단위, 리액트 앱을 구성하는 요소 화면에 표시할 내용을 기술한다. const element = Hello, world!; 브라우저 DOM 엘리먼트(브라우저 환경에서 웹 페이지의 구성요소를 나타내는 특수 객체)와 달리 React 엘리먼트는 일반 객체(plain Object)이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다. DOM에 엘리먼트 렌더링하기 루트(root) DOM 노드: root 안에 들어가는 모든 엘리먼트는 React DOM에서 관리한다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 존재한다. React 엘리먼트를 렌더링하기 위해서는 우선 DOM.. 2024. 3. 18.
리액트 공식문서 읽기 - 주요개념(Hello World, JSX 소개) Hello World 가장 단순한 React 예시 JS(Babel) const root = ReactDOM.createRoot(document.getElementById('root')); root.render(Hello, world!); html JSX 소개 React의 특성 렌더링 로직이 UI로직(이벤트 처리 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들임. 별도의 파일에 마크업과 로직을 넣어 기술을 분리하는 대신, 둘 다 포함하는 `컴포넌트`라는 느슨하게 연결된 유닛으로 관심사를 분리한다. JSX가 필수는 아니다. JSX cost element = Hello, world!; JavaScript를 확장한 문법 js 코드 내에서.. 2024. 3. 18.
[React] 포트폴리오 웹 사이트 제작 일지-11. 프로젝트 이미지 슬라이더 수정(캐러셀 슬라이드), 프로젝트 완성 [React] 포트폴리오 웹 사이트 제작 일지-10. 프로젝트 슬라이더 만들기 및 반응형 웹으로 디자인 프로젝트 슬라이더 만들기 우선, project 컴포넌트 내부에 html로 작성해 두었던 프로젝트 내용들을 객체 배열 형태로 정리해서 projectItems라는 이름으로 따로 저장했다. export const projectItems = [ { title florescene.tistory.com 이전 포스팅에서 제작한 프로젝트 슬라이더를 실제 휴대폰에서 확인해 보니 사용감이 좋지 않았다. 화면의 제약 때문에 잘리는 내용을 보여주기 위해 스크롤을 달았는데, 스크롤 과정에서 프로젝트를 모두 보여주지 못하고 다음 컴포넌트로 넘어가는 일이 잦아서 결국 프로젝트 슬라이더는 제거해 버렸다. 대신 프로젝트에 들어갈 이.. 2024. 1. 9.
[React] 포트폴리오 웹 사이트 제작 일지-10. 프로젝트 슬라이더 만들기 및 반응형 웹으로 디자인 수정 프로젝트 슬라이더 만들기 우선, project 컴포넌트 내부에 html로 작성해 두었던 프로젝트 내용들을 객체 배열 형태로 정리해서 projectItems라는 이름으로 따로 저장했다. export const projectItems = [ { title: "🌓Dream note", category: "개인 프로젝트", imageUrl: ``, githubLink: "", deployLink: "", description: "", features: "", retrospective: "", techStack: "", }, { title: "⏰Stop Watch", category: "개인 프로젝트", imageUrl: ``, githubLink: "", deployLink: "", description: "".. 2024. 1. 6.
[React] 포트폴리오 웹 사이트 제작 일지-9. 스크롤 애니메이션 효과 추가 현재 포트폴리오에도 필요한 내용은 전부 들어가 있지만, 어딘지 밋밋해 보여서 스크롤을 내리면 컴포넌트 내용이 나타나는 애니메이션을 추가하기로 했다. 전체 컴포넌트를 관리하고 있는 App.js 파일에서 작업을 진행했다. ✨ 화면에 보이는 컴포넌트들의 state 정의 App.js const [visibleSections, setVisibleSections] = useState([]); 스크롤을 하면 App 내부에 import 된 컴포넌트가 하나씩 화면에 나타나야 한다. visibleSections는 '화면에 보이는 컴포넌트'들의 id를 저장하는 배열이다. 컴포넌트가 보여야 할 때 visibleSections에 컴포넌트 id를 넣어주어 화면에 컴포넌트를 띄워주도록 했다. ✨ useEffect Hook을 이용한.. 2024. 1. 2.
[React] 포트폴리오 웹 사이트 제작 일지-8. 스타일링 수정, 포트폴리오 깃허브 배포 우테코 과제와 싸피 코딩테스트까지 모두 마친 뒤 다시 자기소개 페이지를 제작하고 있다. 한 달 조금 지난 기간 동안이지만, 기존에 작성된 코드를 보니 굉장히 낯설다... 기존 계획은 포트폴리오 시작 페이지에서 내 정보를 보여주는 About 페이지만 스크롤 이동하고 나머지는 탭으로 이동시키려고 했는데, 기존 사이트도 가독성이 나쁘지 않아서 기존 페이지 CSS 스타일링을 조금 더 수정하는 걸로 계획을 변경했다. 🎑 포트폴리오 CSS 수정 기존 페이지에서 상단 헤더를 통해 해당하는 페이지로 이동했을 때, 상단이 잘리는 문제가 있었다. 해결) 이 부분은 아주 간단하게, 페이지의 내용을 감싸는 div의 상하단 패딩을 조금 더 늘렸더니 해결되었다. 수정할 사항이 몇 가지 남아 있기는 하지만 css나 내용을 조금만 .. 2023. 11. 25.
[React] 포트폴리오 웹 사이트 제작 일지-7. 전체 스타일링 수정, 디자인 변경 스타일링 진행하다 보니 겹치는 스타일이 많아서 겹치는 부분은 한꺼번에 관리하여 전체적인 통일성을 유지하기로 했다. 내가 사용하고 있는 기본 css 스타일링은 import한 스타일 시트 이외에 프로젝트 내 구현된 다른 css 파일도 참조한다. (따라서 동일한 클래스 네임을 가지고 있다면, CSS 클래스가 중첩어 예상과 다른 동작을 하기도 한다. 이러한 문제점을 해결하기 위해 css module, sass 라이브러리 , emotion 라이브러리, styled-components 라이브러리 등을 사용한다.) 따라서 나는 가장 최상위 컴포넌트인 App.css 내부에 공통 스타일링을 작성해 코드 중복을 줄이고 전체 스타일링에 통일성을 주었다. App.css /* 전역 스타일링 */ h1 { margin: 0; f.. 2023. 10. 15.
[React] 포트폴리오 웹 사이트 제작 일지-6. 최상단 이동버튼, Tech Skill 기술스택 추가, Portfollio 내용 추가 최상단 이동버튼 구현 이미 포트폴리오 상단 메뉴바의 'Portfolio'를 누르면 최상단으로 이동이 가능하지만, 오른쪽 하단부에 최상단으로 이동이 가능한 버튼 하나를 추가하기로 했다. 아이콘은 아래 사이트를 이용했다. https://icons8.kr/ 무료 아이콘, 클립아트, 사진 및 음악 icons8.kr 더블 업 icon by Icons8 사이트 내부에 위 링크를 추가해서 출처를 밝히면 무료로 아이콘을 사용할 수 있다. 버튼은 간단하게 구현하고 이전에 만들어 두었던 moveToHomeHandler 함수를 연결해 주었다. App.js ... function App() { ... return ( ... ); } export default App; TopButton.js import "./TopButton.. 2023. 10. 14.
반응형

티스토리툴바