본문 바로가기

전체 글155

.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-2 BirthDay 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 기타 .. 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.

티스토리툴바