사용자 정보를 DB를 통해 관리하고자 할 때, 사용자 패스워드는 보안을 위해 원본 그대로가 아닌 암호화된 형태로 저장되어야 한다.내 경우는 Next.js 어플리케이션에서 사용자가 댓글을 작성할 때, 입력된 패스워드를 암호화하기 위해 단방향 해시 함수 모듈인 bcrypt

Next.js라는 멋진 리액트 프레임워크를 알게 된 후, 약 3주 동안 사이드 프로젝트를 진행하면서 느낀 점에 대해 간략히 정리해 보았다. 장점 1. 매우 간편한 페이지 라우팅 기존 리액트 프로젝트에서는 페이지 라우팅을 위해 react-router 라이브러리를 설

동적 라우팅 페이지에서 getStaticPaths 및 getStaticProps를 통해 Static Generation을 적용하려는 상황에서, 다음과 같은 문제가 발생하였다.Link 컴포넌트를 통해 동적 라우팅 페이지로 접근할 때에는 getStaticProps가 정상적

1) React Query란? React Query는 리액트 환경에서 서버 상태 및 비동기 데이터를 관리하기 위한 라이브러리이다. 기존에 Redux를 통해 API 통신을 수행하거나 비동기 데이터를 관리할 때엔 여러 불편함이 있을 수밖에 없었다. 왜냐하면 Redux는

Recoil이란? Recoil은 React의 상태 관리 라이브러리 중 한 종류이다. React와 기존 상태 관리 라이브러리의 문제점을 개선하기 위해 만들어진 새로운 개념의 라이브러리라 할 수 있겠다. React(Context API)의 단점 컴포넌트 상태를 서로

1) Next.js란? Next.js는 빠른 웹 애플리케이션 제작을 위한 여러 유용한 기능들을 제공하는 리액트 프레임워크이다. 대표적인 기능으로는 프리 렌더링, 동적 라우팅, 자동 코드 스플리팅, 이미지 최적화, API 라우트 등이 있다. 이 중 프리 렌더링(Pr

24살, 3학년, 2022년도 이제 조금만 있으면 끝이 난다. 이상하게도 시간은 갈수록 더 빠르게 느껴진다. 올해도 내 인생에서 가장 빠르게 흐른 해가 되었다. 벌써 연말이라니... 공부를 계속 하다보면, 무작정 앞만 보고 걷기보단 가끔은 지금껏 해온 일들을 돌아보고

'웹 접근성'이란? 저시력자, 청각이상자, 고령자 등을 가리지 않고 모든 사람이 웹 사이트에서 제공하는 정보에 동등하게 접근하고 이해할 수 있도록 보장하는 것을 말한다. 크롬 개발자 도구에는 현재 페이지에 대한 웹 접근성 점수를 측정할 수 있는 Lighthouse라는

우아한테크코스 웹 프론트엔드 5기에 지원한 후, 10월 26일부터 11월 22일까지 4주 간 해당 교육과정을 가볍게 체험해볼 수 있는 '프리코스' 단계가 진행되었다. 짧게 느껴졌던 4주였지만 꽤 많은 것을 배워갈 수 있었고, 그 내용을 정리할 겸 간단히 회고를 작

테스트 과정에서 실제 객체를 대신할 가짜 객체를 만드는 것. 실제 객체를 이용해 테스트를 하기 번거롭거나 불가능할 때 mocking이 필요하다.ex) 데이터베이스 통신 함수 등...Jest에서는 여러 가지 mocking 관련 함수들을 제공한다.테스트하고자 하는 개체의

스택을 이용한 괄호쌍 문제의 응용이다. 단순히 괄호 간에 짝이 맞는지를 판단하는 것에 더하여 각 괄호마다 가중치를 두어 덧셈 및 곱셉으로 전체 값을 계산해야 한다.solved.ac 기준 실버1 티어 문제임에도 처음 문제를 봤을 때 바로 풀지 못했고, 다른 분들의 코드를

React와 Node.js로 만든 내 프로젝트를 AWS에 배포하는 과정에서 발생한 문제상황과 해결 방법을 기록한 글이다. 1. 인스턴스 생성 먼저, AWS에 가입 후 원하는 지역에 인스턴스를 생성해 준다. 내 경우 아마존 프리 티어로 이용 가능한 t2.micro 유

각각의 가치와 무게를 지닌 아이템들을 정해진 중량 내에서 최대의 가치가 되도록 선택하는 냅색 알고리즘 문제이다.가장 먼저 떠올린 것은 백트래킹을 이용하여 모든 아이템의 모든 조합의 수를 따져보는 방법이었지만, 시간복잡도가 기하급수적으로 커지므로 쓸 수 없었다.다음으로

일반적인 사칙연산기호 및 괄호로 이루어진 식을 후위 표기식 형태로 변환하는 문제이다.주어진 문자열의 각 문자를 탐색하며 조건에 따라 적절한 처리법을 떠올리고 분기 처리하는 것이 중요하다.골드 상위권 문제라 역시 쉽지 않았다... 반례를 보며 겨우 풀었다.내 코드의 경우

현재 진행 중인 프로젝트에 직접 계정 생성/로그인을 구현하는 것 외에 OAuth 2.0을 통한 '카카오 계정으로 로그인' 기능을 구현하려고 한다.프론트엔드는 React, 백엔드는 Koa, DB는 MongoDB를 사용하고 있다.사용자가 카카오 계정으로 로그인하면 인가 코

현재 진행 중인 프로젝트에서 사용자가 이름, 성별, 나이 등의 정보 외에 '프로필 이미지'를 설정할 수 있도록 하고 싶다.프레임워크로 프론트엔드는 React를, 백엔드는 Node.js의 Koa를 사용하고 있다.사용자가 이미지 파일을 업로드하면 로컬 경로에 저장한 다음,

Typescript + Node.js 환경에서 mongoose를 이용해 mongoDB와 연결하는 과정에서 알 수 없는 에러가 발생했다.같은 코드 구성의 Javscript 환경에서는 문제 잘 연결이 되었기에, 처음에는 ts-node나 프로젝트 설정 문제인 줄 알았다.

저번 달, 학과 게시판에서 교내 프로그래밍 대회를 개최한다는 글을 보게 되었다.이제 나름 고학년이 되었지만 아직 코딩 관련 대회에 참여해 본 적이 없어 이번 대회가 꽤 좋은 기회라고 생각했다.물론 수상을 바라지는 않았다...백준 등 PS를 다시 시작한 것도 얼마 되지

문자열 조작의 비중이 높은 문제였다. 시간복잡도를 줄이기 위해 실제 배열에서 요소를 삽입/삭제/뒤집는 대신 시작점과 끝점을 옮긴 후 출력하는 방식으로 구현하였다.명령어 R을 입력받을 때마다 flag를 반전시키고, 이에 따라 D가 입력됐을 때 시작점을 옮길지 끝점을 옮길

많은 조건을 꼼꼼히 따져봐야 풀 수 있는 문제였다. 다른 분이 올려주신 반례 모음집이 문제를 푸는 데 많은 도움이 됐다.발상 자체는 단순하다. 누를 수 있는 숫자로 최대한 목표 채널과 가까운 값을 만든 후 증감 버튼으로 조정하는 횟수를 세면 된다. 총 5가지의 경우를