What I studied

리액트를 사용하며 훅을 정말 많이 사용하게 되는데 기본적으로 내장되어 있는 훅이 아닌 커스텀훅을 제작해서 사용하는 경우도 많다. 일반적으로 사용하는 유틸함수와 커스텀훅의 차이에 대해서 공부하고, 각각의 상황에서 어떤 함수를 만들어 사용해야 하는지를 알게 되었다. 1. 리액트 훅이란?먼저, 리액트 훅을 가볍게 설명해보자면 함수형 컴포넌트에서 상태와 라이프사이클의 기능을 사용할 수 있게 해주는 것이라고 할 수 있다. 리액트 16.8 버전부터 새롭게 도입되었으며 대표적인 내장 훅으로는 useState, useEffect, useRef, useMemo, useCallback 등이 있다. 커스텀 훅이 아닌 리액트 훅에 대해서 좀 더 자세하게 알고 싶다면 아래 게시글을 참고. 리액트 훅과 자주사용하는 훅의 특징(R..

요즘 커스텀 훅을 만들어보고 해당 부분을 다시 공부하면서 내가 자주사용하고, 또는 자주 사용해보지 않았던 훅들을 정리해보려고 한다. 1. 리액트 훅이란?리액트 훅은 리액트 16.8 버전에 새롭게 도입된 기능으로, 함수형 컴포넌트에서 상태(state)와 라이프사이클 기능을 사용할 수 있게 해준다. 기존의 클래스형 컴포넌트보다 훨씬 간결하고 읽기 쉬운 코드를 작성할 수 있도록 도와주며, 코드 재사용성을 높여준다는 장점이 있다. 리액트 훅을 사용하면 클래스 없이도 상태를 관리하고, 컴포넌트의 생명주기에 따라 작업을 수행할 수 있는데, 이를 통해 코드의 가독성이 향상되며 함수형 프로그래밍의 장점을 더욱 효과적으로 활용할 수 있게 된다. 2. 리액트 훅의 규칙리액트 훅을 사용할 때는 몇 가지 중요한 규칙을 따라하..

중요한 패치가 필요한 프로젝트를 작업중이었는데, 원래 내 브랜치에서 작업할 땐 문제가 없었다. 문제가 터진건 이제 최종 배포를 위해 다른 브랜치로 이동해서 확인 후, 빌드를 했는데... 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 ..