티스토리

My StudySpace

검색하기

블로그 홈

My StudySpace

jiho0735.tistory.com/m

이해하기 쉽도록

구독자: 1

방명록 방문하기

주요 글 목록

[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - CORS 참고 블로그: https://evan-moon.github.io/2020/05/21/about-cors/#cors%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%98%EB%82%98%EC%9A%94 CORS ( Cross-Origin Resource Sharing 크로스-오리진 리소스 셰어링 )애플리케이션을 통합하면서 우리는 CORS 문제를 맞닥뜨리게 된다.이 문제는 백엔드에서 해결해야 한다. componentDidMountTodo 아이템을 불러오는 부분이다.우리가 http://localhost:3000 접속하면 Todo 아이템이 리스트에 보여야 한다. 렌더링이란?리액트는 브라우저에 보이는 HTML DOM 트리의 다른 버전인 ReactDOM.. 공감수 0 댓글수 0 2024. 7. 23.
[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - SPA SPA(Single Page Application)한 번 웹 페이지를 로딩하면 사용자가 임의로 새로 고침하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션 파싱(parsing)브라우저가 HTML, CSS, JavaScript 등의 소스 코드를 해석하는 과정렌더링(rendering)파싱된 웹 페이지를 화면에 실제로 표시하는 과정 [React.js로 알아보는 SPA 동작 원리] 1. index.html 렌더링 2. index.js 실행ReactDOM.render(,document.getElementById('root')); 3. root Element 아래에 React.js 가 생성한 HTML Element 추가 .. 공감수 1 댓글수 3 2024. 7. 23.
[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - 브라우저의 동작 원리 브라우저의 동작 원리사용자가 브라우저 주소창에 http://app.softwareengineer.com 웹 url 입력브라우저는 HTTP GET 요청을 http://app.softwareengineer.com의 서버에게 전송http://app.softwareengineer.com 서버는 HTTP Response 로 index.html 반환브라우저는 index.html을 받고 코드를 해석(파싱)하고 사용자의 화면에 띄워준다(렌더링). DOM파싱은 렌더링의 전처리 단계파싱 단계에서 브라우저가 하는 일은 3가지가 있다.브라우저는 HTML을 트리 자료 구조의 형태인 DOM(Domain Object Model) 트리로 변환IMAGE, CSS, SCRIPT 등 리소스들이 담긴 자바스크립트 다운로드다운받은 자바스크.. 공감수 0 댓글수 3 2024. 7. 23.
[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - 리액트 애플리케이션 생성 사용자는 자신의 컴퓨터에서 브라우저를 실행한다.브라우저는 인터넷을 이용해 서버에 있는 자원(HTML, JavaScript, CSS 등)을 사용자의 컴퓨터로 다운로드한 후 브라우저에서 실행한다. Node.jsNode.js 등장 전까지 자바스크립트는 브라우저 내에서만 실행할 수 있었다.자바스크립트는 브라우저상에서 HTML 렌더링 일부로 실행하거나 개발자창의 자바스크립트 콘솔을 이용해 실행해야 했다.다시 말해 자바스크립트는 브라우저 밖에서는 실행할 수 없었다.이젠 그렇지 않다.Node.js는 자바스크립트를 내 컴퓨터에서 실행할 수 있게 해주는 프로그램, 즉 자바스크립트 런타임 환경이다.Node.js는 구글 크롬의 V8 자바스크립트 엔진을 실행한다. NPM(Node Package Manager) NPM(Nod.. 공감수 0 댓글수 0 2024. 7. 23.
[React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 퍼시스턴스 레이어 관계형 데이터베이스에 쿼리를 날리기 위해 어떻게 하는가?데이터베이스 클라이언트 설치 (MySQL일 경우, MySQL Workbench 설치)클라이언트를 이용해 데이터베이스에 연결되면 쿼리를 작성[Create Table 쿼리]CREATE TABLE IF NOT EXISTS Todo( id VARCHAR(100) NOT NULL PRIMARY KEY, userId VARCHAR(100) NOT NULL, title VARCHAR(100) NOT NULL, done boolean DEFAULT false); [SELECT 쿼리]SELECT id, title, doneFROM TodoWHERE id = "ff80808177"; 테이블 생성, 테이블에 엔트리 추가, 수정, 삭제도 모두 웹 서비스의 일부로 동작해야.. 공감수 0 댓글수 0 2024. 7. 22.
[React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 서비스 레이어 서비스 레이어는 컨트롤러와 퍼시스턴스 사이에서 비즈니스 로직을 수행하는 레이어이다.HTTP 요청/응답을 관할하는 컨트롤러와 데이터베이스와 연결된 퍼시스턴스와 분리되어 우리가 개발하는 로직에 집중할 수 있다. [TodoService.java]package com.example.demo.service;import org.springframework.stereotype.Service;@Servicepublic class TodoService { public String testService() { return "Test Service"; }}@Service 는 비즈니스 로직을 수행하는 서비스 레이어임을 알려주는 어노테이션[TodoController에서 TodoService 사용]import org.sprin.. 공감수 0 댓글수 0 2024. 7. 22.
[React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 컨트롤러 레이어 컨트롤러 레이어는 비즈니스 로직 처리보다는 HTTP 요청/응답을 담당하는 레이어이다.HTTP는 GET/POST/PUT/DELETE/OPTIONS 등과 같은 메서드와 URI를 이용해 서버에 HTTP 요청을 보낼 수 있다.그렇다면 서버는 이 요청을 받은 후 처리를 어떻게 할까? [HTTP 요청]GET /test HTTP/1.1Host: localhost:8080Content-Type: application/jsonContent-Length: 17{ "id": 123}클라이언트가 서버 localhost:8080에 HTTP GET 메서드를 이용해 test라는 리소스를 요청함서버는 자기 주소를 제외한 /{리소스}부분과 어떤 HTTP 메서드를 사용했는지 알아야 함그 이후 해당 리소스의 HTTP 메서드에 연결된 메.. 공감수 0 댓글수 0 2024. 7. 21.
[React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 레이어드 아키텍처 패턴, REST API 스타일 레이어드 아키텍처 패턴은 스프링 프로젝트 내부에서 어떻게 코드를 적절히 분리하고 관리할 것이냐에 대한 것이다. REST 아키텍처 패턴은 클라이언트(브라우저)가 우리 서비스를 이용하려면 어떤 형식으로 요청을 보내고 응답을 받는지에 대한 것이다. 클라이언트는 정해진 메서드로 우리 서비스를 이용할 것이다. 이렇게 REST 아키텍처 패턴을 따라 설계 및 구현된 서비스를 RESTful 서비스라고 한다. 레이어드 아키텍처 (Layered Architecture)레이어드 아키텍처는 애플리케이션을 구성하는 요소들을 수평으로 나눠 관리하는 것이다. [레이어가 없는 웹 서비스]public String getTodo(Request request) { // request validation if(request.use.. 공감수 0 댓글수 0 2024. 7. 20.
[React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 스프링부트 실행 스프링 부트 실행 프로세스스프링 부트 애플리케이션 실행한다.@ComponentScan 어노테이션이 있는 경우 베이스 패키지와 그 하위 패키지에서 @Component가 달린 클래스를 찾는다.필요한 경우 @Component가 달린 클래스의 오브젝트를 생성한다.이때 생성하려는 오브젝트가 다른 오브젝트에 의존한다면, 즉 멤버 변수로 다른 클래스를 갖고 있다면 그 멤버 변수 오브젝트를 찾아 넣어줘야 한다. @Autowired를 사용하는 경우 스프링이 그 오브젝트를 찾아 생성해 넣어준다.1) @Autowired에 연결된 변수의 클래스가 @Component가 달린 클래스인 경우 스프링이 오브젝트를 생성해 넘겨준다.2) @Autowired에 연결된 변수의 클래스가 @Bean 어노테이션으로 생성하는 오브젝트인 경우 @B.. 공감수 0 댓글수 0 2024. 7. 20.
[React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 스프링부트 설정 자바 서블릿(Java Servlet) >> DispatcherServlet 대체[Spring Boot 사용 전]자바 서블릿(Java Servlet)대표 서블릿 컨테이너 ( Apache Tomcat, Jetty, JBoss 등)클라이언트의 요청을 처리하고 서버 측에서 동적인 콘텐츠를 생성웹 요청을 기반으로 각 알맞은 비즈니스 로직을 호출하는 역할서블릿 기반의 서버를 사용하려면 개발자는 javax.servlet.http.HttpServlet을 상속받는 서브 클래스를 작성해야 한다.그러면 서블릿 컨테이너가 서블릿 서브 클래스를 실행시킨다.http 요청이 서버로 전달되면 웹 서버는 받은 요청을 해석해 해당되는 서블릿 클래스를 실행한다.package com.example.Demo;import java.io.*;.. 공감수 0 댓글수 0 2024. 7. 19.
[React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 의존성 주입 스프링 프레임워크와 의존성 주입의존성 주입 (DI, Dependency Injection)객체가 다른 객체에 의존하는 것을 명시적으로 선언하고 외부에서 해당 객체의 인스턴스를 주입하는 설계 패턴 의존성 [생성자 내부에서 오브젝트 초기화]public class TodoService { private final FileTodoPersistence persistence; public TodoService() { this.persistence = new FileTodoPersistence(); } public void create(...){ ... persistence.create(...); }} TodoService 클래스는 Todo 목록을 관리하는 기능이다.FileTodoPersis.. 공감수 0 댓글수 0 2024. 7. 18.
[React.js, 스프링부트, AWS로 배우는 웹 개발] 1장 - HTTP 메서드 웹 개발 경험 없이는 컴퓨터 시스템 흐름을 평생 이해하기 어렵겠다 싶어서 개발... 까짓거 해보자 싶어서 냅다 도서관에 달려가 책 한 권을 빌렸다. 애플리케이션의 아키텍처HTML/CSS/React.js프론트엔드 애플리케이션 개발에 사용프론트엔드 클라이언트를 반환하는 서버는 역할이 하나이다. React.js 애플리케이션을 반환하는 것이다!스프링부트백엔드 애플리케이션 개발에 사용스프링부트로 REST API를 구현. 이 API는 프론트엔드 애플리케이션이 사용한다. HTTP ( HyperText Transfer Protocol) 애플리케이션 레벨(L7)의 네트워크 프로토콜하이퍼텍스트 ('다른 문서로 향하는 링크가 있는 텍스트') + 트랜스펄 프로토콜 ('통신 규약')하이퍼링크를 위한 마크업 언어 사용자는 브.. 공감수 0 댓글수 0 2024. 7. 16.
[React.js, 스프링부트, AWS로 배우는 웹 개발] 1장 - 어노테이션 어노테이션(Annotation)Java 코드에 메타데이터를 추가하는 특별한 형식의 주석특정 동작을 수행하기 위해 사용빈 정의, 의존성 주입 등에 사용@Component : 클래스가 빈으로 등록됨@Autowired: 의존성 주입을 자동으로 처리@Service : 서비스 계층에 사용되는 빈@Repository: 데이터 접근 계층에 사용되는 빈@Controlloer: 웹 계층에 사용되는 빈계층서비스 계층데이터 계층웹 계층목적비즈니스 로직 처리데이터베이스와 상호작용프론트. 컨트롤러와 뷰로 구성 XML 설정 (XML Configuration) 애플리케이션의 설정 정보Spring 컨테이너가 관리할 빈을 XML 파일에 설정 ( ex_ ) @SpringBootAppli.. 공감수 0 댓글수 0 2024. 7. 16.
람다(lambda) 람다(lambda) 함수 선언 키워드, 정렬 기준 # 함수 선언 lambda 매개변수 : 표현식 >>> def hap(x, y): ...return x + y ... >>> hap(10, 20) 30 >>> add = lambda x,y: x + y >>> add(2, 4) 6 pulse = lambda x : 1 if x % 2 else -1 x라는 변수를 받는데, x가 짝수가 아니면 1, 짝수면 -1을 반환한다. # 정렬 기준 sort(key=lambda x: (a, b) ) # 기준 1은 a. 값이 같을 경우, 기준 2는 b data_list = [[1,5], [3,4],[2,6]] # [-1,5] [-3, 4] [-2, 6] # 34 26 15 data_list.sort(key=lambda x: .. 공감수 0 댓글수 1 2023. 11. 26.
라이브러리(deque) deque 라이브러리 from collections import deque queue는 왼쪽부터 데이터가 쌓인다. queue.appendleft() : 맨 left에 데이터 추가 queue.popleft(): 맨 left 삭제 후 반환 queue.append(): left에서부터 데이터 추가 queue.pop(): left에서부터 데이터 삭제 후 반환 공감수 1 댓글수 1 2023. 11. 26.
문자열 문자열 문자열 공백 제거 strip() >>> ex_str = " hello " >>> ex_str.strip() # 'hello'로 출력 map(int, input().strip().split(‘ ‘)) String a 안에 b 문자열이 포함되어있는지 확인 T or F a.startswith(b) split() 1. 띄어쓰기 단위로 리스트에 저장 list(input().split()) list(map(str, input().split())) 2. 공백을 기준으로 분리하여 저장 routes = ["E 2", "S 2", "W 1"] for r in routes: r1,r2 = r.split() 원하는 데이터의 index 알아내기 index() : 숫자 등 find() : 문자열. list 내 문자열.fi.. 공감수 1 댓글수 1 2023. 11. 26.
리스트(List) 리스트 remove() list = [0, 1, 2, 3] list.remove(3) # index 3 삭제 replace() a = "23" a = a.replace('2', '3') # 2 -> 3 리스트를 [], 없이 출력 “”.join(array) 값 대입 scores = [[1, 2], [4, 6], [0, 6]] a, b = scores[0] # a=1, b=2 for a, b in scores: # a= scores의 x, b= scores의 y 원하는 데이터의 index 알아내기 index() : 숫자 등 find() : 문자열. list 내 문자열.find() 가능 배열 2개 동시에 비교(집합) a = [1,3,2,5,4] for p1, p2 in zip(a, a[1:]): print(p.. 공감수 0 댓글수 0 2023. 11. 26.
딕셔너리(Dictionary) 딕셔너리 lux = {} lux = {'health': 490, 'mana': 334, 'melee': 550, 'armor': 18.72} 딕셔너리 추가 dict['three'] = 3 딕셔너리 삭제 dict.pop('one') 또는 del(dict['one']) x = {‘a’: 10, ‘b’: 20} for item in x.items() # key,value 모두 for key in x.keys() # keys = 키만 for value in x.values() # values = 값만 공감수 1 댓글수 1 2023. 11. 26.
해시 테이블 및 SQL/NoSQL 해시 테이블(Hash Table) 해시 테이블은 딕셔너리와 같이, 키와 값을 짝지어 모은 것이다. menu = { 아메리카노: 10, 라떼: 12, 카모마일차: 15, }; 배열에 담겼다면 배열의 데이터를 처음부터 모두 확인(선형 검색)해야해서 오래 걸리지만, 해시 테이블은 빠르게 알아낼 수 있다. 해시 테이블에 쓰이는 해시 함수는 우리가 검색할 때 쓰는 Key를 숫자, 즉 인덱스로 바꿔주는 역할을 수행한다. SQL 개발자들이 SQL을 잘 모르는 이유는 ORM 때문이다. ORM(Object Relational Mapping) 개발자에게 SQL 번역기 같은 도구 사용자에게 익숙한 프로그래밍 언어로 SQL을 사용할 수 있게 함 NoSQL 데이터베이스 종류 Document DB 데이터를 JSON 형식으로 저장.. 공감수 0 댓글수 1 2023. 10. 21.
브라우저 엔진 웹 브라우저가 HTML, CSSM 자바스크립트를 이해하기 위해서 확장 프로그램이 필요하다. 이것을 브라우저 엔진 혹은 렌더링 엔진이라고 한다. 엔진 이름 브라우저 이름 게코(gecko) 파이어폭스 웹킷(webkit) 사파리 블링크(blink) 크롬 브라우저는 엔진을 장착해서 HTML, CSS, 자바스크립트를 이해할 수 있는 것이다. 인터넷 익스플로러가 사랑받았던 이유 최초로 CSS를 적용한 웹 브라우저 점유율만 믿고 보안 취약점 방치로 인해 다른 브라우저들이 더 좋은 엔진을 갖추며 치고 올라옴 엣지 웹 브라우저의 엔진은 크롬 브라우저의 엔진인 블링크임 공감수 0 댓글수 0 2023. 10. 21.
C, C++, C# 비교 C C++ C# 세 언어 중 가장 오래됨, 절차지향 C 언어를 확장한 슈퍼셋, 객체지향 마이크로소프트에서 만든 언어로, 다양한 분야에서 사용 가능 자원(메모리)을 효율적으로 사용하며 실행 속도가 빠름 C 언어와 속도 차이 없음 실행 속도가 가장 느림 C#은 C, C++과 이름이 비슷하지만 완전히 다른 언어이다. 자바와 비슷하다. 개발자가 필요해서 개발한 것이 아닌 기업에서 필요해서 만들어졌다. 마이크로소프트에서 자신들만의 개발 언어를 개발한 것이다. 공감수 0 댓글수 0 2023. 10. 21.
프로그래밍 언어 이름 유래 참조서적 IT 5분 잡학사전 자바(Java) 자바 언어를 개발하던 사람들이 좋아하던 커피 종류 인도네시아의 섬 자바에서 생산한 원두로 만들어서 이 이름이 붙어서 자바 로고에는 커피잔이 존재 코틀린(Kotlin) 러시아의 섬인 코틀린을 땄음 자바스크립트(JavaScript) 기존에는 라이브스크립트(LiveScript)였으나 당시 유행이었던 자바의 이름을 활용해 자바스크립트로 개명 자바랑 이름이 유사하나 관계가 없음 C 언어 당시 유명한 프로그래밍 언어인 B 언어의 이름을 따라 지었음. 기능 면에서도 B언어의 영향을 많이 받음 그 뒤로는 C++ 언어가 등장. ++ 는 값을 1만큼 증가시킬 때 사용하는 기호로, C++가 C에서 조금 더 발전한 언어라는 의미를 내포함 그 이후로 C# 등장. #은 음악에서 반올림.. 공감수 0 댓글수 1 2023. 10. 21.
REST API REST 소프트웨어에 의한 자원 상태정보 전달 HTTP를 통해 CRUD를 실행하는 API RESTful한 예 student를 생성하는 route는 POST /students id가 13인 student를 삭제하는 route는 DELETE /students/13 RESTful하지 못한 예 CRUD 기능을 모두 POST로 처리하는 API HTTP를 통해 CRUD를 실행하기 위한 형식(대화형식) 이라고 보면 된다. 공감수 1 댓글수 1 2023. 10. 11.
Github 초보를 위한 명령어 모음 github를 처음 접하여 멘붕오셨을 분들을 위해 누구나 이해할 수 있을 수준으로 간단정리를 해보았습니다. github란, 깃(Git)을 사용하는 프로젝트 관리소입니다. Code : 코드 관리 Issues : 코드 상 에러가 발생했을 경우, 보완한 점을 업데이트 Pull requests : 기존 코드에 기능 추가 및 버그 수정 패치 → 승인요청 받아야 함 (나중에 더 추가) 1) 새 repository 생성하기 Repository name에는 원하는 레파지토리 이름을 써넣는다. Description은 안써도 된다. (옵션이다.) Public으로 할지, Private으로 할지 고른 다음, Add a README file :코드 설명서 파일을 추가할 것인지 물어보는 것이다. 해당 레파지토리에 작성할 코드(파.. 공감수 0 댓글수 0 2023. 9. 18.
mapbox지도를 android에 적용 공감수 0 댓글수 0 2023. 9. 18.
공동 혹은 개인 github repository에 project 올리는 방법 git init //git 초기화 git remote -v //내 컴퓨터 remote 상태 출력 git remote add origin https://github주소~~ // 내 컴퓨터에 origin을 추가 git status //git 상태확인 git pull //원격저장소에 있는 프로젝트의 변경사항을 로컬저장소로 가져와 병합하기(갱신) git pull origin master // git pull [원격저장소의 이름] [원격저장소에서 받아오고자하는 브랜치의 이름] 라는 의미 git add * // 원격저장소(내 컴퓨터)에 올라와있는 모든 것을 스테이지 영역에 올리기 git commit -m "this is new project" // -m 옵션 "message " 설명하며(옵션) 스테이지 영역에 있는.. 공감수 0 댓글수 0 2023. 9. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.