이번 포스팅은… 저번 프리온보딩은 제대로 참여를 못했다. 주말이 껴 있는 부분도 있었고, 개인적인 사유로 좀 많이 바빴다. 이번 7월 챌린지는 예전에 1월인가 프리온보딩을 진행했던 강사님이 다시 진행하신다고 하셨다. 디스코드를 안나가고 있었는데 다행이었다(?) 사전과제가 있었는데 이를 정리해서 개인 블로그에 포스팅하고 링크 제출이 있었다. 매번 이론은 잘 안보고 기능 구현만 했는데… 이번에 사전 과제를 하면서 한번 정리를 해봐야겠다. 근데 어렵게 설명하는건 좋아하지 않아서 나름 쉽게 풀고 예시를 들어 설명할 예정이다. 1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. CSR(Client-side Rendering)이란 무엇인가? 영어에서 표현한바와 같이 랜더링 작업을 클라이언트(브라우저단)에서 해주는 것을 의미한다. 다른 블로그나 문서를 보면 뭔가 어렵고 복잡하게 설명을 하는데 난 이 부분을 쉽게 설명해보겠다. 웹 브라우저에서…

개인 프로젝트 관리에 관하여… 예전에 개인 프로젝트를 할 때는 그냥 깃허브 하나 뚫고 대충 올리면서 했었다. 근데 그렇게 하면 추후 프로젝트 관리 시 문제가 생겼다. 그리고 프로젝트의 목적이나 버전 스토리 등도 뭉게지고 이력도 확인하기 어렵다. 그래서 이런 것을 막기 위해서는 프로젝트 문서화 및 체계를 잡고 하는게 중요하다고 생각한다. 좋은 코드를 작성하고, 빠르게 결과물을 내는 것도 중요하지만 이런 체계를 어느정도 잡고 가는 것도 중요하다 생각하는 1인이다. 그래서 내가 개인적으로 개발했던 MyMeLink나 흑우집합소는 어느정도 관리를 하면서 진행했다. 이번 TIL에는 내가 개인 프로젝트를 어떻게 관리하고 개발하는지를 포스팅으로 남겨보려 한다. PS : 이건 정답은 아니며, 각자 처한 환경, 프로젝트에 따라 알맞게 하면 된다. 노션 (Notion) 이거 안쓰는 사람도 있지만… 난 초창기부터 아주 잘 쓰고 있다. 무튼 이 노션으로 어떻게 쓰냐? 메인 페이지는 위와 같다. 로드맵,…

이중 로그인(중복 로그인) 문제를 해결하는 과정 흑우집합소는 정책 상 이중 로그인을 허용하지 않기로 정했다. 예를 들어 A라는 사용자가 크롬에서 로그인하고, 다시 사파리에서 로그인을 했을 때 이를 이중 로그인이라 칭한다. (때에 따라선 중복 로그인이라 표현하기도 한다.) 뭐 개발좀 해본 사람이라면 다들 알것이다. 근데 계정 로그인 이후 단순하게 정보를 열람하거나, Read성향에 촛점이 맞춰진 서비스라면 이중 로그인은 문제가 되지 않는다. 하지만 내가 개발하는 흑우집합소는 추후 게시글 작성 기능 등 Create와 Update 그리고 Delete기능을 가진다. 이 경우 이중 로그인 문제는 고려해야 할 문제다. 어떤 부분을 고려해야 할까? 먼저 개발하는 서비스의 로그인 방식부터 확인해봐야 할 것이다. 로그인 방식에는 다양한 방법이 존재한다. 그리고 그 로그인 방식에 따라 이중 로그인 처리 방법이 약간 다르고, 처리하는 방식이 쉬울수도, 까다로울 수도 있다. 여기 아래서 부터는 Next.…

배포를 하고 나서… 새벽 2시쯔음 흑우집합소 1.0.2 버전 배포를 했다. 백엔드쪽과 프론트엔드쪽 배포를 끝내고 나서 잘 되나 확인을 해봤다. 근데… 이상한 문제가 발생했다. 프론트엔드 쪽은 TailWindCSS를 사용하고, 거기에 Daisy ui를 사용하고 있다. 근데 이 Daisy UI쪽에서 발생한 문제인 것 같았다. 문제는 아래와 같다. Github의 Issue 부분을 확인해봤으나, 나와 같은 문제를 일으키는 사람은 없었다. 이는 라이브러리 문제가 아닌 내가 뭔가 잘못 코드를 작성한 문제라는 방향으로 귀결된다. 분명 개발버전에서는 잘 되었던거 같은데… 근데 생객해보니… 개발은 크롬에서 진행했고, 운영 테스트는 사파리에서 진행했다. 혹시나 하는 마음에 크롬에서 직접 봐보니 역시 크롬은 문제가 없었다. 도데체 무슨 문제일까? 뭐 뻔한 이야기겠지만 브라우저 엔진 문제일 것으로 추측했다. 브라우저마다 자바스크립트를 해석하는 방법이 약간 차이가 있기 때문에 저런 버그가 생기는게 아닐…

React에서 상태 관련 처리를 하다가… 신규 기능 생성번호 당첨내역을 개발하고 있었다. 백엔드 로직 개발을 하고, 프론트쪽 개발로 넘어왔다. 각 로또 등위별 당첨 내역 처리를 위해 아래와 같은 상태 값을 사용했다. 위 상태 값은 아래의 등위별 당첨 내역의 카운트에 쓰인다. 저 등위별 당첨 내역은 컴포넌트로 따서 구현되어 있다. 컴포넌트에서는 useEffect hook을 이용해서 초기 값을 설정해준다. 근데 이렇게 했더니 계속 값이 증분했다. 앞에 초기화 로직을 줬지만 적용되지는 않았다. 왜 그런걸까? 이 부분을 찾아보니… 아래와 같이 정리할 수 있었다. useState hook은 비동기로 동작하기 때문에 setRankInfo가 호출되어도 rankInfo는 즉각적으로 업데이트 되지 않는다. 그래서 이를 해결하려면 이전상태를 복사한 값을 적용함으로써 해결할 수 있다. 말이 좀 어려운데 아래 솔루션 코드를 보면 알 수 있다. 위와 같이 새로운 객체를 주고 해당 값으로 증가를 해준 다…

React-Quill을 사용하다가… 공지사항과 게시판 기능 때문에 React Quill을 사용하게 되었다. 그리고 게시글을 등록하면 잘 되었다. 근데 입력을 한 뒤에 열람을 하려 했더니 다음과 같이 출력되었다. 내가 분명 h1이랑 h2 등을 적절하게 섞어서 사용했음에도 저렇게 뜨게 되었다. 그래서 뭐가 문제일까 고민을 좀 했었다. 답은 간단했다. React Quill을 사용해서 글을 작성하면, Html로 코드가 뿌려진다. 그리고 이것을 열람 페이지에서 올릴 때 아래와 같이 코드를 작성해준다. 근데 저렇게 적용이 안되는 것은 html 내의 태그가 씹힌다고 유추했다. 그래서 이것저것 찾다가 내가 사용하는 TailWindCss가 문제일 것 같단 생각이 들었다. 대표적인게 Html 태그 중 h1이라는 태그가 있다. 근데 TailWindCss를 쓰면서 저 태그를 쓰면 태그가 동작하지 않는다. 보통은 다음과 같이 클래스 값을 준다. 그럼 저것 때문 아닐까? 역시 예상대로였다. globals…

내 취미는 매일 나는 nginx log를 보는 것 요새 새로운 취미 생활이다. 흑우집합소 배포 이후 이상한 놈들이 불법으로 접근하는지 체크한다. 그래서 아침에 일어나서 컴퓨터 키고 nginx 로그를 본다. 로그를 보면 가관이다. 1. 불법 침입 흔적 아래는 접근한 불법 침입자 로그다. 44.202.140.249 악의적 사용자는 계속 특정 키워드 url로 찔러본다. 그리고 헤더 값을 잘 보면 알겠지만 referer값이 google로 되어 있다. 이는 구글을 통해 왔다고 흉내내는데 그냥 차단을 방지하기 위해 달아둔 의미없는 값을 넣은 것 같다. 저런 키워드는 Nginx에서 특정 IP 접근 금지 시키기 포스팅에 잘 정리해뒀다. 그리고 user-agent도 예사롭지 않다… ㅋㅋㅋ 8.36.86.60 악의적 사용자는 대놓고 user-agent에 python-requests를 줬다. 그리고는 바로 우디르급 태세전환해서 파폭으로 바꿔줬다. 다 보면 알겠지만 악의적 해킹을 목적으로 가진 사용자는…

오랜만에 쓰는 포스팅 포스팅이 많이 늦었다. 4월 초에 많은 일이 있었다. 가족 중 한분이 먼 여행을 떠나시고, 그 뒷정리 및 처리할 게 있어서 잠시 모든 일정을 내려놨다. 짐을 정리하면서 보니 인생이 참 덧없게 느껴지기도 했다. 사설은 네이버 블로그에서 하고… 산 사람은 인생의 일이 남아 있기 때문에 다시 내 일정으로 복귀했다. 흑우집합소 내에 게시판 기능을 개발하고 있었다. 코드 리팩토링도 해야 하지만, 공지사항이나 패치노트 같은 것을 사이트 내부에서 올리는 것이 아닌, 외부에서 올리는게 좀 그랬다. 그리고 커뮤니티로 승격하기 위해서는 에디터 기능도 필요했기에… 이 부분은 향후 포스팅으로 남길 예정이다. 크롬에서 파일 인풋 클릭이 안되는 문제 React-Quill에서 에디터 내 이미지 파일 첨부 기능을 개발하고 있었다. 사실 그냥 하는건 몹시 쉬운데, 이걸 실제 서비스에 적용하는 부분은 약간 까다로웠다. 이거로 에디터 기능을 구현한 분은 알겠지만, 이미지 핸들러를 만들고 그 안…

리다이렉션? 흑우집합소를 개발하던 도중 Next.js에서 프론트 쪽 개발을 하고 있었다. 근데 API Router에서 특정 데이터를 처리하다가 다른 페이지로 리다이렉션(Redirect)을 처리했다. 근데 Header에 값을 넣어서 보냈는데 헤더가 제대로 오지 않았다. 뭐가 문제일까 찾아봤다. 원래 안된다. StackOverflow에서 답변을 찾을 수 있었다. 그렇다… 원래 안되는 것이었다. Http 1.0 표준 문제라고 한다. 그래서 저 오버플로우에선 몇 가지 방법을 제시한다. Session 사용하기 쿠키 사용 Url query parameter 사용하기 보통 많이 사용하는게 3번 방법이라 나도 3번을 사용했다. 어짜피 Next.Js에서 페이지 로딩할 때 쿼리를 지울 수 있어서 큰 문제는 없이 해결할 수 있었다. 원래 안된다.

계정 탈퇴 기능을 개발하다가… 흑우집합소 내 계정 탈퇴 기능을 개발하고 있었다. 다른 사이트 보면 계정 탈퇴를 아주 꼭꼭 숨겨두는데, 개인적으로 좀 이해 안되는 행동이다. 사이트에 들어오는건 쉬운데 나가는건 어렵게 한다? 자기네 사이트에 회원을 묶으려는 수작질이다. 한때 유행했던 무슨 UX 패턴이었는데… 나갈 사용자는 어떻게 해서든 찾아서 나간다. 그렇다면 그냥 탈퇴도 쉽게 해주는게 좋지 않을까? 정말 사용작에게 필요한 서비스고 유용하다면 탈퇴해도 다시 돌아올 것이다. 그만큼 서비스에 자신이 없는걸까? 무튼 개인적으로 너무 악질이었던 패턴 같다. 특히 대기업 서비스에서도 이런걸 하는게 이해하기 어려웠다. 대기업이면 나름 서비스에도 자신이 있을텐데 말이다. 서론이 길었다. 무튼 탈퇴 로직을 개발하면서 몇 가지 이슈를 찾게 되었다. 어떤 이슈인가? 내가 흑우집합소에서 계정의 경우 닉네임은 고유값(Unique)이다. 초기에 이걸 고려 안해서 탈퇴 후 신규 회원이 해당 닉네임을 사용하려…

흑우집합소에 애드센스를 준비하던 도중… 혹시 Next.Js에서 애드센스를 다는 것이 궁금하면 Next.Js에 구글 애드센스(Adsense) 등록하기포스팅을 참고하자. 뭐 아직 이르긴 하지만 구글 광고를 달려고 Adsense를 신청했었다. 근데 신청 후 몇일 뒤 아래와 같은 메일이 왔다. 뭐가 문젠지 봤더니 승인 상태 옆에 저렇게 찾을 수 없음이 뜬다. 문제는 쉽게 찾을 수 있었다. 먼저 ads.txt에 접근이 되어야 하는데 이상하게 접근이 되지 않았다. 일전에 Nginx에서 특정 IP 접근 금지 시키기 포스팅을 하면서 뭔가 본거 같기도… 그래서 포스팅을 확인해본 결과… Url Keyword방식을 적은 부분에서 ads단어가 있었다… 이래서 ads.txt 파일에 접근이 불가능했던 것이다. 그래서 접근 확인을 한 후 재검토를 신청했다. 응 거절이야~ 또 저 해맑은 아저씨 메일이 왔다 -_-;; 그래서 몇개 생각을 하다가 Nginx에서 막은게 문제겠지 싶었다. 그러다가 하나 생각이 난…

개발하며 얻은 TIL 흑우집합소 개발하며 얻은 내용 및 노션에 작성한 내용을 정리한 포스팅이다. 오늘 개발하면서 배운 내용은 아래와 같다. 예외처리의 미흡함 (예외처리 부분) 문자열 상수(String Literal) - Typescript Object 키 문제 반복적 코드를 줄이는 리팩토링 각 항목은 아래의 내용을 참고하자. 1. 예외처리 부분 오늘도 개발을 하던 도중 코드가 이상한 부분을 찾게 되었다. 백엔드 측의 에러 핸들링 부분이었다. Error Handler 부분의 일부다. 여기서 저기 const decodeData 부분의 로직을 보면 request의 헤더로부터 jwt를 가져오는 부분이 있다. 만약 헤더에 jwt를 안가지고 올 경우 어떻게 될까? 또 버그를 양산하는 모양새가 된다. 물론 jwtStrategy에서 검증을 하겠지만, 혹시 AuthExceptionHandler를 strategy 없이 사용하는 곳에서 발생했다면? 그래서 이 부분은 검사를 한번 더 하는 방향으로 로직…

흑우집합소 개발을 하며… PS : 아래 예제에서 호출되는 url은 참고용입니다 개발이 거의 끝나가는 무렵이었다. 사실 막 짠 코드가 좀 있었고… 로직이 좀 엉상한 부분도 있었다. 그래서 미래에 또 헤매거나 복잡함을 피하기 위해 찌금 작업을 좀 해두자 라는 마인드로… 일부 리팩토링을 진행했다. 1. 똥이 되어가는 코드를 코드 리팩토링 프론트엔드 영역에서 Axios를 호출하는 부분에 대한 고민이 깊어졌다. 이렇게 되어 있다. 물론 전체 코드는 아니고 호출되는 영역만 가져왔다. 근데 이걸 매번 호출할 때마다 반복적으로 작성해야 하는 부분이 마음에 안들었다. 지금 호출 로직은 아래의 세 가지 문제점이 발생한다. 저 호출 부분에서 성공 시 또는 실패 시 처리해야 할 공통 로직이 추가된다면 일일히 바꿔야 하는 문제가 생긴다. setLoading과 같은 상태 관리(Zustant)의 로직을 호출 컴포넌트마다 작성해야 한다. 매번 인바운드(내부 api 주소로 호출하는 영역) 부분의 주소를 적거나 …

23년 2월 13일 TIL 금일 흑우집합소를 개발하며 배운 내용 및 겪은 과정을 정리하여 올려본다. 오늘은 깔끔한 코드 작성에 대해 고민한 부분을 정리하여 올려본다. 어제 작업하던 JWT 부분에 대해 매듭을 지려고 했다. 일부분은 Ports And Adapters Architecture 방식으로 작성해보려고 노력중이다. 근데 확실히 레이어드 아키텍쳐보다 더 나은 것 같다. 이유는 크게 세 가지다. 하나의 코드 파일의 가독성 증가 레이어드 보다 더 세분화 가능 깔끔한 파일 관리 개인적 사견이 많이 녹여 있어서 다른 사람은 공감 못할 수 있다. 레이어드 아키텍쳐로도 충분히 구현 가능하지만, 이 아키텍쳐로 인해 명확하게 각 역할이 나눠지는 것을 채감했다. 이것은 차후에 다루고… 오늘 했던 고민은 아래와 같다. 고민 포인트 먼저 내가 jwt를 검증하는 Inbound 영역의 서비스 로직이 있다. 코드는 아래와 같다. 딱 봐도 코드의 문제가 보인다. (고민 포인트는 아래서 집어볼 예정) 일단…

23년 2월 13일 TIL & 개발노트 (흑우집합소) 금일 흑우집합소를 개발하며 배운 내용 및 겪은 과정을 정리하여 올려본다. 오늘은 JWT 인증 부분을 처리하였다. Nest.js에서 JWT 사용시 Error 커스텀 처리 Passport-JWT를 그대로 사용하려 했는데 Access Jwt의 토큰 만료시에도 401을 띄운다. 나는 Access Token에 대해서는 토큰 만료 시 서버 내에서 저장된 리프레시 토큰을 확인하고 그에 따른 추가 작업을 하기 원했다. 물론 try catch로 처리할 수 있지만 이렇게 하면 AuthExceptionHandler처리 부분이 너무 지저분해진다. 그래서 좀 찾아본 결과 passport-custom이란 것으로 Strategy부터 커스텀 처리를 할 수 있는 것을 찾았다.(이건 따로 포스팅 예정) 패키지를 설치하고 적용해봤다. 일일히 JWT에 대한 에러를 핸들링 해야 하는 부분이 있지만 직접 핸들링을 할 수 있어서 더 좋은 것 같다. 덕분에 기존에 있던 …

오늘의 강의는.. 2일차 부터는 실제 Nest.Js에 대해서 알아보고, **포트 앤 어뎁터 아키텍쳐(Ports and Adapters Architecture)**에 대해 설명을 하는 시간을 가졌다. 강의를 들으면서 내용을 정리한 부분이다. 옆에서 강의 틀고 노션 및 수기로(개판 필기체를 해석 하는데 힘들었다…) 작성한 것을 다시 곱씹고 하면서 강의 내용을 정리했다. 이렇게 라이브를 직접 옮기면서 작성한 것을 정리한 것이라 약간 엉성할 수 있다. 이 부분은 감안하고 봐주시길 바란다. 강사님의 이야기 시간 강사님의 개발자 일대기 이야기를 해주셨다. 재직한 회사에서 다양한 경험을 쌓으셨고 매 순간 열심히 하신 것 같다. 어떤이는 운도 중요하여, 열심히 해도 운이 안좋으면 취업, 이직이 어렵다 라고 이야기 하는 사람도 있다. 하지만 개인적으로 거꾸로 아닌가 싶다. 열심히 노력하고 준비를 하고 있어여 기회가 온 운을 잡을 수 있는게 아닌가? 라는게 나의 생각이다. 불확실성은 곧 희망이다.…

정신없이 지나간… 첫날은 1시간 차이로 백엔드 프론트엔드 둘다 겹쳐 있었다. 어우… 강의 2개를 동시에 틀어두니 정신없었다. 그나마 다행인 것은 프론트엔드가 아이스브레이킹이 좀 길었고, 취업과 관련된 썰로 시간을 좀 벌었다. 강사님도 대단하신 분이고, 강의가 너무 열정적이어서 11시에 끝났어야 하는데 오버 타임이 되었다. (11시 40분 넘었었나..) 난 끝까지 들었다 ㅎㅎ 첫 날이라 큰 내용은 없었고, 그냥 느낀점만 많았다. 강의 진행은 아래와 같았다. 각 챕터별로 느낀점 그리고 배운 점 등을 정리해보겠다. 노션은 공개된 자료인 줄 알았으나… 확실치 않아서 이 부분은 다시 감춤 처리로 바꿨다. 그냥 들으면서 학습한 내용 및 개인 생각을 정리한 노트고, 기술적인 부분은 향후 다룰 예정이다. 1-1 챌린저 메이커 / 코스 커리큘럼 소개 여기는 그냥 오버뷰 시간 입장 인원이 초기 590명까지 들어와서 놀랐다. 두 가지 의미로 놀랐다. 첫 번째로 이렇게 프론트엔드 영역에 대한 인기가 …

thumbnail 백엔드 수업 1일차 학습 나는 이번에 프론트랑 같이 수강을 했는데 정말 어지러웠다. 난이도가 높은게 아니라 옆에는 프론트 띄우고, 옆에는 백엔드 띄우니 두 강의 내용을 쫒는거 자체가 불가능할 정도였다. 그래도 다행히 프론트 쪽은 아이스 브레이킹을 하느라 주요한 내용은 안나왔고, 백엔드 쪽을 약간 집중해서 들었다. 여기 TIL은 내가 들으면서 배우거나 학습한 내용을 정리하는 위주로 올릴 예정이다. 개인 학습 내용을 정리한 것이라 약간 부실할 수도 있다. 강의 자료는 강사님의 것이라 공유는 불가능하고, 혹시 저작권 침해나 외부 노출 불가 자료가 있다면 알려주시면 바로 수정 반영 처리하겠습니다. 오픈된 깃허브의 경우 웹에서 누구나 접근이 가능하기에 깃허브는 공개하였습니다. 2일차 강의는 이곳 포스팅 참조 금일 진행 내용 함수형 프로그래밍 컨셉에 대하여 객체지향, 함수형 프로그래밍 패러다임 실용주의 프로그래밍 Live Coding1 : 고차함수(map, filter,…

최근 개발을 접고… 주식도 하락장으로 접어들어 재미없어졌고… 넷플릭스도 맨날 보니까 이제 좀 질려졌다. 그래서 개발을 다시 한번 제대로 해볼까? 라는 무시무시한 생각을 해보게 되었다. 몇달 전 전에 같이 일했던 지인으로부터 프로젝트 합류 요청을 받고 진행했었지만… 그 프로젝트에서 해야 할 포지션도 애매했고.. 나중에 뭔가 잘 되었을 때 스타트업 창립 맴버로 들어가기에도 좀 애매했다. 그리고 무엇보다 그 팀이 개발하거나 프로젝트를 진행하는 방식이 나랑 안맞았고, 가장 중요한 건… 난 프로젝트를 할 때 진행상황, 무엇을 해야 하는지 목표 등이 좀 명확하게 보여야 하는 문서나 도표? 그런 지표가 있었어야 하는데 약간 중구난방 식이었다. 다들 직업군이 있어서 바쁜거라 이해는 하지만… 그렇게 진행하는 플젝은 나랑 맞지 않았다. 그리고 내 개인적인 사유도 있고 해서 난 나왔다. 그쪽에서 진행하는 프로젝트는 node.js와 react, react-native 등을 썼다. 물론 난 하나도 몰라서…

개발을 하다보면 쌓이는 링크들… 개발을 하다보면 개발자의 성지 stackoverflow나 다른 사람의 기술 블로그를 많이 보게 된다. 그리고 유용한 것은 즐겨찾기에 저장하거나 페이지 탭에 그대로 두게 된다. 문제는… 브라우저에서 제공하는 즐겨찾기는 몹시 불편하다. 제한적인 카테고리에 일정 수가 넘어가면 찾는데 어려움의 문제가 기다린다. 두 번째로 페이지에 그냥 두면… 이런 대 참사가 발생한다. 그래서 이번에 노드 공부하다가 빠져버린 일렉트론으로 직접 개발해보기로 했다. 일단 1차 개발용 버전은 아래와 같다. 이거 개발하면서 JS의 await / async 에 대해서 좀 어느정도 배우게 되었다. 나름 학습 효과가 있었던 미니 프로젝트였다. 개발시간은… wakatime 이 정도? 근데 저거 벳지 클릭하면 404 나온다… 처음 써봤는데 신기하다 ㅎㅎ 오늘 기준으로 일주일 동안은 11시간을 쏟았군… 솔직히 이야기 하면… 낮에 윈도 피시에서 주식창 띄우고 거래 보다가 개발하고… 밤에는…

주의 이 문건은 과거 Hexo 블로그 (2018-04-24) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 오늘의 주제는? 이번 주제는 프로젝트에서 버전을 표시하는 부분을 다루려 합니다. 제가 진행하는 프로젝트는 아래의 사진과 같이 하단에 버전을 표시합니다. 근데 이것을 thymeleaf에서 일일히 버전을 고치는 것은 일입니다. (사실 여기 말고도 JS 등에서 메뉴를 클릭하면 빌드 및 버전 정보가 뜨게 되는 부분도 있어서 이걸 일일히 고치는 것은 심각한 노가다입니다.) 그래서 이번에는 Java의 Enum과 thymeleaf를 활용해서 버전 정보를 관리하는 방법에 대해 포스팅을 해보려 합니다. How to? 진행하는 법을 순서대로 하나씩 진행해보도록 하겠습니다. 1. Java에서 Enum 만들기 먼저 저는 간단한 정보 표시를 위해 enum을 하나 만들었습니다. 2. 정보를 표시할 Thymeleaf에 코드 작성 진행하는 프로젝트는 화면의 …

주의 이 문건은 과거 Hexo 블로그 (2018-04-22) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 오늘의 주제는? 간만에 작성하는 연구일지입니다. 정말 많이 바빠서 포스팅도 주말에 시간을 내서 작성하게 되네요. 이번 주제는 게시판에서 새로운 글 작성 시 사이드 메뉴에 표시를 하는 것을 다루겠습니다. 위와 같이 새로운 글이 작성될 경우 옆에 new라는 버튼이 뜨게끔 하는 것이 목표입니다. 프로젝트 진행 환경은 Spring Boot에 Thymeleaf 에서 진행하고 있음을 알려드립니다. 어떻게 해야 새 글이라는 것을 알 수 있을까? 먼저 아래와 같은 순서로 구현을 생각해 보았습니다. 새 글이 작성된 기준은 조회 시점 정하기 각 게시판에서 새 글이 있는지 알기 위한 체크하는 로직이 필요하다. 새 글이 작성되었다는 것을 저장할 곳이 필요하다. 새 글이 있는 것을 어디서 조회할 것인가? 뷰 단에서 해당 값을 찾아서 있는 경우 표시를 해…

주의 이 문건은 과거 Hexo 블로그 (2017-12-25) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. HTML에서 Table 요소 처리 이번에 제가 만드는 사내정보시스템을 이번에 저희 회사에도 도입을 하게 되면서, 회사에 특화된 기능을 개발하게 되었습니다. 그런데 이번에 Html의 테이블 요소를 다루게 되면서 생긴 문제점과 해결 방안에 대해서 포스팅을 해보려 합니다. 프로젝트를 진행한 환경은 Spring Boot의 Thymeleaf 템플릿 엔진을 사용하였으며, 코드 전체는 공개가 불가하여, 일부만 공개합니다. 또한 테이블 요소를 처리하기 위하여 jQuery v3.2.1를 사용하였습니다. 어떤 문제점이 있었는가? 구현을 하고 싶은 기능은 다음과 같았습니다. 테이블의 행을 동적으로 추가 또는 삭제하기 서버로 데이터 전송 시 입력된 테이블의 행 데이터 모두 가져오기 사실 첫 번째 기능은 검색하면 많이 찾아 볼 수 있는 기능이지만, 두 번…

주의 이 문건은 과거 Hexo 블로그 (2017-12-14) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 커스텀 어노테이션의 활용 제가 진행하는 프로젝트에서는 안드로이드와 Spring Boot 서버의 서로 통신을 진행하면서 Jwt를 이용하여 사용자 인증을 진행하였습니다. 이번 포스팅에서는 Jwt인증에 대한 부분 보다는, 커스텀 어노테이션을 왜 쓰게 되었는지와 더불어 어떤식으로 커스텀 어노테이션을 활용하였는지에 대해 작성하도록 하겠습니다. 왜 커스텀 어노테이션을 쓰게 되었는가? 서버와 모바일에서 사용자 인증은 jwt를 활용하고 있습니다. 컨트롤러에 진입할 때 Header에 있는 jwt를 받아서 해당 jwt를 검증하는 방식을 사용하고 있습니다. 처음에는 로직을 너무 복잡하게 짰습니다. 초창기에 개발된 일부 코드를 보도록 하겠습니다. 위의 작은 코드에서만 봐도 jwt를 검증하는 로직 자체도 불분명하고, 람다식을 잘못 쓴 것도 보이네요. 컨트…

주의 이 문건은 과거 Hexo 블로그 (2017-11-27) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 삽질만 6시간…실화임? 지금 생각해보면 하도 어이가 없어서 이 포스팅을 쓰기도 부끄럽습니다만… (제 무지의 깊이가 상당히 깊다는 것도…반성의 의미로 작성하는 글) 오늘 봉착한 문제는 이것입니다. 데이터베이스에 값이 정상적으로 등록이 되지 않는 문제 이렇게 보니 정말 심플한 문제로 보일 것입니다. 좀 더 자세하게 들어가서 보자면… Spring Boot 프로젝트의 Jpa를 사용하여 데이터베이스에 값을 넣는데 계속 문제가 발생하였습니다. 이렇게만 봐도 설정을 잘못했거나 미숙한 초보의 실수(물론 초보의 실수..)라 보이겠지만… 오늘의 실수와 교훈에 대해 시작하겠습니다. 문제와 원인 그리고… 문제의 DB 테이블은 다음과 같습니다. 그리고 Entity객체는 다음과 같이 구성되어 있습니다. 그리고 jpa에서 데이터가 추가되는 로직은 아래와 같습…

주의 이 문건은 과거 Hexo 블로그 (2017-11-26) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 해당 글은 11월 초중순 쯤 초안이 작성되었고, 해당 글을 정리하여 포스팅한 내용입니다. UI와 UX의 고민 사용자와 관련된 모바일 어플리케이션 또는 웹 페이지를 개발할 때 우리는 고민을 하게 됩니다. 물론 큰 규모의 회사인 경우 UX를 전담으로 하는 팀이 있고, UI를 작업하는 디자이너가 있습니다. 하지만 작은 규모의 회사는 이런 인력을 충원하기 매우 어렵습니다. 일반적으로 제가 만나본 개발자들의 경우 디자인에 대한 고려를 전혀 하지 않았습니다. 또한 기능만 동작하면 되지, UX와 UI는 크게 신경을 쓸 필요가 없는 부분이라 생각을 합니다. (제 개인적인 경험과 인맥에 제한된 것입니다. 절대 대다수 개발자를 이야기하는게 아닙니다.) 개인적으로 이렇게 생각하는 것은 몹시 안 좋은 습관이라 생각합니다. 모바일 어플리케이션과 웹 서비스…

주의 이 문건은 과거 Hexo 블로그 (2017-11-25) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 개발일지(는 아니고 근황?) 무엇을 했길래 글 리스폰 상태가? 기술 블로그에 괜찮은 내용으로 포스팅을 많이 올리고 싶지만… 어제(24일)까지 프로젝트를 마무리 짓느라 제대로 글을 올릴 수 없었습니다. 서버와 안드로이드간의 개발을 모두 마무리 짓고, 어제 플레이스토어에 정상적으로 등록까지 마쳤습니다. 지금 재직 중인 회사는 서비스를 개발하는 회사는 아니고, 제조쪽 기계와 연관된 서비스(는 아니고 어플리케이션?)를(을) 개발하는 회사입니다. 사실 서비스 개발을 중심으로 하는 회사를 가고 싶었지만, 개발자로써의 자질을 좀 더 키운 후 이직하는 것을 목표로… 어제까지 개발을 마무리하고 문서화를 하느라 포스팅을 제대로 못하였지만, 이제 프로젝트가 마무리 되어서 진행하며 배우거나 찾은 것을 위주로 포스팅을 진행할 예정입니다. 주요 포스팅 예정…

주의 이 문건은 과거 Hexo 블로그 (2017-11-15) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 오늘의 삽질 요 몇일 회사업무 +개인 일정으로 인해 바빠서 포스팅을 제대로 못했네요. 사실 바쁘다는것은 핑계인듯 하고…깊게 반성하는 부분입니다… 그래서 오늘의 연구일지는? (사실 이 글은 어제 퇴근하며 작성한 일지입니다.) 오늘도 안드로이드와 혈투(?) 지금 만들어 가는 것은 서버에 Rest api를 호출하여 가지고 온 값을 앱에서 보여주는 작은 서비스(?)를 개발하고 있습니다. 오늘의 삽질은 안드로이드 영역입니다. 안드로이드 영역에서 그래프를 구현해야 하는데 잘 구현되어 있는 것을 찾아보다가 를 알게 되어 구현을 하였습니다.. MPAndroidChart 이 그래프 라이브러리를 쓰다 보니 정말 잘 구현되어 있었습니다. 문제는 웹에서는 D3 라이브러리를 써서 쉽게 구현 하였지만, 저 라이브러리에서 데이터 표시를 동일하게 하는 것은 어…

주의 이 문건은 과거 Hexo 블로그 (2017-11-12) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. Toy Project? 음… 사실 개발자라면 쉬는 날에 다른 일도 할 수 있겠지만, 본인의 역량 강화 또는 무언가 필요에 의해 본업 개발 외에 다른 개발 프로젝트를 시작하기도 합니다. 이런걸 Toy Project라고도 표현을 하는데, 이번에 나도 본격적으로 진행하려 기획을 하고 설계 및 개발을 진행하기로 하였습니다. (사실 해보고 싶은게 넘 많은게 문제지만…) 주제 일단 Toy Project를 진행하게 된 계기는 매우 간단했습니다. 지금 제가 일하는 곳은 아주 작은 규모의 스타트업으로써, 아직 회사의 전반적인 프로세스나 시스템을 갖추는 중입니다. 그런데 회사 특성 상 소프트웨어와 하드웨어(제조관련)가 맞물려 있어서, 소프트웨어적인 업무 프로세스를 갖추지 못하였습니다. 그 중 하나가 사내정보시스템입니다. 사내 공지사항이나 근태, 급여…

주의 이 문건은 과거 Hexo 블로그 (2017-11-08) 에서 이동된 문서입니다. 시간이 지남에 따라 최신 기술과 다를 수 있으니 주의 바랍니다. 오늘의 주제 근무하는 회사에서 Android 앱 개발과 앱에서 사용하는 데이터를 위해 서버에서 Rest api 부분을 개발하였습니다. 또한 알림 부분도 구현을 해야 해서 FCM을 사용하였습니다. 근데 Android에서 FCM을 사용하면 토큰을 생성하여 서버에 전달을 하게 되는데, 이 토큰이 갱신이 되거나 새로운 기기에서 설치 시 토큰의 유효성을 검사해야 했었습니다. 모두 공개하기는 힘들지만 서버에 클라이언트의 FCM토큰을 받아서 저장을 하는데, 만약 유효하지 않은 토큰까지 계속 저장할 경우 향후에 문제가 될 것 같았습니다. 그래서 FCM 토큰의 유효성을 체크하는 것을 알아봤고, 두 가지 주제에 대해 포스팅해보고자 합니다. 1. FCM 토큰 유효성 검사 2. Spring에서 Http Request 그리고 주제를 통해 달성할 최종 목표…