Sintory의 웹 개발 블로그

1. 목적정의 / 목표 및 범위 정의- ToDoApp 은 사용자가 할 일을 추가 Create, 조회 Read, 수정Update, 삭제 Delete 할 수 있는 간단한 웹 애플리케이션임 2. 요구사항 정의- ToDoApp의 기능적 요구사항 / 시스템이 반드시 수행해야 하는 기능① 할 일을 추가 Create② 할 일을 조회 Read③ 할 일을 수정 Update④ 할 일을 삭제 Delete+) 할 일을 했으면 체크 표시 / True or False로 - 비기능적 요구사항 성능, 보안, 가용성에 대한 요구사항 정의 > 개인 프로젝트라 생략3. 아키텍쳐 설계- 시스템 아키텍처: 프론트엔드랑 백엔드 통신은 Rest API를 통해 통신할 예정. 데이터는 MySQL 사용할 예정(Docker)- 컴포넌트 설계: RDBM..

이전 게시물에서 알려줬다시피,스프링 부트는 스프링스타터 라는 개념을 통하여 기본적인 의존성들을 미리 설정해 놓고, 선택만 하면 되게 만들어줌. 그리하여 Spring initializr 를 통해 웹 브라우저에서 쉽게 프로젝트가 생성 가능함. 1. Project- Maven project : Java 빌드 도구인 Maven을 사용하여 프로젝트 빌드 + Maven이란 의존성 관리와 빌드 자동화 도구- Gradle project: Java 빌드 도구인 Gradle 사용하여 프로젝트 빌드 + gradle은 더 유연하고 강력한 빌드 시스템 제공 2. Language - java: 기본적으로 지원하는 언어- kotlin: JVM 기반 언어, java와 호환됨. Spring이 코틀린 공식적으로 지원함- Groovy: ..

1) 스프링이란?- Spring Framework 는 자바에서 가장 많이 사용되는 프레임 워크이다.- 의존성 주입과 제어역전, 관점지향프로그래밍이 가장 중요한 요소위 요소들을 통해 느슨한 결합을 달성할 수 있음. Loose Coupling> 느슨한 결합으로 개발한 어플리케이션은 단위테스트를 수행하기 용이함. > 재사용을 위함.- Spring은 Java 기반의 애플리케이션 프레임워크- 엔터프라이즈 애플리케이션을 효율적으로 개발할 수 있도록 돕는 다양한 기능을 제공- 현재는 다양한 하위 프로젝트들이 존재하여, 웹 애플리케이션부터 배치 처리, 마이크로서비스, 클라우드 환경까지 지원하는 범용적인 프레임워크 (1) 주요 특징① Ioc Inversion of Control: - spring의 핵심 개념 중 하나는 ..

TypeScript 는 JavaScript의 확장 언어이다.JavaScript 의 기능은 그대로 가져가면서 "타입" 을 추가로 지원하는 언어이다.  1. 나오게된 배경JavaScript 는 브랜든 아이크가 10일만에 만든 언어이다.브라우저에 짧은 코드 작성을 위한 용도로 만들어져으나, JS가 점차 유명해지고 짧은 코드가 아닌 수많은 코드를 작성해야하는 상황이 생긴 것이다.짧은 코드를 위한 JS는 긴 코드로 작성시, 발생하는 오류가 있는데. 이는 JavaScript의 특징 때문이다. 바로 JS는 "동적 타입 언어" 라는 것. 여기서 동적 타입 언어는 어떠한 데이터 타입의 값도 자유롭게 변경할 수 있다는 것이다.JS에서 값을 할당하는 시점에 변수의 타입은 동적으로 결정되고, 자유롭게 변경 가능하다.변수에 저..

누적 방식 생략.1. appendChild- 가장 기본적인 방- 기존 내용은 유지, 새로운 요소 추가 가능- DOM 요소를 생성하고, 이를 부모 요소에 추가하는데 사용- Dom 요소만 추가 가능.function addtext(event) {  event.preventDefault();  // 새로운 텍스트 노드 생성  const newText = document.createElement("p");  newText.innerText = "Hello";  // 기존 내용에 추가  result.appendChild(newText);} 2. append- appendChild와 비슷하지만, 더 유연- 텍스트 노드와 DOM 요소 모두 추가 가능- 여러 요소를 한번에 추가 가능function addtext(even..

텍스트를 추가할 때 사용하는 코드로는 innerText와 appendChild 가 있다. 1. innerText 의 동작- 요소의 텍스트 내용을 덮어씌우는 방식으로 작동- 기존에 있는 내용을 지우고 새로운 텍스트로 대체매번 같은 text만 표시되고 이전에 추가된 텍스트는 사라지게 됨. 2. appendChild 의 동작- 기존의 내용은 유지되고, 새로운 요소를 추가- DOM 요소를 생성하고, 이를 부모 요소에 추가하는 데 사용> 그리하여 document.createElement("p") 로 새로운 요소 를 생성 후   result.append(text) 하여야 #result에 새로운 요소를 추가할 수 있다. 3. innerText에도 텍스트를 계속 추가하는 방법계속해서 텍스트를 추가할 수도 있다. 하지만..

JavaScript의 자료형은 크게 두 가지로 나눌 수 있다.[ 원시 자료형(7개) ] 과 [ 참조 자료형(1개) ] 로 나눌 수 있다. 원시 자료형이란 값이 직접 저장되며, 변경 불가능(immutable) 하다.참조 자료형이란 값이 메모리 주소를 통해 저장되며, 객체 기반으로 작동한다.하지만, 이렇게만 정리를 하면 이해하기 어려울 것이다. 값이 직접 저장된다는 건 이해가 된다해도 메모리 주소에 저장이된다? 이 부분은 이해하기 어려울 것이다. JavaScript 에서 변수와 메모리는 프로그램이 실행되면서 데이터를 관리하고 사용하는 방식의 핵심이다.이러한 모든 부분을 조금이라도 이해하기 위해서는 변수 선언과 메모리 할당, JS의 메모리 구조를 자세히 알 필요가 있다. 1. 변수와 메모리의 관계1) 변수의 ..

버튼을 클릭하여 onclick 이벤트를 작동하고 싶을 때, 활용할 수 있는 코드는 정말 많다.이번 시간에는 그러한 코드 유형들을 살펴보겠다. 1. HTML 내에서 직접 Onclick 사용- onclick 속성을 이용하여 인라인으로 이벤트 처리 가능button onclick="alert('Button clicked!')">Click Mebutton>> 버튼을 클릭시, alert() 안에 있는 텍스트를 화면에 띄운다. 2. JavaScript 에서 Dom 요소에 직접 onclick 할당const button = document.querySelector('button');button.onclick = function () {    console.log('Button clicked!');};> 익명 함수임 3...

항상 코드를 짤 때, 저는 메커니즘 부터 찬찬히 생각해 봅니다. 최대공약수를 어떻게 구하는지 부터 생각해봅시다. 일단 반복문을 사용해야겠다는 생각부터 들죠.1부터 시작해서, 2, 3, 4, 5, 6, 7 차례대로 숫자들을 두 숫자에게 나눠야겠죠.그래서 두 숫자 모두 몫이 0이 되는 숫자를 찾아야 겠죠 ?그리고 해당 숫자를 변수에다가 저장을 해두고 나올때마다 업데이트가 되어야 겠죠. 그렇다면 여기서 중요한 포인트를 적어보죠.1. 나누기를 할때 for문을 통해 1부터 n까지 두 숫자를 나누어 보아야한다.2. 몫은 0이 나와야지 공약수이다.3. 공약수가 나올 때 마다 변수에 값을 업데이트를 해줘야한다. 4. for문을 돌리는 횟수는 두 숫자 중 작은 값보다 적게 돌아야간한다. 이렇게 메커니즘을 생각하면서 조건..

1. API1) API란?(1) API 개념-  Application Programming Interface의 약자.- 운영체제와 응용프로그램 사이의 통신에 사용되는 메시지 형식, 중간 전달자. - API는 중간에서 양쪽 서버를 연결해주는 것.- 프로그램이나 시스템이 서로 소통하도록 도와주는 매개체.- 한 프로그램에서 다른 프로그램으로 데이터를 주고받기 위한 방법(코드).> youtube 코딩애플 참조. 코드를 실행할 수 있도록 전달해주는 코드.코딩초보들이 헷갈리는 용어 : API가 뭐냐면 (2) API 역할- 데이터 전달- 추상화- 표준화  (3) API 작동방식 - API는 보통 클라이언트-서버 구조에서 동작함.> 클라이언트가 API를 호출하여 요청을 보내면, 서버는 요청을 처리 후 필요한 데이터를 ..