분류 전체보기196

• 

  [React] Inflearn 처음 만난 리엑트(React) - 1~5강 개념정리 강의 (Inflearn) 처음 만난 리엑트(React) - SOAPLE님 https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard [무료] 처음 만난 리액트(React) - 인프런 | 강의 자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., - 강의 소개 | 인프런 www.inflearn.com 1강. React의 장단점 장점 빠른 업데이트 및 렌더링 속도 코드의 재사용성이 높아서 개발 속도가 빠르고 유지보수 용이 사용하는 개발자가 많기때문에 커뮤니티가 활성화되어있다 단점 꾸준하고 빠른 속도로 업데이트가 이루어져 새로운 내용들이 계속해서.. 🖥️Frontend/React 2023. 2. 16.

• 

  [Spring Boot] 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - 11 어노테이션 기반으로 개선하기 같은 코드가 반복되는 부분은 일반적인 프로그래밍에서 개선이 필요한 나쁜 코드 중 하나이다. 같은 코드를 계속해서 복사 & 붙여넣기로 반복하게 만든다면 이후에 수정이 필요한 경우 모든 부분을 하나씩 찾아가며 수정해야만 한다. 이렇게 될 경우 유지보수성이 떨어질 수 밖에 없으며 혹시나 수정이 반영되지 않은 코드가 있다면 문제가 발생할 수 밖에 없다. 지금까지 작성한 코드 중에서 개선할만한 것은 무엇이 있을까? 책의 저자는 IndexController에서 세션값을 찾아오는 아래의 코드라고 생각한다. SessionUser user = (SessionUser) httpSession.getAttribute("user"); index 메소드 외에 다른 Controller와 Method에서.. 🛠️Backend/Spring 2023. 1. 21.

• 

  [Spring Boot] 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - 10 Application-oauth 등록 이전에 만들었던 application.properties가 있는 src/main/resources/ 디렉토리에 application-oauth.properties 파일을 생성한다. 생성한 파일에 아래와 클라이언트 ID와 클라이언트 보안 비밀코드를 아래와 같이 등록한다. spring.security.oauth2.client.registration.google.client-id=클라이언트 ID spring.security.oauth2.client.registration.google.client-secret=클라이언트 보안 비밀 코드 spring.security.oauth2.client.registration.google.scope=profile,email scope=pr.. 🛠️Backend/Spring 2023. 1. 20.

• 

  [일기] 2023년의 첫 일기 키워드 : 일기 생각해보니 일기를 써본지 정말 오래됐다. 마지막으로 쓴 일기는 군대때 쓴 병영 일기(?) 였던 것 같다. 물론 잃어버려서 뭐라고 적은지 알 수는 없지만 훈련소에서 쓴거니 힘들었다는 얘기뿐일거라 궁금하진 않다. 갑작스럽게 일기를 적게 된 계기는 " 생각은 많지만 정리가 되지 않는다. " 성격상 누구한테 기대지 못하고 속 얘기를 잘 못해서 스스로 괜찮아질때까지 혼자 우울해하고 스트레스를 받는다. 최근에 심리적 부담감으로 멘탈도 약해지고 무리해서 운동하고 공부하다보니 몸도 마음도 성한 곳이 없었다. 지금도 운동은 무리해서 하고있지만 주변 지인에게 심리적 부담감을 털어놓고 조언을 얻으니 그나마 마음은 한결 가벼워진 것 같다. 그래서 이제는 혼자 우물파면서 우울해하지않고 글을 작성하며 생각을 정리.. 🌈일상/일기 2023. 1. 18.

• 

  [Spring Boot] 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - 09 스프링 시큐리티 (Spring Security) 막강한 인증(Authentication)과 인가(Authorization) 기능을 가진 Framework이다. 스프링 기반의 애플리케이션에서 보안을 위한 표준이다. 인터셉터, 필터 기반의 보안 기능을 구현하는 것보다 스프링 시큐리티를 통해 구현하는 것을 적극적으로 권장한다. 스프링의 대부분 프로젝트들(Mvc, Data, Batch 등)처럼 확장성을 고려한 프레임워크다 보니 다양한 요구사항을 손쉽게 추가하고 변경할 수 있다. 이런 손쉬운 설정은 특히나 스프링 부트 1.5에서 2.0으로 넘어가면서 더욱 강력해졌다. 스프링 시큐리티와 스프링 시큐리티 OAuth2 클라이언트 많은 서비스에서 로그인 기능을 id/password 방식보다는 구글, 카카오, 네이버 로그.. 🛠️Backend/Spring 2023. 1. 18.

• 

  [Spring Boot] 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - 08 전체 조회 화면 만들기 1. index.mustache UI 변경 우선 index.mustache 파일의 코드에 아래와 같이 추가해준다. {{>layout/header}} 스프링 부트로 시작하는 웹 서비스 Ver.2 글 등록 게시글번호 제목 작성자 최종수정일 {{#posts}} {{id}} {{title}} {{author}} {{modifiedDate}} {{/posts}} {{>layout/footer}} 추가된 부분에서 Mustache의 문법이 처음으로 사용된다. {{#posts}} {{/posts}} posts라는 List를 가져온다 Java의 for문과 동일하게 생각하면 된다. {{변수명}} List에서 뽑아낸 객체의 필드를 사용한다. 2. PostsRepository, PostsService,.. 🛠️Backend/Spring 2023. 1. 8.

• 

  [Spring Boot] 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - 07 Mustache로 화면 구성하기 템플릿 엔진이란? 웹 개발에 있어서 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어를 말한다. JSP, Freemarker, Vue, React 등이 있다. 다만 JSP와 Freemarker는 서버 템플릿 엔진이라 불리고 Vue와 React는 클라이언트 템플렛 엔진이라 불린다. Q) JavaScript에서 JSP나 Freemarker처럼 Java 코드를 사용할 수는 없을까? 예시 코드 코드를 보면 css와 js의 위치가 서로 다르다. 페이지의 로딩속도를 높이기위해 css는 header.mustache에, js는 footer.mustache에 위치했다. HTML은 위에서부터 코드가 실행되기 때문에 head가 전부 실행되고나서 body가 실행된다. 즉.. 🛠️Backend/Spring 2023. 1. 2.

• 

  [SQL] JOIN의 종류와 장단점 및 사용 예시 JOIN이란? 하나의 테이블에 출력하고자 하는 데이터가 없을 경우, 다른 테이블과 엮어서 원하는 데이터를 출력하는 기능을 말한다. 두 개의 테이블을 묶어서 하나의 결과를 만들어 내는 것을 의미한다. JOIN의 조건 두 개의 테이블이 PK-FK 관계로 맺어져 있어야 하고, 이를 일대 다 관계라고 한다. PK : Primary Key, FK : Foreign Key JOIN의 종류 INNER JOIN OUTER JOIN LEFT JOIN RIGHT JOIN CROSS JOIN SELF JOIN EQUI JOIN NON-EQUI JOIN NATURAL JOIN 이처럼 다양한 JOIN은 크게 ORACLE JOIN과 ANSI JOIN으로 분류된다. ORACLE JOIN (ORACLE 8i) 카테시안 프로덕트(ca.. 🛢️DataBase/문법 2022. 12. 20.

• 

  [Vue] 설치 및 Vue 프로젝트 생성 Vue.js란? Javascript Famework 언어(React, Angular, Vue.js)중 하나이다. Evan You가 만든 언어이고 React와 Angular의 장점만을 모아서 만든 언어라고 한다. 발음 대로 View 화면을 만들기 위해 최적화된 프레임워크이다. Vue.js 설치 1. node.js 설치 우선 Vue.js를 설치하기 전에 브라우저 환경이 아닌 곳에서 빌드하고 구동하기 위해 별도의 Runtime 환경을 제공하는 Node.js를 설치해야한다. Node.js를 검색하여 사이트에 접속한 후 컴퓨터 개발 환경에 맞는 버전을 설치(.msi 파일)한다. LTS버전과 최신 버전이 있지만 많이 사용하는 LTS 버전을 다운로드 하는 것을 추천한다. 필자는 회사에서 사용하는 개발 환경에 맞추기 .. 🖥️Frontend/Vue 2022. 12. 11.

• 

  [Spring Boot] 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - 06 Spring의 웹 계층 Web Layer 흔히 사용하는 Controller와 JSP/Freamwork 등의 뷰 템플릿 영역이다. 이외에도 Filter, Interceptor, ControllerAdvice 등 외부 요청과 응답에 대한 전반적인 영역을 이야기한다. Service Layer @Service에 사용되는 서비스 영역이다. 일반적으로 Controller와 DAO의 중간 영역에서 사용된다. @Transactional이 사용되어야 하는 영역이기도 하다. Repository Layer Database와 같이 저장소에 접근하는 영역이다. 기존에 개발 경험이 있다면 DAO(Data Access Object)와 같은 영역이라고 생각하면 된다. DTOs DTO(Data Transfer Object)는 계층 간.. 🛠️Backend/Spring 2022. 12. 1.

• 

  [Spring Boot] 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - 05 MyBatis, iBatis는 ORM이 아니고 SQL Mapper이다. ORM은 객체를 매핑하는 것이고,SQL Mapper는 쿼리를 매핑한다. 현대의 웹 애플리케이션에서 관계형 데이터베이스(RDB, Relational Database)는 빠질 수 없는 요소이다. Oracle, MySQL, MSSQL 등을 쓰지 않는 웹 애플리케이션은 거의 없다. 객체를 관계형 데이터 베이스에서 관리하는 것이 무엇보다 중요하다. 관계형 데이터베이스가 계속해서 웹 서비스의 중심이 되면서 모든 코드는 SQL중심이 되어간다. 현업 프로젝트 대부분이 애플리케이션 코드보다 SQL로 가득하게 됐다. 이는 관계형 데이터베이스가 SQL만 인식할 수 있기 때문인데, SQL로만 가능하니 각 테이블마다 기본적인 CRUD(Create, Read.. 🛠️Backend/Spring 2022. 11. 15.

• 

  [Spring Boot] 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 - 04 롬복 소개 및 설치 롬복이란? 자바를 개발할 때 주로 사용하는 코드 Getter, Setter, 기본 생성자, toString 등을 어노테이션으로 자동 생성해준다. 롬복 설치 롬복 의존성 코드 작성 및 설치 우선 위의 화면처럼 build.gradle파일의 dependencies부분에 아래에 코드를 추가해준다. dependencies { compile('org.springframework.boot:spring-boot-starter-web') compile('org.projectlombok:lombok') testImplementation('org.springframework.boot:spring-boot-starter-test') } 교재에는 plugins에서 롬복을 따로 설치해주라고 하지만 Intell.. 🛠️Backend/Spring 2022. 11. 11.