티스토리

스터디 블로그

검색하기

블로그 홈

스터디 블로그

sanghye.tistory.com/m

상혜 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

스타트업에서 대기업 계열서로 이직 후기(feat.F-lab) 개발자로써의 인생을 처음 시작했던 스타트업에서 이직을 결심하고 약 1년동안 이직을 준비하면서 가장 힘들었던 것을 뽑는다면 피드백이 없다는 것이었습니다. 면접을 여러 번 경험해 보신분들은 알겠지만 면접을 보면서 볼 수록 궁금한 것이 내가 왜 붙은거지? 내가 왜 떨어진 거지? 라는 의문이라고 생각합니다. 경력 기술서나 포토폴리오와 같은 이력서도 중요하지만 처음에 고생하여 틀만 잘 갖춰지면 서류를 합격하는 것에 대해서는 큰 어려움은 없을 것이라고 생각합니다.(2021년을 기준으로 개발자 품귀 현상으로 인한 이유도 있다고 생각합니다.) 하지만 아무리 서류가 합격하더라도(코딩 테스트가 합격하더라도) 결국 면접에서 합격하지 못하면 좌절을 맞이할 수 밖에 없었습니다. 또한 그러한 좌절은 영문도 모른채 몇 일간 머리 .. 공감수 7 댓글수 1 2021. 10. 15.
자바의 신(1, 2권) 📚 자바의 신 기본 타입은 8 개다 (정수 5개, 실수 2개, 불리언 1개) 변수는 네가지 (지역, 매개, 인스턴스, 클래스) VO 는 데이터를 담아 두기 위한 목적 DTO 는 데이터를 다른 서버로 전달하기 위한 목적 (DTO 가 VO 를 포함) 클래스에 static 변수를 사용하면 클래스 변수로 선언되기 때문에 모든 인스턴스가 같은 값을 바라보게 된다. static 블럭은 객체가 생성되기 전에 한 번만 호출되고, 그 이후에는 호출하려고 해도 호출 할 수가 없다. 그리고, 클래스 내에 선언되어 있어야 하며, 메소드 내에서는 선언할 수 없다. 즉, 인스턴스 변수나 클래스 변수와 같이 어떤 메서드나 생성자에 속해 있으면 안 된다. static 블럭은 여러 개의 객체가 생성되도 처음 객체를 생성할 때 한번만 .. 공감수 0 댓글수 0 2021. 1. 19.
[GIT] Git pull 전략 (default, --ff -only, --rebase) git pull 을 별도 옵션 없이 하게되면 다음과 같은 warning 이 발생하는 것을 볼 수 있습니다. warning: Pulling without specifying how to reconcile divergent branches is discouraged. You can squelch this message by running one of the following commands sometime before your next pull: git config pull.rebase false # merge (the default strategy) git config pull.rebase true # rebase git config pull.ff only # fast-forward only You can.. 공감수 25 댓글수 2 2020. 11. 24.
[Travis CI] yml 및 secret 파일 암호화하는 방법 Travis CI 사용 시 암호화된 yml 파일로 빌드하기 Travis CI 를 Github 를 이용하여 구성할 때 중요한 것이 중요한 정보가 된 yml 파일을 올리는 것입니다. DB Connection 정보나, AWS Secrect key, Access Key 등 암호 정보가 포함된 파일이 노출된다면 큰 문제가 발생할 수 있기 때문입니다. 하지만, CI 를 구성하기 위해선 이런 정보가 없다면 Build 가 실패하게 됩니다. 이러한 CI 를 구성하기 위해 Travis 에서 제공하는 파일 암호화를 이용하여 구성하는 방법을 알아보겠습니다. Travis CI CLC 구성 우선 Travis CI 의 CLC(Command Line Client) 를 이용하기 위해 아래 커맨드를 입력하여 설치합니다. (Mac OS .. 공감수 1 댓글수 1 2020. 10. 11.
[Spring] HandlerMethodArgumentResolver 사용하여 Custom Annotation 구현 및 테스트하기 HandlerMethodArgumentResolver 를 이용하여 Custom Annotion 을 만들어 User 정보를 쉽게 가져오기 회원을 관리하는 API 를 만들게 되면 꼭 필요로 하게 되는 것이 HandlerInterceptorAdapter 를 이용하여 HttpServletRequest 에 정보를 저장하여 사용자 정보 필요로 하는 Controller 에서 꺼내여 사용하는 방식입니다. 만약, HttpServletRequest 을 사용하지 않고 static 변수나 공유 가능한 변수 형태로 사용하게 된다면 Thread safe 하지 않기 때문에 Multi-thread 환경에서는 다른 사용자의 정보를 노출하게 되는 위험한 상황을 만들 수 있습니다. 하지만, 매번 API 에서 HttpServletReque.. 공감수 4 댓글수 0 2020. 9. 15.
[Spring] Optional 의 3가지 생성 방법 Java 를 기반으로 개발을 진행하다보면 NullPointException 을 자주 만나게 됩니다. 주로 Runtime 에 발생하기 때문에 찾기도 쉽지가 않고 이러한 예외를 미리 방지하기 위해서는 복잡한 방어로직이 필요하게 됩니다 . 이러한 문제를 해결하기 위해 Java 8 에서 나온 것이 Optional 입니다. Optional 인스턴스는 다음과 같은 특징을 가지고 있습니다. 불변 인스턴스 입니다. hashCode, equals, toString 메서드는 인스턴스 상태에 따라 달라집니다. Optional 의 3가지 정적 팩토리 Optional 의 객체 생성 메서드는 3가지의 정적 팩토리 메서드가 존재합니다. 특정 객체가 Optional 객체 생성이 필요할 때 다음과 같이 3가지 방법으로 감싸 생성할 수.. 공감수 0 댓글수 0 2020. 7. 25.
[Spring] Meta Annotation 이란?(@Target, @Retention) Spring 에서는 Anntotation 사용에 대한 기능을 상당히 많이 제공하고 있습니다. 주로 사용하는 @Controller, @Service, @Repostiroy 등 많은 Annotation 이 존재합니다. 해당 Annotion 은 각 기능에 필요한 만큼 많은 기능을 내포하고 있으며, 이러한 내용을 잘 알지 못해도 필요한 기능만 쉽게 사용할 수 있도록 제공되어지고 있습니다. 하지만, 이러한 Annotion 에 대해 불필요한 내용이 포함되거나 필요한 내용이 있는 경우 Cusotom 을 할 경우가 존재합니다. 그 중 로깅 등 AOP 설정할 때 주로 사용되는 @Target 과 @Retention 에 대해 알아보도록 하겠습니다. meta-annotaiton ? meta-annotation 은 다른 ann.. 공감수 5 댓글수 4 2020. 7. 25.
[MYSQL] Replication 이란? 주문이 이뤄지고,결제가 이뤄지는 서비스를 운용하면서 가장 중요한 것이 가맹점이 볼 수 있는 시각화된 데이터입니다. 이러한 통계 데이터를 실제 운용되는 Source DB 에서 바로 가져오는 것은 상당한 무리가 갈 수 있습니다. 특히, 한 테이블에서 바로 가져오는 것이 아니라 여러 테이블을 조인하여 조합 후 가져오는 형태라면 더더욱 부하가 발생합니다. 이러한 문제를 해결하기 위한 방법 중 하나가 바로 Replication 입니다. Mysql 공홈에서는 Replication 에 대해서 다음과 같이 설명하고 있습니다. Replication enables data from one MySQL database server (known as a source) to be copied to one or more MySQL.. 공감수 0 댓글수 0 2020. 7. 5.
[GIT] Git merge 충돌 발생 시 해결 GIT 을 사용하다보면 merge 를 해야하는 경우가 종종 발생합니다. 예를 들어, develop branch 에서 작업 후 production 에 반영하기 위해 merge 를 하는 경우가 대표적입니다. 이러한 경우 예상치 못한 상황으로 인하여 conflict 가 나는 경우가 있습니다. 최신화가 되지 않았거나, 중간에 hotfix 로 인하여 일부분이 급하게 수정되는 경우가 존재합니다. 이처럼 상황에 맞게 강제로 한쪽 branch 의 형태로 다른 branch 가 merge 되어야 합니다. 만약 develop branch 에 있는 소스를 master 로 강제로 merge 한다고 가정했을 때 여기서 merge 가 되어야 하기 때문에 history 를 조작하는 branch 를 B(master), merge 가 .. 공감수 0 댓글수 0 2020. 4. 27.
[Spring Boot] @NotNull, @NotEmpty, @NotBlank 의 차이점 및 사용법 개발하시는 API 의 request parameter 의 null 체크를 어떻게 하고 계신가요? 대부분 별도의 null 체크 util 을 사용하거나, Controller 에서 조건문을 사용하여 null 을 체크하기도 합니다. 이러한 조건문과 메서드 들은 변수별 특징과 조건에 관련하여 공통화하기가 쉽지 않습니다. 또한 별도의 API 에 따라서 같은 값이여도 필수인 경우가 있고, 아닌 경우가 있을 수 있습니다. 따라서, 해당 API 의 parameter 에 따라 별도의 오류 메시지와 조건 이 필요합니다. 이런 경우 쉽게 사용할 수 있는 것이 @NotNull & @NotEmpty & @NotBlank 입니다. 이 3가지 Annotiation 은 Bean Validation (Hibernate Validatio.. 공감수 53 댓글수 6 2020. 4. 1.
[Javascript] javascript 로 엑셀 다운로드 기능 추가하기 사용자에게 내역을 전달해주는 것은 대부분 엑셀을 사용합니다. 엑셀을 업로드 하거나 다운로드 기능을 제공해주는 라이브러리가 있는데, 바로SheetJS js-xlsx 입니다. Github : https://github.com/sheetjs/sheetjs js-xlsx 사용하기 설치 $ npm install xlsx $ bower install js-xlsx browser CDN 엑셀 파일 생성하기 const workSheetData = [['hello', 'test']]; const workSheet = XLSX.utils.aoa_to_sheet(workSheetData); workSheet['!autofilter'] = {ref : "A1:R11"}; const workBook = XLSX.utils.bo.. 공감수 4 댓글수 0 2020. 2. 14.
[Spring] Maven Wrapper 설명 및 실행방법 spring 이나 spring boot 로 개발을 진행하신다면 Maven 과 Gradle 과 같은 build tool 을 사용해보신 적이 있으실 겁니다. Maven 이나 Gradle 이 무엇인지는 잘 알고 있지만, Wrapper 는 무엇인지 잘 모르는 경우가 많습니다. 사실 저 같은 경우도 IDE 가 아닌 별도의 서버에서 CLI 로 빌드를 하여 MAVEN 을 띄우려 했을 때 mvnw 가 어떠한 동작을 하는지 몰랐었습니다. 단순 maven 을 이용하여 빌드하고 배포할 수 있지만, 좋은 환경을 구성하기 위해 wrapper 는 필수적입니다. Maven Warpper 란 무엇인가 ? Maven wrapper 란 개발자들이 Maven 을 별도의 환경에서 개발할 때 local machine 에 따로 설치를 원하지 .. 공감수 4 댓글수 1 2020. 1. 31.
2019년 회고 간단한 소감 2019년은 나에게 사회를 시작을 알리는 해였다. 취업하면서 꼭 해야겠다고 생각한 것이 있었다. 적어도 출근할 때와 퇴근할 때, 출근 30분전에와서 책을 읽자! 라는 목표를 작년에 계획했었는데 비교적 많은 책을 읽진 못했지만, 특정한 일이 있지 않은 이상 항상 책을 읽어왔다. 그 결과 10권정도 읽은 것 같다. (Clean code, Refactoring, 정보보안기사, TDD, 1만시간의 재발견, 객체지향의 사실과 오해, HTTP 완벽 가이드 등) 책을 읽을때면 내 일에 대한 자신감도 생기고, 한권 한권 쌓일 떄마다 스스로에게 뿌듯함과 열심히 살고 있구나 라는 생각을 들게 해준다. 살아가는데 사소한 행복을 찾는 것을 매우 중요하다고 생각하는데, 예를들어 씻을 때 따뜻한 물을 맞고 있으면 나.. 공감수 0 댓글수 0 2020. 1. 22.
[HTTP] CORS(Cross-Origin Resource Sharing) 이란 Cross-Origin Resource Sharing 은 추가 HTTP 헤더를 사용하여 브라우저가 한 출처에서 실행중인 웹 애플리케이션에 선택된 액세스 권한을 부여하도록하는 메커니즘입니다. CORS 를 알기전에 same-origin policy 에 대해 알아야합니다. Same-Origin Policy same-origin policy 는 우리나라말로 동일 출처 정책으로, 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식입니다. same-origin policy 는 malware 나 위협적인 접근에 대한 문서를 분리해, 공격받을 수 있는 경로를 줄입니다. same-origin 의 정의로는 두 URL 의 프로토콜, 포트(명시한 경우), 호스트가.. 공감수 0 댓글수 0 2020. 1. 14.
[JAVA] Reflection 을 이용하여 Method 호출하기 2개의 DB Connection Pool 을 사용하는 서비스를 개발하던 중 분리된 DB 의 Mapper 를 구분해서 호출해야 하는 이슈가 있었습니다. 문제는 2개의 Mapper 형태가 거의 유사하다는 점이었습니다. 매 서비스가 호출될 때 마다 if 문으로 서비스문을 분기하여 Mapper 를 호출해야될 정도 였습니다. 하지만, 그렇게 되면 중복코드의 양이 너무 많아지기 때문에 차선책이 필요했습니다. 그래서 생각한 것이 java 에서 제공하는 API 인 Reflection 이었습니다. Reflection 을 검색하면 다음과 같은 정의가 나옵니다. 리플렉션은 구체적인 클래스 타입을 알지 못해도, 그 클래스의 메소드, 타입, 변수들에 접근할 수 있도록 해주는 자바 API 이 말은 처음 본 사람에겐 의아할 수 있.. 공감수 3 댓글수 0 2020. 1. 8.
[Spring boot] java 파일을 특정 패키지로 이동 시 발생하는 ConflictingBeanDefinitionException 문제 해결 ControllerAdvice 를 이용하여 예외처리를 작업하던 중 패키지 이름에 대한 수정사항이 생겨 2개의 파일을 새로 만든 패키지로 이동시켰습니다. IntelliJ 에서는 워낙 Refactoring 기능을 다양하게 재공하기 때문에 파일을 옮기는데는 큰 문제는 발생하지 않았습니다. 하지만, Gradle 을 빌드하면서 다음과 같은 오류가 발생하였습니다. 10:05:20.310 [restartedMain] WARN o.s.b.w.s.c.AnnotationConfigServletWebServerApplicationContext - (AbstractApplicationContext.java:557) Exception encountered during context initialization - cancelli.. 공감수 8 댓글수 9 2020. 1. 3.
[Junit] Spring boot 에서 @ControllerAdvice 를 테스트하는 방법 새로 작업한 매니저 사이트에 예외처리를 구성하던 중 ControllerAdvice 를 사용하게 되었습니다. ControllerAdvice 를 테스트하기 어려운 어려운 이유는 단순히 Junit 에서 제공하는 excpeted 를 사용하여 테스트할 수 없기 때문입니다. Junit 에서 제공하는 @Test 의 expected 는 테스트하고자하는 서비스가 예외를 던졌을 때 던져진 예외가 어떤 Class 인지를 확인하기 위한 용도로 사용됩니다. 예를 들어, 아래와 같은 Login 시 조회된 결과가 존재하지 않을 때 NotExistUserException 을 던지는 Service 가 존재한다고 가정합니다. public List login(LoginVO.Login params){ List users = loginMap.. 공감수 3 댓글수 0 2020. 1. 2.
[Mybatis] Spring boot 에서 mybatis 로 2개의 DB connection 하기 새로운 매니저 사이트를 작업하면서 한 서비스에 다른 여러개의 DB 를 접속시켜야되는 이슈가 발생하였습니다. 예를 들어, DB 접속정보가 따로 관리되는 채소과게와 과일가게의 매출 통계를 구하는 화면이 동일한 화면에 공존할 수 있어야 하는겁니다. 물론, 별도의 서버를 가지고 채소과게 서버와 과일가게 서버를 연달아 호출하는 방법도 있지만 기능이 동일하고 단순 DB 만 다른 경우라면 관리적인 측면에서는 같은 서버에 DB 를 2개 관리하는 것이 훨씬 유리합니다. 한 Spring boot 서버에서 2개의 Mysql DB Connection 을 가지도록 설정해보도록 하겠습니다. 1. application.yml 의존성 주입 설정 spring FruitShop: datasource: jdbc-url: connectio.. 공감수 7 댓글수 2 2019. 12. 20.
[JUnit]같은 타입인 여러개의 Mock 객체를 @InjectMock 으로 주입 시 파라미터를 제대로 인식하지 못하는 문제 해결 Reflection 을 이용하여 2개의 Mapper 을 동적으로 호출하기 위한 Util 을 만들기 위해 다음과 같이 Object 타입의 클래스를 2개 주입받아 초기화되는 로직을 작성하였습니다. private Object firstMapper; private Object secondMapper; public ReflectionUtils(Object firstMapper, Object secondMapper) { this.firstMapper = firstMapper; this.secondMapper = secondMapper; } 이를 테스트 하기 위해 다음과 같이 Mapper 를 @Mock 으로 생성하여 @InjectMock 으로 주입하고자 했습니다. @RunWith(MockitoJUnitRunner.c.. 공감수 0 댓글수 0 2019. 12. 16.
[JUnit] Test code 작성시 DI(Dependencies Inject) 를 적용하는 방법 Spring boot 에서 테스트 코드를 작성할 때, 고민되는 것 중 하나가 의존성 문제 해결입니다. 한 Service 가 다른 Service 를 의존하여 실행되거나, Controller 가 Service 를 의존하거나, Mybatis 를 사용하는 경우 Service 에서 Mapper 를 의존하는 경우가 대부분입니다. 이럴 때, 어떤 의존성을 가지냐와 서로가 어떻게 실행될 것인지에 대해서 의존성을 달리 주입할 필요가 있습니다. DI 와 IOC 에 관해서 궁금하신분은 아래 velog를 참고 부탁드립니다. 직관적으로 설명이 잘되어있습니다. IoC? DIP? IoC Container? DI? DI Framework? 도대체 그게 뭔데? Mapper Spring boot 에서 RDBS 를 사용하여 MVC 구조에.. 공감수 5 댓글수 0 2019. 11. 27.
[MYSQL] TEMPORARY TABLE 이란 최근 특정 업체와 결제 서비스에 관련해 연동작업을 진행하면서 대량 발송을 위해 배치작업이 요구되는 사항이 발생하였습니다. 대량 발송 시 요구되었던 작업이 발송을 하기 위해 건수 및 발송에 대한 정보를 읽고 임시테이블에 저장한 후 그것을 발송시켜야 하는 것이었습니다. 여기서 만약 3만 건을 요청한다고 한다면, 3만건에 대한 배치작업을 하기위해 3만건의 데이터가 생길 것이고 단지 1회 조회용을 위한 데이터라면 불필요한 테이블과 데이터가 생성될 수 있습니다. 이러한 데이터 생성을 방지하기 위한 것이 Temporary table 입니다. MYSQL Temporary table 은 다음과 같은 특징을 가지고 있습니다. temporary table 은 CREATE TEMPORARY TABLE 구문을 사용해서 만들어.. 공감수 2 댓글수 1 2019. 11. 15.
[Angular] main.js 에서 hmr 설정 시 module undefined 오류 해결 AngularJS 를 이용하여 개발환경 셋팅 중 hmr을 셋팅하던 중 module 을 찾을 수 없다는 오류가 발생하였습니다. 여기서 hmr 이란 Hot Module Replacement 의 약자로 모듈의 변경사항을 실시간으로 어플리케이션에 반영할 수 있도록 환경을 구성하는 것입니다. ng build 를 실행 시 다음과 같은 오류가 발생하였습니다. 내용과 같이 module 을 찾을 수 없다는 내용인데, 이는 node_modle 에서 @types 에 전역으로 선언되어 있는 변수를 찾지 못하는 내용이었습니다. 우선 typings 가 설치되어 있지 않다면 npm 으로 설치해줍니다. typings 란 Typescript 를 사용할 때 필수적으로 사용되는 툴입니다. 만약 typings 가 존재하지 않았다면, jqu.. 공감수 0 댓글수 0 2019. 11. 9.
[Javascript] IE11 에서 SCRIPT10002 와 SCRIPT10009 콘솔 오류 발생하는 문제 해결 최근 Vue 프레임워크로 매니저 사이트를 개발 후 크롬과 사파리에서 테스트 진행 후 IE11 에서 최종 확인을 하였는데, 화면 자체가 뜨지 않는 문제가 발생하였습니다. 요소 검사를 띄워 확인해보니 다음과 같은 'SCRIPT1002' 오류가 발생하였습니다. 문법오류가 있으면 실행이 안되었어야 할텐데 크롬은 정상적으로 동작이 되고 있다는 것을 확인하였기에, 끊임없는 삽질만 반복하고 있었습니다. 그러던 중 babel targets 에 browserlists 에 "ie 11" 를 추가하려는데 babel config 가 없다는 것을 발견하였습니다. package.json 에는 babel 에 대한 library 가 import 되어있었다고 생각해서 고려를 안했는데 babelrc 파일이 존재하지 않아서 발생한 문제였.. 공감수 0 댓글수 0 2019. 11. 6.
[Javascript] Webpack ? Bundle ? Webpack ? bundle ? 프론트 작업을 하게되면 필요한 것 들이 여러가지 있습니다. 컴파일이나 트랜스포터 등 화면을 띄우기 위해서는 수많은 작업이 요구됩니다. 만약 이런것들을 수동으로 작업을 해야했다면, 웹 사이트 시장이 절대 이렇게 커질 수 없었을 것입니다. Angular 는 Typescript 를 지원하는데, 실행하기 위해서는 javascript 로 변환 후, 프로젝트가 의존하는 모듈들을 로드하는 HTML 파일의 script 태그를 작성해야합니다. 또한 분리되어 있는 Javascript 를 하나의 파일로 모아줘야하는데 이러한 작업을 수작업하게 된다면 수많은 실수와 시간과 노력이 발생할 것입니다. 이러한 편리성을 제공해준 대표적인 것이, Webpack 입니다. Angular, Vue 등 대표적.. 공감수 1 댓글수 0 2019. 11. 2.
[IntelliJ] IntelliJ 에서 Invalidate Cashe 했을 때 발생한 빌드문제 해결 IntelliJ 에서 가끔 Project 나 빌드가 꼬이는 문제로 Cashe 를 비워줘야 하는 경우가 발생합니다. 그런 경우 File -> Invalidate Cashes / Restart 로 재시작하면 됩니다. 하지만, 재시작 후 Gradle 을 빌드하면 다음과 같은 오류가 발생하는 경우가 존재합니다. *************************** APPLICATION FAILED TO START *************************** Description: Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured. Reason: Failed .. 공감수 0 댓글수 1 2019. 10. 28.
[Spring boot] TestRestTemplate 401(authentication) 오류 발생해결 TestRestTemplate 를 사용하여 서버와 클라이언트의 인증값을 받아서 사용하는 프로젝트를 진행 중 인증되지 않은 사용자에 대한 API 접근에 대해서 unAuthentication 을 정상적으로 발생시키는지에 대한 테스트코드를 작성하여 실행하는데 문제가 발생하였습니다. org.springframework.web.client.ResourceAccessException: I/O error on PUT request for "http://경로": cannot retry due to server authentication, in streaming mode; nested exception is java.net.HttpRetryException: cannot retry due to server authent.. 공감수 1 댓글수 0 2019. 10. 5.
[Junit] JunitSoftAssertion 으로 중복 검증 문제 해결하기 JUnitSoftAssertions 라이브러리 TDD 에 대한 강의를 들었을 때, 테스트 코드를 검증 시 한 메서드에 한 가지의 검증을 해야한다는 규칙이 존재하였습니다. 한가지의 규칙만 존재해야하는 이유는, 만약 한 테스트 메서드 내에 3가지의 검증이 존재한다면 첫 번째의 검증이 실패한 경우 두번째와 세번째 테스트에 대해서 검증을 진행할 수 없기 때문입니다. 만약 간단한 프로젝트나 테스트를 구성하고 있는 경우에는 크게 문제가 되지 않을 수 있지만, 테스트 코드의 양이 방대하다면 이러한 문제는 크게 야기될 수 있습니다. 그렇기 떄문에 이러한 검증 문제로 인하여 한 테스트 메서드 내에는 하나의 검증만 진행해야 한다는 규칙이 존재합니다. 하지만, 같은 테스트 코드이지만 검증해야되는 부분만 다르기 때문에 중복된.. 공감수 0 댓글수 0 2019. 10. 3.
[Javascript] 새로고침 시 알림팝업 띄우고, 뒤로가기 버튼 클릭 시 띄우지 않기 Javascript 사용자에게 입력을 받는 화면을 개발하던 중, 새로고침을 하게되면 작성 중인 데이터가 날라가 이용하는데 불편함을 겪는 이슈가 있었습니다. 이러한 문제를 해결하기 위해서는 새로고침에 대한 확인을 받는 것이 좋다고 생각했습니다. 브라우저 내에서 제공하는 메서드인 window.onbeforeunload 를 이용하여 쉽게 구현할 수 있습니다. 특정 문자열을 리턴하지 않으면 알림 팝업이 발생하지 않습니다. 기존에는 팝업내의 메시를 return 값에 넘겨줌으로써 수정할 수 있었지만 특정 취약점으로 인해 변경이 불가능해졌습니다. refresh 는 사실상 무의미한 데이터입니다. ""로 넘기셔도 문제없이 팝업이 발생합니다. MDN - Custom messages in onbeforeunload dial.. 공감수 2 댓글수 0 2019. 10. 2.
[Javascript] CrytptoJS 암호화 시 TypeError: Converting circular structure to JSON 나는 문제 해결 cryptoJS 는 Object 형태를 저장할 수 없고, String 형태만 가능하기 때문에 JSON 의 경우 JSON.stringify 를 사용하여 String 형태로 직렬화 후 사용가능합니다. cryptoJS 라이브러리를 사용하여 객체를 String 으로 직렬화하여 암호화 후 역직렬화하여 데이터에 저장 시 다음과 같은 오류가 발생합니다. 이와 같은 에러는 주로 직렬화나 역직렬화 시 내부에 타입이 맞지 않는 문제로 순환 참조 시 발생합니다. CryptoJS - npm 해결방안 CryptoJS.AES.encode(JSON.stringify(data), key) 로 데이터를 암호화 진행하면 console.log 에는 문제없이 출력되지만 저장 시 오류가 발생하는데, 마지막에 .toString() 을 추가해주.. 공감수 1 댓글수 0 2019. 9. 24.
[Javascript] sessionStorage 에 객체 저장하고 꺼내기 문제점 sessionStorage 는 기본적으로 key, value 형태의 문자열 값을 저장할 수 있도록 한다. 따라서 객체의 형태를 저장할 경우 String 형태로 "[Object, Object]" 가 저장되기 때문에 getItem 하여 사용할 수 없게된다. Web storage API - MDN 해결방안 따라서,객채형태를 value 로 저장하기 위해서는 String 으로 변환을 하거나, 별도의 prototype 을 정의해줘야한다. 객체형태를 String 으로 변환하여 사용하는 방법 // keyName 이라는 이름의 key 에 objectData 이름의 객체 데이터를 세션에 저장 sessionStorage.setItem(keyName, JSON.stringify(objectData)); // keyNa.. 공감수 6 댓글수 0 2019. 9. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.