프로젝트 실습

스타일 지정된 구성요소와 React 부드러운 스크롤을 사용해서 React웹 사이트를 구축한다. Creating-React-Project 새로운 프로젝트를 생성한다. yarn start로 실행하면 기본 리액트 화면이 나타나는데,프로젝트 제작 불필요한 파일을 제거해준

Creatin HeroSection 로고, 메뉴 바로 다음에 표시되는 항목으로 이 사이트가 어떤 사이트인지를 간결하게 표시해주는 항목이다. src에 HeroSection 폴더를 생성하고 index와 HeroElements파일을 생성한다. index Styling

Redux installation ans setup 프로젝트를 하나 생성하고, react-router-dom, axios, react react-router 패키지 설치 React/Redux Project Structure 프로젝트내부에 디렉토리를 생성하여 구조를 조

googlemap 을 이용해서 주변 지역의 맛집을 보여주는 맛지도 프로젝트를 제작한다. 식당의 종류, 평점별로 검색이 가능하며 지도에는 해당 위치에 나타나는 식당의 이미지를 보여줄 것이다.rapidAPI의 api를 사용해서 구현할 것이다. 사용하는 api는Travel

달력과 TodoList가 합쳐진 페이지를 제작한다.메인화면에서 달력화면과 할일의 갯수와 함께 할일의 목록을 나타내는 리스트 페이지가 렌더링된다.달력에는 년월일 과 함께 현재 날짜에 하이라이트가 되어있고, 날짜를 클릭하면 해당 날에 적힌 TodoList가 오른쪽에 나타나

말 그대로 컴퓨터에 기본적으로 설치된 그림판과 비슷하게 구현하기로 했다. 빈 캠버스 화면에 커서로 그림을 그리는 기능을 구현한다.새 폴더를 만들어서 내부에 parcel 번들러를 설치한다.src폴더 \-js \-index.js \-sass \-styl

html 과 sass를 사용해서 레이아웃을 구성한다. index.html에서 body 내부에 레이아웃을 작성한다. body 내부에는 container 와 imgNav hide div가 있으며 container는 그림을 그리는 여러 도구와 다운로드를 할수 있는 링크,

이제 대충 레이아웃은 만들어 졌으니 캔버스에 글릭하면 선을 그려지는 기능을 구현한다.

저번까지 그림을 그릴수 있는 기능을 구현했다면, 이번에는 지우는 기능을 구현한다.html toolbar에서 eraser 클래스를 가져오고 addEvent에 이벤트를 추가할 것이다.js/index.js그리고 onClickeraser를 추가한다.onClickBrush와 비

사용자가 그림을 그리다가 만약 실수를 했다면 그 이전의 상태로 돌아갈수 있는 기능을 구현한다.

사용자가 그린 그림의 전체를 삭제하기 위한 기능을 구현한다.사용자가 삭제 버튼을 누르면 그려진 그림이 전부 사라진다.일단 먼저 삭제 버튼을 불러와서 이벤트를 추가한다. 사라진다 = 캔버스가 초기화된다 = 이전에 그림이 기록된 데이터 또한 사라진다 = 네비게이터에서도 같

사용자가 그린 그림을 다운로드 할 수 있는 기능을 구현한다.다운로드 버튼 클릭 -> 이미지 파일 다운로드다운로드 버튼을 불러오고 이벤트 추가onClickDownload에서 href속성을 현재 캔버스가 가지고있는 그림의 데이터를 jpeg 형태로 저장하게 옵션을 설정했다.

개발 환경 개발 도구 : intellij IDEA Community

미리 사용 기술을 모두 파악한 후 처음부터 프로젝트에 넣는 방법기능 하나를 만들 때마다 필요한 기술을 추가해 나가는 방법 -> 이번에 사용할 방법게시판, 댓글 도메인 설계도메인 데이터를 DB에 저장JSON API로 데이터 제공사용자에게 웹 화면으로 서비스 제공 + 디자

프로젝트를 만드는데 있어서 처음 해야할 일은 저장소를 생성하는 것이다.깃허브에 들어가서 저장소 생성을 누르면 아래와 같은 창이 나타난다.프로젝트의 이름과, 저장소의 공개 여부 설정, 그리고 .gitignore 설정이 가능하다. .gitignore : 프로젝트를 관리하다

깃 브랜치를 운영하는 방법론gitflow: master, develop, feature, release,hotfix 브랜치를 설정하고 운영하는 방식github flow: main(master), feature 브랜치만으로 운영하는 방식하나의 프로젝트 소스코드를 여러 개

시스템의 동작을 사용자의 입장에서 표현한 시나리오이며, 시스템에 관련된 요구사항을 알아내는 과정. 소프트웨어 개발 프로세스중 개발을 위한 소프트웨어의 기능을 개략적으로 설명이 가능한 방법이다.유즈케이스 관련 이미지들을 검색해보면 여러 선과 도형이 이어져서 대략 내가 만

API 설계를 구글 문서롤 작성한다. 뷰와 api에 어떤 방식으로 url이름을 지정할 것인지, method 방식은 어떻게 할 것인지, 해당 url의 설명과 함께 문서를 작성한다.url은 다른 협업 개발자가 봤을 때고 직관적으로 어떤 항목에 관련된 url인지 파악할 수

이제 본격적으로 기능 구현을 위한 코딩을 시작한다.먼저 깃헙 베타 프로젝트에서 "스프링 부트 프로젝트 시작하기" 카드로 들어가서 세부 업무사항을 작성현재 백로그에는 해야할 일들이 많이 표시 되어있는데, 나중에 다른 곳에서 일을 하게 되면 수십개가 넘어갈 수 있다. 지금

도메인 설계를 시작한다. 크게 2가지를 진행하는데, 도메인 ERD 다이어그램을 그려보기자바 클래스로 도메인 표현시작하기 전에 gitkraken에 feature 브랜치를 생성한다. 작성자의 경우 커밋을 추가적으로 진행한 탓에 이슈의 번호가 9번이 되었으므로, 그에 맞춰서

도메인 클래스 설계를 통해 게시글과 댓글의 데이터 구성을 설계 했고, 자바 클래스도 작성을 완료한 상태이다. 이제 이 데이터들을 어떻게 데이터베이스에 연결하고 사용할 것인지, 그리고 어떤 데이터베이스를 사용할 것인지를 결정한다. 어떤 데이터 베이스를 선택할 것인가?

이번에는 Article Comment 엔티티에 인덱싱및 기타 작업을 진행한다. Article 엔티티와 거의 비슷하다. 댓글의 경우 게시글은 하나지만 댓글은 여러개 일수 있으므로 @ManyToOne 을 추가했다. 또한 생성자 생성과, 동등성 검사를 위한 equals,

이전에는 erd 다이어그램을 통해 만들어진 도메인을 통해 엔티티를 생성하고, 리포지토리를 만들어서 테스트를 진행했다. 이제 본격적으로 데이터베이스 로직을 구현한다. 근데 데이터베이스 접근 로직 테스트 업무에서 JPA를 셋업하는 것으로 기능사용에 관련된 설정이 거의 끝났

저번에 설계한 API를 본격적으로 구현한다. 하지만 전에 만든 테스트 작업을 통해서 회원가입과 로그인과 관련된 기능을 제외하고는 게시판과 댓글의 api는 제작이 거의 완료된 상태이다. spring data REST 를 사용해서 이전에 제작한 엔티티와 리포지토리를 이

게시판 서비스 api 테스트를 만들었지만 api가 전부 다 구현 되어있지는 않은 상황이다. 예를 들면 api/articles에서 필터를 사용하여 조회를 하는 것이 목표인데, 지금 테스트를 통해 실행해보면 해당 기능은 아직 만들어 지지 않았다는 것을 알 수 있다.예를 들

이제 게시판 뷰의 엔드 포인트중에서 인증을 제외한 위의 항목들의 뷰 엔드 포인트를 테스트 하는 작업을 진행한다.뷰를 만들기 위한 thymeleaf를 디펜던시에 추가하고 컨트롤러를 직접 만든다. 루트경로에 controller를 생성하고 ArticleController.j

테스트는 만들었으니 게시판 뷰를 구현한다.스프링은 html 파일을 thymeleaf 템플릿 파일로 인식하는데 해당 경로는main/resources/templates 가 기본 값이다. 폴더 안에 articles 디렉토리를 생성하고 index.html을 생성한다. 메인 페

게시판의 대략적인 페이지를 만들었으니, 게시글 페이지를 작성한다. decoupled template logic 시작하기 전에 게시판 html에서 사용된 thymeleaf의 기능인 decoupled template logic을 사용한다. index에서 컴포넌트의 분리를

이제 로그인 페이지를 생성한다. 그전에 user account 관련 작업을 진행한다. erd 다이어그램의 내용을 추가 하고, 유저 어카운트 관련 테스트를 진행한다.

이제 뼈대만 만들어진 뷰에 디자인을 붙이는 과정을 진행한다. 부트스트랩을 사용해서 디자인을 붙인다.부트스트랩 npm 설치 대신에 링크만 가져와서 사용한다. head 에body 최하단에를 추가한다.부트 스트랩 메인 페이지에서 컴포넌트를 검색하면 여러가지 컴포넌트에 대한

게시판의 세부적인 기능을 구현한다. 게시판의 기능 구현을 하기 전, 테스트를 진행해서 원하는 기능이 제대로 수행을 해주는지를 판단해야하므로 이 테스트를 진행한다. 루트경로에 service 디렉토리를 만들어서 ArticleService.java를 생성 그리고 테스트 파일

게시글 페이지의 기능 테스트를 정의한다. 게시글 페이지에서 있어야 할 기능?추가읽기수정삭제읽기는 이전에 게시글 조회시 반환여부를 테스트하는 작업을 진행했기 때문에 제외하고, 추가부터 ArticleServiceTest에 진행한다. 게시글 더미데이터를 리포지토리에 저장하는

로그인을 위한 페이지 의 기능 테스트를 정의한다. 스프링 시큐리티를 사용해서 만든 로그인 화면은 내가 직접 만든것이 아니라 이미 만들어진 것을 사용하는 것이기 때문에 검증된 기능인 것이 확실하다. 따라서, 해당 기능이 내 프로젝트내에서 존재하는가에대한 테스트는 이미 이

게시판 테스트에서 기능을 구현한다. 검색어가 없는경우와 있는 경우를 나누어 준다.검색어가 없는 경우, 혹은 검색어가 공백인 경우는 articleRepository에서 pageable을 선택하고 해당 pageable을 dto로 변경한다. Page 내부의 여러 메소드 중에

이번에는 게시글 컨트롤러와 컨트롤러 테스트에 내용을 추가한다.컨트롤러에서는 이제 저번에 구현했던 서비스를 본격적으로 사용할 것이다.ArticleController서비스를 읽어서 정보전달을 하기위해 작성했지만 컨트롤러 테스트를 진행할때는 배제를 시켜서 MockMvc가 순

이제 실질적인 뷰를 표현하는 부분을 작업해야한다. 데이터가 오가는 테스트는 진행했지만,뷰에는 데이터가 표시되게 작업을 하지는 않았다. index.html에서 데이터가 들어가는 부분을 추가한다. 헤더는 타임리프내용을 디커플링으로 작업해서 껍데기만 보이는데 이렇게 하면 목

게시글을 보여주는 기능은 구현을 했지만 게시판 페이징을 구현하지 않아서 더 많은 게시글들을 볼수 없다. 이번에는 게시판 페이징을 구현한다.현재 페이지의 숫자가 페이징바의 가운데에 위치하게 설정한다. 매 페이지마자 페이지네이션 숫자를 계산에서 바를 그려주는 방식으로 구현

게시글 페이징 게시판 페이지의 페이징 기능은 구현했지만, 게시글 페이지의 페이징 기능은 아직 구현하지 않았다. 게시판 페이지의 페이징 기능보다는 간단하다. 이전글과 다음글로 구성되어있으며, 각각의 버튼을 누르면 이전,다음 글로 이동하게 되는 것이다. 서비스 테스트 생

페지이 기능, 페이징, 정렬까지 구현했고, 다음에는 게시판 검색 기능을 구현한다. 검색 기능 구현 테스트 구현 ArticleControllerTest에서 게시글 리스트 페이지를 검색어와 함께 호출하는 테스트를 작성한다. 주어진 검색 타입은 일단 TITLE로만 검색하

검색 기능 자체는 구현했지만. 특별함을 위해서 해시태그 만을 위한 검색페이지를 만든다해시태그 만으로 검색을 하기 때문에 searchArticles가 아닌 다른 메소드를 작성해줘야한다.따라서 searchArticlesViaHastag 메소드를 만든다.먼저 예상되는 해시태

JPA Buddy를 이용해 작성한 DTO인데, 자동으로 implements Serializable이 들어가버림현재 프로젝트에서는 직렬화로 Jackson을 사용하므로 필요하지 않고, 의도해서 넣은 것도 아니므로 제거함response/ArticleCommentRespons

상단에 위치한 헤더에 메뉴를 추가해서 전에 구현한 해시태그 검색 사이트를 쉽게 들어갈수 있도록 했다. 그리고 지금까지 Home메뉴에 링크도 설정해놓지 않아서 이를 설정했다. header.html header.th.sml 인증 관련 디펜던시 추가 spring-secu

댓글 저장과 삭제 까지능 구현 했지만, 아무 사용자가 내 댓글을 삭제해서는 안된다. 따라서 인증 기능을 추가해서 해당 사용자가 작성한 댓글은 다른 사람이 삭제할수 없도록 조치해줘야 한다.

이제 인증기능을 뷰에 적용시켜보자. 헤더 로그인 로그아웃 버튼 생성 header.th.sml 인증 여부에 따라서 login 버튼, 혹은 logout 버튼을 보여준다. 로그인을 들어가서 유저 계정과 비밀번호를 입력하고 들어가면 PasswordEncoder에 id

깃헙을 통해서 배포를 하려면 태그가 필요한데, 깃 크라켄에서 태그를 생성한다. 메인 브랜치에서 우클릭을 하고 create tag here을 클릭해서 태그를 만든 뒤 push한다. 그럼 하단의 TAGS 항목에 태그가 생긴 것을 확인할수 있는데, 이것을 우클릭해서 push

음악을 재생시키는 플레이어를 제작한다. 기능 노래 재생/일시정지 노래 제목, 작곡가, 음악 파일에 해당하는 앨범 이미지 출력, 다음곡 이전곡 스킵 프로그래스 바를 추가해서 음악이 어느정도 재생되었는지를 파악 재생 모드 설정(랜덤, 전체 반복) 음악 목록

페이지에 나열된 이미지중에서 하나를 클릭하면 커서가 해당 이미지로 변하는 기능을 제공하는 페이지를 제작한다.이미지 클릭 후 커서 이미지 변환reactreact-domtypescripthttps://github.com/jyc-coder/mouse-cursor-c

포스트잇처럼 메모를 입력할수 있는 메모지 디스플레이를 출력하고, 원하는 메모를 입력하여 나중에 확인할수 있는 기능을 구현한다. 메모지는 drag&drop이 가능하게 구현하며, 해당기능을 가진 컴포넌트를 따로 제작하여 npm 배포를 해서 사용한다. 기능 메모지 디스플레

강의 시간표 기능을 구현해본다. 요일별로 표시된 테이블에 원하는 시간대와 강의를 기록할수 있게 한다. 강의 입력을 클릭하면 강의 내용과 요일, 시작/종료 시간, 시간표 색상을 설정하면 테이블에 나타난다.생성된 항목의 내용을 클릭하면 수정/삭제 가능 localstorag

사용자가 '랜덤 번호 추천'을 클릭하면 정답 번호와 대조하여 등수를 출력한다.버튼을 클릭하면 하단에 결과와 함께 랜덤으로 선택된 번호가 같이 나타난다.figma(ui 설계)react react-domtypescriptstyled-componentsdisabled 를 해

잘 알려져있는 캐러셀 라이브러리들을 사용해서 여러 방법으로 캐러셀을 구현한다.App컴포넌트의 props 중에서 direction의 값에 따라 이동 방향과 버튼의 위치가 변경된다.상/하 , 좌/우 의 버튼을 클릭하면 다음 항목이 슬라이드된다.react react-domt

메모장 기능이 구현된 페이지를 제작한다.메모의 제목과 내용을 작성하고 submit하여 메모를 추가메모의 저장 경로는 2가지로 구현한다 \- 쿠키를 통하여 저장로컬 스토리지를 통하여 저장ui/ux는 최대한 단순하게 제작하고 저장경로에 대한 데이터 저장을 우선으로 작업에

https://github.com/golbin/hubot-maxim 에서 제공하는 격언 데이터를 사용해서 랜덤으로 격언을 출력하는 api를 제작한다.무작위로 격언을 출력시킴javascriptnodemonfshttps://github.com/golbin

이전에 만든 랜덤 명언 API를 사용해서 무작위로 명언이 화면에 출력되는 사이트를 제작한다.메인 화면에 명언의 내용과 이름 열람명언 리스트를 확인하고 명언 추가/삭제/수정 기능react, react-domaxiosreact-iconsstyled-componentstyl

텍스트 입력폰트 크기,색상 조절이미지 추가텍스트 정렬 기능발행 버튼 클릭시 로컬스토리지에 추가됨과 동시에 하단에 내용이 표시됨전체 지우기 클릭시 로컬스토리지에 있는 내용이 전부 삭제됨과 동시에 내용 초기화내용입력의 유무와 관련없이 10초마다 로컬스토리지에 저장되며, 새

클라우드 메모장 API를 사용하여 저장 및 수정/삭제가 가능한 메모장을 구현함\\클라우드 메모장 API 깃허브 링크 : https://github.com/jyc-coder/cloudmemoapi전체 메모 열람단일 메모 열람메모 생성/수정/삭제웹 에디터 기능(r

검색 내용을 입력하고 검색을 실행하면, 구글에서 검색했을때 나타나는 결과처럼 통합검색 결과, 뉴스, 이미지로 검색 목록이 나타나는 기능을 구현검색어 입력후 검색시 검색 결과 나열 ( 통합, 뉴스 , 이미지 )reactreact-router-domaxios react-q

기능 사용자가 검색어를 입력하면 관련 이미지를 출력한다 기술 스택 unsplash API https://unsplash.com/developers

기능 검색창에 유저 검색시 관련 유저 목록 표시 검색 항목 클릭하면 상세 정보를 표시해주는 페이지로 이동 상세 정보 최근 업데이트 시간 깃헙 생성일 puglic gist 개수 위치 blog 주소 followers 수

slack 프로그램이 제공하는 서비스를 클론코딩하여 사이트를 제작한다. 기능 회원가입 logout login 채팅 (텍스트, 이모티콘, 이미지) 프로필 설정 기술 스택 emotion/style, emotion/react (styled component 사용 목적)