개발일지

기존의 devextream에서 mui로 변경하게 되어 mui설치 후 작업을 진행하게 되었다. mui설치 중 갑자기 오류가 떴다 패키지 설치에서부터 오류가 뜬 적이 없어서 잠시 당황했다 스토리북과 무언가 충돌이 난다는 내용이 있었다 알아볼 수 있는 것 error dependency conflick --force나 --legacy-peer-deps 이거 함 사용해봐라 일단 오류 해결이 급선무이니 냅다 써보란 거 써본다 ! npm install --force @mui/material @emotion/react @emotion/styled 해결! 나중에 알았지만 이 오류가 자주 뜰 수 있다고 하셔서 간단하게 --force 와 --legacy-peer-deps의 차이에 대해서 알아두려고 한다 21년2월에 npm7..

24년이 되어 다시 취업에 박차를 가해보자 하는 마음으로 스터디 등을 알아보다가 항해에서 취업캠프를 모집하는 것을 보게 되었다. 원래 없던 캠프여서 커리큘럼을 꼼꼼히 살펴보고 들어갔다.  왜 항해 취업 리부트 코스를 선택했는가?- 취약하던 알고리즘 공부를 할 수 있었고 개인프로젝트로 프로젝트에 대한 이해도를 높이고자 선택했다. 나는 이전에 어떻게 / 얼마나 개발을 공부했는가?- 22년도 10월에 항해99를 수료하고 1년 조금 넘게 개발을 공부하고 있다. 하지만 혼자서 하는 스터디가 한계가 있어서 23년도 후반부터 팀 스터디를 시작했고 24년도에 취업캠프를 진행해서 상세한 커리큘럼대로 성장하고 싶어서 취업캠프를 진행하게 되었다.  항해99 취업 리부트 코스에서 경험한 개발자 프로젝트는 어땠나요?일단 개인 ..

VanillaJS와 비교하여 React를 사용하는 이유는 무엇일까? React의 컴포넌트를 손쉽게 재사용할 수 있습니다 React는 별도의 컴포넌트를 만드는 용도로 쓰입니다. 이렇게 생성된 컴포넌트는 쉽게 재사용할 수 있습니다. (상위 컴포넌트로 래핑되는) 이러한 컴포넌트로 더 큰 일반적인 계층 구조가 구축되지만, 각 컴포넌트에는 각각 별도의 전용 내부 로직과 렌더링 원칙이 있습니다. 이를 바탕으로 확장성이 뛰어나고, 훨씬 더 나은 React 웹 앱 일관성을 달성할 수 있으며, 추가 개발 지원 및 최적화가 매우 쉬워집니다. React는 Virtual DOM으로 훨씬 더 강화된 성능을 냅니다 React는 실제 DOM을 가상화하여 메모리에 보관함으로써 React는 모든 뷰 변경 사항을 가상 DOM에 반영하여..

1. 선언 방식 class 먼저 클래스의 경우에는 React에서 제공하는 Component라는 클래스를 import해와서 만들 수 있습니다. import { Component } from 'react'; class Greeting extends Component { render() { return Hello, {this.props.name}!; } } function 함수형의 경우에는 이름의 첫 글자가 대문자로 시작하는 JavaScript 함수 형태로 선언된 컴포넌트입니다. export default function Greeting() { return ( Hello, world!; ) } 2. state 차이 class 클래스 컴포넌트에서는 constructor 안에서 직접 state object를 만들..

버블링 ( bubbling ) 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 한 요소에 이벤트가 발생하면 그 부모 요소의 이벤트도 같이 발생되는 이벤트 전파입니다. EM을 클릭했는데도 DIV에 할당한 핸들러가 동작합니다. 여기서 핸들러는 에 할당되어 있지만 이나 같은 중첩 태그를 클릭해도 동작합니다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문에 이런 흐름을 '이벤트 버블링' 이라고 부릅니다. "거의" 모든 이벤트는 버블링 됩니다. ! focus 이벤트..

리액트( React )의 Class Component 에도 라이프사이클이 존재합니다. 라이프사이클 메서드는 총 9가지입니다. Will 접두사가 붙으면 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙으면 어떤 작업을 작동한 후에 실행되는 메서드 그리고 라이프사이클은 총 3가지 종류로 나누어집니다. 1. 마운트 ( Mount ) : 페이지에 컴포넌트가 나타남 2. 업데이트 ( Update ) : 컴포넌트 정보를 업데이트 ( 리렌더링 ) 3. 언마운트 ( Unmount ) : 페이지에서 컴포넌트가 사라짐 마운트 DOM이 생성되고 웹 브라우저 상에 나타나는 것을 마운트라고 합니다. 이 때 호출되는 메서드들은 다음과 같습니다. constructor 메서드 : 컴포넌트를 새로 만들 때마다 호출되는 클..