분류 전체보기 (81) 썸네일형 리스트형 GCP 배포 갑자기 안되는 현상 해결, GOOGLE_NODE_RUN_SCRIPTS 추가 GCP 환경설정 부분 코드 건들지도 않았는데, 잘되던 배포가 갑자기 안되기 시작했다. 에러 로그에서 NODE_ENV를 인식하지 못하고 자꾸 배포에 실패했다는데.. Running the default build script can be skipped by passing the empty environment variable `GOOGLE_NODE_RUN_SCRIPTS=` to the build. 알고보니 4월 11일 (2023년)에 업데이트가 있었다. 환경변수 설정파일에 빈값의 GOOGLE_NODE_RUN_SCRIPTS 변수를 추가해주면 된다. 아니면 package.json에서 gcp-build 스크립트를 추가해도 된다. https://cloud.google.com/docs/buildpacks/nodejs.. FE 개발 https://tech.kakao.com/2021/09/29/mocking-fe/ Mocking으로 생산성까지 챙기는 FE 개발 안녕하세요, 카카오엔터프라이즈 검색플랫폼프론트파트의 Lawrence.net입니다. 프론트엔드 개발 업무의 효율성을 높이기 위한 방법의 하나로 고민해 본 Mocking에 대해 설명하고 이를 적용했던 사례 tech.kakao.com node 버전 active와 Installed 버전 다를때 ln -sf installed경로 active경로 React Hooks : useMemo(), useCallback() 불필요한 재랜더링 줄이기 useMemo() 메모이제이션된 값을 반환한다. 더보기 💡 메모이제이션이란? 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장하고, 동일한 계산 반복 수행을 제거한다. 함수, 의존성 값의 배열 의존성이 변경되었을 때만 메모이제이션 된 값만 다시 계산한다. useMemo로 전달된 함수는 랜더링 중에 실행된다. (통상적으로 렌더링 중에 하지 않는 것을 함수에서 하지 않는다.) useCallback() 메모이제이션된 콜백을 반환한다. 콜백의 메모이제이션된 버전을 반환한다. 메모이제이션된 버전은 그 의존성 배열이 변경되었을 때만 변경된다. find() Method find() 주어진 판별 함수를 만족하는 첫번째 요소의 값을 반환한다. 조건에 맞는 요소가 없을 경우 undefined를 반환한다. const test = ['a', 'ebdd', 'dfwe', 'df', 'as', 'eeee', 'dd'] const found = test.find(el => el.length === 2) found 'df' map과 forEach의 차이? Map 메모리를 할당하고, return 값을 저장한다. 값을 기존의 배열을 가지고 새로운 배열을 생성한다. 대신 기존의 배열의 값은 바뀌지 않는다. 새로운 배열을 변수에 담을 수 있다. forEach() 배열의 요소를 한번씩 실행한다. 새로운 배열을 리턴하는 map과 달리 항상 undefiend를 리턴한다. https://www.freecodecamp.org/news/4-main-differences-between-foreach-and-map/ The Differences Between forEach() and map() that Every Developer Should Know JavaScript has some handy methods which help us iterate through our ar.. 텍스트 드래그 막기 클릭할때 자꾸 드래그되는게 싫어서... user-select: none; ES6 특징, 변수들 정리 및 요약 var -> 함수 단위의 scope, 호이스팅 문제 발생 선언전에 undefined 로 초기화 코드의 유지보수를 위해 호이스팅문제 발생하지 않도록 코드를 짜야한다. 함수표현식은 호이스팅 문제가 없음. 함수선언식에서 호이스팅 문제 발생 scope? 변수가 영향을 끼치는 범위 https://medium.com/@khwsc1/%EB%B2%88%EC%97%AD-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%EC%BD%94%ED%94%84%EC%99%80-%ED%81%B4%EB%A1%9C%EC%A0%80-javascript-scope-and-closures-8d402c976d19 [번역] 자바스크립트 스코프와 클로저(JavaScript Scop.. SSR, CSR 서버사이드 랜더링의 기초 구글에 사용자가 접속한다고 하다. 주소를 치고 들어간다. (서버에서 요청을함) 요청받은 서버는 응답하고 브라우저가 랜더링된 화면을 우리에게 보여준다. (보통의 화면) 그러나 이 과정에서 사실 서버에서 html을 받아오는데, 그걸 브라우저가 랜더링 해주는 것이다. CSR 장점 페이지이동이 속도 좋다. 단점 처음 자바스크립트 파일을 다 불러오기 때문에 초기로딩이 느리다. 페이지 캐싱이 잘안된다. 검색엔진 최적화가 잘 안됨. (처음 요청시 blank페이지가 나오기 때문에) SPA 리액트, 뷰, 앵귤러가 대표적이다. 두가지의 장점을 섞을순 없을까? -> Isomorphic App Next.js 서버사이드 랜더링을 리액트로 가능 (코드는 react, 서버에서는 html를 내어준다) Ssg.. server-json 포함시켜 헤로쿠앱으로 리액트 프로젝트 배포하기 db처럼 사용 하는 db.json 파일을 server-json 라이브러리를 통해 작업하였다. 배포까지 하려면 이 가상의 db도 완벽하게 작동을 시킬수 있어야했다. 헤로쿠앱을 통한 배포가 이를 해결해 주었다. https://devcenter.heroku.com/ Heroku Dev Center Learn about building, deploying, and managing your apps on Heroku. devcenter.heroku.com 첫 이용시 홈페이지에서 회원가입후, (heroku CLI도 설치도 해야함 홈페이지가서 확인) 터미널을 통해 명령어 입력후 로그인을 한다. heroku login 해당 프로젝트 git repo와 헤로쿠앱과 연결을 시키려면 일단 헤로쿠앱을 생성시킨다. 명령어로도 생.. 이전 1 2 3 4 ··· 9 다음