Bleeding edge

Redux 컨셉 Predictable Centralized Debuggable Flexible Flux - store 상태 ,상태변경 로직 포함 개발 중 상ㅌ ㅐ변경이 수정되면 상태가 초기화됨 Redux- Store 상태만 관리, 디스패처 기능 탑재 상태가 유지됨 Redux-Reducer 상태변경 로직 관리 함수 개발 중 상태 변경 로직 수정 reducers는 동기처리 extraReducers는 비동기처리가 가능하다.

라우터 CSR 장점 : 서버측 렌더링보다 훨씬 빠르다. 그에 따라 사용자 경험이 크게 향상됩니다 단점 : 검색 엔진이 이를 인식하지 못할 경우 웹사이트가 검색에 잘 노출되지 않은 문제를 보일 수 있따. 앱 모듈 최적화가 안된 경우, 첫 페이지 방문 시 늦게 표시될 수 있다. SSR 장점 : 훨씬 더 많은 트래픽을 유도하고 검색 순위에도 잘노출되고 첫로딩이 생성된 HTML 코드를 포함한 파일이 전송되므로 CSR보다 빠릅니다. 단점 : 다른 페이지를 탐색하는 사용자 경험은 CSR 보다 느립니다. 모든 사용자의 호라동 정보를 서버에서 관리 해야 해 서버의 부담이 더 큽니다. 높은 수요가 발생할 경우 큰비용이 발생합니다. React Router react-router-dom하나만 설치해도 되지만 종종 vs co..

면접 피드백 질문에 대한 간단한 답변부터 하자⇒먼저 목록을 생각하고 이야기하자 ⇒마크다운 하듯이 대답을 하자 창업을 한 것을 숨기지 말 것 ⇒창업을 하면서, 만드는 것에 너무 메몰되지말고, 고객의 눈에서 고객을 원하는 것을 맞춰줘야 성공한다는 것을 알게 되었다. 와 같은 것을 생각하자 내가 과거에 한 것 중에 쓸모 없는 것은 없다. 긍정적인 포인트를 잃어버리지말자. 이력서에서 전공자인지를 볼 수 있지만, 조직에서 일해본 경험을 중요시 할 수 있으니 이를 어필을 잘할 것. 경력자로써 매력을 면접장에서 보여줄 것 본인에게 자신감이 없는데 면접관이 나를 왜 뽑아야하는지, 스스로 무엇을 하였는지 잘 정리할 것 이력서 피드백 이력서의 음역 때문에 더 안읽힐 수 있다 정성적인 생각 말고 정량적인 데이터도 넣자 ⇒정..

Hook 사용법 1. useInsertionEffect useInsertionEffect같은 경우에는 css-in-js libarary에서 성능을 개선할수 있다. 2. useRef useRef를 사용하는 경우 문서 객체 접근/조작에사용 렌더링없이 변경된 값을 기억할 때 const ref = useRef(null) //memory value //클래스 컴포넌트의 인스턴스 맴버처럼 //함수 컴포넌트 내에서 특정 값을 기억하되 //값을 변경해도 컴포넌트 렌더링을 영향을 주지않아야 할 경우에 사용한다 이전 props와 현재 props를 비교할 목적으로 useRef 훅을 사용할 수도 있다 withTheme과 useTheme 차이 withTheme 은 class에서 사용하고 useTheme은 function에서 사..

useLayoutEffect ? getSnapshotBeforeUpdate와 비슷한 역활로 useLayoutEffect 이후에 useEffect 순으로 일어나며, 렌더가 일어나기 전에 이벤트가 발생한다 The default value of useState useState는 primitive 값을 이용하는 것이 좋다. 물론, 객체 상태를 이용 못하는 것은 아니다. 만일, 객체 상태의 값을 이용한다. 합성 형태를 다음과 같이 이용하는 것이 좋다 setState({...state, newState}) useEffect useEffect를 이용하여 상태의 변동을 인지하는 것으로 실행을 보장받을 수 있다. class React와 function React에서의 라이프 사이클 상태의 변동을 인지하는것을 보장 받는 ..

What is Story Story는 컴포넌트가 UI에 렌더링 된 상태를 캡처하고, 인자(args)가 주어지면 컴포넌트 상태를 반환하는 함수입니다. Story Process Story는 컴포넌트 파일이 위치한 디렉토리 안에 작성합니다. 이 파일은 개발용이며 프로덕션 번들에는 포함되지 않습니다. Story를 구성할 컴포넌트를 작성한 후, 컴포넌트 파일과 같은 위치에 Story 파일을 추가합니다. Editable Config title Storybook 사이드 바에 표시되는 컴포넌트 이름 component Story를 작성할 컴포넌트 작성 args 모든 Story에 공통 적용할 전달 인자 설정 argTypes 각 Story 인자의 행동 방식 설정 decorators Story를 감싸는 렌더링 함수 param..

onText, onBackground, onCircle 리액트에서는 on과 관련된 접두사 같은 경우 이벤트핸들러와 자주 사용되기 때문에 on을 시작하는 단어로 props를 사용하는 경우에는 에러를 만날 수 있다. on으로 시작하는 props는 이벤트만 사용하자 파일 경로 찾기 import를 사용할 때 “./filename.jsx”대신에 “./filename”과 같이 사용하고 싶은 경우, module: { rules: [ { test: /\\.(js)|(jsx)|(json)$/, resolve:{ fullySpecified:false, } }, ] }, commonJS를 사용하지 않는 한, fullySpecified: false를 사용해야한다. ESBuild에서 react 주입하기 리액트 18버전 같은 경..

직무 전문성 이 직무에 관심을 갖게된 계기 직무를 위해준비와 노력한 것 그것을 통해 어떤 핵심역량을 갖게 됬는가 어떤 사람이 되고자 하는지 왜 그 회사에 가고 싶은가 어떤 일을 하고 싶고 기여할 수 있는지 포트폴리오 직무 능력 평가 근거 포폴에 담을 내용 직무와의 연관성 대회 공모전 프로젝트 논문 코드기여 작성 툴 pdf, 노션, 깃허브 프로젝트 작성법 프로젝트 개요 프로젝트명 프로젝트 정의 기간, 인원, 주요스킬 기획의도 목적 목표 기대 효과 담당 역활 결과 및 성과 기여한점 문제 정의 및 해결 방안 문제 정의 문제 발생 배경 고민 해결방안 결과 배운점 개선안 활용방안 이력서 작성의 핵심 가독성 보기 쉽게 읽기 쉽게 들여쓰기 폰트크기 이모티콘 직무 연관성 핵심영량/강점 위주로 작성 중요도 순서로 배치 ..

1. UI를 컴포넌트 트리로 구성하기 컴포넌트 설계는 단한가지만을 책임을 져야한다. 한가지 이상의 처리가 필요하면 더 작은 컴포넌트로 구분해야한다. 2. react 앱 정적 빌드 데이터 모델에서 UI를 렌더링 하도록 작성해야 합니다. 데이터 모델은 정적 빌드를 하기 위해서는 컴포넌트를 재사용하고 props를 사용해 데이터를 전달하는 컴포넌트를 만들어야 합니다. 3. UI 데이터 UI와 사용자가 대화를 할 때는 state를 사용한다. state는 앱이 기억하고 변경해야 할 데이터의 최소 집합입니다. 이때 state는 중복 없이 최소로 표현하는 것이 가장 중요합니다. 4. 앱 상태관리 state의 데이터는 최소로 식별하고 변경을 해야하며, 단방향 흐름을 사용해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달..