What I studied

프론트엔드 개발 성장기록
· Database
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은 참조타입이라는 것이다. ..
· Web dev
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을 선택해주었다. 또한 의존성 라..
· Web dev
저번주에 작업 완료한 파일을 서버에 설치했더니 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년동안 다양한 것들을 경험해보기 위해 정말 많은 대외활동에 참여했는데 주로 마케팅, 봉사, 동아리 위주였던 것 같다. 카드뉴스를 만들어 홍보활동을 하거나 장애인, 아동관련 분야 봉사를 다..
· Web dev
항상 로컬에 띄워놓고 코드를 바꿔가면서 테스트 하다가 사수가 개발자도구를 활용해 디버깅도 하고, CSS 수정도 하고 테스트도 하는 그런 모습을 보게된 것 같다. 아직 개발자 도구를 자유롭게 사용하지는 못하지만 확실히 잘 사용하면 프론트엔드 개발을 할 때 시간을 엄청 단축할 수 있을 것 같다는 생각이 들었다. 그래서 개발자 도구를 활용할 수 있는 방법을 정리해보려고 한다. 1. 개발자 도구 오픈 기본적으로 우리는 개발자도구를 열 때 F12 단축키를 많이 사용한다. 단축키를 사용하거나 마우스 오른쪽 버튼을 클릭해 검사 항목을 누르면 개발자도구가 열린다. 윈도우 맥 공통 F12 최근 탭 열기 Ctrl + Shift + I Cmd + Opt + I 요소 탭 열기 Ctrl + Shift + C Cmd + Opt ..
반응형
도잎
JDevelog