글모음

PrivateRouter [ 에러 ] [Error] Error: [PrivateRoute] is not a component. All component children of must be a or -> ' 내부에 있는 모든 컴포넌트들은 또는 여야 한다.' 컴포넌트를 로 변경하라는 소리 ReactRouter V5와 V6에서 PrivateRoute 설정 방법이 달라져서 생기는 에러. PrivateRoute 컴포넌트와 Route 설정을 새 방법으로 다시 해줘야한다. React Router의 현재 버전에서는 App.js에서 Route 설정부터, PrivateRoute 컴포넌트 생성부터 다 달라졌다. 1. PrivateRoute 컴포넌트 생성 인증된 사용자만 액세..

bcrypt, crypto 회원가입 / 로그인 / 비밀번호 찾기 서비스를 개발하는 중에 bcrypt와 crypto 모듈이 있다는 걸 알게 되었다. 두 모듈 모두 언뜻보면 비슷한 암호화 관련 라이브러리이지만, 각각의 용도와 특징이 달라서 정리하려고 한다. [ bcrypt ] bcrypt는 Blowfish(블로피시) 암호를 기반을 둔 암호화 해시 함수이다. 주로 비밀번호와 같은 민감한 정보를 암호화할 때 사용되고, 입력값을 고정된 길이의 출력값으로 변환해 준다. 이때, 입력값에 약간의 변화가 생겨도 출력값이 전혀 다르게 나오는 특징이 있어서 회원가입시 토큰 비교에도 사용된다. 입력값을 여러 번 반복해서 암호화하기 때문에 보안성이 매우 높다는 장점이 있지만, 안전한 암호화를 위해 암호화 속도가 느리다는 단점이..

bcrypt VS bcryptjs 회원가입과 로그인 페이지를 만들면서 클라이언트 측에서 백앤드로 비밀번호를 보내는 과정에서 비밀번호를 그냥 보내지 않고 암호화해서 보내야 하는데, 암호화 라이브러리를 찾아보다가 bcypt와 bcyptjs에 대해 알게 되었다. 둘 다 이름도 비슷하고, 쓰는 방법도 비슷해서 이번 기회에 정리해보려고 한다. [ bcrypt ] C++로 작성된 네이티브 모듈이라 속도가 빠름 서버에서 사용 시 이점이 있지만, 적절한 방식으로 설치 및 사용을 해야 함 bcryptjs보다 더 많은 알고리즘 옵션을 제공 [ bcryptjs ] JavaScript로 작성된 모듈 네이티브 모듈보다 느리지만, Node.js 및 브라우저 모두에서 사용 가능 (그래도 성능 저하는 그렇게 크지는 않다고 한다.) ..

현재 React drop-zone과 Canvas API로 이미지를 받아오는 페이지를 작업중이다. React drop-zone으로 이미지 파일을 받고, Canvas를 통해 사용자가 이미지를 수정하도록 작동하려고 하는데 생각처럼 돌아가지 않았다. [ Canvas를 다루는 중에 생긴 문제점들 ] 1. 빈 Canvas 생성 : Canvas 위에서 drawing을 하고 난 뒤에, 이미지를 다시 첨부해도 Canvas 위에 이미지가 제대로 올라가지 않음 2. 마우스 커서가 맞지 않음 : Canvas의 크기를 변경시에 Canvas 위에서 마우스 커서보다 더 위에 drawing이 됨 3. Canvas의 이미지 비율이 깨짐 [ 1. 빈 캔버스 생성 ] - globalCompositeOperation 속성 빈 캔버스가 계속..

2장 의미 있는 이름 [ 의도를 분명히 밝혀라 ] 변수나 함수 그리고 클래스 이름은 다음과 같은 굵직한 질문에 모두 답해야한다. 변수(혹은 함수나 클래스)의 존재 이유는? 수행 기능은? 사용 방법은? 따로 주석이 필요하다면 의도를 분명히 드러내지 못했다는 말이다. [ 그릇된 정보를 피하라 ] 그릇된 단서는 코드의 의미를 흐린다. - 나름대로 널리 쓰이는 의미가 있는 단어를 다른 의미로 사용해도 안 된다. - 서로 흡사한 이름을 사용하지 않도록 주의 - 소문자 L이나(숫자 1과 혼동), 대문자 O(숫자 0과 혼동)도 주의해야한다. [ 의미 있게 구분하라 ] 명확한 관례가 없다면 변수 moneyAmount는 oney와 구분이 안 된다. customerInfo는 customer와, ..

1장 깨끗한 코드 - 2p. 코드가 존재하리라 코드의 종말이 코앞에 닥쳤다고 주장하는 사람이 없지 않다. 코드를 자동으로 생성하는 시대가 다가온다는 말이다. 그때가 되면 프로그래머는 필요가 없다. 영업 직원이 명세에서 프로그램을 자동으로 생성하면 되니까. 헛소리! 앞으로 코드가 사라질 가망은 전혀 없다! 왜? 코드는 요구사항을 상세히 표현하는 수단이니까! 어느 수준에 이르면 코드의 도움 없이 요구사항을 상세하게 표현하기란 불가능하다. 추상화도 불가능하다. 정확히 명시하는 수밖에 없다. 기계가 실행할 정도로 상세하게 요구사항을 명시하는 작업, 바로 이것이 프로그래밍이다. 이렇게 명시한 결과가 바로 코드다. -> 문득 유튜브에서 본 AI 기반 웹 개발 툴 시연이 생각난다. 기억은 ..

프로젝트나 알고리즘 공부를 하면서 코드를 짤 때마다 어김없이 드는 생각이 있는데, 바로 '지금 짜고 있는 코드가 과연 좋은 코드일까?'다. 좋은 코드가 왜 필요한가? 좋던 말던 돌아가면 되는 거 아닌가! 대학교 때 '산업안전'이란 교양을 들은 적이 있는데, 내 전공인 컴퓨터 공학과는 전혀 상관이 없어서 별생각 없이 학점 따려고 신청한 과목이었지만 들으면 들을수록 내용이 유용해서 정말 열심히 공부했다. 주로 산업 현장에서 사고가 일어나는 이유, 사고의 종류, 사고 예방법, 보호기구 정보 이런 걸 배웠는데, 특히 아직도 기억에 남는 건'하인리히 법칙'이다. 하인리히의 법칙은 한 번의 대형 사고가 일어나기 전에는 29가지의 경미한 사고와 300가지의 증조가 일어난다는 통계를 분석한 법칙이다. 즉, '대형 사고..

코테할때나 DB 다룰때 필수인 정규식 공부에 도움이 되는 사이트 정리 실시간으로 쳐보면서 확인 가능 https://regexr.com RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com https://www.hackerrank.com/domains/regex Solve Regex Code Challenges Explore the power of regular expressions www.hackerrank.com 여기가 정리가 진짜 잘 되어 있다. https://..

한 달간 진행하는 대코캠(대학생 코딩 캠프) 참여하게 된 계기는 링커리어에서 대외활동 뭐 없는지 살펴보다가 온라인 코딩 캠프가 있어서 온라인으로 개발 프로젝트하는 건 줄 알았다. 알고 보니 온라인 인강 듣는 거.. 처음에는 온라인 강의 듣는 걸 코딩 캠프라고 포장한 느낌이라 별로였는데 홈페이지에 강의 목록이 끌리는 게 많았다. 대부분 내가 배우려고 염두에 두고 있었던 리스트들 (MySql, JavaScript, OOP, 알고리즘, 인공지능 - 딥러닝, 머신러닝...) 등 종류가 엄청 많았다. 여기는 질보다 양인 사이트는 아니겠지 하면서 별 기대 없이 강의 질 별로면 빠르게 강의 들으면서 모르는 개념이나 잡아 가보자 하는 생각이었는데 강의 질이 생각보다 좋았다.. 너무 좋았다.. 진짜 하루 종일 공부했다 ..

4/16 ~ 4/17일 2일에 거쳐서 하는 수업 1시부터 6시까지 선착순 30명이라고 해서 부랴부랴 신청했는데 실제로 듣는 사람은 9명이였음.. ㅋㅋㅋㅋ 줌으로 수업을 진행 실습을 위한 AWS 계정도 만들어서 제공해줬다. AWS 클라우드 실습만 하는 줄 알았는데 클라우드 기초부터 용어까지 알려주셨다. Cloud-computing definition : keyword 1) Network : Borad Network(광대역 -> 인터넷) 2) Scalable : 확장 / 조절 가능한 (늘어날 수도 있고, 줄어들 수도 있음) - 범위(서버 용량) 3) Elastic : 탄성이 있는 (시간-> 원하는 시간, 시점에 바로 반응) 4) 'IT' service : IT service: 컴퓨팅을 의미 일정 비용을 내고..