What I studied

중요한 패치가 필요한 프로젝트를 작업중이었는데, 원래 내 브랜치에서 작업할 땐 문제가 없었다. 문제가 터진건 이제 최종 배포를 위해 다른 브랜치로 이동해서 확인 후, 빌드를 했는데... css가 깨지는 현상이 발생했다. 배포된 파일을 보니 내가 추가한 적도 없는 css와 vuetify 태그들이 들어있었는데 소스상에서는 문제가 될 부분이 전혀 없었다. vuetify를 사용하고 있었기 때문에 vuetify와 관련한 문제가 발생했음을 인지하고, 이 문제를 가지고 2일정도 삽질을 했다. 삽질 끝에 결국 package.json과 package-lock.json 관련 문제라는 것을 알게되었다. 1. 문제가 발생한 원인 문제가 발생한 원인은 우선 내가 계속해서 사용하고 있던 브랜치에는 기존에 쭉 사용하고 있던 pac..

vue3 프로젝트를 진행하며, json 데이터를 그 형태 그대로 화면에 예쁘게 보여주고자 방법을 찾다가 가장 먼저 적용해 본 방법은 태그를 사용하는 것이다. pre 태그를 사용하면 json 데이터가 화면에 예쁘게 출력되지만 css가 적용되지 않은 pre 태그는 정말 json 그 자체이다. 그래서 코드블록을 예쁘게 보여줄 수 있는 라이브러리가 있는지 찾아보다가 vue-code-highlight라는 라이브러리를 알게 되었고, 한번 적용해 보았다. 1. vue-code-highlight 설치 npm, yarn 등 내가 사용하고 있는 패키지매니저에 따라 해당 라이브러리를 설치해 주면 된다. npm install vue-code-highlight --save 2. vue에서 사용할 수 있도록 설정 그다음은 vue..

오랜만에 리액트 프로젝트를 생성한 후 npm install을 했는데 계속해서 에러가 발생했다. npm install 이후, 에러가 발생한다면 아래와 같은 원인이 있을 수 있는데 에러 메세지를 확인하여 각각에 맞는 해결방법으로 해결해주면 된다. 1. npm install 에러의 흔한 원인 sudo 권한으로 명령어를 실행해야하는 경우 dependency 버전 문제 node와 npm 버전이 맞지 않는 경우 2. dependency 버전 관련 에러 해결 오랜만에 새로운 프로젝트를 시작한 후, npm install을 실행시켰는데 다음과 같은 에러가 발생했다. jieun@jieun-MacBookAir:~/Desktop/dev$npm i npm ERR! code ERESOLVE npm ERR! ERESOLVE un..

기존에는 AES 방식으로 암호화를 진행했다면 이제는 jsrsasign이라는 라이브러리를 가지고 RSA 암호화를 구현해보려고 한다. 기존에 사용했던 AES 방식과 RSA 방식이 어떤 차이가 있는지를 먼저 알아보고, 자바스크립트와 리액트에서 사용할 것이다. 1. AES vs RSA 두 방식의 차이는? 1) AES 알고리즘 AES 방식은 대칭키를 사용하여 암호화, 복호화를 진행하는 암호화 알고리즘으로 클라이언트와 서버가 같은 키를 사용해야한다. 클라이언트와 서버 간 동일한 키를 공유해야하기 때문에 키 전달 및 관리에 어려움이 있다. 키가 노출되면 보안에 매우 취약해진다. 비대칭키 암호화 방식에 비해서는 키 사이즈가 작지만 암호화 알고리즘 구조가 간단하여 연산 속도가 빠르다. 2) RSA 알고리즘 RSA 방식은..

Rest API와 Restful API는 프론트엔드 개발자, 백엔드 개발자 등 웹개발자라면 누구나 알고 있어야하는 부분인 것 같다. 이번에 리액트 + 스프링부트 프로젝트를 진행하며 API를 직접 만들다보니 이 부분에 대해서 확실하게 짚고 넘어가야할 것 같다. REST, API, REST API, RESTful API에 대해서 알아보고 이를 바탕으로 기존에 만들었던 스프링부트 코드를 리팩토링해보고자한다. 1. API란? 먼저 API란 Application programming Interface의 약자로 애플리케이션을 프로그래밍하는데 쓰이는 인터페이스라고 할 수 있다. 여기서 인터페이스라는 것은 컴퓨터를 하기 위해 만지고 보고 하는 화면, 키보드, 마우스 등의 모든 것을 의미하는데 사용자와 기기를 연결해주는..

우선 내가 사용한 기술스택은 다음과 같다. - 프레임워크 및 라이브러리 : React + SpringBoot - 언어 : Java8 - 빌드도구 : Gradle - Mapper : mybatis - DB : postgresql 프레임워크는 리액트와 스프링부트를 사용했으며, 언어는 java8, 빌드도구는 gradle 기반, Mapper는 mybatis, DB는 postgresql을 선택했다. 1. ORM? SQL Mapper? DB? 선택 스프링부트에 java8, 요즘 많이 쓰는 gradle은 이미 선택해놓은 상태였고, 아직 뭐가 뭔지 모르는 상태에서 기본적인 개념부터 알고 시작해보려고 한다. 1) ORM이란? ORM은 객체지향 프로그래밍의 객체와 관계형 데이터베이스의 데이터를 연결하는 기술을 의미하며 대..

프론트엔드는 리액트, 백엔드는 스프링부트를 사용해 리액트 스프링부트 프로젝트를 만들어보려고한다. 기본적으로 프로젝트를 생성하기 위해 start.spring.io에서 프로젝트를 생성했으며 프론트엔드 프로젝트까지 연결하는 방법을 정리해보려고 한다. 1. SpringBoot 프로젝트 생성하기 우선 앞서 말했던 것처럼 start.spring.io 사이트에서 스프링부트 프로젝트를 생성할 것이다. java8 버전을 사용할 것이기 때문에 openjdk 1.8을 설치해주었고, 아래와 같이 세팅해주었다. 먼저, 빌드 도구는 Gradle을 사용할 것이기 때문에 Gradle-groovy를 선택했고, Springboot 버전은 2.7.17 버전, Packaging은 Jar, Java 버전은 8을 선택해주었다. 또한 의존성 라..

저번주에 작업 완료한 파일을 서버에 설치했더니 cdn을 받아오는 곳에서 에러가 발생했다. 콘솔의 에러를 확인해보니 Mixed content 에러라고 찍혔는데 에러 내용은 다음과 같다. 이 에러의 경우에는 예전에도 만났던 에러라 오랜만에 본 것 같다. 1) Mixed Content 에러 발생 Mixed Content: The page at 'https://----/hello.html' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0 /jquery.min.js'. This request has been blocked;the content must be served ..

항상 로컬에 띄워놓고 코드를 바꿔가면서 테스트 하다가 사수가 개발자도구를 활용해 디버깅도 하고, CSS 수정도 하고 테스트도 하는 그런 모습을 보게된 것 같다. 아직 개발자 도구를 자유롭게 사용하지는 못하지만 확실히 잘 사용하면 프론트엔드 개발을 할 때 시간을 엄청 단축할 수 있을 것 같다는 생각이 들었다. 그래서 개발자 도구를 활용할 수 있는 방법을 정리해보려고 한다. 1. 개발자 도구 오픈 기본적으로 우리는 개발자도구를 열 때 F12 단축키를 많이 사용한다. 단축키를 사용하거나 마우스 오른쪽 버튼을 클릭해 검사 항목을 누르면 개발자도구가 열린다. 윈도우 맥 공통 F12 최근 탭 열기 Ctrl + Shift + I Cmd + Opt + I 요소 탭 열기 Ctrl + Shift + C Cmd + Opt ..