인생은 효율성

공공데이터를 활용하여 기온 정보를 뿌려주는 서비스를 개발 중이다. 시간별 기온 정보를 뿌려주기 위해 차트가 필요했는데 라이브러리를 쓰려고 찾아보았는데 나는 아주 기본적인 기능만 필요한 상황이라 굳이 라이브러리를 설치해서 차트를 그릴 필요는 없을 것 같다는 생각이 들었다. 그래서 공부도 할 겸 차트를 직접 그리기로 결정했다. 다행히 MDN에 canvas를 친절히 설명해주는 문서가 있었다. https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes 캔버스(canvas)를 이용한 도형 그리기 - Web API | MDN 앞서 캔버스 환경 설정(canvas environment)을 완료 하였다면, 이제 어떻게 캔버스에 그릴수 ..

밈아니고 실화임 🙃

node.js 서버에서 데이터를 등록하는 API를 만드는데 이 API는 총 5개의 동작이 반드시 순서를 지켜서 실행되어야 한다. 처음에는 함수 내부에 promise객체를 만들어서 리턴하고 그 함수를 .then()으로 연결하였다. 1. 함수에서 프로미스 객체 리턴 X 5 const insertProfit = async cateJson => { const query = `insert into [table] ([col1], [col2], [col3], [col4]) values ('${month}', ${id}, ${aim}, ${rate}) `; let res: any; const promise = new Promise((resolve, reject) => { resolve( excuteQuery(query..

브라우저 렌더링 과정 1. 브라우저가 HTML을 로드 2. HTML 문서를 파싱 -> 트리구조의 DOM노드 생성 2. CSS파일로 CSSOM 트리 생성 3. DOM + CSSOM => 렌더 트리 생성 4. 뷰포트에서 위치 결정(레이아웃) 5. 화면에 표시(페인팅) 리플로우: 렌더링 중 4의 과정을 다시 수행. (position, width, height, padding, margin, border, ...) 리페인팅: 5번 페인팅 과정을 다시 수행. 레이아웃에 영향을 미치지 않는 작업은 바로 리페인팅됨 (color, background, ...) script태그를 body 최하단에 사용하는 이유 브라우저는 위에서 본 순서대로 렌더링을 수행하기 때문에 HTML중간에 script태그를 만나면 HTML파싱을 ..

API 인증키 노출 방지 깃에 public으로 소스를 올릴 것이기 때문에 내 인증키가 노출되지 않도록 설정해야 한다. 전역 폴더에 .env파일을 생성해서 아래처럼 파일에 내 인증키를 저장한다. 저장한 인증키를 사용할때는 아래와 같이 파일에서 인증키를 가져오면 된다. CORS에러 파이썬으로 토이 프로젝트를 했을 때에는 내가 직접 백엔드를 개발했었기 때문에 백에서 cors처리를 해주면 되었다. 그런데 이번에는 제공되는 API에서 데이터를 가져와야 하기 때문에 그 방법을 사용할 수 없었다. 그래서 package.json에서 proxy설정을 해주어 해결했다. 그러면 URL부분에 proxy에서 설정한 다음의 주소만 써주면 된다. favicon을 못찾는 에러 초기에 리액트 프로젝트가 생성될 때 같이 딸려오는 아이콘..

며칠 전에 프론트 엔드 개발자 면접을 보고 왔는데 면접에서 받았던 질문 중에 몰랐던 부분을 알게 되었다. useEffect를 자주 사용하고 잘 활용하고 있다고 생각했는데 내가 몰랐던 기능이 있었다. 지금까지 컴포넌트가 마운트 될 때에만 useEffect를 사용하고 있었는데 컴포넌트가 언마운트 될 때에도 useEffect를 사용할 수 있었다. 먼저 마운트/언마운트를 어떨 때 주로 사용하는지 알아보자면 마운트 1. props로 받은 값을 컴포넌트의 state로 설정할 때 2. 컴포넌트가 나타나면 외부 API (REST API)를 요청해야 할 때 3. 라이브러리를 사용할 때 (D3, Video.js 등) 4. setInterval이나 setTimeout과 같은 작업 언마운트 1. setInterval, set..

장고와 리액트를 사용하는 프로젝트를 새롭게 시작했다. 장고 프로젝트의 포트번호는 8000, 리액트의 포트번호는 3003에서 돌아가기 때문에 프론트에서 데이터를 요청하려면 CORS문제를 해결해야 한다. 다행히도 파이썬에서는 아주 쉽게 이 문제를 해결할 수 있다. pip install django-cors-headers 위의 패키지를 설치해주고 settings.py의 INSTALLED_APPS과 MIDDLEWARE에 각각 corsheaders와 corsheaders.middleware.CorsMiddleware를 추가해준다. 그리고 리소스 요청을 허용할 도메인을 추가해준다. 그런데 이렇게 전부 추가를 해줬는데 프론트에서 여전히 CORS에러가 떴다. 오타가 있는지 확인하는 것부터 패키지를 다시 설치해보고 갖은..

https://leetcode.com/problems/longest-increasing-subsequence/ Longest Increasing Subsequence - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com My Code class Solution: def lengthOfLIS(self, nums: List[int]) -> int: dp = [1] * (len(nums)) for i in range(len(nums)): for j in range(i):..

개발 전에 계획한 기능은 전부 개발 완료되었다. 개발을 하면서 이런 기능도 추가하면 좋겠다 하는 기능들이 몇 가지 있었는데 그 기능들은 2차로 개발할 생각이다. 그전에 일단 컴포넌트 최적화라든지 프로젝트 내부적으로 좀 더 개선할 점을 개선하고서 업그레이드 버전을 만들 것이다. 그런데 사실 그 시기는 언제가 될지는 모르겠다. 다른 주제의 새로운 프로젝트를 해보고 싶은 마음이 크기 때문!! 완료된 기능과 추가할 기능 영화 리스트 완료 기능 - 영화 리스트 - 예매하기 -> 예매 창 추가할 기능 - 즐겨찾기, 좋아요 기능 - 각 영화 카드의 리뷰 클릭 시 영화에 해당하는 리뷰만 보여주기 - 예매하기 클릭 시 단순히 예매 창으로만 넘어가는 것이 아닌 해당 영화 선택된 채로 넘어가기 영화 예매 완료 기능 - st..