profile
Frontend Ninja
post-thumbnail

[21/10/23 KATA NINJA] 자물쇠와 열쇠

lock 배열을 기준으로 3배 확장된 테이블(배열)을 만든다.lock의 크기가 33이라면 99의 확장된 배열이 arr이된다. 이 후 가운데 len ~ len \* 2 - 1 까지 lock 배열을 채워둔다.이 가운데에 들어있는 lock 배열의 값들이 기준이 되어 key

2021년 10월 22일
·
0개의 댓글
post-thumbnail

[21/10/01 KATA NINJA] Generate Parentheses

DFS하면서 답 배열을 만들어낸다. DFS로 받은 배열을 후처리하지말고 한번에 처리94% 빠르게 풀었다 ㅎn = 3일때 호출횟수는 12이다.26번 호출된다. -> left가 완료된 시점에서 right를 붙이는 함수는 호출할 필요없다. + right가 더 많이 붙어 있으

2021년 10월 1일
·
0개의 댓글
post-thumbnail

[21/09/27] development-production 환경변수 설정

아래와 같이 환경변수를 설정하여도 그 누구도 자동으로 변수 주입 해주지 않는다.Webpack can inject environment variables into the "client side" .js code웹팩은 클라이언트 사이드 어플리케이션으로 환경변수 주입이 가능

2021년 9월 27일
·
0개의 댓글
post-thumbnail

[21/09/27] Junzzi Editor 프로젝트 셋팅 - (4) scss 적용하기

간략하게 작성하였다.학습의 목적 (지금까지 프로젝트는 css-in-js 환경에서 진행하였다. css-in-css를 적용해보고 싶어 결정)상태에 따른 UI 스타일링이 바로 적용 (유저 인터랙션이 많은 어플리케이션의 경우 css-in-js 방식보다 효율적이다. -> 빠르게

2021년 9월 27일
·
0개의 댓글
post-thumbnail

[21/09/23-24] Junzzi Editor 프로젝트 셋팅 - (3) head, router 설정, webpack 에러, export(모듈 내보내기)

헤더를 관리할 수 있는 라이브러리 이다.seo 친화적이기 위해서 head태그에 정보를 입히는 작업은 필수적이다. 이를 쉽게 적용할 수 있도록 react-helmet을 사용해보았다.다음과 같이 설정해주어도 되지만, 라우팅에 따른 동적인 타이틀을 넣고자 한다면 다음과 같이

2021년 9월 23일
·
0개의 댓글
post-thumbnail

[21/09/20] 웹팩 - 빠른빌드, 절대경로 설정

ts-loader를 사용하는 경우 타입체크와 트랜스파일링 작업을 같은 프로세스 내에서 수행하기 때문에, 빌드 시간이 오래걸리게된다. 다음과 같이 프로덕션이 아닌 경우에는 true, 프로덕션 모드인 경우 false로 준다면개발단계에서는 타입체크과정을 하지않아 빌드시간을

2021년 9월 20일
·
2개의 댓글
post-thumbnail

[21/09/19] Junzzi Editor 프로젝트 셋팅 - (2) 타입스크립트 설정 - 트리쉐이킹

Junzzi Editor는 오즈의 제작소 프로젝트에 사용될 에디터 모듈입니다.타입스크립트는 자바스크립트의 superset이며, 동적 타입 언어인 자바스크립트와는 달리 정적 타입 기능을 제공한다. 따라서 컴파일 단에 에러를 추적할 수 있어, 기존의 런타임에서 발견되는 이

2021년 9월 19일
·
0개의 댓글
post-thumbnail

[21/09/17] Junzzi Editor 프로젝트 셋팅 - (1) 웹팩 설정

rule.use는 deprecated 되었다.기본적인 react library를 설치해준다.모듈 번들러 웹팩을 설치해준다. 하나의 파일로 번들링 해주는 툴인데, 모듈(파일들)이 많아져 서버와 통신하는 횟수가 많아지면 이는 매우 비효율적인 프로세스가 되기 때문에 필요하다

2021년 9월 17일
·
0개의 댓글
post-thumbnail

[21/08/26-27] 성능 개선 - Image Optimization

이미지는 웹 어플리케이션에서 가지고 있는 가장 큰 콘텐츠들 중 하나가 될 수 있다. 이것을 최적화하는 것을 통해 웹 어플리케이션 자체의 성능을 높일 수 있다. 결과적으로 이미지를 최적화하면 웹 사이트에서 가장 큰 바이트 절약 및 성능 향상을 얻을 수 있다. 브라우저가

2021년 8월 26일
·
0개의 댓글
post-thumbnail

[21/08/24-25] 성능 개선 - Image Lazy Load

✅ 이 포스팅은 새로운 기술을 오즈의 제작소 프로젝트에 적용하기 전 공부한 것을 정리하기 위한 포스팅이다. 다음은 오즈의 제작소 사이트의 Light House 평가 결과 중 퍼포먼스 탭을 캡처한 사진이다. 퍼포먼스의 점수가 81점인 모습을 확인할 수 있는데, 그 원

2021년 8월 24일
·
0개의 댓글
post-thumbnail

[21/08/20]

북마크 svg 깨지는 이슈 ✅꿀팁, 컨텐츠 하나의 컴포넌트로 압축하기 ✅랜딩 페이지에서 커뮤니티 게시글 컴포넌트 깨지는 이슈 ✅ 프로필 찜목록, 최근본목록 -> 없으면 비활성화 ❌찜 로직 하나의 함수로 구현하기 ❌컨텐츠 상세화면에서 찜 구현하기 ❌mask가 제대로 되지

2021년 8월 20일
·
0개의 댓글
post-thumbnail

[21/08/17] 파일 다운로드 및 클립보드 복사 기능 추가

컨텐츠를 포함한 검색화면 ✅컨텐츠 기능 디자인 리팩토링 ✅입점 업체 기능 완료 ✅마이 페이지 찜목록, 최근 본 상품 -> 버튼 컴포넌트 찜하거나 최근 본 상품이 없다면 비활성화 있다면 활성화 시키도록 알림 삭제 기능컨텐츠 상세화면에서 찜 구현하기찜하는 로직 하나로 만들

2021년 8월 17일
·
0개의 댓글
post-thumbnail

[21/08/16] 컨텐츠 기능 완료

컨텐츠 기능 ( 찜하기, 노출하기, 디테일하게 보여주기, 숏컷으로 보여주기, 스크롤 보여주기 기능) 완료디자인 완성컨텐츠를 포함한 검색화면컨텐츠 기능 디자인 리팩토링 말줄임 (2줄이상도 가능하게 하기)말줄임이 없게 되버리면, 제목의 줄이 각각 달라져 조회수 스크랩,

2021년 8월 16일
·
0개의 댓글
post-thumbnail

[21/08/05] 콘솔로그 지우기 & 검색화면 리팩토링 & 프로젝트 복기(SSR이슈)

프로덕션 환경에서 콘솔로그가 지워주지 않으면 누구던 보게된다. 그렇다고 일일히 지워주기도 귀찮기 때문에 babel plugin을 이용하여 한번에 지우고자한다.웹팩이나 바벨은 개발에서만 사용되므로, dev 의존성으로 설치한다.개발에만 적용하고 싶다면 다음과 같이 추가하면

2021년 8월 5일
·
0개의 댓글
post-thumbnail

[21/08/04] 부분 검색 화면 리팩토링

검색 타입을 누르면 렌더링 되는 부분 검색 화면들을 리팩토링해보았다.각 타입 별 컴포넌트가 존재하여, 타입에 맞게 컴포넌트를 불러주는 코드 구현위의 코드들을 보면 DRY하지 않음을 바로 느낄 수 있다. 이를 하나의 파일로 만들고자 하였다.PartialSearch.hon

2021년 8월 4일
·
0개의 댓글
post-thumbnail

[21/08/03] 페이지네이션 수정 & 검색화면 이슈 해결 & 업체탐색 깜빡임 이슈

페이지네이션 네비게이터 수정 검색화면 이슈 업체탐색 깜빡임 이슈

2021년 8월 3일
·
0개의 댓글
post-thumbnail

[21/08/02] 검색화면 마무리 & 이슈

DRY 원칙을 지키기 위해 리팩토링하였다.아래 타입은 SearchTemplate,WholeSearch, ProductSearch ... 등 여러 컴포넌트에서 사용된다. 그렇기 때문에 각 파일에서 위 코드를 작성하지 않고, 유틸 파일에 따로 작성하여 이를 import하여

2021년 8월 2일
·
0개의 댓글
post-thumbnail

[21/08/02 KATA NINJA] 큐와 우선순위 큐

스택과 재귀는 같다. 함수는 호출 스택에 쌓이기 때문!재귀로 풀려니깐 상당히 어려웠다. 내일은 이 코드 리팩토링 해볼 예정javascript에는 우선순위 큐 자료구조가 존재하지 않는다.그래서 만들어보았다.Refactor 예정. 리뷰 내일

2021년 8월 1일
·
0개의 댓글
post-thumbnail

[21/07/31 ~ 08/01] 통합 검색 화면

서버사이드에서 검색 결과 fetch해서 보내주기skeleton UIPagenationNavigator - SearchText 컴포넌트 중복 제거하기propTypes 고도화하기검색 타입 별 Minimi Component 만들기전체 결과 화면에서 몇개만 보여줄 검색 타입

2021년 8월 1일
·
0개의 댓글
post-thumbnail

[21/07/30] 알고리즘 하다 빡쳐서 적용하는 eslint

알고리즘 Project에는 eslint를 적용해두지 않았음. 그냥 코딩만 할려고 만든거라 안해놨는데..오타 표시 안되는 거 너무 화난다.너무 불편해서 그냥 적용해두려고한다.우선 init 후 eslint 설치를 해준다.\-D, --save-dev: Package will

2021년 7월 29일
·
0개의 댓글