# develop

crous1

HTML > 마크업 언어(Markup Language)는 텍스트를 구조화하고, 텍스트와 관련된 메타데이터를 정의하는 데 사용되는 언어입니다. >HTML(HyperText Markup Language)이 가장 대표적인 예시입니다. HTML은 웹 페이지의 구조를 정의하는 데 사용되며, 다양한 태그를 사용하여 텍스트, 이미지, 링크 등의 요소를 배치하고 스타일링합니다. Visual Stduio Code 설치 설치주소 VSCode Extension Live Server - 저장된 파일을 실시간으로 확인할 수 있는 기능 TAG - 제목 ( Heading) - 본문 ( Paragraph) - 버튼 - 링크 ( anchor ) - 리스트 ( ordered list ) - 리스트 ( unordered list ) -

crous1

Git 이란 > 깃은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 스냅샷 스트림 기반의 분산 버전 관리 시스템이다. 또는 이러한 명령어를 가리킨다. > Git 용법 Repository : Git 파일 기록해두는 저장소\ GitHub : 원격 저장소 Git 설치법 Window 깃 설치 주소 Git 사용법 git init git add 파일명 git commit m -'기록메세지' git status git log git branch 브런치명 git swcith 브런치명 git merge 브런치명 (회사 컨벤션에 맞는 방식을 채택) 3-way : 일반적인 병합 방식 fast-forward : main 신규 커밋없을때 병합할 브런치가 메인이 되는 방식 rebase : main 브런치의 기준

hyeonjoonpark

회원가입 화면 구현 다음과 같이 폴더구조를 세팅한다 Authentication/index.tsx App.tsx 이 부분 리팩토링 할 것이다 이제 원래 더미데이터를 적어서 요청 보내는 것을 Input창으로 직접 적어서 보내도록 퍼블리싱을 해보자 강의에서는 metarial-ui 라이브러리를 사용했지만 나는 styled-components를 이용해서 직접 퍼블리싱을 해보도록 하겠다. > 다음편에서 계속

hyeonjoonpark

코드를 더 나은 구조로 리팩토링 해보자 SignupResponseDto 삭제 및 리팩토링 SignupResponseDto를 쓰지 않고 다른 방법으로 구현을 해보자 AuthController에서 SignupResponseDto를 지우고 Generic 타입을 ? 로 바꿔주자 또한 클래스 이름을 SigninResponseDto로 변경해주자 CORS 리팩토링 을 삭제해주자. Main에 있는 또한 마찬가지이다. > 우리는 이제 Main에서 CORS를 지정해줄 것이다 이렇게 작성해줘도 ![](https://velog.velcdn.com/images/hyeonjoonpark/post/d1ecd000-0cbf-42fe-9f13-530372763e71/image

hyeonjoonpark

HTTP 프로토콜을 이용하여 회원가입 API를 구축해보자 회원가입 API Method : POST Request URL : /api/auth/signup body : userEmail userPassword userPasswordCheck userNickname userPhoneNumber userAddress userAddressDetail View 레이어와 Controller 레이어 사이에 데이터를 전송할 때는 DTO(Data Transfer Object)를 이용하여 데이터를 보내줄 것이다 Dto 라는 이름의 패키지 하나 만들고 Sign

hyeonjoonpark

이전 블로그 에서는 React 프로젝트 폴더 구조를 세팅하였다 서론 Spring Boot Controller를 작성해보자 Controller 프론트엔드와 백엔드가 통신을 하여 어떤 주소로 요청을 할 때 요청이 들어올 수 있는 입구 역할을 한다 다음과 같이 Controller 패키지를 하나 만들고 MainController 클래스를 만들자 우리는 Restful하게 작성하기 위해서 어노테이션으로 지정을 해주자 관련 어노테이션 : 해당 클래스를 Controller 레이어로 인식하도록 함 어노테이션은 + 두 어노테이션이 합쳐져 있다

hyeonjoonpark

React 폴더구조 다음과 같이 프로젝트 폴더구조를 세팅한다 apis 디렉토리 Backend와 연결할 Axios 함수들 저장하는 디렉토리 assets 디렉토리 이미지, 비디오, 폰트를 저장하는 디렉토리 constants 디렉토리 상수를 저장하는 디렉토리 interfaces 디렉토리 Type으로 사용할 인스턴스를 저장하는 디렉토리 stores 디렉토리 스토어 함수 저장하는 디렉토리 utils 디렉토리 각종 메서드 저장하는 디렉토리 views 디렉토리 큰 페이지 혹은 레이아웃 단위의 컴포넌트 저장하는 디렉토리 components 디렉토리 최소단위 컴포넌트 저장하는 디렉토리 ex)

hyeonjoonpark

https://velog.io/@hyeonjoonpark/React-Spring-Boot-MySQL-4 이어서 Repository를 만들어보자 Repository com.example 폴더 안에 Repository 폴더를 만든다 Reposiroty 패키지 안에 다음과 같은 인터페이스를 만든다 UserRepository BoardRepository PopularSearchRepository LikeRepository CommentRepository 관련 어노테이션 : Repository로 사용하겠다 선언 (의존성 주입) @Component 어노테이션이 포함되어 있음 UserRepository는 JpaRepository를 상속받는

hyeonjoonpark

Spring Boot 프로그램에서 Repository와 Entity를 작성해보자 Spring Boot 프로젝트 폴더 밑에 라는 패키지를 만든다 테이블이 5개이므로 5개의 Entity를 만들어보겠습니다 Entity 패키지 안에 다음과 같은 java class 파일을 만든다 UserEntity BoardEntity PopularSearchEntity LikeEntity CommentEntity 우리가 Spring Boot 프로젝트에 Lombok을 받아왔기 때문에 Entity에 어노테이션을 삽입해준다 삽입이 안될 것이다 어노테이션을 같이 삽입하자 = 해당 클래스를 Entity 클래스로 사용하겠다고 선언하는 어노테이션 = 테이블을 매핑하기 위한 어노테이션 = 데이터베이스에 있는 해당하는 테이블과 현재 클래스를 매핑 시킴 총 6개의 어노테이션을 작성한다 과 같이 name을 지정한다 클래스의 name은 M

hyeonjoonpark

데이터베이스 설계

hyeonjoonpark

데이터베이스 설계 및 프로젝트 생성 1편에서 이어집니다 MySQL workbench MySQL workbench를 설치 한 후 접속해서 데이터베이스를 생성한다 Spring Boot 프로젝트 생성 application.properties 정상작동!!! React 프로젝트 세팅 vscode로 프로젝트 파일 열어서 ![](https://v

hyeonjoonpark

출처 : 유튜브 Jiraynor Programming > #### React와 Spring Boot를 사용하여 블로그를 만들어보자 해야 할 것 회원가입 로그인 프로필 수정 게시물 작성 게시물 리스트 보기 게시물 상세보기 게시물 수정 게시물 삭제 댓글 작성 좋아요 요구사항 정리 사용자는 회원가입을 진행한다 이메일 주소 비밀번호 비밀번호 확인 닉네임 핸드폰 번호 상세주소 회원가입이 성공적으로 이루어지면 로그인을 진행한다 이메일 비밀번호 로그인을 성공하면 메인화면으로 이동한다 메인화면 구성 주간 Top3 게시물 한 페이지에 5개씩 페이징 처리 상단 네비

dmp100

![](https://velog.vel

odahyun

8월 18일부터 20일까지 부산에 다녀왔다 🚉 왜 갔냐고 묻는다면 당연히 여행..!!!! 아니고 JUNCTION ASIA 2023에 참가하기 위함이었다 ㅎㅎ 작년에 동아리 선배들이랑 동기들 몇 명이 정션에 나갔어서 어떤 행사인지는 익히 들었었다. 하지만 작년 여름의 나는 막 개발을 시작한터라 신청해볼 엄두도 못냈다. 단지 '1년동안 열심히 성장해서 내년엔 꼭 나가봐야지'라고 다짐만 했었다. 그로부터 1년뒤인 2023년 7월 Junction Asia 2023에 개발자 포지션으로 지원했고, 참가가 확정되었다는 메일을 받았다 🥳 🥳 Junction Asia는 유럽 최대 규모 글로벌 해커톤인 Jucti

hyeonjoonpark

어노테이션(Annotation) 어노테이션이란? Annotation(@)은 사전적 의미로는 주석이라는 뜻이다. 자바에서 Annotation은 코드 사이에 주석처럼 쓰이며 특별한 의미, 기능을 수행하도록 하는 기술이다. 즉, 프로그램에게 추가적인 정보를 제공해주는 metadata라고 볼 수 있다. @SpringBootApplication Spring boot는 기본적으로 이 어노테이션 기준으로 동작하도록 되어있음 Spring에서 필수 초기화를 담당하는 @EnableAutoConfiguration @ComponentScan @Configuration 어노테이션이 함축되어 있다 Spring MVC 패턴 어노테이션 @Controller 웹 요청의 기준을 담당한다 이 어노테이션을 통해 빈 등록과 라우팅 테이블에 등록하는 중요한 어노테이션이다

jychoi

Mordernization Business agility Cloud ready Cloud native CNCF Architecture N-tier Load balanceer, Reverse proxy // nginx Caching // redis Transactional DB // MySQL Analytical DB // BigQuery Infra Monitoring, AEM, APM Microservice DDD EDA CQRS SAGA Api gateway, Service mesh, Service proxy // Istio Infrastructure Background IaaS, Paas, Saas Private vs. public CSP vs MSP AWS, GCP, Azure Compute PM, VM, Container, Serverless Dat

jongil512

멀티 테넌시란? 멀티 테넌시는 소프트웨어 어플리케이션의 단일 인스턴스가 여러 고객에게 서비스를 제공하는 아키텍처이다. 즉, 여러 테넌트(사용자)를 가진 아키텍처라는 의미다. 중요한 점은 각각의 사용자가 서비스를 독립적으로 이용할 수 있어야 한다는 것이다. 예를 들어 메일을 확인하려 열었는데 나에게 온 메일 뿐 아니라 모든 사람의 메일이 들어있다면 다소 당황스러울 것이다. 이처럼 멀티 테넌시 구조에서는 각각의 사용자에게 독립적인 서비스 환경을 제공해야한다. 장단점 멀티 테넌시 구조의 장점 비용과 자원의 절약 멀티 테넌시 구조의 가장 큰 장점은 고객마다 새로운 시스템을 제공하는 형태가 아니라 하나의 시스템으로 여러 고객에게 제공하는 것이다. 따라서 소프트웨어 개발과 유

byuneunhye

💡 코드는 직접 읽고 해석하면서 이해해야한다. es6란? es5는 2009년에 나왔고 2015년에 새로 사양 되어 es6가 나왔다. es6로 화살표 함수 ,템플릿 리터럴, 기본 매개 변수, 비구조화 할당, 모듈 을 쉽게 사용할 수 있게 되었다. 그렇다면 JS와의 차이는? JS는 ECMAScript의 사양을 준수하는 범용 스크립트 언어이다. 💡destructuring(구조분해할당) destructuring(구조분해할당) 이란? 배열이나 객체의 `속성을 해체하여 그 값을 개별 변수에` 담을 수 있는 JS표현식. 위의 코드에서는 `player 객체를 정의하여 name, club, adress, city 속성에 값을` 주었다

jongil512

💡 데이터 정규화는 관계가 없는 데이터베이스에서의 사용은 권장되지 않는다. 데이터 정규화는 관계형 데이터베이스의 설계에서 중복을 최소화하게 데이터를 구조화하는 프로세스를 정규화라고 한다. 데이터베이스 정규화의 목표는 이상이 있는 관계를 재구성하여 작고 잘 조직된 관계를 생성하는 것에 있다. 출처) 위키백과 정규화 단계 정규화는 단계별로 제1, 제2, 제3 정규화로 나뉜다. 제1 정규화 제 1정규화는 한 칸에는 하나의 데이터만 보관하는 것이다. ![](https://velog.velcdn.com/images/jongil512/post/e4d4eea1-6627-4f6a-9723-0a74a63e8701/image.

jongil512

Index란? 흔히들 사전의 색인이라 설명하지만 잘 와닿지 않는다. 사전에서 색인을 통해 무언가를 찾아본 경험이 적기 때문일까? 조금 더 쉽게 설명하자면 UP, DOWN 게임을 상상해보면 된다 누군가가 1부터 100까지의 숫자 중 하나를 선택하고 우리는 질문을 통해 그 수를 알아내야 한다고 해보자 크게 두 가지 형태의 질문이 있을 수 있는데 1부터 100까지 하나 하나 질문한다. 기준을 정해 그 수보다 큰지 작은지 질문한다. (50보다 큰가요?) 1번 질문은 최악의 경우 100번의 질문을 해야 정답을 알아낼 수 있다. 그런데 2번 질문의 경우 아무리 많이 해도 6~7번의 질문을 통해 정답을 알아낼 수 있다. 이것을 가능하게 하는 것이 Index이