건망증 환자의 뇌장하드

React로 front-end부분을 만들다 문제점을 발견했다. 위의 사진과 같이 navigation bar가 뻥 뚫려버리는 상황이었다. 로그인 박스의 크기가 커서 width가 100%를 초과하고, navbar의 width 100%이라 생긴 문제다. window size는 모든 컴포넌트에서 필요할 것으로 생각되어 redux로 화면 사이즈를 관리하기로 했다. 화면 사이즈가 변경되면 변경된 사이즈로 styled-component에 대고 로그인 박스의 크기를 조정할 생각이었다. redux에 window 크기를 저장 해놓고 window 크기가 변경될 때 마다 dispatch했는데 문제점을 발견했다. pixel단위로 dispatch를 하는 것이었다. 이러면 함수를 계속 호출하게 되고 성능상 문제가 생길 수 있다. ..

회원 가입 페이지와 유저 정보 수정 페이지 작업을 진행중 이다. 이렇게 비슷한 폼이기 때문에 같은 코드를 재활용 하려고 했다. 이런 형태의 컴포넌트로 구성하려고 했고 이런 형태로 개발 중이었다. 하지만 다시 분리를 해야될 것 같다. 회원가입 페이지와 유저정보 수정페이지의 코드의 모양만 비슷할 뿐 분기처리 및 상태관리는 상당히 다르기 때문이다. 이런 형태로 pageName이 "UserRegister"인지 아닌지 나눠야 될 부분이 한두군데도 아니고 고려해야 될 내용도 다르기 때문이다. 컴포넌트를 다시 분리하려는 이유는, 1. 코드의 가독성이 떨어진다. - 루트 컴포넌트가 회원가입페이지인지, 유저정보수정페이지인지에 따라 적용되는 내용은 완전히 다르다. - 하지만 작성되는 코드는 비슷한 형태를 띈다. - 코드의..

1. styled컴포넌트만을 이용했던 것을 scss, styled컴포넌트로 나눔 2. Wrapper컴포넌트 수정 3. 로그인 페이지 / 회원가입 페이지 수정 기존 로그인, 회원가입 페이지는 Wrapper컴포넌트의 navbar, sidebar를 화면에 포함한 형태가 아니었지만 어색한 느낌이 들어서 화면에 모두 출력. 4. 회원가입 페이지 컴포넌트 분할 및 유효성 검사 개발 리팩토링 하면서 가장 만족하는 부분이다. 기존에는 하나의 컴포넌트에서 모든 상태를 관리하면서 코드가 굉장히 비대해졌었는데, 각 input 마다 컴포넌트를 분할하여 코드의 복잡성을 크게 줄였다. 기존에는 왜 이렇게 할 생각을 못했을까..,? 소소하게 하나 배우고 간다,,,, ^-----------^ 해야될 것 1. 회원가입 페이지 - 유효..

퇴사 이직을 하겠다고 생각하고 지난 3월 10일 1년 8개월 다닌 회사에서 퇴사를 했다. 기존에 하던 일은 RPA프로그램을 만드는 일이었고, 프로젝트를 진행하며 팀 프로젝트에서의 협업, 타 부서 또는 고객과의 의사소통하는 법에 대하여 많은 것을 배울 수 있었다. 하지만 사용하는 기술은 Automation Anywhere라는 RPA 전용 개발툴과 excel 뿐이었고(프로그래밍 언어는 사용하지 않는 개발툴이었다...), 아무래도 고객사가 대기업이다 보니, 보안상의 이유로 git, github와 같은 형상관리 시스템, tello나 jira와 같은 협업툴을 일절 사용 할수가 없었다. 실무 프로젝트를 진행하며 많은 것을 배웠지만, 반대로 이 일을 계속 할 경우 개발자로써 기술적으로 커리어에 문제가 될 수도 있겠다..

React에서 유저 정보 수정기능과 회원 탈퇴 기능을 만들었다. 우측 상단 회원 대표사진을 누르면 회원이름 및 정보수정, 로그아웃, 탈퇴를 선택할 수 있다. 1. 회원탈퇴를 선택하였을 경우 token이 삭제되고, DB에 저장되어 있는 유저가 없어진다. server에 post로 logout, delete(+ 파라미터email) 2가지 요청을 한다. server의 유저 삭제 코드는 다음과 같이 간단하게 구현되어 있다. 2. 유저정보수정 ui는 회원가입 페이지의 모양을 그대로 가져왔다. 하지만 대표 이미지, 이메일. 유저명은 입력이 되어 있는 상태이며 이메일은 수정할 수 없다. 현재 가입되어있는 유저의 정보를 수정 하면 수정된 정보가 화면에 출력된다. 간단하게 유저이름과 사진을 수정하였다. 유저 정보수정에 대..

React 라이브러리를 사용하여 메인화면, 회원가입페이지, 로그인페이지 구현. Typescript 사용 화면 UI는 bootstrap을 이용하여 진행 중 메인화면 (상단 navgation bar, side bar, landing page) 회원가입페이지 (대표이미지 설정, 유저이름, 유저이메일, 유저패스워드 입력기능) 로그인페이지 (email과 비밀번호를 이용하여 로그인) 우선 클라이언트와 서버의 통신을 위해 서버(nestjs)에서 클라이언트의 포트번호에 대한 CORS 허용을 해주었다. 클라이언트는 3000포트를 사용하기 때문에 아래와 같이 설정해주었다. -> enableCors 클라이언트에서의 폴더구조는 아래와 같다. view폴더 아래에 각 페이지별 src, default폴더 아래에 nav_bar, s..

nestjs에서 회원가입, 로그인/아웃, 회원수정, 회원탈퇴 기능을 구현해보았다. 일단 nestjs에서의 Data flow는 아래의 사진과 같이 진행되는듯 하다,,, user모듈, 컨트롤러, 서비스를 만들고 각각 기능을 구현했다. test-server 폴더 내 소스코드를 작성하고 있는 중이며 폴더구조는 아래와 같이 진행중이다. package.json의 "scripts"에서 "start"를 하면 nestjs Application이 구동된다. package.json이 있는 폴더에서 "npm run start"를 입력. nestjs에서 시작점은 main.ts이다. 1. main.ts bootstrap() 함수를 실행하면 NestFactory를 거쳐 AppModule을 실행한다. (cookieParser는 생성..

nestjs 환경에서 DB를 연동하려고 열심히 검색해 보았는데 typeorm 라이브러리를 활용하여 연동하는 글이 대부분이었다. 하지만 typeorm 라이브러리를 사용하지 않고 연동해 보고 싶었고, DB연동하는 방법을 찾아보며 실행 해보았고 아래는 예시 소스이다. nestjs와 mysql을 연동할 때 typeorm을 사용하여 SQL을 자동으로 만들어주는 것은 생산성 측면에서는 효과가 좋겠지만, 아직 DB에 대한 지식과 경험이 부족하여 공부를 위해 SQL을 직접 작성하여 DB에 접근하는 방식으로 개발해보려고 한다. typeorm은 DB에 익숙해졌을 경우 사용할 생각이다. 먼저 dependency에 mysql을 추가한다. npm install mysql 그리고 db_connect.ts를 만들어 아래와 같이 작..