본문 바로가기

프로그래밍 공부내용

 (33)
Local 환경에서 Open API 사용하기 (feat. CORS) 가만히 앉아서 결과를 기다리는 건 성미에 안 맞기도 하고, 뭔가를 만든다는 건 그 자체로도 굉장히 재밌는 행위라, D3 공부도 할 겸 프로젝트를 시작했다. 그리고 역시나 그렇듯 시작부터 난관에 봉착했다. 문제 개발자라면 BE, FE를 가지리 않고 누구나 익숙한 문제이다. 바로 CORS.. 우테코 과정동안은 많이 만나서 BE에서 allow origin을 해주거나, local server를 따로 만들어줘서 해결했었지만 이번엔 Open API를 사용하고 있어서 이런 해결책을 쓸 수 없었다. 오늘은 Localhost에서 Open API를 사용하며 만났던 CORS와 이를 해결하기 위한 여정을 기록하려 한다. CORS가 뭔데? 간단하게만 설명하고 넘어가려고 한다. 다들 글로 정리를 잘 해놓으신 분들이 많아서 참조로..
D3 공부를 시작하며..[작성중] 인트로 농구를 굉장히 좋아한다. 정보를 좀 찾고 싶은데... 네이버 이 친구들이 아주 알려주는게 없다. 특히 nba보다 kbl이 메인에 있어서 아주 보기가 힘들다.. 나같은 nba 마니아들을 위해서 통계를 제공하고 실시간 경기를 제공하면 어떨까 생각이 들었다. Why D3 자료를 찾아보던 중에 D3를 찾았다. rechart나 chart.js처럼 쉬운 라이브러리도 있지만 남자라면 근본이 아니겠는가? 농담이고, 사실 npm trends를 보면 압도적으로 d3가 많다. 또 D3가 커스터마이징 성능이 월등하다고 한다. 문제라고 하면 리액트와 생명주기가 맞지 않을 수 있다는 점인데.. 학교 도서관에서 Integrating D3 with React - Elad Elrom 이라는 책을 찾았다. D3를 리액트랑 쓰려면..
JS와 import에 대하여... ESM과 CommonJS 요즘 토스 면접을 준비하느라 전에 봤던 토스 영상들을 부쩍 다시 찾아보게 된다. 박서진님의 '내 import 문이 그렇게 이상했나요?' 를 보고, 전에 발표했던 yarn berry를 바탕으로 import와 모듈에 관하여 정리하고자 한다. 모듈이 뭔데요 모듈은 쉽게 말해서 코드 뭉치라고 보면 된다. function add(a,b){ return a + b; } 와 같은 코드가 필요하다고 하자. 매번 필요할때마다 이 코드를 복사붙여넣기 해서 쓰는 것은 너무 비효율 적이기 때문에 우리는 모듈로 쓴다. 어떻게 쓰는건데 쓰는건 어렵지 않다. ESM과 CommonJS의 등장 이전의 상황부터 보자 // 박서진님 발표 예제입니다. 우리는 jquery를 불러쓰려면 저런 방식으로 써야 했다. html 문서 안에 scrip..
기깔나게 웹 성능 최적화하기 웹 성능 최적화? '웹 성능 최적화...' 들으면 가슴이 벅차오르지만 동시에 쉽지 않은 주제이기도 합니다. 구글 연구 자료입니다. 시간에 따라서 이탈률이 어마어마하게 차이가 나게 됩니다. 구글같이 큰 서비스는 로딩시간이 0.1초만 차이나도 엄청난 돈 차이가 날 것 같습니다. 웹 성능을 개선하려면 우선 사용자가 웹에 접근하게 됐을 때 무슨 일이 일어났는지 알아야합니다. 간단한 그림을 준비했습니다! 그림의 각 단계별로 최적화 하는 방법이 있습니다. 저는 프론트엔드 개발 담당이기 때문에 Client / Client Front Server 에서 최적화를 진행하였습니다. (글을 정리하다가 궁금해서 백엔드 크루에게 물어보니 Backend 단에서는 요청을 압축하기나 DB 접근시간을 줄이는 등의 최적화도 가능하다고 합..
타입스크립트는 만능이 아니다(feat 리액트 컴포넌트 타이핑하기) 안전한 개발은 매우 중요하다. 에러가 터졌을 때 뜨는 빨간 라인은 마치 들불이 번지는 것 처럼 개발자의 마음을 아프게 한다. 하.지.만. 더 마음 아픈것은 서비스중에 예기치 못한 에러로 불이 나는 것일 것이다. 오류는 일종의 불이다. 한 곳에서 장애가 나더라도 번지지 않도록 막는 것이 아주 중요하다. 이를 막기위해서 사람들이 여러가지 도구를 고안해냈고 핫 한 도구중 한 가지는 타입스크립트다!! 타입스크립트(TS)는 일종의 맞불처럼 미리 빨간불을 띄워줘서 (이것도 마음 아프긴 하다) 여러 오류들을 막아줄 수 있다. 과연 타입스크립트가 나를 오류로부터 자유롭게 해줄 수 있을까? PropTypes?? 리액트에는 TS가 등장하기 전 컴포넌트의 타입을 명시하기 위해서 PropTypes라는 것이 존재했다. 아 물론..
기깔나게 협업하기 인트로 우테코과정을 겪으면서 팀프로젝트와 근로활동 두 가지를 번갈아가면서 작업하기가 정말 쉽지 않았습니다. 가끔 채용공고를 보다 보면.. 일의 멀티태스킹이 가능한 사람을 찾는 공고를 볼 수 있습니다. 여러팀의 업무를 한명이 하는 경우도 있다고 하고, 프론트엔드가 보통 백엔드보다 적어서 더 많은 기능에 참여할 가능성이 높긴 하다고 합니다. 어린시절 어떻게 수학시간에 영어를 풀면서도 두 과목 다 성적을 유지했는지 참... 중간부터는 땡쿠 프로젝트와, 지원사이트 개발 두 팀에 팀문화를 적용해서 각 팀마다 협업을 위한 장치를 마련했습니다. 협업을 잘 하기 위해서 팀, 개인적으로 적용했던 방법을 소개하려고 합니다. 협업에서 중요한 것 혼자 개발하는 1인 개발자가 아니라면 타인이 작성한 코드를 보게 될 거 입니다...
기깔나게 webpack build 속도 최적화하기 안녕하세요! 오늘은 webpack 빌드속도를 개선했던 이야기를 해보려고 합니다. 저희 '땡쿠' 프로젝트는 CRA를 사용하지 않고 webpack을 이용해서 react project를 빌드해서 사용했었습니다. '왜 CRA를 쓰지 않았나요' 에 관한 이야기는 다음에 하기로 하고, 오늘은 '어떻게 webpack을 사용했나요' 에 초점을 맞춰볼까 합니다. 우리는 잘 하고 있었나? 예전에 '부탄' 이라는 나라가 행복지수가 가장 높은 곳으로 소개된 적이 있습니다. 지금은 그렇지 않은데요.. 기술이 발달하면서 부탄사람들이 다른 사람들은 어떻게 사나 알게 되면서 행복지수가 많이 감소했다고 해요. 왜 이런 이야기로 시작하냐고 하면... 저희 프로젝트가 그랬습니다... 웹펙으로 빌드하면서 빌드시간이 32초정도 걸렸습니다. ..
타입스크립트 조건부 타입 (Conditional type) 본 글은 이웅재님의 영상(https://www.youtube.com/watch?v=ViS8DLd6o-E) ~1:10:09 을 보고 제 나름대로 기억하기 위해서 정리한 글 입니다. 1. type과 interface의 차이? - 우선은 문법의 차이입니다. interface a { name: string; } type b = { name: string; }; 보면 interface 는 = 연산자 없이 사용하고 있습니다. - 두번째로는 vscode 내에서 사용할 때의 차이입니다. interface는 찍어봣을 때 a의 구조가 어떤지 알려주지 않지만, type alias인 b는 어떤 구조를 가지는지 알려줍니다. - 세번째는 기능차이입니다. interface는 선언병합을 제공하고 type alias는 제공하지 않습니..

티스토리툴바