til 19

JavaScript 기초

1. JavaScript 소개 및 설치1. 프로그래밍 언어 - JavaScript 1) JavaScript 란?: 객체 기반의 스크립트 프로그래밍 언어최초의 브라우저는 넷스케이프에서 만듦단순하고 간단하다플랫폼 독립적인 오픈소스 (Node.js) -무료에다가 어느 운영체제든 사용 가능(Windows, Linux, Mac OS)다양한 프로그래밍 패러다임 지원 - 절차, 객체지향, 함수형방대한 라이브러리 - 웹 개발, 게임 개발, 데이터과학 등 범용언어 특히 웹 개발에서는 절대적인 지위를 가지고 있음이름설명대표 언어절차지향 프로그래밍(Procedural Programming)명령을 순차적으로 실행. 함수, 변수 위주.C, Pascal객체지향 프로그래밍(Object Oriented Programming)객체(데..

[신한투자증권 프로디지털 아카데미] 실무형 웹페이지 실습(1) - 포트폴리오 만들기

오늘은 그동안 배운 HTML과 CSS 내용을 정리하며, 직접 나만의 포트폴리오를 제작해보는 시간을 가졌다. 다양한 개발자들의 포트폴리오를 참고하면서 각 구성 요소의 장단점을 비교해보고, 내가 추구하고자 하는 방향에 대해 고민해볼 수 있었다. 그 과정에서 단순히 시각적으로 화려한 UI보다는, 나라는 사람에 대해 명확히 보여줄 수 있는 포트폴리오를 만드는 것이 더 중요하다고 느꼈다. 포트폴리오는 결국 자신을 드러내는 도구인 만큼, 내가 어떤 역량을 중요하게 생각하는지, 그리고 프로젝트에 어떤 자세로 임해왔는지를 중심으로 진정성 있게 구성하고자 했다. "왜 지원자님을 채용해야 하나요?" 라는 질문에 답하기 위해서는, 내가 왜 이 직무에 적합한 인재인지, 어떤 경험과 성과로 그 역량을 증명할 수 있는지를 구체..

[신한투자증권 프로 디지털 아카데미] UI/UX 디자인과 구현(2) (HTML/CSS)

1. CSS로 스타일링하기 1) CSS 소개: 웹 페이지의 디자인과 스타일을 정의하는 스타일 시트 언어: 요즘은 가독성과 레이아웃에 중점을 많이 둠 2) CSS 의 기본 구문h1 { // 선택자 color: blue; // 속성: 값}선택자(Selector)- 꾸미고 싶은 HTML 요소를 선택한다속성(Property) - 꾸미고 싶은 속성명을 입력한다값(Value) - 어떻게 꾸밀지 속성값을 입력한다 3) CSS를 HTML에 적용하는 방법: HTML와 CSS는 다른 언어이기 때문에, HTML 파일에서 css를 적용하는 코드를 작성해야 한다.인라인 스타일 : HTML 요소의 style 속성을 사용하여 해당 요소에 직접 CSS 스타일을 지정제목 내부 스타일 시트 : HTML 문서 내부에서 ..

[신한투자증권 프로 디지털 아카데미] UI/UX 디자인과 구현(1) (HTML/CSS)

1. 웹 구성요소 알기 1) 웹이란 : 전 세계가 연결된 정보의 공간 : 우리는 웹을 통해 문서, 이미지, 비디오, 애플리케이션 등의 다양한 콘텐츠에 쉽게 접근하고 공유할 수 있다: 하이퍼링크를 통해 문서 간 이동이 가능하며, 이로 인해 웹은 거대한 연결 구조(Navigation Network)를 형성한다 2) 웹을 만드는 3가지 언어HTML (HyperText Markup Language) 웹 페이지의 구조를 정의하는 마크업 언어 - 사용자뿐 아니라 검색 엔진이 콘텐츠를 이해하고 인덱싱하는 데도 도움이 된다 웹 페이지에 있는 모든 콘텐츠는 HTML을 통해 구성됨 - 이는 상호 연결을 가능하게 함(하이퍼링크) 를 사용하여 각 요소의 구조와 역할을 구분 CSS (Cascading Style Sheets)웹..

[신한투자증권 프로 디지털 아카데미] 클라우드 기반 웹/앱 개발을 위한 서비스 기획 이해(3)

5. 클라우드 이해 1) 클라우드 기반의 웹/앱 서비스란?: 필요할 때 서버/컴퓨터/프로그램을 인터넷에서 ‘빌려쓰는’ 서비스: 관리, 유지보수, 보안, 확장 이런 귀찮은 거 → 전부 클라우드가 대신해줌 2) 클라우드가 제공하는 고전적인 3가지 유형 IaaS (인프라 빌려쓰기) : 서버, 저장공간, 네트워크 같은 “컴퓨터 뼈대”를 클릭 몇 번이면 바로 쓸 수 있게 해주는 서비스ex. AWS EC2(가상 서버), S3(파일저장소), VPC(가상 네트워크)PaaS (개발자용 플랫폼 빌려쓰기) : 서버/DB/OS 고민 없이, 개발자들이 바로 코드만 올리면 앱이 돌아가게 해주는 플랫폼ex. Vercel, Heroku, Google App EngineSaaS (앱/프로그램 빌려쓰기) : 내 컴퓨터에 설치 필요 없이..

[신한투자증권 프로 디지털 아카데미] 클라우드 기반 웹/앱 개발을 위한 서비스 기획 이해(2)

3. 프로덕트 개발 방법론 1) 프로덕트 개발 방법론 - 워터풀: 고전적인 프로덕트 개발 방식위에서 아래로 떨어지는 순차적으로 진행되는 게 폭포와 같다고 해서 붙여진 이름처음에 모든 요구사항과 설계를 다 정리하고, 그 계획대로 단계별로 실행하는 데 집중하는 방식전체를 한 번에 계획하고, 각 단계는 독립적으로 완성된 결과물을 만듦각 단계(기획 → 설계 → 개발 → 테스트 → 배포)가 명확하게 구분일의 책임과 순서가 명확하게 나뉘는 게 특징전체 계획과 일정 수립이 쉬워서 예산, 인력 관리에 유리대규모/장기 프로젝트나 외주 개발에 적합하다한계점현실은 항상 바뀌는데, 워터폴은 변화를 허용하지 않았다사용자 피드백을 반영할 타이밍이 너무 늦었다 “완벽한 계획”이라는 환상은 깨졌다 - 계획보다 실행 → 피드백 → 개..

[신한투자증권 프로 디지털 아카데미] 클라우드 기반 웹/앱 개발을 위한 서비스 기획 이해(1)

1. 클라우드 기반 웹/앱 개발을 위한 서비스 기획 이해1. 개발자는 왜 서비스 기획을 알아야 할까? 1) IT 서비스가 만들어지는 과정 2) 지금까지 우리가 일했던 방식기획자 → 디자이너 → 개발자 : 요구사항은 위에서 아래로 "정해져서" 내려옴개발자는 “요구받은 기능”을 구현하는 역할기획서를 분석하고, 기술을 고민하는 역할을 주로해옴 3) 그런데 지금은?세상이 더 빨라지고 치열해져서 사용자 피드백이 실시간으로 쏟아짐기획자 개발자 디자인이 한 팀으로 이루어짐 4) 개발자도 기획을 알아야 한다서비스를 이해하지 못하면 코드는 겉핥기가 됨단순히 기능 구현만 하면 그게 왜 필요한지도 모르고 유지보수만 하게 됨기능구현과 문제 해결은 다르다 - 유저가 겪는 진짜 문제, 본질적인 문제를 해결해야 함 5) 서비스를 ..

[신한투자증권 프로 디지털 아카데미] 기술 멘토 세션3 (서비스 기획)

1. 서비스 기획 - 신한투자증권 디지털플랫폼부 선임님1. 서비스 기획자란? 0) 서비스: 이용자의 목적을 이룰 수 있도록 도와주는 프로덕트 1) 서비스 기획자: 문제없이 서비스를 구현하기 위해 필요한 모든 것을 할 수 있도록 만드는 것: UX를 분석하여 얻은 비즈니스 이슈를 해결하고 구현해내는 것 - 주요 역량 : 문제 해결, 커뮤니케이션, 서비스 관리 2) 비즈니스 기획 vs 서비스 기획비즈니스 기획 : WHAT, WHY - 어떤 대상에게, 무엇을, 왜 제공하는지 & 수익은 어떻게 창출할 것인지서비스 기획 : HOW - 비즈니스를 어떻게 풀어나갈 것인지,수익 모델이 잘 작동할 수 있도록 구조로 설계하고 구현 3) Why 기획 역량?: 문제를 확인하는 사람 → 문제를 해결하는 사람: 말도 안 되는 요구..

[신한투자증권 프로 디지털 아카데미] 클라우드 환경의 이해와 클라우드 보안(2)

1. VPC의 연결 옵션VPC(Virtual Private Cloud) : AWS 상에서 내가 직접 구성하는 가상의 독립 네트워크, 퍼블릭 클라우드(AWS) 위에 내 사설망처럼 사용할 수 있는 환경을 제공하기 위해 사용 1) 인터넷 액세스 제한 : 서브넷 별로 다른 라우팅- 인터넷 게이트웨이를 VPC에 연결한 후, 서브넷이 인터넷을 사용할 수 있도록 하려면 라우팅 테이블에 경로를 추가해 주어야 함 - 이게 라우터가 하는 역할- 프라이빗 서브넷은 인터넷 게이트웨이와 연결되지 않아 외부 인터넷을 사용할 수 없음, 외부에서 격리되 형태이므로 apt update 와 같은 명령도 실행 불가- but 프라이빗 서브넷에서도 소프트웨어 업데이트 등 외부 통신이 필요한 경우가 있음 - 그래서 NAT Gateway 사용-..

[신한투자증권 프로 디지털 아카데미] Amazon RDS 만들기

클라우드 활용 기초 실습으로 Amazon RDS 만들기를 진행했다. 어떻게 구성이 되는지 다시 한 번 정리를 하면 좋을 것 같아서 아래와 같이 요소별로 정리를 해보았다. 요소별 정리VPC (Virtual Private Cloud)AWS 내에 나만의 논리적 네트워크를 만드는 것.사설 IP 주소 범위를 지정할 수 있고, 내부망처럼 독립적으로 작동함.Subnet (서브넷)VPC를 작은 네트워크 단위로 나눈 것.공용 서브넷: 인터넷과 통신 가능 (인터넷 게이트웨이 연결)사설 서브넷: 외부와 직접 통신 불가 (NAT 필요)Internet Gateway (IGW)VPC를 외부 인터넷과 연결해주는 게이트웨이 장치반드시 라우팅 테이블에서 연결을 지정해야 실제 인터넷 연결 가능Route Table (라우팅 테이블)서브..