본문 바로가기

분류 전체보기268

회사에서 발표.... 예전에 내가 구현한 로그인 로직(JWT, SSO, WebClient)을 PPT로 만들어서 교육용으로 신입이나 나랑같은 연차인 사람들한테 보여주기용으로 발표한적이 있다.. 이번에는 CI/CD 발표준비에 당첨이 되어서 PPT로 gitlab-ci/도커/쿠버네티스/ArgoCd... Onprem등등 CI Script와 배포 방식과 플로우를 또 신입과 연구소 직원들 모두한테 발표를 하는 1인으로 당첨이 되었다 매일하는 CI/CD지만 모든 스크립트와 다른 방법/전략을 다 아는 것은 아니기때문에 공부할게 많다...ㅠㅠ아직 모르는거 투성이지만... 음.... 좋은것도 있고 어려운것도 있는 것 같다 이런걸 준비하면서 모르는걸 많이 알아가고 성장하는 기회라고 생각한다!! 아자아자아자 2022. 6. 9.
DTO 돌려막기 멈춰!(feat. jackson annotation) 짧게 글을 써보겠다 글 제목처럼 가끔 예전에 만들어졌던 DTO를 활용하는 경우가 있다 이럴때 사용할 수 있는 어노테이션이 있다! @JsonIgnoreProperties({"xxx", "yyy"}} private UserRes user; @JsonIgnoreProperties({"xxx", "yyy"}} private UserRes user; user 안에 xxx와 yyy는 json response 필드에 포함하지 않는다는 어노테이션이다 매우 유용하게 활용할 수 있다..! 애초에 null인지 아닌지까지 보여주고싶지 않은 필드에 사용할 수 있다 추가로 리스트의 정보는 ToString을 할때 위험한 부분이 있다. exclude 어노테이션을 잘 사용해서 로그를출력할때나 값을 가져올때 순환참조를 피해야 한다 @T.. 2022. 5. 30.
.js 와 .jsx의 차이점 그리고 문법 설명 JSX(JavaScript XML) : 자바스크립트에 XML을 추가한 확장 문법 대표적인 차이점 * 자바스크립트 내에 html을 쓸 수 있다 const element = Hello, world!; 구글에 이렇게 검색을 해보면... What is the difference between JavaScript and JSX? 스택오버플로우에서 이런 정보들을 얻을 수 있다 어느게 더 가독성이 있고 읽기 좋은 코드인가? 난 jsx에 한 손을 들어주고싶다 또한 리액트 공홈인 https://ko.reactjs.org/docs/introducing-jsx.html 에서도 jsx에 대한 정보를 얻을 수 있다 또한 리액트로 개발할때 사용하며 공식적인 문법 형태는 아니다 바벨이 브라우저에서 실행 되기 전에 자바스크립트 형태.. 2022. 5. 30.
내 생일 D-1일날 겪은 최악의 스토리..ㅠ 1. 생일 D-2BirthDay D-2에 작년 6월부터 취준을 달려오고 1월에 면접에 합격하고나서도 연차 1일도 안쓰고 내 자신에게 휴식도 못주고 일생을 보내다가토요일에 혼자 놀려고 방을 잡았다 토요일에 보컬 수업을 끝내고 코노에 가서 혼자 놀고올리브영에 가서 배쓰밤을 2개 사서 호텔로 향했다아 호텔 앞에서 스파클링 와인인 로드캡션 꾸베 로제와 오프너를 구매하고 들어갔다그리고 프라닭에서 콘소메이징과 블랙치즈볼을 시켰다!들어가기전 보컬쌤이 혼자 노래부르는거 넋놓고 감상...ㅎ2. 생일 D-1아니 오전에 카페와서 맥북 떨어뜨리지도 않았고.. 화면에 먼지가 많길래 손수건으로 닦고있던 와중에 화면이 맛이 갔다 ㅡㅡ;;;;진심 내가 뭘했다고 화면이 이리되냐고.....ㅠㅠ 너무 맴찢이다 진짜.....일요일이라 수리.. 2022. 5. 29.
JetBrains IDE && Styled-components code 색상입히기 InetlliJ나 WebStrom으로 개발할때 Styled-component를 설치하면 아래처럼 색깔이 입혀지지 않아서 나온다 어디까지가 속성(attribute)이고 어느게 value인지 확 와닿지 않는다..!! 그럴때는 이 플러그인을 설치하자 그러면 결과는....!! 알아보기 쉽고 옆에 색상도 나온다!! 굿 2022. 5. 29.
IntelliJ Honey Tips 3 여러 꿀팁들을 모아모아 한번에 올리고 싶었지만, 짧은 1줄 이지만 너무 유용한것 같아서 미리 올린다(22.05.220 나중에 추가로 아래에 몇개 더 올릴 것이다 1. 어떤 객체의 하위 or 상위 객체 보기(구현체 or 인터페이스 or 추상 클래스 등등 전부 다) 일단 IDE 내에서 import를 시켜서 빨간 줄을 없애준다 그리고 이 변수에 갖다 대고 단축키 (Ctrl + H를 누른다 - 맥/윈도우 모두 동일) 그러면 오른쪽에 Hierarchy(계층 구조) 탭이 열리는데 이 안에서 상위 또는 하위 객체들을 볼 수 있다 예를 들어 Map을 먼저 보겠다 맵에 커서를 둔 채로 컨트롤 H를 누르면 이런 친구들이 나온다 맵 형태로 이루어진 인터페이스, 구현클래스, 추상클래스 등이 싹 다 나온다 아이콘마다 마우스를 .. 2022. 5. 22.
PostMan Honey Tips 2 1. 요청 및 결과 저장하기 개발을 할때 api를 수정을 해야 될 때가 있다 이럴때 디버깅을 걸면서 하거나 요청 결과나 응답 결과를 메모장에 복붙하거나 그렇게 하지 말고 포스트맨의 req/res 저장하기를 활용해보자 EX) 개발된 api가 있는데 프론트 팀에서 json데이터를 보내며, 이 요청일때 오류가 뜬다는 메시지를 받은 경우 프론트 팀에서 말한다 Post /api/test/res 요청으로 { "name": 123, "age": "thel" } 를 보내면 오류가 뜬다고 (물론 실전에서는 훨씬 더 복잡할것이다. 서비스 로직을 타고 디비를 거쳤다 나오고 해야하니깐) 오류메세지를 디테일하게 내보내주는 경우, 프론트가 알아서 처리할 수 있지만 우리 백엔드 개발자입장에서는 이 요청을 저장하고 싶을 수가 있다 .. 2022. 5. 22.
폰으로 쓰는 짧글 DTO 클래스를 Map으로 변환해보면 LinkedHashMap이 된다- 순서를 보장하며 해시의 시간복잡도를 가지는 맵이다 나중에 인터페이스 자료형. 구현체의 차이 해시테이블 해시맵 멀티스레드에 안전한 형태 자바에서는 해시충돌을 이중함수로 해결하는데 어떻게 해결하는지.. 사이즈별 리스트는 어떻게 변하는지 등 자료구조에 대한 재밌는 글도 쓰려한다 2022. 5. 17.
2022.05.16 (일) 주말의 일상 건대 호수를 바라보며 카페에서 코딩하면서 놀다가홍대 개미가서 맛있는 밥먹으며 개발자의 진로, 개발자의 수다를 떨다가녹음실에 가서 보컬을 배웠다..!!오늘은 1일차 호흡법!!내 버킷리스트 중에 하나는 내 앨범 내보는것...!!ㅎㅎ선생님은 강은아님이라고 고음보컬로 유명하신분! 2022. 5. 16.
내 피가되고 살이 될 언젠가 다 볼.. 책들... 추가로 요즘 보는 책 2개 저자님들의 허락이 있다면 내용도 좀 쓰겠지만,,, 아마 책 내용 요약 & 후기 정도로 포스팅을 작성할것같다(현직자 시간 거의 zero...ㅎ..) 2022. 5. 16.
개발자의 숙명.......주-말-대-응 물론 비대면으로 방화벽 뚫어서 작업했지만휴우.. IT 인들이여 모두 힘내요! 2022. 5. 8.
IntelliJ Honey Tips 2 1. 서비스 탭이 안보일때 (못 찾을때) Alt + 8 Command + 8 번 누르면 바로 튀어나오니 걱정 ㄴㄴ 2. IPv6를 IPv4로 보고 싶을 때 기본적으로 IP 로깅을 하면 IPv6로 인식이 되어서 출력된다 테스트할 컨트롤러를 만들어준다(그냥 Rest 방식으로 테스트 해도 무방) 보시다시피 0.0.0.0.0.0.0:1 이라고 나오는게 IPv6 형식의 주소입니다 사실 현재는 4와 6를 혼용해서 쓴다고 하지만 실제로 우리는 4자리수 체제가 익숙하죠? 127.0.0.1 == localhost 인텔리J에서 IPv4방식으로 볼 수 있는 방법 Help - Edit Custom VM Options... 를 선택 -Djava.net.preferIPv4Stack=true -Djava.net.preferIPv4.. 2022. 5. 7.
공백이 2칸 이상일때 정규식 공백이 1칸 이상일때의 정규식으로는 특정 필드값을 받을 때 유연하지 못하다 (Ex: 닉네임을 입력해주세요: 티스토리 개발꾼(X) 난 사실 1자리 수의 공백은 허용해주고 싶다 ) 이럴때는 checkSpace를 이용하면 된다 입력값 사이에 2칸 이상 있을 시 true를 뱉는 정규식 패턴이다 그리고 Single Value / Array Value를 모두 판단해주기 위해서 isError로 Validation을 하면 된다 const isError = (v) => { const values = Object.values(v); for (const item of values) { if (checkSpace(item)) { console.log('입력값에 공백이 2칸 이상 있습니다'); return true; } if .. 2022. 5. 5.
프론트단을 지원한 후기 개인적으로 백단보다 프론트단이 더 신경쓸게 많은것 같다 각 폼의 입력값에 대한 검증(앞단 valid), alert창 등등ㅋㅋ 백단에서는 참조형인 경우(사실 참조형인 경우 Null을 받기때문에 값 형태로는 처리를 안하는것으로 알고있다)null or not null만 체크하면 되지만 프론트엔드는 null, '', undefined등을 다 봐야하기때문에 귀찮다 어찌저찌해서 백/프론트 둘다맡게되었고내가 직접 여러 사람들을 설득해서 ES5->ES6 code style, ajax->axios로 바꾸고 코드는 점점 리액트스러워지게 만들어놨다아직 주니어개발자인데 이렇게 하는게 맞나싶다하지만 소스코드의 최적화와, 재사용성을 위해 모두가 다 좋은 길로 가야하는게 맞는 것 같다 2022. 5. 5.
백엔드 개발 시 테스트 코드가 있어야 하는 이유 아직까지도 테스트코드가 없는 회사들이 많다 여러 이유들을 들어보면 개발 속도가 느려진다, 실제 서비스개발을 하는 것이 아니다 등등을 이유로 댄다 난 주니어 개발자이다. 개인적으로 TDD를 하면 좋겠지만, TDD까지는 바라지 않는다 (TDD란 Test Driven Development이며 실패하는 테스트 코드를 만든 후 성공을 위한 코드를 만든다) 실제로 개발을 하면 개발자가 모든 입력값을 검증할 수 없다 프론트 단에서 null이 넘어올지 ''(empty string)이 넘어올지, undefined가 입력값으로 넘어올지 모르는 일이다 어느날 프론트 직원이 나한테 물어봤다. "이 입력 폼을 123에서 ''로 비워놔도 동작이 되나요?" MSA 프로젝트라서 그 모듈 api를 열어서 컨트롤러로 가고 입력값 DTO.. 2022. 5. 5.
크롬 유용한 단축키(Windows / MacOS) 윈도우- 주소창으로 포인터 옮기기F6 - 열린 탭 이동Ctrl + 숫자...는 너무 잘 알려지고 난 사용 안함Ctrl + Tab : 우측으로 탭 이동 / Ctrl + Shift + Tab : 좌측으로 탭 이동 - 탭 닫기Ctrl + W - 새 탭 열기Ctrl + T - 현재 주소창에 입력해서 새 창으로 열기주소창에 입력후 Alt + Enter 맥- 주소창으로 포인터 옮기기Command + L - 열린 탭 이동Command + 숫자...는 너무 잘 알려지고 난 사용 안함Command + Shift + [ ] : 겁나 유용함 - 탭 닫기Command + W - 새 탭 열기Command + T - 현재 주소창에 입력해서 새 창으로 열기주소창에 입력후 Command + Enter  기타 팁- 내가 직접 만든 h.. 2022. 5. 5.
스프링 시큐리티 + 소셜로그인 구현(2) - 테스트해보기 일단 New Project에서 Spring Initializer로 시작하겠다 대충 Gradle로 만들고 DB는 일단 나중에 붙여도 되므로 Lombok, Spring Web, Thymleaf, Spring Security, OAuth2 Client를 선택해주고 Finish를 눌러준다 File에 Preferences를 선택해서 Build - Build Tools - Gradle에서 저기 두 부분을 IntelliJ IDEA로 변경해준다 캐싱하고 뭐시기 등등 느리다고 알려져서 인텔리제이로 바꾸는게 빠르다고 한다 또한 롬복 플러그인을 설치 안하신분이 있다면 설치를 하자 추가로 어노테이션 처리 활성화도 해준다 File - Preferences - Compiler - Annotation Processors appli.. 2022. 4. 21.
스프링 시큐리티 + 소셜로그인 구현(1) - 앱 등록하고 키값 얻기 1. Google https://console.cloud.google.com/ 에 접속을 한다 위의 점 3개가 있는 화살표 부분을 클릭한다 새 프로젝트를 클릭한다 프로젝트 이름을 아무거나 짓고 만들기를 누른다 이 화면에서 왼쪽 막대기 3개를 누르고 API 및 서비스를 눌러준다 추가로 옆에 고정까지 해주면 좋다 API 및 서비스 화면으로 들어왔다. 왼쪽의 OAuth 동의 화면을 누르자 동의 화면에서 외부를 선택 후 만들기를 누른다 앱 등록 화면에서 필수값인 앱 이름, 사용자 지원 이메일, 개발자 연락처 정보를 입력하고 다음으로 넘어간다 여기에서는 승인된 도메인이 없어도 상관없다(테스트용 애플리케이션이기 때문, 실제 서비스에서는 필요) 범위에서 유저에게 받을 데이터를 정하는 것이다 범위 추가 또는 삭제를 눌.. 2022. 4. 18.
스프링 시큐리티 + 소셜로그인 구현(0) - 기본 정보 알기 Google, Facebook, Github, Kakao, Naver 전부 다 보여주겠다!! 내가 삽질해가며 얻은 결과들... 22년 중반의 글이다. 옛날 19 20년 글보고 베끼지 않았으니 안심해주세욧! 일단 시큐리티는 기본적으로 붙어있고, 게이트웨이를 쓰거나 모놀리식이라면 WebSecurityConfig에서 요청마다 인증을 필요/미필요하게 할건지 설정하는건 알거라 생각하므로... 넘어간다 스프링 시큐리티란? 인증, 인가를 기반으로 한 스프링 하위 프레임워크이다 인증(Authentication)은 간단히 말하면 로그인 인가(Authorization)는 간단히 말하면 내가 유저인데 어드민 권한으로 다른 사람의 계정 정보를 보거나 유저를 삭제할 수 없듯, 권한을 의미한다 OAuth(Open Authoriz.. 2022. 4. 14.
Axios 사용법 후론트엔드 글은 잘 안쓰는데.... 쓰려고한닷[ 나는 ES6를 좋아한다 ] 일단 클라이언트단에서 HTTP통신을 하기 위한 방법에는 Ajax, Fetch, Axios 3대장이 있다 위에 나온것처럼 Axios가 지원 브라우저도 제일 많고, XSRF(CSRF) 보안도 갖추고 있으며, response가 JSON type이며, Promise기반이기때문에 Call back hell을 막을 수 있다. CDN 방식 npm install 방식 npm install axios 파일 직접 다운로드 * ajax의 문제점 // Ajax 깊어진 callback 형태 ⇒ 알아보기 어려움 // Axios 알아보기 쉬워진 가독성 * interceptor로 요청, 응답 custom하기 const validate = (stat) => {.. 2022. 3. 30.

티스토리툴바