Sintory의 웹 개발 블로그

찾을 때마다 귀찮아서 언제 취득했는지 올리겠음. 0. 표로 정리자격증취득일SQLD22.9ADSP23.9정보처리기사23.11빅데이터분석기사24.07지식재산능력시험24.051. 빅분기, ADSP, SQLD 2. 정보처리기사  3. 필요없긴 하지만,, 지식재산능력 3급.

1. JSX란JSX 가 무엇이냐? 하면 JavaScript 확장 문법으로 React “엘리먼트(element)” 를 생성함.const element = Hello, world!; HTML과 유사한 구문을 JavaScript에서 사용하여 UI를 작성함. React에서는 본질적으로 렌더링 로직이 UI로직과 연결됨. > react는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하나 둘다 포함하는 컴포넌트라고 부르는 느슨하게 연결된 유닛으로 Separation of concerns함.const name = 'Josh Perez'; // name을 josh perez로 선언.const element = Hello, {name}; // 그후 element 에 name을 넣을 수 있음.이거를 타입 스크립..

1. 상황환경 설정 과정 중 에러가 발생했다.윈도우 cmd 에서tsc -v가 먹히지 않는 것.오류 출력 메시지도 안 뜨고, 어떠한 메시지도 안 뜸. 버전 확인이 불가능. 관리자권환으로 실행했으나, 그것도 불통. 그래도  where 쳐보니 node 파일에 설치는되어있음.where tsc //cmdwhere.exe tsc //powershell 요약하자면,1. tsc 버전이 확인이 안됨. / powershell, cmd, git bash 까지 다 먹통  > npm, node 버전은 확인이 잘 됨.2. 여기서 더 나아가 creat-react-app 도 안됨. my-app(react) 폴더가 생성 안됨. 2. 원인 분석- 여러가지 원인이 있으나, 필자의 경우 node.js 의 버전 이슈였다.- 최신 버전일 경우..

HTML, TypeScript, CSS, React 로 개발할 것임. 1. NodeJS 설치- 20 버전으로 설치 2. 설치 후 cmd 에서 node와 npm 버전 확인 (설치 확인하는 것)npm -vnode -v 3. 타입스크립트 설치npm install -g typescript  4. 리액트와 타입스크립트 프로젝트 설치- 새로운 파일 지정 후, front 전용 폴더 생성 할것임.- 일단 본인은 npm 으로 create-react-app 폴더 생성에 의존성 문제가 너무 많아 yarn을 통해 설치할 예정// yarn 설치npm install -g yarn// react-app 만들면서 template을 typescript로 하기yarn create react-app todoapp-front --templ..

1. Spring Boot 프로젝트 생성할 것임. Spring Initializr 사이트를 통해 프로젝트를 간단하게 생성 가능함. 2. Docker를 통해서 mysql-container 생성하기 Docker 를 통해서 my sql 설치하는 건 추후에 올리겠음.- cmd를 통해서 Docker run 명령어를 통해서 컨테이너를 생성할 수 있음.docker run --name -e MYSQL_ROOT_PASSWORD= -d mysql:latest① --name 뒤에는 컨테이너 이름 지정② -e 뒤에는 MY_SQL_ROOT의 패스워드를 지정해주면 되는데 기본 root로 지정.③ -d 는 디태치드 모드 (detached mode)임- 디태치드 모드란 컨테이너를 실행하겟다는 의미임. 백그라운드에서 컨테이너가 실행..

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..