# Toyproject

107개의 포스트
post-thumbnail

[react 30] #1 가상 키보드 구현하기

프롤로그 패스트캠퍼스에 [30개 프로젝트로 배우는 프론트엔드] 라는 강의가 있어서 듣기 시작했다. 클론코딩인데 듣고 끝! 하게 되면 사실상 나중에 기억이 하나도 남게 되지 않으니까 1프로젝트 1글 정리를 하고자 한다. 첫번째는 가상 키보드 구현하기이다. webpac

4일 전
·
0개의 댓글
post-thumbnail

[step5] 메서드 TODO LIST 작성

로그인회원가입파라미터로 넘어 온 id, 패스워드, 닉네임 Validation Checkㄴ id가 메일 형식인가ㄴ 닉네임이 10자리 이하인가이 전에 등록된 유저인지 체크등록된 유저면 예외발생 시키고 등록된 유저라고 페이지 보여줌정상일 경우 유저 저장메시지요청메시지 작성

2022년 6월 13일
·
0개의 댓글
post-thumbnail

[ToyProject] Servlet, JSP, h2 를 이용하여 게시판 프로그램 만들기

Servlet, JSP, JDBC 와 h2 를 이용하여 간단한 게시판 프로그램을 구현해보자해당 프로젝트는 클론 코딩으로 진행되었다웹 페이지의 기본적인 기능이 대부분 모여있는 것이 게시판이라고 할 수 있다. 기본적인 웹 브라우저와 서버의 동작을 해당 프로젝트를 통해 이해

2022년 5월 26일
·
0개의 댓글
post-thumbnail

[ToyProject] JDBC-Java-h2 회원 관리 프로그램

JDBC 로 JAVA 와 h2 DB를 직접 연동해보면서 이해해보자!부족한 코드지만,,, 며칠간 열심히 한 프로젝트이다,,, 놀라지말자,, 나중에 디벨롭 하러 다시 오겠다..!몽총몽총냥이원래 대부분의 애플리케이션은 Oracle 같은 DBMS를 연동하여 사용자가 입력한 데

2022년 5월 25일
·
0개의 댓글

테스트 코드 - 문서요약프로젝트

본 글은 문서 요약 프로젝트의 테스트 코드를 작성하며 깨닫고 공부한바에 대해 지속적으로 업데이트될 예정입니다.프로젝트를 진행하며 외부 API와 통신하는 메소드를 만들었지만, 해당 메소드가 정말 제대로 동작하는지에 대해 의문이 들기 시작해 테스트 코드를 작성하기로 결심하

2022년 5월 23일
·
0개의 댓글

Spring Boot 외부 API 통신(2)

이전 글인 Spring Boot 외부 API 통신을 참조해주세요.이전 글의 경우 Spring Boot의 외부 API로 Controller 상에 test 메소드를 만들어서 테스트를 진행했었다.이번 글에서는 Flask로 만든 API에 HTTP 방식의 통신을 실시했다.문서

2022년 5월 23일
·
0개의 댓글
post-thumbnail

SpringBoot 외부 Api 통신

Ml/Md 개발자와 문서를 요약해주는 프로젝트를 진행했다.백엔드 개발자인 나의 경우 Java에서 개발하기를 원하는 상황이였고 Ml/Md 개발자인 친구는 Python에서 프로젝트를 개발해야하는 상황이였기 때문에, 각자 환경에서 개발을 마무리하고 Http 통신을 이용해 데

2022년 5월 21일
·
0개의 댓글
post-thumbnail

[step4] 사용자 이동 흐름 및 자원과 역할 파악

이벤트 흐름을 파악하기 위해 사용자가 버튼을 눌렀을 때의 화면 이동을 파악해보았다. 그 후 하면을 바탕으로 API에 쓸 파라미터의 자원을 파악하였으며 자원에 따라 어떤 이벤트가 있는지 찾아보았다.

2022년 5월 4일
·
0개의 댓글
post-thumbnail

[step3] DB 테이블 설계 및 생성

산삼프로젝트에 크게 들어갈 기능은 다음과 같음로그인파일첨부메시지 보내기친구관리

2022년 4월 26일
·
0개의 댓글
post-thumbnail

[step2] 화면구성

프로젝트를 진행하면서 화면이 계속 수정될 것 같긴하나 대략적으로 다음과 같은 화면들로 구성될 것 같음.

2022년 4월 26일
·
0개의 댓글
post-thumbnail

[step1] 구성환경

처음부터 끝까지 내손으로 해보는 토이프로젝트😉내가 아는 것만 일단 적용하면서 플젝을 만들고인강이나 새로 알게된 것들은 리펙토링 예정순서도 없고, 어떤 소프트웨어 공학 모델링을 쓰지도 않음. 진짜 마구자비로 해보는 플젝back-end : springboot, mybat

2022년 4월 26일
·
0개의 댓글
post-thumbnail

쇼핑몰 프로젝트(Node+Express)

정말 간단하고 쉽게 말하면 서버는 누군가 사이트에 접속을 하면 그 사이트에 맞는 html을 보여준다. 그럼 Node + Express로 서버를 만들어보자. 우선 작업폴더를 새로 만들고 npm init, npm install express 입력 server.js 파일

2022년 3월 26일
·
0개의 댓글
post-thumbnail

쇼핑몰 프로젝트(memo,PWA,LocalStorage)

만약 다음과 같이 상위컴포넌트에서 데이터를 받아서 쓰고 있는 하위컴포넌트가 있다. > 이때, child1 컴포넌트의 내용을 존박에서 존박2로 바꾼다. 그렇다면 데이터는 재렌더링 되어 출력될 것이다. > 하지만 child1 child2 두개 모두 재렌더팅이 된다. 상위

2022년 3월 26일
·
0개의 댓글
post-thumbnail

쇼핑몰 프로젝트(lazy loading / React devtools)

일반적으로 다른 파일의 컴포넌트를 가져다 쓸 때 다음과 코드의 형식으로 import해왔다.하지만, 다음과 같은 방식은 App.js라는 메인페이지에 방문 시 Detail,Cart등을 모두 import 해온다. 만약 수많은 컴포넌트들이 import 해오면 사이트 초기 접속

2022년 3월 23일
·
0개의 댓글
post-thumbnail

쇼핑몰 프로젝트(JSX조건문 , sync/async )

아래의 코드와 같이, if문은 return값과 JSX을 묶어준다.하지만, return()안에 if문을 사용할 수는 없다.삼항연산자는 다음과 같이 중첩이 가능하다.&&연산자를 사용하여 참이면 참에 대한 코드를 출력하고, 거짓이면 null값을 출력하는데 이럴 경우 거짓에

2022년 3월 23일
·
0개의 댓글
post-thumbnail

쇼핑몰 프로젝트(redux/reducer)

코딩애플 님의 강의를 바탕으로한 글입니다:) 장바구니 기능을 만들어보려 한다. 따라서, Cart.js 안에 리엑트부트스트랩에서 가져온 표를 넣어보자. 이때 export, import 하는 것 잊지말고, Route 해오는 것도 잊지말자. 저번 시간에 상위컴포넌트의 s

2022년 3월 21일
·
0개의 댓글
post-thumbnail

쇼핑몰 프로젝트(Tab 기능 / react-transition-group)

이전에 쌩자바스크립트로 각각 다른 tab키를 눌렀을때 다른 div가 나오게 하느라고 애먹은 기억이 있다. 제이쿼리도 써보고, 템플릿도 사용했던 기억이 있는데, 드디어 오늘 리엑트를 공부하며 원리를 배워볼 수 있었다.우선 리엑트 부트스트랩에서 원하는 탭 기능을 가져오자.

2022년 3월 20일
·
0개의 댓글
post-thumbnail

쇼핑몰 프로젝트(Context API)

앞서 학습한 중첩 컴포넌트의 경우 props로 많은 컴포넌트들의 상위 컴포넌트의 기능을 가져다 쓸 수 있다.하지만, 컴포넌트가 무수히 많아지다보면 props지옥을 맛볼 것이고, 이 것을 해결해 줄 수 있는 API가 ContextAPI다.우선 다음과 같이 변수를 선언한다

2022년 3월 20일
·
0개의 댓글
post-thumbnail

쇼핑몰 프로젝트(중첩 컴포넌트)

만약 상세페이지에 재고량을 표시하는 기능을 구현하고 싶다.이때 재고량에 대한 코드는 Info라는 컴포넌트에서 구현하고 싶어서 Detail컴포넌트와 별도의 컴포넌트를 생성한다. 이 과정은 다음과 같다.각각 상품에 대한 재고량은 state에 저장하는 것은 이제 관습이라는

2022년 3월 20일
·
0개의 댓글
post-thumbnail

쇼핑몰 프로젝트(Ajax)

Ajax는 새로고침없이 요청을 할 수 있게 도와준다.GET,POST 요청의 경우 강제로 새로고침을 하게 되어 있다. GET요청: 주소창에 URL을 작성하여 서버에 보내는 요청 (특정페이지 또는 자료를 읽고 싶을 때) ex) 네이버 들어가고 싶어서 브라우저 주소창에 n

2022년 3월 20일
·
0개의 댓글