전체 글
-
useState 인자로 함수 전달하기 (+useReducer)React 2022. 4. 28. 23:55
useState 인자로 함수 전달하기 이상하게도 지금까지 한 번도 useState에 인자로 함수를 전달하는 것을 생각하지 못하였다. 그러던 중 리액트 성능 테스트를 하기 위해 많은 양의 데이터를 화면에 출력해야 하는 상황이 생겨 useState 인자로 많은 데이터를 생성하는 함수를 넣어보았다. useState의 인자로 함수를 전달하는 경우 + 추가로 useReducer의 인자로 함수를 전달하는 경우를 정리해보자! (해당 내용 출처 : 리액트를 다루는 기술 개정판/ 지은이: 김민준) useState 인자로 함수를 전달하는 경우 useState 초기값으로 함수를 전달할 수 있는데 아래 2가지 경우에 따라 다르게 동작시킬 수 있다. const testFuc = () => { ... } // #1 const [..
-
JAM Stack개발 2022. 4. 15. 01:00
JAM Stack JavaScript API MarkUp Stack 웹 서비스를 만드는 하나의 설계 방식, 프로그래밍 기법이라 할 수 있다. 일반적인 프로그래밍 기법이고 매우 익숙하게 느낄 수 있다. 실제로는 이러한 개념을 모르고 현재까지 이와 비슷한 방식으로 개발을 해오고 있었을 수도 있다. (LAMP, MEAN Stack과 같은 개념을 떠올리면 된다.) 더 나아가서 JAM Stack은 정적 사이트 생성기를 사용한 서비스의 설계를 의미하기도 한다. 여기서 정적 사이트 생성기란 (SSG) Next, Hugo, Gastby 등을 의미한다. 아래에서 SSG에 대해서도 다뤄보자. JAM Stack 공식 문서에서는 아래와 같이 정의한다. 웹 애플리케이션에서 렌더링 할 화면을 Pre-render 하고 이를 CDN..
-
CDN 이해하기네트워크 2022. 4. 12. 18:42
JAM Stack에 대해 알아보기 전에 CDN에 대한 이해가 선행되어야 했다. 이후 포스팅에서 JAM Stack에 대해 정리하기 위해 CDN을 따로 포스팅한다. 해당 포스팅과 이후 업로드할 JAM Stack을 함께 본다면 JAM Stack에 대해 조금은 더 잘 이해하게 되지 않을까 생각된다. 틀린 부분이 있다면 마구마구 지적해주신다면 감사할 것 같다. CDN ( Content Delivery Network ) CDN은 Content Delivery Network의 약자로서 지리적인 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠 전송을 할 수 있고, 콘텐츠 전송에 특화된 기술을 말한다. CDN은 요청을 분산시킨다에 초점이 맞추면 이해하기 어렵지 않다. 예를 들어 유투브, 페이스북과 같은 서비스들에 ..
-
[TS] fetch API return typeTypeScript 2022. 4. 8. 18:31
타입스크립트로 개발을 해오면서 매개변수는 어떤 타입을 받아야하고, 함수는 입력에 따른 출력으로 어떤 타입을 리턴해야하는지 명시하여 코드의 안정성을 높히며 사용을 한다. 이번 포스팅은 컴포넌트 내에서는 당연하게 생각하였던 부분들이 API 로직을 사용하는 부분에서는 별도로 return type을 명시하지 않았던 지난 날을 반성하며 잊어 먹지 않기 위해 포스팅하려 한다. 간단하게 어떤 value 값을 받아 http 요청을 보내고 이에 대한 응답을 받는 async/await을 사용한 fetch api 기본 로직이다. const testAPI = async (value: string) => { try { const res = await fetch( `blabalURL...key=${value}`, ); if (r..
-
브라우저 랜더링HTML 2022. 2. 14. 18:10
이전 DOM에 관해 글을 남긴 적이 있다. 면접을 보게 되면서 무언가 깔끔하고 장황하지 않게 정리한 점과 몰랐던 부분에 대해 기록으로 남겨보자 한다. 알고 있는데, 듣기 쉽고 알아듣기 쉽도록 말하는 것도 능력이지 않을까 싶다. 브라우저 랜더링 정리 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 랜더링에 필요한 리소스를 서버에 요청하고 응답을 받는다. 브라우저의 랜더링 엔진인 서버로 부터 응답받은 HTML, CSS를 파싱 하여 DOM과 CSSOM 트리를 생성하고 이 둘을 결합해 랜더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 서버로 부터 응답받은 JS를 파싱 하여 AST(Abstract Syntax Tree)를 생성하고 바잍트 코드로 변환하여 이를 실행한다. 이때 js가 DOM API를..
-
TypeScript + Webpack + Babel 을 사용하는 이유Javascript 2022. 1. 27. 14:49
프런트엔드 개발을 하면 자연스럽게 따라오는 것들이 있다. TypeScript, Webpack, Babel 이전 프로그래머스 교육을 받으며 사용했던 것들이다. (이것 말고도 많겠지만...) 그런 느낌이 있다 개발을 하다 보면 이래서 이걸 사용하는구나?라고 느낄 때가 있지만 누군가 물어본다면 속 시원하게 대답할 수 없을 것 같은 느낌적인 느낌 말이다. 다른 사람에게 설명을 하지 못하면 진짜 내 지식이 아니지 않을까 생각한다. 이 기회에 왜 이것들을 사용해야 하는지에 대한 이유를 나름 정리해보려 한다. 혹시라도 잘못된 내용이 있다면 가감 없이 피드백 해주시면 감사하겠습니다. 왜 TypeScript를 사용하는가? JavaScript는 동적 타입의 인터프리터 언어이다. 동적 타입이라는 의미는 number, str..
-
[프로그래머스 웹 데브코스] 금나와라 뚝딱 프로젝트 회고나만의 이야기 2022. 1. 5. 17:48
웹 데브 코스 마지막 팀 프로젝트 금 나와라 뚝딱! 회고 금 나와라 뚝딱! 해당 프로젝트를 끝으로 짧다면 짧고, 길다면 긴 프로그래머스 KDT 과정이 마무리되었다. 이전과 동일하게 아래 목차 순서대로 나만의 회고록을 작성해보고자 한다. - 프로젝트를 통해 배운 점 - 아쉬운 점 - 이번 프로젝트에서 이루고자 했던 목표?! - 전반적인 프로젝트 후기 1. 프로젝트를 통해 배운 점 1.1 프런트 입장에서의 협업! 이전 프로젝트에서는 공통 API를 제공받아 사용하였다. 따라서 API 협의 과정이 없이 만들어진 API 내에서 최대한 활용을 해야 했었다. 하지만, 이번 금 나와라 뚝딱 프로젝트에서는 프로그래머스 KDT 백/프 수강생끼리 함께 팀을 이뤄 프로젝트를 진행하였고 API 협의라는 것을 프런트 입장에서 해..
-
React 프로젝트 JS -> TS로 변환하기TypeScript 2021. 11. 20. 00:59
React JS에서 Ts로 변환하기 배포까지 마무리한 React 애플리케이션을 Javascirpt ==> Typescript로 변환해보자. 먼저, Private 레포를 우리 팀만의 ORG를 하나 만들어서 Public으로 전환해서 우리 팀만을 위한 연습용 레포를 하나 만들고 시작한다. 아래 문서에서 권장하는 방법을 살펴보자. https://create-react-app.dev/docs/adding-typescript/ Adding TypeScript | Create React App Note: this feature is available with react-scripts@2.1.0 and higher. create-react-app.dev 기존 프로젝트에서 TypeScript를 추가하는 경우니 아래 cl..