글모음

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 컴포넌트 생성 인증된 사용자만 액세..

PrivateRouter 리액트에서 웹 애플리케이션을 개발할 때, 인증된 사용자만 특정 경로에 접근할 수 있도록 제한하려면 어떻게 해야 할까? React Router의 'PrivateRoute' 컴포넌트를 이용하여 인증이 필요한 경로에 대한 접근을 제한하는 법을 정리하고 이전 버전(v5)과 현재 버전(v6)의 'PrivateRoute' 컴포넌트를 비교해 보자 [ PrivateRoute란? ] PrivateRoute는 사용자가 인증(로그인)이 되어 있을 때에만 특정 페이지에 접근할 수 있게 하는 기능을 제공한다. 인증(로그인)되지 않은 사용자가 내 정보 페이지나 대시보드 페이지와 같은 페이지에 PrivateRoute로 설정된 페이지로 접근하려 하면, 지정된 페이지로(Home이나 Login) 리다이렉트 돼서..

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 속성 빈 캔버스가 계속..

코딩할 때 시맨틱 태그들이 헷갈려서 정리해 봤다. [ Sementic tag ] HTML의 시맨틱 태그란 HTML 태그들 중에서 콘텐츠의 의미를 명확하게 표현하기 위해 사용하는 태그들이다. HTML 문서의 구조를 정의하기 위해 사용되며, 그냥 단순하게 태그들을 이용했을 때보다 더 명확한 의미를 가진다. : 웹 페이지의 상단 부분 : 웹 페이지의 내비게이션 메뉴 : 웹 페이지의 주요 콘텐츠 : 웹 페이지에서 상호작용을 할 수 있는 콘텐츠의 조각 : 웹 페이지의 콘텐츠를 구분할 수 있는 섹션 : 웹 페이지의 주요 콘텐츠와 관련이 적은 콘텐츠를 : 웹 페이지의 하단 부분 (주로 연락처 같은 정보들을 footer로 만든다) ~: 웹 페이지의 제목을 나타낼 수 있는 태그. 은 제목의 중요도가 가장 높고, 은 제목..

코드잇으로 한 달 동안 300 시간 넘게 미친 듯이 공부한 후기 코드잇은 코딩 인강 사이트를 찾아보다가 우연히 알게 되었는데 호기심에 들어가본 사이트엔 대부분 내가 공부하고 싶은 것들의 (MySql, JavaScript, OOP, 알고리즘, 인공지능 - 딥러닝, 머신러닝...) 등 종류가 엄청 많았다. 한 번만 결제하면 무제한으로 강의를 전부 다 볼 수 있다는데, 뷔페도 다양한 음식을 먹을 수 있지만 그렇게 질을 기대하고 가는 게 아니듯 저렴한 가격에 무제한으로 강의를 들을 수 있다면 강의 질이 낮지 않을까하는 의심이 처음에 컸었다. 그러다 작년에 코드잇에서 한 달 동안 진행하는 대코캠(대학생 코드 캠프)을 알게 되었다. 매일 코드잇으로 공부해서 인증을 남기면 우수 참여자로도 뽑히면 5만 원의 장학금도 ..

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

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

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