Bleeding edge

Git actions 트러블 슈팅 1. missing script:make npm missing script: make 해결 : package.json에 scripts에 make가 포함은 되어있었다. "scripts": { "start": "electron-forge start", "package": "electron-forge package", "make": "electron-forge make", "publish": "electron-forge publish", "lint": "echo \\"No linting configured\\"" }, scripts에서 직접 사용할 수 없어서, build.yml build_on_mac: //MAC, WIN, LINUX모두 runs-on: macos-latest..

DevOps = Development + operations 개발과 운영의 함성어 Dev : Plan - Code - Build - Test Ops : Release - Deploy - Operate - Monitor Cross Functional Team : 개발과 운영을 한팀으로 묶어 프로세스의 자동, 단일화 CI/CD Tool 이용하여 Build, Test, Deploy 자동화 장점 커뮤니케이션 리소스 개선 개발, 배포 속도가 빨라짐 프로세스 간소화 짧은 릴리즈 주기 CI/CD Continuous Integration Build ⇒ Test ⇒ Merge Continuous Delivery Automatically Release to Repository Continuous Development Au..

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

주의 : 이 글은, 유튜브 1일 2승건을 하게 된 이야기가 있지만, 토스 플레이스를 도전한 이유에 대한 내용이 더 많습니다. 토스와의 만남 두세달전에 토스 개발자 챌린지에서 떨어진 이후에, 친구의 형이 토스 대규모 채용이 있다구, 다시 한번 써보라는 추천을 들었다. 이전에는 토스에서는 송금이나, 증권과 같은 것만 하고 있다고 알고 있었는데, 토스 플레이스와 같이 자영업자와 소비자의 불편함을 없애주는 회사도 운영하고 있다는 것을 알게 되었다. 토스 플레이스에서는 평소에 내가 관심이 많았던 POS기와, 결제에 관련된 것 들을 다루고 있었다. 웹을 만드는 프론트 엔드를 준비하고 있었지만, 평소에 데스크탑 앱이나, 다른 소프트 웨어의 프론트 엔드에도 관심이 있었고, electron으로 개발한 경험을 한 사람에 ..

라우터 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..