리주의 프로그래밍 공부

7일짜리의 간단 프로젝트를 진행하면서 매일 후기를 남기려고 했지만 실패했다. 운동하는 시간마저 줄여가면서 열심히 프로젝트 기능 구현에 힘써봤지만, 그 마저도 성공하지 못했다. 프로젝트에서 구현하려 했던 기능들은 다음과 같다. 1. JWT방식의 로그인 구현 2. 회원가입 구현 3. 로그인 여부에 따른 리다이렉트 결과적으로 성공했던 부분은 1번과 2번이었다. 사실 3번도 성공은 했으나, 썩 만족스러운 부분은 아니었다. 일부만 성공적이었다고 본다. 퇴근 후에 리액트를 공부하면서 해본 결과, 짧은 시간 동안에는 리액트의 기본 개념을 확실히 습득하지 못했다. vue의 미들웨어 기능이나 네비게이션 가드 같은 부분을 찾아보려 했지만, 7일동안 나의 노력이 부족했다. 특히나 이번 계기로 React도 처음 경험해봤지만,..

어쩌다보니 리액트를 시작하게 되었다. 맛보기로 유튜브(https://www.youtube.com/watch?v=V9XLst8UEtk&ab_channel=%EC%BD%94%EB%94%A9%EC%95%8C%EB%A0%A4%EC%A3%BC%EB%8A%94%EB%88%84%EB%82%98)를 시청 해당 강의 영사은 리액트보다는 타입스크립트에 조금 더 초점을 뒀다. 영상 시청이 끝난 뒤, 들었던 생각들 1. v-for, v-if 같은 것들은 어떻게 사용하지? 2. 라우터는 어떻게 설정하지? 3. 상태관리는 어떻게 해야하지? 1번에 대해서는 구글링으로 쉽게 찾을 수 있었다. 기존에 Vue에서는 아래와 같이 v-for로 사용하는데 // Vue.js {{data}} 그에 반해 React는 다음과 같이 사용한다 // R..

개발자 오픈채팅방에서도 자주 보이던 질문. 매번 봐왔지만, 매번 읽고 넘어가서 그랬더니.. 막상 면접에서 답할 생각은 못하겠어서 찾아보았다. 1. 인터넷에 연결할 서버를 파악 > 입력한 도메인을 사용해서 웹 사이트를 호스팅하는 서버의 IP 주소를 조회 > 이 때, DNS 조회를 사용 > DNS는 복잡하고 빨라야하기 때문에 다양한 위치에 캐시로 저장됨 (브라우저 캐시 > OS 캐시 > 라우터의 로컬 네트워크 캐시 > 회사 네트워크 또는 ISP 캐시 조회) > 캐시에서 해당 IP 주소를 찾을 수 없는 경우, 회사 네트워크 또는 ISP의 DNS 서버가 재귀적으로 DNS 조회 수행 2. DNS 조회로 얻은 IP 주소와 포트 번호를 사용하여 해당 서버에 TCP/IP 연결 > HTTP의 경우는 기본 포트 80 사용..

다른 언어에 비해 형변환이 자유로운 자바스크립트. 실무에서 자바스크립트를 사용하다보니, 0을 할당한 값인데, 어느샌가 '1'이 되어버린 변수들을 마주하는 일이 많았다. 그래서 이런 경우에 생기는 에러들을 쉽게 접할 수 있었다. 되도록 이런 경우를 없애버리는게 베스트지만, 종종 기존 코드들까지 건드리기 힘든 순간들이 찾아오니... 하지만 타입스크립트를 사용하게 된다면 이런 문제들은 다 사라진다. 물론 다른 문제가 생긴다. 위에 언급한대로 자유롭게 코딩을 해왔더라면, 타입스크립트를 초반에 사용할 때, 괴로울 수 있다. (그렇게 any가 난무하게 되는 상황이 오기도 한다.....) 내가 느낀건 단지 이뿐. 이걸 팀에서 극복한다면 형변환으로 인한 기본적인 오류는 사라지게 된다. 구조 분해 할당에서도 유용하게 사..

입사 후에 한참 사용하던 Nuxt.js에 익숙해져있는 상태에서 백오피스 개편 작업으로 맛본 Vue3 Composition API (추가로 Typescript까지) 기존 Vue2에서 Option API를 사용하면서 Composition API의 장점을 봤을 때, 직접 실무 프로젝트에 사용해보는 기회를 접하고 싶었다. 어떻게, 얼마나 내가 기대하는 만큼 코드가 재사용성이 높아지고, 간결해질지 궁금했다. 결론적으로는 아직 Composition API의 크나큰 장점을 제대로 살려내지 못해 아쉬움이 남았다. 다음은 이번 실무에 진행한 내 작업 방식이다. 폴더 구조(예시 컴포넌트명) Tab ├ Component │ ├ Top.vue │ ├ List.vue │ └ Tab.vue ├ Composable │ ├ user..

회원 탈퇴시, 작성글, 좋아요, 스크랩, 댓글 정보도 모두 삭제하기로 의견이 모였다. >> 개인프로젝트에서는 참조 무결성으로 인해, 자식 테이블의 정보를 삭제한 뒤에, 부모 테이블의 정보를 삭제하는 방식을 택했다. (사실 이때에는 다른 방법을 생각할 시도조차 안했던 것 같다...) 하지만 이번에는 부모 테이블의 정보를 삭제할 때, 자동으로 자식 테이블도 삭제하는 방법을 찾았다. 바로 제약 조건에 "on delete cascade" 함수를 넣는 것이다. >> 회원 탈퇴시에 그 회원이 남긴 정보를 삭제하는데, 관리자 모드가 있다면, 회원이 탈퇴했을때의 기록? 로그는 안남기나?

on delete cascade 회원 탈퇴 기능으로 Mapper를 작성하는 도중에, 부모테이블(ex. 유저 테이블) 삭제시, 자식테이블(ex. 댓글, 좋아요 등)의 데이터 값도 동시에 삭제할 수 있을까? 라는 생각으로 찾아보다 알게된 함수로 부모 테이블의 데이터를 삭제할 때, 참조된 자식 테이블의 데이터도 자동으로 삭제 사용 예시 1. 기존에 생성했던 제약조건명을 다음 명령어로 확인 select * from information_schema.table_constraints; 2. 해당 테이블에서 수정하기를 희망하는 제약조건명을 삭제후, alter table (서버명).(테이블명) drop foreign key (제약조건명); 3. on delete cascade를 추가하여 새로운 제약조건을 생성 alte..

포트폴리오를 다듬기 위해 작업하던중 참고할게 생겨서 github 프로젝트 repository에 들어갔다. 그런데.. 있어야할 파일들이 중간중간 안보였다. >> 초반에 깃허브 사용에 미숙했던 나머지, commit 후 push를 잘못한것 같다. local에만 했다던가, 새로운 파일들을 제외하고 push했다던가.. 과거의 내가 무슨 잘못을 한건지 모르겠다. 문제는 프로젝트가 제대로 끝난줄 알고 local에 있는것들을 모두 삭제했다는 것이다. 크나 큰 실수였다. 커밋내용에는 ~~ 적용, ~~~수정이 적혀있는데.. 들어가면 파일들이 없다. 복습하는 마인드로 다시 추가해야겠다. JavaMailSender에서 setFrom에 shop@shop.com 을 사용하니 네이버 메일함에는 메일이 오지않았다. >> 같은 코드로..