What I studied

기존에 쓰던 스킨에서 벗어나 정상우님께서 만들어주신 hELLO 스킨으로 돌아왔는데 다시 생각해도 이 스킨은 너무 잘 만들어진 것 같다. 무료로 이용할 수 있고 커스텀까지 가능하기에 개발자들에게도 인기 많은 스킨이라 지금부터는 직접 커스텀하여 나만의 블로그로 만들어보려고 한다. css도 연습할 겸! 좋은 스킨 너무 감사합니다~! hELLO 스킨을 적용하고 보니 가장 먼저 수정하고 싶었던 부분이 바로 code box 부분이었는데 조금 더 눈에 잘 띄는 것으로 변경해보고 싶었다. 그래서 highlightjs 라는 라이브러리를 사용해 원하는 테마로 변경했다. 1. highlight.zip 파일 다운 받기 먼저 아래 사이트를 통해 파일을 다운로드 해주면 되는데 zip 파일을 다운받아 압축을 풀어주면 된다. Dow..

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

MyBatis는 Java 객체와 SQL문 사이의 자동 매핑을 지원하는 ORM 프레임워크이다. 이를 통해 개발자는 SQL 쿼리를 직접 작성하지 않고도 객체를 더 쉽게 다룰 수 있다는 장점이 있는데 MyBatis에서는 SQL쿼리를 작성할 때, #과 $를 사용할 수 있다. #을 사용한 경우 : SQL쿼리에 사용될 파라미터를 전처리한다. 이를 통해 SQL Injection 공격을 방지할 수 있다. 또한 자동으로 파라미터의 타입 변환이 이루어지는데 예를 들어, #{name}과 같이 사용하면, 자동으로 String 타입의 name을 인식하여 적절한 형태로 SQL문에 삽입 된다. $을 사용한 경우 : SQL쿼리에 그대로 파라미터를 삽입한다. 전처리 과정을 거치지 않기 때문에 SQL Injection 공격에 취약하다...

리액트+스프링부트 프로젝트를 진행하며 Java의 데이터 타입에 대해서 공부하게 되었는데, 자바스크립트에는 없는 타입들이 존재했다. 그래서 각각의 차이에 대해서 간단하게 정리해보고자한다. 1. Long? long? 해당 타입은 처음본 타입이었는데 도메인에서 id값에 사용하는 것 같았다. 근데 대문자로 시작하는 것이 있고 소문자로 시작하는 것이 있었는데 처음에는 두가지가 같은 줄 알았다. 그럼 어떤 차이가 있을까? 먼저, Long과 long은 원시타입이냐, 참조타입이냐의 차이가 있다. 원시타입은 정수, 실수, 문자 등 실제 메모리에 데이터 값을 직접 저장하는 타입이고, 참조타입은 메모리 주소 값을 통해 객체를 참조하는 타입이라고 한다. 그래서 결론은, long은 원시타입, Long은 참조타입이라는 것이다. ..

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은 객체지향 프로그래밍의 객체와 관계형 데이터베이스의 데이터를 연결하는 기술을 의미하며 대..

집에서는 맥북을 사용하고 회사에선 윈도우를 사용하다보니 설치하는 방법이 조금씩 달랐다. 맥에서는 터미널을 통해 바로 설치하였고, 윈도우에서는 exe 파일을 내려받아 설치하는 방법으로 설치했다. 1. Mac M2 PostgreSQL 설치 및 실행 나는 맥북 에어 M2를 사용하고 있고, 설치방법은 어렵지 않았다. 해당 디비를 설치하기 위해 homebrew를 사용할 예정이기에 homebrew가 제대로 설치되어있는지를 먼저 확인해두면 좋다. 1) Homebrew 설치 확인 brew --version 해당 명령어를 입력하여 Homebrew 버전이 제대로 나타나는지를 확인한 후, 본격적으로 PostgreSQL을 설치했다. 2) PostgreSQL 설치 및 실행 # 설치 brew install postgresql #..

프론트엔드는 리액트, 백엔드는 스프링부트를 사용해 리액트 스프링부트 프로젝트를 만들어보려고한다. 기본적으로 프로젝트를 생성하기 위해 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 ..

어느덧 프론트엔드 개발자로 일을 한지 1년정도가 되어가는 시점에 주변에서 항해 99가 어땠는지 물어보는 사람들이 많다. 친구도 지인들도 솔직한 후기를 듣기 위해 나한테 연락하곤 하는데, 내가 경험한 것들을 바탕으로 현재까지 어떤 것들을 얻었는지 이야기해볼 수 있을 것 같다. 개발자가 되기로, 부트캠프를 고민하고 있는 시점이라면 이 경험과 후기가 도움이 될 수 있을 것 같다. 1. 항해99 합류 전, 내 삶은? - 봉사 그 자체 나는 비전공자이고 대학교 4학년 초까지 사회복지학과를 너무 잘 다니고 있었다. 대학을 다니는 4년동안 다양한 것들을 경험해보기 위해 정말 많은 대외활동에 참여했는데 주로 마케팅, 봉사, 동아리 위주였던 것 같다. 카드뉴스를 만들어 홍보활동을 하거나 장애인, 아동관련 분야 봉사를 다..