민우의 코딩노트

[참고 글 및 코드] https://velog.io/@tmdgh0221/Spring-Security-%EC%99%80-OAuth-2.0-%EC%99%80-JWT-%EC%9D%98-%EC%BD%9C%EB%9D%BC%EB%B3%B4 Spring Security 와 OAuth 2.0 와 JWT 의 콜라보 Spring Boot, Spring Security, OAuth 2.0, JWT 와의 치열한 싸움 기록 velog.io https://deeplify.dev/back-end/spring/oauth2-social-login [Spring Boot] OAuth2 소셜 로그인 가이드 (구글, 페이스북, 네이버, 카카오) 스프링부트를 이용하여 구글, 페이스북, 네이버, 카카오 OAuth2 로그인 구현하는 방법에 대해..

안녕하세요! 르탄즈 2기의 팀 300의 김민우입니다. 1차 미션이 끝난 후에 우수활동자로 선정되어 Spring 심화반 강의를 듣게 되었습니다. 제 원하는 직종이 백엔드 개발자라서, Spring에 대해 자세히 알고 복습 차원에서 강의를 신청하게 되었습니다. 강의에서 JPA와 JWT 구현, 전반적인 MVC에 대해 알려주는 커리큘럼을 가지고 있어, 백엔드 개발을 희망하는 분들에게는 꼭 필요한 개념을 가진 강의입니다. 1주차 강의에서 중요 개념인 MVC 패턴에 대해 정리해보았습니다. 스프링 MVC 이해 스프링 MVC? MVC (Model - View - Controller) 디자인 패턴 Server 에서 HTML 을 내려 주는 경우 정적 (static) 웹 페이지 동적 (dynamic) 웹 페이지 1. 정적 웹..

[들어가기 앞서] 나는 현재 건국대학교 스마트ICT융합공학과에 21학번으로 재학중인 학부생이다! 컴퓨터 관련 새내기이자 백엔드 지망생이다. 이제 설날이 얼마남지 않아, 스파르타코딩클럽에서 덕담 공유 코딩 패키지를 제공해줘서 듣게 되었다. 프론트엔드(HTML, CSS, JS)에 생소한 나는 강의를 듣기 전에 약간 두려웠다. 내가 이 강의만으로 정말로 웹 페이지를 만들수 있을지 여러번 머리 속에 맴돌았다. 이범규 튜터님의 자세한 설명과 실습 위주의 코딩으로 그 걱정은 사라지고, 전반적인 웹 지식을 얻게 되었다! 프론트엔드가 무서운 벽인줄만 알았는데, 이번 강의를 통해서 백엔드보다 훨씬 간단하고 편리하다고 느끼게 되었다. 기회가 된다면, 스파르타코딩클럽에서 웹 개발 종합반을 수강하여 프론트엔드 지식 또한 얻고..

[들어가기 전] 일단 저에 대해 소개해보자면, 현재 건국대학교 스마트ICT융합공학과 1학년에 재학중인 백엔드 관련 지망 학부생입니다! 컴퓨터 관련 전공자이지만, 백엔드지망 개발자라 프론트엔드(Html, CSS 등) 관련 지식이 1도 없었습니다. 매일 누군가 저에게 HTML, CSS 관련 질문을 물어보면 당황하기 일색이었습니다. 이번 스파르타코딩클럽에서 프론트엔드 관련 지식을 보충하기 위해서, 스파르타 관련 강의를 통해 나만의 웹사이트 2개를 만들어 봤습니다. 제 결과물은 '크리스마스 덕담 카드', '2021년 신년 운세 보기' 웹 페이지입니다. '누구나 큰일 낼수 있다' 라는 스파르타코딩클럽의 모토에 맞게, 이번 강의를 통해 웹 프론트엔드 지식을 쌓아가고 내 웹 페이지를 만드는 능력을 키우게 되었습니다...

브라우저가 하는 일 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일 HTML 은 뼈대, CSS 는 꾸미기, Javascript 는 움직이게 하는 것 CSS 기초 안에 로 공간을 만들어 작성합니다. mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것 기억하기 배경관련 CSS background-color background-image background-size 사이즈 width height 폰트 font-size font-weight font-famliy color 간격 margin padding 자주 쓰이는 CSS 연습하기 [연습할 것들] h1, h5, background-image, background-size, background-position ..

제목 메시지 만들기 .title { font-size: 32px; color: darkred; text-align: center; } 2021년 쥐띠의 운세는! 운세 메시지 만들기 .msg { color: darkred; text-align: center; font-size: 32px; line-height: 48px; } 마음을 알아주는 따뜻한 사람을 만날 것이야! 일이 잘 안 풀리는 것 같아도 연말에는 호탕하게 웃을 수 있을 지어니 너무 걱정하지 말고 하루하루 잘 나아가봐~ 버튼 만들기 버튼 배치하기 우선, div와 button 태그를 이용해서 버튼을 배치하기 btns 클래스 뒤로가기 공유하기 버튼을 가운데로 가져오기 내용물을 정리시키는 방법! display:flex .btns { display: f..

HTML과 CSS의 개념 HTML은 뼈대, CSS는 꾸미기 HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각하기 HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다. head 안에 들어가는 대표적인 요소들: meta, script, link, title 등 CSS 기초 안에 로 공간을 만들어 작성합니다. div 태그에 클래스 라는 명찰을 붙여줄 수 있다. 로 감싼 곳에 .클래스{ ... } 로 지칭해주면 꾸밀 수 있다. 글씨 가운데 정렬 text-align: center; 만약에 .mytitle 안에 있는 h1 태그를 가리키고 싶다면? .mytitle > h1 { font-size: 56px; ..

[들어가기 앞서] 나는 현재 스마트ICT융합공학과 1학년에 재학중인 컴퓨터 관련 전공 학부생이다. 평소에 백엔드 개발에 관심이 많은 개발자 지망생이다! 일단 작년 1학기만 하더라도 https, 웹 서비스, 서버-클라이언트, DB, 깃 등등... 용어를 정말 아무것도 몰랐다. 그래서 에브리타임의 IT 게시판에 들어가거나, 주변 선배 개발자분의 블로그에 들어가면 백엔드, 프론트엔드, 스프링.. 등등 이런 용어를 보고 나와는 먼 세상 이야기인줄 알았다. 이후 UMC 앱 개발 연합 동아리에서 10주간의 긴 교육을 통해 전반적인 웹 지식이나 프레임워크 지식은 그나마 숙지하게 되었는데 아직도 헷갈리는 용어가 많다..(Sql, Nosql, 리액트, git 커밋, 머지, 풀리퀘 등등) 이번 스파르타코딩클럽의 1시간 만..

현재 데브싱크(DevThink) 서비스를 구축하고 있다. 데브싱크는 개발자들이 사용하는 성장형 커뮤니티 앱이다. 자세한 내용은 아래 링크를 통해 확인할 수 있다! https://devthink.notion.site/devthink/185af3c83f4743f292067f206bc95acf 안녕하세요, '데브싱크' 팀 입니다 데브싱크(DevThink) 팀을 소개합니다! devthink.notion.site 데브싱크 서비스에 기본적인 게시글 기능이 필요하다. 그래서 내가 짠 전체적인 POST API에 대해 소개 하려고 한다. 일단 Controller의 개념에 대해 소개하려고 한다. Controller는 사용자의 요청이 진입하는 지점(entry point)이며, 요청에 따라 어떤 처리를 할지 결정해주며 실질적..

현재 데브싱크(DevThink) 서비스를 구축하고 있다. 데브싱크는 개발자들이 사용하는 성장형 커뮤니티 앱이다. 자세한 내용은 아래 링크를 통해 확인할 수 있다! https://devthink.notion.site/devthink/185af3c83f4743f292067f206bc95acf 안녕하세요, '데브싱크' 팀 입니다 데브싱크(DevThink) 팀을 소개합니다! devthink.notion.site 현재 백엔드 개발자로 참여중인 나는, POST(커뮤니티 글 쓰기 부분)을 담당하고 있다. 스프링 부트/JPA를 통해 앱 개발 프로젝트를 진행하고 있는데, 전체적인 구조는 다음과 같다. JPA에서 Dto랑 Entity의 개념이 들어가는데, Entity 클래스란 JPA에서 실제 데이터베이스의 테이블과 매칭되..