티스토리

감자현 | potato-hyun

검색하기

블로그 홈

감자현 | potato-hyun

potato-hyun.tistory.com/m

말하는 감자

구독자: 2

방명록 방문하기

주요 글 목록

Nest.js ) Circular dependency 오류 해결 기록 * a → b : a에 b를 주입시킴 / a에 b를 import 함 - 모듈 소개 MainModule : 서비스와 관련된 모듈, 컨트롤러, DB 데이터 등을 관리 UserModule : 사용자 정보를 처리하는 모듈 DataModule : DB와 통신하며 데이터를 처리하는 모듈 UtilModule: Util성 코드 및 서비스들 모음 SomeUtil : DB데이터를 활용하여 특정 영역과 관련된 처리를 하는 서비스 - 배경 위 모듈소개와 같이 DB데이터를 활용하여 특정 데이터를 처리할 Util성 서비스가 필요해졌다. 이때 SomeUtil은 MainModule 아래에 있는 UserModule에 쓰여야 했다. UserModule은 DataModule을 사용하고 있었고, 두 모듈 모두 UtilModule을 impo.. 공감수 0 댓글수 0 2023. 4. 16.
Nest.js ) Circular dependency 번역 원문: https://docs.nestjs.com/fundamentals/circular-dependency Circular dependency A circular dependency occurs when two classes depend on each other. For example, class A needs class B, and class B also needs class A. Circular dependencies can arise in Nest between modules and between providers. 순환 종속성은 두 클래스가 서로 종속될때 발생한다. 예를 들어, 클래스A가 클래스 B를 필요로하고, 또한 클래스B가 클래스 A를 필요로 하는 경우이다. 순환 종속성은 모듈과 프로바이더.. 공감수 0 댓글수 0 2023. 4. 16.
Nest.js) 의존성, 주입 관련오류 / Error: Nest can't resolve dependencies of ... 아무리해도 해결이 안될때 (Feat. chatGPT) 1. Inject 할때 Cannot read properties of undefine passportStrategy에서 Service를 주입했을때 위 오류가 발생했다. ▶︎ 빠른 결론 바보같이 Strategy에 @Injectable() 데코레이터를 안붙여줘서 생긴 문제였다. 2. Error: Nest can't resolve dependencies of ERROR [ExceptionHandler] Nest can't resolve dependencies of the SuperService (?). Please make sure that the argument UserDAL at index [0] is available in the SuperModule context. Potential solutions:.. 공감수 2 댓글수 0 2023. 4. 16.
📓 클린코드 ) 3장 함수 오늘 읽은 범위 3장 함수 책에서 기억하고 싶은 내용 • 함수는 한 가지 작업만 각 함수가 너무도 명백했다. 각 함수가 이야기 하나를 표현했다. 각 함수가 너무도 멋지게 다음 무대를 준비했다. 바로 이것이 답이다. (p.78) 중첩 구조가 생길만큼 함수가 커져서는 안 된다는 뜻이다. (p.79) 한수는 한 가지를 해야한다. 그 한 가지를 잘 해야한다. 그 한 가지만을 해야 한다. ... 문제라면 그 '한 가지'가 무엇인지 알기가 어렵다는 점이다. (p.79) 지정된 함수 이름 아래에서 추상화 수준이 하나인 단계만 수행한다면 그 함수는 한 가지 작업만 한다. (p.80) 함수 당 추상화 수준은 하나로! (p.80) 코드는 위에서 아래로 이야기처럼 읽혀야 좋다. (p.81) • 함수 이름 이름이 길어도 괜찮.. 공감수 0 댓글수 0 2022. 3. 6.
server) 호랑이는 죽어서 가죽을 남기고, 개발자는 죽어서 로그를 남긴다. Feature 로그는 뭐지? 일지, 기록, 기록하다 - 네이버 사전 ① ‘로그’(Log)는 컴퓨터나 서버(Server) 등에서 유저(User)의 플레이 정보를 시간에 따라 남기는 기록을 뜻한다. - 네이버 게임 용어 사전 로그란 언제 어떤 유저가 어떤 행동을 했는가 남기는게 로그다. console.log( ... )도 로그라 할 수 있다. 어찌되었든 서버가 어떤 행위를 기록하는 것이기 때문이다. 흔히들 우리가 말하는 '로그 찍어봐'는 디버깅 성향이 강한 로그에 해당한다. 로그가 왜 필요할까? 오류를 추적하는데 큰 도움을 준다. 통계용 데이터로 활용할 수 있다. 디버깅용으로 활용할 수 있다. 간단하게 데이터를 저장할 수 있다. 로그는 어떤 개발이든 정말 중요한 데이터이다. 생각하고 싶지도 않지만 특히 로그.. 공감수 1 댓글수 0 2022. 3. 1.
📓 클린코드 ) 2장 의미 있는 이름 오늘 읽은 범위 2장 의미 있는 이름 책에서 기억하고 싶은 내용 의도를 분명이 밝혀라. ... 존재 이유는? 수행 기능은? 사용 방법은? (p.22) 실제 컨테이너가 List인 경우라도 컨네이터 유형을 이름에 넣지 않는 편이 바람직하다. (p.24) 읽는 사람이 차이를 알도록 이름을 지어라. (p.27) 프로그래밍은 사회 활동이기 때문이다. (p.27) 전문가 프로그래머는 자신의 능력을 좋은 방향으로 사용해 남들이 이해하는 코드를 내놓는다. (p.32) 한 개념에 한 단어를 사용하라. (p.33) 똑같은 메서드(기능)을 수행하는데 각각 fetch, get ... 등으로 다르게 부르면 혼란스럽다. (p.34) 해법과 문제 영역을 구분할 줄 알아야한다. (p.35) 좋은 이름을 선택하려면 설명 능력이 뛰어나.. 공감수 0 댓글수 0 2022. 2. 21.
📓 클린코드 ) 1장 깨끗한 코드 오늘 읽은 범위 추천사 ~ 1장 깨끗한 코드 책에서 기억하고 싶은 내용 나중은 결코 오지 않는다. (p.4) 그들이 일정과 요구를 강력하게 밀어붙이는 이유는 그것이 그들의 책임이기 때문이다. 좋은 코드를 사수하는 일은 바로 우리 프로그래머들의 책임이다. (p.7) 깨끗한 코드를 작성하려면 '청결'이라는 힘겹게 습득한 감각을 활용해 자잘한 기법들을 적용하는 절제와 규율이 필요하다. 열쇠는 '코드 감각'이다. (p.8) 나는 우아하고 효율적인 코드를 좋아한다. 논리가 간단해야 버그가 숨어들지 못한다. (비야네 스트롭 스트룹) 테스트 케이스가 없는 코드는 깨끗한 코드가 아니다. (p.12) 중복 줄이기, 표현력 높이기, 초반부터 간단한 추상화 고려하기. (p.14) 오늘 읽은 소감 나는 협업을 잘 하는 개발자.. 공감수 0 댓글수 0 2022. 2. 20.
📓 클린코드 ) 0. 각오 미루고 미뤄왔던 클린코드를 꼭 완독하고 말테야!! 아자아자!! +) 클린코드는 책이 너무 두껍다... 이북으로 살걸 후회중 ㅠㅠ 공감수 0 댓글수 0 2022. 2. 19.
VScode ) Beautify 설정 VScode는 익스텐션이 다양해 참 편리하다. 그중에서도, 코드 가독성을 높여주는 확장 프로그램들이 단연 제일이다. 가장 유명한 확장 프로그램 2대장으로 Beautify와 Prettier가 있다. 둘다 사용해본 결과, 나는 Beautify가 더 잘 맞았다. Prettier는 커스텀할 수 있는 범위가 넓고 ESlint와 궁합도 좋지만, 강제적이 느낌이 강하다. 파일을 저장할 때마다, 설정값으로 자동 정렬이 되는데, 이 부분이 나는 불편했다. 반면, beautify는 코드 규칙이 빡세지 않고, 자율에 맡기는 편이다. 특히 드래그 영역만 포맷팅할 수 있어서 매우 매우 편했다. 사내에서 사용하는 라이브러리나, 코드 규칙이 일반적이지 않아서, beautify가 훨씬 편했다. 3D도 다루고, TCP도 다루고 이것저.. 공감수 0 댓글수 0 2022. 1. 15.
nCloud ) Load Balancer & Auto Scaling 으로 유연한 서버 관리하기 - 로드밸런서에서 생긴 오류 해결기 목차 📚 Load Balancer & Auto Scaling 서버 세팅 관련 자료 공식 프로젝트 가이드 (1) https://www.ncloud.com/guideCenter/project/33 (2) https://www.ncloud.com/guideCenter/guide/30 오토 스케일링에 대한 공식 소개 영상 (1) https://www.youtube.com/watch?v=eEHrknoVVa4 👿 오류 발생 오토 스케일링을 통해 생성한 서버가 자꾸 죽고 생기기를 반복했다. 로드 벨런서의 스케일 체크에서 계속 unhealthy가 떴다. 나는 분명 프로젝트 가이드대로 했는데... 도대체 왜... 다시한번 마음을 가다듬고, 유트브와 공식 문서를 찬찬히 읽어보았다. 1. ACG 설정 공식 문서를 찬찬히 보.. 공감수 0 댓글수 0 2021. 12. 26.
Api 문서 자동화에 대한 개인적인 노력과 후기... 협업에 없어선 안 될 문서가 api 문서이다. 백엔드와 프론트엔드가 보통 분리되어 작업하기 때문에, 프론트엔드 개발자가 문서만 보고! 작업할 수 있게, 쉽게! 잘! 작성해야한다. 2021년 프로젝트를 하면서, 나도 당연히 api 문서를 작업해야했는데, 적절한 툴을 찾지 못해 많이 불편했다. 처음엔 사내에서 사용중인 Jira의 공유 문서를 사용했고, 두번째 프로젝트에선 구글 doc, 한번은 엑셀도 사용해봤다. 심지어 에버노트도 한번 추라히 해봤다. 그.러.나. 너~~무 불편했다. 기본적인 문서툴은 거의 다 불편했다. 개인적으로 올해 사용했던 툴과 사용 후기를 적어보았다. api문서 자동화기능인 swagger, apidoc등 도 한번 사용해봐야지! 목차 Api 문서가 꼭 가져야 할 점 (뇌피셜) 가독성이 좋.. 공감수 0 댓글수 0 2021. 12. 26.
환경세팅) m1맥북 보조 모니터 연결시 깜빡거림, 끊김 회사에서 m1 맥북을 사용할 때마다 보조 모니터를 사용해 왔고, 끊김없이 부드럽게 작업해왔다. 회사 모니터는 UDEA 모니터. 75Hz, 60Hz 주사율 상관없이 잘 돌아갔다. 느낌상 60Hz가 더 쾌적했지만... 문제는 집에서 개인 공부할 때 발생! 암튼 집에와서 C타입 HDMI로 연결해 사용해보았는데 처음엔 잘 나오다가, 끊기는 현상이 나타났다. 깜빡 깜빡 거리는게 아니라, 잘 쓰다가 검정화면, 잘~ 쓰다가 검정화면 이렇게 되어서 너무 답답했다. 암튼 본론을 말하자면 아래 네 가지를 시도해도 안된다면 서비스 센터로..ㅎ0ㅎ HDMI 접촉이 잘못되었나? 재부팅 해도 그런가? 모니터 해상도가 적절하게 세팅이 되었나? HDMI선이 지나치게 긴가? 나의 경우 기본 맥 모니터 설정이 75Hz였는데, 60Hz로.. 공감수 4 댓글수 0 2021. 10. 9.
NCP) nCloud 네이버 API Signature Key 생성 *이글은 다시 네이버 API를 사용할 때 더 쉽게 사용하기위해 적은 글 입니다. *사용 언어 : 자바스크립트, Nodejs 서버 네이버 클라우드 서비스의 API를 사용하는 경우 Access Key, Secret Key 를 그대로 사용하는게 아니라, 네이버에서 미리 정해진 알고리즘으로 Signature Key를 요청 헤더에 담아야 한다. 먼저 네이버의 공식 문서를 보면 x-ncp-apigw-timestamp, x-ncp-iam-access-key, x-ncp-apigw-signature-v2 이렇게 세가지를 헤더에 담아 보내야 한다. 이 세가지가 우리의 계정이다. x-ncp-apigw-signature-v2 는 시그니처 키를 사용하는데, 위처럼 특정 요청문을 HamcSHA256 알고리즘으로 암호화한후 Ba.. 공감수 3 댓글수 0 2021. 10. 9.
Server ) RESTful API, 자주 사용하는 Status code 정리 및 예시 개인적으로 공부겸, 메모용으로 작성한 글 입니다 :) 2xx Sucess 요청 성공 서버가 클라이언트의 요청을 성공적으로 처리했음 200 OK 처리 성공에 대한 모든 상태 코드를 200으로 처리해도 상관은 없다. 정책 설계 당시에서 세분화 할 것인지, 말것인지 정할 문제임. ex) GET [/api/user/12] → 12번 회원의 정보를 가져오는데 성공함. 201 Created 처리를 정상적으로 성공했고, 새로운 리소스를 생성함. 보통 POST/PUT 요청에 대한 응답으로 사용됨. * http header에 content-location를 명시해, 생성된 리소스 위치를 알려주면 최고! ex) POST [/api/user] → 신규 회원 정보 생성 완료 202 Accepted 클라이언트의 요청은 정상이나.. 공감수 1 댓글수 0 2021. 10. 4.
Server ) Api Http status code에 대하여, header와 통일시켜야할까 body에만 담아야 할까? 목차 Api 서버를 만들면서 생긴 의문점 api 서버를 만들며, response 규격을 만들고, 이것 저것 기능구현을 마쳤다. 회원 db table에서 특정 조건으로 검색도 하고, 등록도 하고 서비스 구현에 필요한 기능은 모두 마쳤다. 그러다 병렬로 진행중인 프로젝트 담당 개발자와 api 서버 response를 비교해보았다. 다른 개발자분은 모든 응답 상태, 즉 status code를 200으로 통일시켰다. (시리즈A 스타트업의 슬픔...) 나는 이전 프로젝트에서 AR Glass와 통신할때, 헤더에 status code를 담을때 약속된 코드를 넘겨 에러 핸들링이 가능하게 했다. 헤더에 status code로 넘기면, 에러가 발생할시 AR Glass 측에서 header의 기본정보만으로 try-catch가 .. 공감수 1 댓글수 0 2021. 10. 3.
insight ) 여의도 더 현대서울, 비욘더로드 전시 후기 기간 ~21/11/28 가격 (성인) 20,000 (청소년) 16,000 *취학 아동이상 관람 가능 우리 회사는 가끔씩 복지겸, 사원들 영감충전 겸 문화데이를 갖는다. 대표님께서는 특히 연출 겸 기술이 특징적인 전시를 좋아하셔서 주로 AR, XR, 빛, 융합 테마의 전시회를 자주 찾으신다. 이번에 전 사원이 함께 볼 전시는 "비욘더로드"이다. 비욘더로드는 특이하게도, 음악 앨범에 영감을 받아 제작한 프로젝트이다. 성당 느낌의 홀리하고, 판타지 같기도 하며, 신기한 느낌의 음악이다. https://www.youtube.com/playlist?list=PLded4rUc6J9W_TsYn-nZs0qQ753AjrGcy UNKLE | The Road (Part 1 and 2) www.youtube.com 굵직 굵직.. 공감수 0 댓글수 0 2021. 10. 1.
React ) 컴포넌트 안 바뀜, 안 사라짐, 쌓임 현상 디버깅 리액트로 프론트엔드 작업을 하며, 기능 단위로 컴포넌트를 나눠 사용하고 있었다. 회원 유형에 따라 컴포넌트를 보이거나 숨기는 방식이었다. {/* render() 부분 */} {/* ========== A유형 a컴포넌트 ========== */} { Number(user.userRole) === CONFIG.USER_ROLE.artist && } {/* ========== A유형 aa컴포넌트 ========== */} { Number(user.userRole) === CONFIG.USER_ROLE.artist && } {/* ========= B유형 b컴포넌트========== */} { Number(user.userRole) === CONFIG.USER_ROLE.vip && } 그런데 여기서 오류가 발생.. 공감수 0 댓글수 0 2021. 9. 30.
Server ) Nginx 502 Bad Gateway 에러 / nginx 설정 잘못함 전제 상황 Nginx 로 서브 도메인을 걸어줌 [ * ] 와일드 카드 ssl 인증서 발급 컨테이너로 proxy_pass 해줌 급한 사람을 위한 미리보기 버퍼 확장하기 proxy_pass 확인하기 dns cname/a 레코드 ip 주소 확인하기 nginx를 재시작 했는지? 기존 코드 server { root /var/www/html; index index.html index.htm index.nginx-debian.html; server_name test2.servername.co.kr; location / { proxy_pass http://172.17.0.2:4000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } s.. 공감수 9 댓글수 1 2021. 9. 28.
로직 ) 로그인, 메일 인증 사용자들이 처음으로 마주할 서비스, 로그인. 로그인이 기초이자, 보안이 걸려 있고, 완성도를 좌우한다. 학부시절엔 그냥~ input으로 생 텍스트를 넣고, 대충 인증받아 했지만, 실제 서비스는 달랐다. 사용자 정보를 받아 보관하는 만큼, 중요한 공지를 날려야 하기 때문에 연락처, 메일 등은 유요해야 하고, 암호화 해야했다. 또, 서비스를 배포하면서 개인정보보호법도 신경서야 했다. 아무튼, 개발을 진행하면서 내 생각이외로 더욱 디테일한 개발이 필요했다. 핸드폰 인증은 사전에 sdk를 신청해야하고, sms 비용을 부담하기 때문에 다음에 정리하기로 했다. 메일인증을 처음 할땐 조금 헤맸는데, 로직이 정리되고 나니 비교적 간단한 방법이었다. 이때 크게 두가지 갈래로 나뉜다. 메모리 시스템(Like Redis.... 공감수 0 댓글수 0 2021. 9. 25.
CS ) ssh, sh, bash 란 뭘까? 클라우드 서버 환경을 구축하면서... 클라우드 서버 환경을 구축하고, 실제 배포 환경 설정까지 마치면서 기초 중의 기초만 익힌 것 같다. 이제 어떻게 콘솔에 들어가고, 어떻게 포트 포워딩이 어떻게 돌아가는진 알았는데, ssh, sudo 등 거기에 쓰이는 프로토콜, 개념들이 무언지 내입으로 말하기 어려웠다. 머릿속에 추상적으로 둥둥 떠다녀, 누가 물어보면 '아는데... 그게 음...' 얼버무리게 되었다. 이를 극복하기 위해 조금씩 글을 읽고 있다. 사소한 것일지라도 기초부터 탄탄하게 공부해야 함을 요즘 들어 뼈저리게 느끼고 있다. 공부는 기초! ssh란? ssh는 프로토콜로, 인터넷 통신 규약이다. [ Secure Shell ]의 약자로 원격 호스트 컴퓨터에 접속하기 위해 사용한다. Secure 뜻대로 보.. 공감수 1 댓글수 0 2021. 9. 25.
CS) 서버 OS 알아보기, CentOS, Linux, Ubuntu, Window 서버를 생성하려 보면 다양한 OS가 선택지로 나온다. 처음에는 클라우드 서버를 생성할때 도대체 뭐가 뭔지 몰라서 리눅스만 선택하고 진행했다. 다른 OS는 어떤건지, 어떤 장단점이 있는지 항상 궁금했기 때문에 이번 기회에 정리해보려 한다. 레츠꼬! CentOS (센토스) 센토스는 Community Enterprise Operating System 의 약자이다. 그 유명한 레드햇이 만든 리눅스 운영체제, 레드햇 엔터프라이즈 리눅스(RHEL)와 완전하게 호환되는 무료 기업용 운영체제이다. 따지고 보자면 무료 버전 RHEL 이다. 그러나 이도 무색해 진것이, 2020년 8월 레드햇에서 CentOS 8을 이후로 CentOS Stream버전만 지원한다고 밝혔는데, Stable 버전을 앞으로 무료로 지원하지 않겠다는.. 공감수 1 댓글수 0 2021. 9. 5.
insight ) 행복의 기호들 행복의 기호들 사이트 바로가기 행복의 기호들 – Symbols of Happiness 디자인을 통해 본 코로나19 이전의 일상과 그 속에 자리하는 꿈, 환상, 이데올로기! symbolsofhappiness.or.kr 올해 초여름 즈음에 발견한 사이트. DDP 디자인 아카이브 기획전시 사이트이다. 디자인과 일상은 어떻게 연관되어 탄생했는지에 대한 이야기. 이런 방식으로 전시를 기획하고, 경험을 선물할 수 있구나 느낀 좋은 경험이었다. 또, 역시 정확한 목표 기획 의도, 뒷받혀주는 통일된 디자인이 주는 세련됨이 전체적인 완성도를 좌우한다는 확신을 한 계기기도 하다. 나는 개발자로서...ㅎㅎ 스텍이 제일 궁금했다. 일단, 프론트 그래픽은 Three.js로 3D WebGL을 제어하고, 그외의 메뉴나 팝업등은 일.. 공감수 0 댓글수 0 2021. 9. 5.
CDN ) CDN 결과 비교하기, 근데 거기에 Request header 분석을 곁들인... ✅ 개인 공부용으로 작성한 글입니다 :) 요청한 파일 서버에 요청한 파일로 camera.glb (11.5MB)의 3d 모델링 파일을 불러왔다. 모델링의 나름대로 디테일이 많아 꽤 큰 용량의 파일이다. nodejs 서버의 static 으로 불러오는 방법과, cdn을 거쳐서 불러오는 방법의 속도차를 비교하려한다. *3d 파일을 babylon.js로 랜더링하는 경우 load가 어떻게 이뤄지는지는 확인해봐야함. → 프론트 개발자분께 요청드려야겠다. 바빌론 에디터에서 https로 파일을 불러오는 코드를 사용해 테스트 해보았다. CDN이 무엇이냐 CDN은 ATM과 같다고 봐도 된다. CDN을 설명하는 최고의 문장인듯. 일반 도메인으로 요청을 하면, 원본 파일이 있는 서버에 요청을 하는데, 만약 원본 서버가 미국에 .. 공감수 0 댓글수 0 2021. 9. 4.
Docker ) Nodejs Build process.dlopen 오류 해결 목차 평화롭게 Docker를 사용헤오던 어느날 Docker에서 오류가 났다. 또 m1 빌드 문제이겠거니, 에러 로그를 보는데, 평소와 다른 에러 로그가 났다. 아예 node app.js 명령어를 이해하지 못하고 죽어버리는 것. Docker file -- 수정전 FROM node:14.17-alpine WORKDIR / COPY package.json ./ RUN npm install COPY ./ ./ EXPOSE 4000 CMD [ "npm", "start" ] 나는 node이미지 다운 시간을 단축시켜주는 alpine을 사용하고 있었고, 이전에 서버에 올릴때에도, 별다른 오류가 없었다. 아니, 빌드할때만 해도 오류가 없었다. 네이버 클라우드에도 올렸었다구... 오류 발생 문제는 docker run 컨테.. 공감수 0 댓글수 0 2021. 9. 4.
Node.js ) Storage 에서 사용하지 않는 더미 파일들 정리하기 -- ft.서버 스케줄링 목차 파일 업로드 사용자가 파일을 입력하면 서버는 storage에 그 파일을 정리한다. 대개 AWS라면 S3 서비스, Naver의 object storage, Azure의 bucket 서비스, 아니면 서버 디스크에 바로 저장하는 경우 등 다양한 방법으로 파일을 저장한다. 파일을 저장한 후엔, file.filename 을 통해 db에 파일 명을 저장하는 방식을 많이 사용한다. 사용자가 파일을 삭제하거나 수정할 경우 db의 파일 명은 새로운 파일 이름으로 업데이트 되고, storage에도 동일하게 파일이 올라간다. 이렇게만 보면 평화로운 서버 나라이지만, 그러나 사용자가 삭제한 파일은 여전히 storage에 저장되어 있다. 따로 storage에 delete요청을 보내지 않았기 때문이다. 더미 파일을 정리하는.. 공감수 0 댓글수 0 2021. 8. 22.
React ) React 이벤트 버블링 막기 게시판을 만들면서, 게시글을 누르면 페이지를 이동하는 기능을 추가했다. Link기능을 사용하기엔 너무 광범위하고, css가 무너지는 대참사가 일어난다. 때문에 useHistory()를 사용해 페이지 이동 함수를 만들고 의 onClick 이벤트로 붙여준다. 그런데 문제 발생! 게시글 아이템의 메뉴버튼을 누르면 alert('test')가 뜬 후, 기존 페이지에 잔류해야하는데, tr의 onClick이벤트가 실행되는 오류아닌 오류가 발생한다. 이는 바로 이벤트 버블링 때문이다. 비눗방울이 아래에서 숑숑 위로 가는 모양으로 버블링이라 했다 한다. 부모 요소에 이벤트 리스너를 붙이고, 자식 요소를 클릭하면 이벤트 버블링이 일어나 부모한테까지 이벤트가 전달된다. 이번 프로젝트의 경우에는 메뉴 버튼을 클릭해 tr까지 .. 공감수 0 댓글수 0 2021. 7. 24.
Node.js ) 페이징 처리 1 - offset, limit 방식 목차 백앤드 공부하면 빼놓을 수 없는 개념, 바로 페이징! 처음에 페이징 처리를 배웠을때 나름 중-고급이라는 교수님말에 지레 겁먹은 기억이 있다. 아니... DB 불러오면 끝아닌가? 굳이 페이징 처리를 주어야 하나? ---쪼쪼쪼렙 시절 그래서 Database 같은 자돌 라이브러리만 쓰고 도전을 안했다. 하지만 언젠가 해야할거, 이번에 빠르게 정리해두자! 하는 마음으로 쓰는 글이다. 이번 프로젝트는 React/Node.js 기준이다! Intro🎈 페이징의 필요성 사실 다 아는 내용이지만, DB에서 모든 정보를 몽!땅! 가져온다는건 무리이다. 쿼리문 자체가 느린 작업인데, 10,000건, 1,000,000건 늘어날지도 모르는 칼럼(데이터)들을 한 번에 가져와 프론트에서 랜더링한다? 무조건 로딩이 길어진다. .. 공감수 1 댓글수 0 2021. 7. 24.
React Router ) Link 기능을 함수로 빼기, history와 location 목차 기존에 html/js로 하드코딩한 프로젝트를 리액트로 리팩토링하게 되었다. 리액트로 리팩토링하면서 프론트와 백을 확실하게 나누게 되었다. 리액트 라우트를 사용하면 보다 를 권장한다. 하지만, Link를 사용하다보면 기존 element UI가 무너지는 경우가 있다. 다음과 같이 table 안에 tr을 정의해 링크를 걸어주고 싶은 경우, Link로 감싸게 되면 UI가 무너진다. 코드부터 보기 때문에 링크 이동 기능을 함수로 뺄 필요가 있다. tr태그에 onClink으로 링크 이동 함수 linkToArticleDetail 를 연결해주자. import React from 'react'; import {Link, useHistory} from "react-router-dom"; const ArticleLis.. 공감수 0 댓글수 0 2021. 7. 11.
Docker ) 도커, 실행했는데 링크 접속이 안되는 경우! 한줄 요약 Express 배포 포트랑, Dockerfile에 정의한 EXPOSE포트가 같은지 확인 컨테이너를 써보자고 호기롭게 구글링 시작! 확실히 도커 써보니까 배포과정이 간결해졌다. 서버에 올려서 오류 테스트하는 과정없이 로컬에서 바로 바로 테스트하니까 마음도 놓이고! 1. 프로젝트 설정시 정의한 배포 포트를 본다 // Express 환경 - 모듈 가져오기 app.set('port', process.env.port || 3000); 2. Dockerfile에서 EXPOSE 할 포트 번호를 확인한다 (1)에 정의한 3000과 다르다. 이대로 하면 웹 프로젝트에 접근이 안 된다. # 어쩌구 저쩌구 ... EXPOSE 8080 # 땡!땡! 3. 이 두 포트 번호를 일치시켜준다 # 어쩌구 저쩌구 ... EX.. 공감수 0 댓글수 1 2021. 5. 31.
Node.js ) 암호화 사용, pbkdf2 익히기, 암호화 모듈화까지!! 목차 여기 네이버 글이 암호화의 간략한 역사와 발전 과정을 가장 잘 요약하고 있다! 티스토리 글은 좀 더 이해하기 쉽게 써져, 공부할 때 많은 도움이 되었다 ㅎㅎ 더보기 https://d2.naver.com/helloworld/318732 https://st-lab.tistory.com/100 패스워드의 암호화와 저장 - Hash(해시)와 Salt(솔트) '보안은 그 어느 시스템의 정보보다 가장 중요하며 가장 안전해야 하는 것이다' 필자가 "프로그래머로써 가장 중요하게 생각해야 할 것 하나만 뽑는다면?" 이라는 질문이 들어온다면 위와 같이 st-lab.tistory.com 내가 이해하고 정리한 바론, 이러하다! 단방향 잘 안씀. 안쓰는게 맞음 암호화만 가능, 복호화 불가능 같은 문자열이면 매번 같은 다이.. 공감수 0 댓글수 0 2021. 5. 27.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.