본문 바로가기

전체 글

 (159)
[프로젝트 회고] - 모두의 해결사 1. 프로젝트 링크 https://mo-hae.com/ 모두의 해결사 mo-hae.com 2. 기획 의도 세상 모든 사람들은 최소한 한 가지 이상의 재능을 타고난다고 합니다 그런데 자신의 뜻과는 다르게 재능을 살리지 못하고 자신의 뜻과는 다른 삶을 살고 있는 분들이 참 많다는 생각을 하게 되었고 사회 초년생들과 대학생들이 자신의 전공과 재능을 살려서 다른 사람에게 도움을 주고 또는 도움을 받는 재능 나눔 서비스를 기획하게 되었습니다 3. 기술 스택 1) React.js SPA 구현을 위해 React를 선택했다. Next도 고려를 했었지만 동그라미 프로젝트를 할때와는 팀원도 바뀌고 React를 더 선호하는 의견이 주류였기에 자연스럽게 React를 선택했다. 2) TypeScript TypeScript를 사..
Lighthouse를 이용한 웹 성능 최적화 후기 *성능 최적화를 하게 된 계기 모해 프로젝트의 기능에 대한 개발이 모두 끝난 이후 우연히 Lighthouse에 대해서 알게 되었다. Lighthouse는 구글에서 개발한, 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구이다 Lighthouse를 이용해서 성능 측정을 하게 되었고 결과는? ....... 처참했다..... 대체 무엇이 문제였을까 막막한 마음이 컸다 ㅜㅜㅜㅜ 프론트 개발자의 역량으로 웹 성능 최적화에 대한 부분도 굉장히 중요한 것으로 알고 있었기 때문에 이번 기회에 하나하나 문제점을 분석하고 해결해보기로 결심했다. 1. 코드 분할 (Code Spliting) 첫번째로 사용하지 않는 자바스크립트 코드로 인해서 많은 시간이 지체된다는 문제점이였다 이런 문제가 생긴 이유는 CRA ..
[TypeScript] - tsconfig.json 분석 -타입스크립트 프로젝트는 타입스크립트 컴파일러의 설정 파일인 tsconfig.json파일이 있어야 다음과 같은 명령어로 tsconfig.json을 만들 수 있다. ts --init - 위 명령어로 만들어진 tsconfig.json을 보면 실제 개발을 진행하는데 필요한 많은 옵션이 들어있다 - 보통은 프로젝트에 필요한 옵션만 설정해서 간략하게 한다. - include 항목에서 [src/**/*]은 src디렉터리는 물론 src 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 의미이다. tsconfig.json 살펴보기 1 ) module - 타입스크립트 소스코드가 컴파일되어 만들어진 ES5 자바스크립트 코드는 웹 브라우저와 Node.js 양쪽에서 모두 동작해야 한다 그런데 웹 브라우저와 Node..
프로그래머스[LEVEL2] - 뉴스 클러스터링(2018 카카오 블라인드 코딩테스트) https://school.programmers.co.kr/learn/courses/30/lessons/17677 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 구현 문제인데 주의 할 점은 입력 파라미터인 str1과 str2를 모두 대분자로 변환하고 filterSplitStr을 통해 대문자 영어를ㄹ 죄외한 부분은 제외하고 2글자씩 분리하여야 한다 그리고 중복을 허용하는 intersection과 union을 구해야되기 때문에 고려해서 구현한다. 입력 예제3에서 첫번째 배열은 ['AA, 'AA']이고 두번째 배열은 ['AA, 'AA', 'AA'] ..
[axios] - interceptors axios interceptors 는 then이나 catch로 처리되기 전에 요청이나 응답을 가로 챌 수 있다고 공식 문서에 나와 있다. https://yamoo9.github.io/axios/guide/interceptors.html 인터셉터 | Axios 러닝 가이드 인터셉터 then이나catch로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다. axios.interceptors.request.use( function (config) { return config; }, function (error) { return Promise.reject(error); }); axios.interceptors.response.us yamoo9.github.io 더 풀어서 설명하자면 요청하기 직전 응답을 받고 t..
[Javascript] - instaceof로 클래스 확인하기 instaceof 연산자 - instaceof 연산자를 사용하면 객체가 특정 클래스에 속하는지 아닌지를 확인할 수 있다 또한 상속 관계도 확인해준다 - 확인 기능은 다양한 곳에서 쓰이는데 이번 챕터에선 instaceof를 사용해 인수의 타입에 따라 이를 다르게 처리하는 다형적인 함수를 만드는데 사용할 수 있다. - 기본 문법은 위와 같다 - rabbit이 Rabbit 클래스에 속하기 때문에 true를 반환 만약 Rabbit 를 상속받는 클래스에 속해도 true를 반환 - 위와 같이 생성자 함수에서도 사용할 수 있다. - Array 같은 내장 클래스에서도 사용할 수 있다. - 위 예시에서 arr은 클래스 Object에도 속한다는 점을 주의해야 한다 Array는 프로토타입 기반으로 Object를 상속받는다 ..
[Next] - 다이나믹 라우팅 * Next.js 동적 라우팅 Next,js는 pages 폴더 내부에 파일을 만들어 라우팅을 한다. 예를 들어 localhost:3000/boards/book Url로 접근하려면 pages 폴더에 boards 폴더를 만들고 book 파일을 만들어야 한다 ㅡ 그런데 만약 /boards/:categoryName으로 라우팅하려면 어떻게 해야 할까? /boards 폴더 안에 [categoryName].js 파일을 만들면 된다 그렇다면 마지막으로 /boards/:categoryName/:num/new 로 라우팅하려면 어떻게 해야할까? pages 폴더에 [categoryName] 폴더를 만들고 그 내부에 [num] 폴더를 만들고 new.js 파일을 만들면 된다
[TypeScript] - is 키워드 * is 'is' 키워드의 역할은 타입 좁히기 즉 타입 가드인데 예제를 들어서 알아보자 위 예제에서 'test is string' 이 의마하는 것은 IsString 함수의 반환 형식에 boolean을 사용하는 대상이 호출 된 후 함수가 true를 반환하면 타입스크립트는 test의 타입을 string으로 좁힌다는 것을 의미한다 즉 tyof test의 값이 'string;일 겨ㅑㅇ우 test의 타입은 string으로 좁혀지는 것이다. 따라서 example 함수에서 foo라는 매개변수의 타입을 any로 지정했지만 타입 체커는 foo가 6번째 줄에 있는 if문 블록에서는 string 타입을 갖게되는 것이다 아래 예제도 is 키워드를 활용한 예제이다 살펴보면 getElementContent 함수의 매개변수로 받은..

티스토리툴바