프로그래밍/개발 35

Java 문법 Integer, int 그리고 final

int, Integer Java에서는 int Integer이 따로 있다. 다른 사람 코드를 보면서 알게 된 사실이다. 큰 차이는 다음과 같다. int : 원시 자료형 Integer : nullable한 Wrapper class 알고리즘 문제 해결 같은 경우에는 int를 사용하여 동작을 빠르게 하는게 좋을것 같고 실무의 경우에는 Integer를 사용하여 Optional을 따로 안걸어서 null check를 해줄 수 있는 것이 좋을 것 같다. final Java로 BE 프로젝트를 하다보면 어떤 경우에 final이 붙어있는 함수도 있고 어떤 경우에는 없는걸 보고 어떤 문법인지 알아보게 되었다. final이 어디에 붙냐에 따라 의미가 달라진다. final + 변수 : 변수를 수정 할 수 없다. 초기화한후 변경 ..

자바스크립트 난독화 보안

어노테이션 툴 개발중에 들었던 생각이었는데, 디버깅하기위해서 console.log(변수) 로 찍어보면서 크롬 개발자 도구(F12) 콘솔에서 변수를 찍어볼 수 있다는것이 개발자 뿐만 아니라 사용자도 해볼 수있다는 것이 데이터 변조나 보안에 위험이 될 수 도 있다는 생각이 들어서 찾아봤던 개념이다. 자바스크립트 특성상 브라우저에 실행되는 js파일들을 사용자가 그대로 볼 수 있다고 생각했기 때문이다. 그래서 검색해보니 나왔던 결과는 과거에 웹해킹 문제들에 나올것만 같았던 방식들이었다. 내가 생각한 것들이 역시 과거에도 다뤄졌던 것 같다. 다양한 방법의 난독화가 존재하는데 1. split 사용 문자열들을 나눠서 흩뿌려놓고 읽기 어렵게 한다. 2. 문자열 인코딩 문자열을 인코딩해서 사람이 알아먹을 수 없는 문자로..

AJAX란? Async? Await? Axios?

Asynchronous Javascript and Xml 비동기 방식으로 전체페이지가 아닌 페이지 일부만 로드하는 기술 동기방식 : 직렬 비동기 방식 : 병렬 XMLHttpRequest Object 생성 -> Callback 함수 생성 -> Request 장점 : - 빠른 반응성 - 서버 부하감소 - 백그라운드 데이터 처리 단점 : - 브라우저 히스토리 관리 - 검색엔진 최적 Async, Await 비동기 처리를 하기 위한 최근 문법 promise를 반환한다. async function func(){ await method(); } promise가 해결 되기 전까지 이후에 코드를 실행하지않는다. Axios 는 ? 아예 별개의 개념 ajax를 구현하기 위해서 사용하는 비동기 통신 라이브러리. 비동기 통신을..

onclick vs addEventListner , id vs class

onClick vs addEventListner 이것도 역시 개발을 하다 의문이 생겨 공부하게 된 내용이다. 클릭 동작의 경우에 초창기에는 거의 onclick 으로 코드를 짰다. 하지만, 검색들을 통해 이것저것 알아보다 보니 많은 사람들이 addEventListner를 사용하길래 어떤 차이가 있나 알아봤다. 가장 큰 이유는 onclick은 하나의 event만 추가할 수 있고 addEventListner는 여러 이벤트를 누적해서 실행 시킬 수 있다. 사소한 차이가 있다면 onclick은 모든 브라우저에서 사용가능한데, addEventListner는 오래된 브라우저는 지원하지않는다. addEventListner는 저번에 배운 버블링, 캡쳐링을 적용할 수 있다. 이러한 점들을 고려해서 리팩토링 할때 모든 on..

버블링과 캡처링

저번과 마찬가지로 현장실습할 때 의문점이 생겨 공부하다가 알게된 개념이다. 어노테이션툴은 백엔드 보다 프론트에서 작동하는게 많았기 때문에 클릭 드래그 등을 하다가 작동하지 않을때 검색해 보았다. 버블링 내부의 버튼을 클릭했을때 외부에 할당한 핸들러도 동작하는것이다. 즉, 자식요소의 이벤트가 동작할때 최상단에 도달할떄까지 각 요소의 이벤트가 동작한다. event.stopPropagation() 을 이용하여 버블링을 멈출 수 있다. 캡처링 주로 사용되지 않는다고한다. 이는 반대로 이벤트가 하위요소로 전달될때 쓴다고한다. capture : true 옵션으로 동작한다. 참고 1. https://ko.javascript.info/bubbling-and-capturing

자바스크립트 싱글스레드

도입 최근 현장실습 가서 어노테이션 툴을 개발하다가 생긴 의문점이었다. react같은 프레임워크를 사용하지않고 html, css, javascript를 쓰고 bootstrap, fastapi를 사용했다. 본문 1. fabric.js 를 사용하는데 객체를 edit, add 할 때 변수등의 데이터를 어떻게 관리해야할까? - local storage, session storage 를 사용하여 새로고침 또는 종료해도 작업하던 데이터가 남아있게했다. - 변수처럼 class, id를 사용했는데 이는 이렇게 사용하는게 맞는지를 잘 모르겠다. 2. 바닐라 자바스크립트로 개발을 하다 보니 html 파일 밖으로 빼서 관리를 해주는데 어떤 코드들은 html 내부에서 로 실행하면 동작하는데 어떤 코드들은 분리하니 작동을 잘 ..

백엔드 오답노트 2 Test란?

백엔드에서 진행하는 테스트는 종류가 많다. 유닛테스트, 통합테스트등 하나씩 알아가 보자. 단위테스트란? - 외부에 의존성이 없는 소프트웨어 단위 테스트 BDD - Given - When - Then 통합테스트란? - 둘 이상의 시스템요소를 통합한 테스트 Mock 테스트와 Stub 테스트의 차이는 무엇일까? 우선 각 용어를 알아보자. Mock : 예상되는 기대값, 미리 프로그래밍 객체 Stub : 테스트 중에 만들어진 호출에 미리 준비된 답변 음... 이것만 봐서는 잘 모르겠다. 큰 차이점만 본다면 Mock 은 Behavior verification 행위검증 : 메소드의 리턴값으로 판단할 수 없는경우, 특정 동작을 잘 수행했는지 Stub 는 State verification 상태검증 : 객체의 상태를 확인..

카테캠 백엔드 2단계 리뷰

23.06.26 ~ 23.08.04 6주차 과정 카테캠 2단계는 클론코딩과정이다. 카카오 쇼핑 어플리케이션의 주어진 내용들을 과제를 따라 순차적으로 구현하자. 월~금 매일 10시 접속 월요일은 출석체크및 공지만하고 2시~6시 실시간 강의 나머지 요일은 팀원들과 스크럼이후 각자 코딩 금요일 과제 제출 중간중간에 저녁에 Live 특강 이런식으로 진행된다. 큰 주제들은 다음과 같다. 1주차 화면 분석 및 테이블 설계 2주차 스프링 세큐리티, JWT, reflection, 톰캣, 쿼리문작성법 등 3주차 DTO, JPA 4주차 DTO 유효성검사, 단위테스트 5주차 AOP, 통합테스트 6주차 배포 얼핏 보기만해도 내용이 많다. 개인적으로는 어느정도 이해한 부분은 있었지만 완벽히 이해했다고는 생각하기 어렵다. 클론코..

백엔드 오답노트 1 JWT, RestAPI

JWT란 무엇인가? Json Web Token 로그인 때 사용하는 토큰 관련 인증 Header + PayLoad + Signature 헤더 내용 서명 헤더 : 해시 알고리즘, 타입의 값 페이로드 : 보내는 데이터 key value key -> claim ( registed, public, private ) 서명 : HMAC SHA 256 ( 비밀 코드 ) 사용 처 : 토큰으로 해당 요청이 유효한지 확인 검증된 사용자인지 아닌지 전달 방법은 구글 검색후 이미지 확인 RestAPI란 무엇인가? REST -> Representational State Transfer 자원을 이름으로 정보를 주고받는 모든것 (여기까지는 아는듯) 개념 : HTTP URI를 통해 Resource를 명시하고 HTTP Method( P..

Spring 공부중 생긴 여러가진 의문점과 그에 대한 답변 및 정보

1. DTO와 DTO로 만드는것의 차이 DTO : 데이터 전송 객체로 프로세스 사이에서 데이터를 전송하는 객체 요구사항에 따라서 필요한 데이터만 뽑아내는게 DTO 전체 객체를 보일때는 class를 쓴다. 2. setOption() 얘는 만든적도 없는데 어디서 온걸까? @Setter 어노테이션에서 제공하는 기능 3. 영속성이란 무엇이고 왜 쓰는건가? 영속성 : 데이터를 생성한 프로그램이 종료되어도 사라지지 않는 데이터의 특성 persistence context 영속성 컨텍스트 : 엔티티를 영구 저장하는 환경 영속성 컨텍스트 장점 1. 1차 캐시 : 굳이 db까직 가서 검색을 안해도된다. 2. 쓰기 지연 : 커밋하는 순간에 한번에 sql을 보낸다. 3. 변경 감지 : 수정시 따로 업데이트나 저장을 안한다. ..