전체 글

next.js에서 .env.local 파일에 환경변수를 넣어서 사용할 수 있다. 위와같이 파이어베이스 파이어스토어 접근 키같은 민감한 정보를 그대로 공개하면 안좋기 때문에 환경변수로 만들어서 관리를 해주는게 좋다. 기본적으로 .env.local 을 통한 모든 환경변수는 Node.js에서만 사용할 수 있는데 브라우저에서 사용하려면 NEXT_PUBLIC_을 붙여야 한다고 한다. (위와 사진처럼) 근데 위 사진을 보면 알겠지만 맨 마지막부분을 저렇게 바꿔 놓아도 잘 작동하긴 했다. nextjs 는 .env.local에서 process.env로 환경변수를 로드하기 위한 기본 제공 지원이 있다고 한다. 아무튼 이 밖에도 .env, .env.development, .env.production 등을 사용할 수 있다고..

1. 소켓을 배운다. - 데이터 통신에서는 소켓을 구성하고, 실습을 진행했었다. 데이터 통신에서는 각 레이어와 프로토콜을 직접 구현해보는 실습을 하였고 L1,L2 를 공부하였다. 컴퓨터네트워크에서는 그 위의 레이어들에 대해 공부한다. 2. TCP/IP에 대한 자세한 학습 TCP에는 많은 알고리즘들이 있고, IP에도 Dijkstra 등의 알고리즘이 포함되어있다. 이 알고리즘들을 학습하게 된다. 결과적으로는 아래 3가지가 주 학습 목표가 되겠다. 컴퓨터 네트워크의 다양한 알고리즘 이해 소켓프로그래밍 컴퓨터네트워크 보안 이해

타입스크립트로 코딩을 하다보면 심심치 않게 볼 수 있는 경고가 [error] Property does not exist on type 'something' 이다. 어떤 블로그 글에서 이를 그저 any를 이용하여 해결하던데 이는 좋은 방법이 아닌 것 같다. 위는 초기 렌더링 시에 내 개인프로젝트인 leafylog의 heatmap 부분의 스크롤을 하단고정하기 위하여 넣은 코드이다. 타입스크립트에서는 위와같이 추가하였을 때 에디터에 경고가 뜬다. Propery does not exist on type never이다. never는 아무것도 지정해주지 않았을 때를 의미한다. 본 에러의 해결코드인데 를 쓰지 않는다면 never가 된다. 타입을 제대로 지정해주지 않는다면 계속해서 경고가 나올 것이기에 타입지정을 잘 ..

내 코드트리 아이디: rlaxowls1

개인 사이드 프로젝트를 할거면 내가 안해본 것들을 구현해 보는게 좋다. 예를들어 포켓몬 api를 이용한 도감 만들기에서 무한 스크롤을 구현해 본다던가 하는게 도움이 될것이다. 학습기록 웹서비스는 점차 서비스를 확장해나가면서 사람들에게 공개하여 피드백을 받을 수 있다면 좋을 것이다. 타입스크립트에 익숙해지는게 좋다. 중요한 건 타입을 어떻게 재사용성이 용이하게 하고 함수를 더 명확하게 설명해줄 수 있는지. 타입스크립트에서 에러가 나면 useState 혹은 '=' 에서 타입이 매칭이 되지 않는지 확인해보면 좋다.

여러분들 리액트에서 useEffect를 사용하여 코딩을 하는데 useEffect가 2번 실행되어 난감 하셨던 적이 있으신가요? 저 또한 useEffect에서 데이터가 정상적으로 처리되었는지 확인하기 위해 콘솔 출력을 해보면 2번이 출력되는 문제가 있었습니다. 이것의 이유로는 다음과 같습니다. 1.React StrictMode - CRA에서 React Strict Mode 없기 cra로 프로젝트를 생성했다면 strict mode가 index.js에 적용되어 있을 텐데 이것을 제거하면 됩니다. 2. Next.js에서 React Strict Mode 없애기 next.config.js에서 reactStrictMode를 false로 바꿔주면 됩니다. strict 모드는 안전하지 않은 수명 주기, 레거시 API 사..

나는 깃허브 잔디밭 처럼 내가 학습한 것을 heatmap의 형태로 보여줄 수 있는 웹서비스 (개인 토이프로젝트)를 만드는 중이다. 사실, 멘토님께서 내가 생각했던 기능들을 대폭 줄이자고 제안하셔서 조금의 기능을 구현하고 있는데 생각보다 고려할게 많았다. dummy data를 넣고 ui를 구성했을 때와 파이어베이스를 붙였을 때도 코드가 달라지고 예상치 못했던 warning(타입스크립트 props관련.. 일단 any로 땜질 해놨는데 빨리 바꿔야 한다. asap...)을 만나기도 했다. 그리고 파이어베이스 스토어만 사용하고 백엔드 로직을 아예 못쓰다보니 구현이 좀 어려워 졌다. 나는 단지 목표추가와 할일 추가만 한다면 백엔드에서 필요한 것 계산 후 각자의 json파일로 내려다 주면 매우 편하게 개발할 수 있겠..

위의 데이터를 firestore에서 받아왔다. 위의 state에 저장을 해야한다. 어김없이 생기는 에러 useState에 무슨 타입인지 주진 않고 배열이라는 것말 알려줬으니 위와 같은 에러가 생긴다. 이 친구들도 never 타입이 아니라면서 경고를 내뿜는다. 여기서 문제는 둘다 해결할 방법을 찾지 못했다는 것이다. 하나를 해결한다해도 하나만 해결되고 나머지는 해결되지 않았다. 위같이 해준다면 마찬가지로 title,spentTime,progress가 {id:string}이 아니라고 하는데 이 부분은 왜 이렇게 경고가 나오는지 이해가 안된다. 해결된다면 다시 포스팅해야겠다.