Bleeding edge

프로젝트 피드백 리액트를 선택하였을 때 생기는 SEO에 대해 고민할 것 SSR이 아니더라도 SEO를 어떻게 챙길 것인가 Opengraph를 사용하자 sitemal xml 사용할 것 ⇒ 도메인을 넣으면 자동으로 sitemap을 생성하는 사이트가 있으니 사용하자 오픈소스를 번역해주는 플렛폼이 있으니 사용하자. components 자체의 수가 적으니, allWAIs에서의 component를 ‘패턴을 옮기는 방 법’에 대해서 잘 이야기하자 mdn 검색을 참조해서 만들자⇒ 검색을 depth별로 사용하자 ⇒ breadcrumb를 사용해서 표시하자 ⇒ 어떤 알고리즘을 적용할 것인가 발표는 의도, 기획한 것, 디자인, 기술 스택을 표현하면된다.

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에서의 라이프 사이클 상태의 변동을 인지하는것을 보장 받는 ..