728x90 Frontend28 VS Code Snippet만들기 자꾸 까먹어서 기록하는 포스팅 개발을 계속 진행하다보면 똑같은 코드를 작성해야 될 일이 많은데 이 귀찮음을 코드 snippet으로 해결 할 수 있다!! Visual Code로 들어가서 file -> preferences -> user snippets react를 입력하면 이렇게 자바스크립트 리액트가 뚜둥 작성을 했는데 react 프로젝트에서 호출이 안되네...; 자바스크립트라 그런가? 다시 javascript.json 파일에 추가! TM_FILENAME_BASE 는 파일이름을 확장자명 빼고 붙여주는 내장 변수! 잘나온다!! snippet을 잘 사용해서 생산성을 높여봅시다~ 더 자세한 사항은 공식 홈페이지 참고!! https://code.visualstudio.com/docs/editor/userdefin.. 2022. 11. 11. 웹 페이지 성능 확인하기 - Lighthouse 웹페이지 전반의 개발이 끝난 지점에서 웹페이지 성능을 좀 확인해보고 싶어서 lighthouse로 확인해보려고 한다. pingdom 도 써보긴했는데 아무래도 구글에서 하는게 믿음직스럽달까.. 사용하기도 편한편 lighthouse는 크롬 익스텐션으로 크롬에 다운로드해서 사용이 가능하다 https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=en add to chrome으로 크롬에 설치 해주면 개발자탭에 lighthouse가 추가된 것을 알 수 있다. Analyze page를 desktop으로 지정하고 해주고 조금만 기다리면 끝 첫 테스트로 구글을 해본건데..ㅋㅋㅋ 좋겠네^^ 테스트 서버의 메인페이지인데 생.. 2022. 11. 5. 리액트 - immer immer: 불변성을 해치는 코드를 작성해도 대신 불변성을 유지해줌 immer library 설치가 필요함 필수라이브러리는 아니기때문에 적재적소에 사용하는 것이 중요하다. 무작정 사용하면 안됨 update 로직이 까다로운 경우에 사용하는 것이 좋음 간단한 경우에는 크게 의미가 없다. produce(바꾸고 싶은객체, 어떻게 바꿀지 알려주는 함수) import produce from 'immer' window.produce = produce const state = { number :1, dontChangeMe : 2 } const nextState = produce(state, draft =>{ draft.number = 2; } //불변성을 지키지 않으면서 변경해도 produce가 값을 지켜줌 //배열도.. 2022. 11. 3. nuxt3(rc v.12) upstream sent too big header while reading response header from upstream 에러 해결 nuxt3 진짜..가만 안둔다……ㅠ nuxt rc..로 개발하자고 한사람..진짜 가만안둬 rc 버전이 아무리 높아도 아닌것 같다.. rc 12 버전 배포 하는데 갑자기 nginx에서 502 에러가 딱!^^; nginx 로그 확인해보니 upstream sent too big header while reading response header from upstream 이래서 구글링 해보니 사용자가 많아 버퍼가 모자르니 버퍼를 늘려주면 된대서 버퍼를 일단 늘려줌!! 사용자가 그렇게 많진 않지만 뭐 일단 늘려보자 server { proxy_busy_buffers_size 512k; proxy_buffers 4 512k; proxy_buffer_size 256k; # rest of the nginx config b.. 2022. 10. 30. Nuxt3 - custom router 추가하기 개발을 진행하다 동일 페이지인데 path 만 다른 페이지를 만들일이 있었다. nuxt는 pages에 vue 파일을 만들면 자동으로 라우터를 생성해준다. 굉장히 편한기능이 아닐 수 없다. 하지만 동일한 페이지인데 pages에 단순히 라우터 생성을 위해 같은 파일을 복붙 할 순 없었다. 구글링하면서 생각해보니 예전에 vue 라우터 개발시에 alias로 비슷한 개발을 진행했던것이 기억이나 alias로 선언하면 될 줄 알았다. 하지만 개발을 진행해야되는 계속해서 워닝이 발생하여 라우팅이 되지 않았다. Alias should have the exact same param named 개발을 진행해야되는 라우터의 경우 파라미터가 다른데..!!!어떻게 처리해야될까 싶어 계속 서치하다 localization 작업시에 커.. 2022. 10. 28. 리액트 - Custom Hook Custom Hook 코드를 작성하다 보면 반복되는 로직을 재사용 해야하는 상황에서 custom hook 을 만들어서 관리 할 수 있다 input 값을 작성하는 경우에 여러 폼에서 그 로직이 반복될 수 있기 때문에 해당 커스텀 훅을 만들어서 사용 - 주로 input 값 작성, fetch 호출 시에 자주 사용된다 - 항상 use로 시작해야한다. //custom hook function useInputs(initialForm){//initialForm : form에서 사용할 초기값 const [ form, setForm] = useState(initialForm); const onChange = useCallback(e =>{ const {name, value} = e.target; setForm(form .. 2022. 10. 24. 이전 1 2 3 4 5 다음 728x90 반응형
