# Toyproject

dev__note

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

maxxyoung

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

yeppi

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

yeppi

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

zozo1591

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

zozo1591

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

zozo1591

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

maxxyoung

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

maxxyoung

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

maxxyoung

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

maxxyoung

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

pjh1011409

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

pjh1011409

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

pjh1011409

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

pjh1011409

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

pjh1011409

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

pjh1011409

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

pjh1011409

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

pjh1011409

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

pjh1011409

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