m1ndy5's coding blog

https://papago.naver.com/ 파파고를 만들기 위한 준비 파파고 html파일 만들기 node.js 다운로드 파파고 open api를 사용하기 위한 네이버 계정 1. 파파고 html 파일 파파고 html 파일은 Papago폴더 > public 폴더 안에 넣어주었다. Tailwind를 사용해 CSS 파일 없이 스타일을 넣어주었다. (내가 하진 않았다.) tailwind.config.js 파일을 만들어 설정을 해주고, Tailwind의 자동 완성 기능을 사용하고 싶다면 extensions에서 Tailwind CSS IntelliSense를 설치해보자 2. node.js 다운로드 파파고의 번역 api를 사용하려면 html과 js파일만 있어서는 안된다. 파파고 번역 api에 요청하고 이에 관한 응..

What is Browser? 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램 브라우저는 랜더링 과정을 통해 받아온 자원들을 유저에게 보여줌 Browser Rendering 브라우저가 서버에 필요한 리소스를 요청 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성, 렌더 트리를 생성 렌더트리를 기반으로 HTML 요소의 레이아웃(위치, 크기) 계산 화면에 HTML요소를 페이팅 js파일을 연결해 주었는데 실행이 안돼요!!ㅜㅜ js파일의 위치를 확인해보자 html body에 있는 태그를 js에서 읽어올 때 script 태그가 위에 있다면 브라우저가 html파일을 렌더링 하기도 전에 js파일을 실행하여 엥??? html에 그런 태그 없는데 뭔 ..

반복문 // 0 ~ 9까지 새로로 찍힘 for(let i = 0; i {}); const color = ['red', 'orange', 'blue', 'green']; color.forEach(ele..

What is JavaScript? 자바스크립트는 웹 브라우저 상에서 동작을 구현할 수 있는 객체 기반의 언어 Variables 값을 보관해두기 위한 공간, 값 그 자체 값을 재할당할 수 있음 컴퓨터 내 메모리 공간에 저장하여 재사용가능할 수 있게 함 // 안녕하세요 저는 mindyo입니다. const name = 'mindyo'; console.log(`안녕하세요 저는 ${name}입니다.');저장되는 공간은 어디? RAM에 위치, 일련의 주소값과 매칭됨 변수의 종류와 선언 및 초기화(할당) var : 변수 -> 호이스팅이 일어남(코드 오류 발생 소지를 높임) -> 잘 사용하지 않음 *호이스팅이란? -> 선언 위치와 상관없이 최상단으로 끌어올림 let : 변수(값 재할당 가능) -..

CSS란? Cascading Style Sheets의 줄임말로 HTML 또는 XML같은 마크업 언어로 쓰여진 문서에 스타일을 입힐 때 사용하는 언어 Cascading 이란? 계단식이라는 뜻으로 style rule에 우선순위를 정해 결정하는 것을 의미 CSS의 특징 CSS에 스타일을 적용하는 방법 1) Inline 태그 내부에 style 속성을 넣어 사용하는 방식 안녕하세요2) Internal HTML 파일 상단에 별도의 태그를 작성하고 내부에 CSS코드를 작성하는 방식 안녕하세요 3) External 별도의 CSS 파일을 생성하여 연결해주는 방식 안녕하세요 /* style.css */ p { color: red; }CSS Selector 스타일을 적용할 때는 선택자(Selector)을 사용하여 적용 : ..

이 미니 프로젝트는 별다른 기능이 없고 HTML과 CSS를 익히기 위해 외형만 copy하였습니다!! 가장 신경 쓴 부분 외형을 최대한 비슷하게 할 것 작은 포인트들은 구현해 볼 것 lighthouse로 검사했을 때 최대한 100점에 가깝게 만들 것구현 과정일단 첫 번째 목표인 외형을 비슷하게 만들기 위해 구조, 텍스트 속성(색, 굵기 등), margin과 크기를 고려하여 코드를 작성했다. 위가 원래 배민 블로그고 밑이 내가 만든 블로그이다. 이 부분에서 어려웠던 점 문제 : 화면은 넓지만 실질적인 내용이 있는 부분은 한정되어있고 가운데에 있어야했다. /* body의 width를 제한하고 가운데로 오게함 */ body { margin: 0 auto; flex-wrap: wrap; width: 966px; ..

HTML이란? Hyper Text Markup Language 의 약자로 하이퍼 텍스트 방식의 마크업 언어 하이퍼 텍스트, 하이퍼 링크란? 단순 텍스트를 넘어서 텍스트나 이미지 등의 형태를 통해 링크로 연결되어 화면 이동을 가능하게 하는 기능을 제공하는 텍스트 마크업 언어란? 태그 등을 이용하여 데이터를 모니터 상에 표기하기 위해 사용하는 언어 언제 HTML을 사용할까? 우리가 흔히 사용하고 접하는 웹페이지를 만들 때 사용 WWW(World Wide Web) VS Internet WWW 인터넷 상에서 문서와 다른 리소스에 접근할 수 있는 방법을 제공하는 공간 -> 소프트웨어적인 느낌 -> 웹 브라우저를 통해 웹 페이지에 방문하고, 하이퍼링크를 클릭하여 다른 웹 페이지나 리소스에 접근 Internet 전 ..

https://www.acmicpc.net/problem/2493 사실 아이디어는 바로 떠올랐지만 당연히 시간초과가 나는 코드란 걸 알았기에 무슨 방법이 있는지 고민을 해보았다. 키포인트는 중간에 우뚝 솟은 탑이 있다면 그 앞은 고려할 필요가 없다는 것이다. 하지만 그 뒤는 고려를 해줘야하는게 높이가 1 4 3 2 인 탑이 있다면 2은 4에 걸리는 것이 아니라 3에 걸리기 때문이다. 따라서 오른쪽부터 훑으면서 앞쪽의 탑들이 자신보다 낮으면 스택에서 빼고 높다면 그 탑이 자신이 발사하는 레이저에 걸리는 탑이 된다.(break) 그리고 자신도 그 뒤쪽 탑에겐 높을 수 있으므로 자신도 stack에 push 해야한다. 만약 앞쪽 탑들이 다 빠지고 자신밖에 스택에 없다면 자신보다 높은 탑이 없으므로 0을 appe..

https://www.acmicpc.net/problem/10799 import sys sticks = sys.stdin.readline().rstrip() op = 0 cnt = 0 for i in range(len(sticks)-1): if sticks[i] == '(' and sticks[i+1] == ')': cnt += op elif sticks[i] == sticks[i+1]: if sticks[i] == '(': op += 1 else: cnt += 1 op -= 1 print(cnt)생각한 방법은 () 레이저 발사할 때 기준으로 몇개의 괄호가 열려있는지(몇개의 막대가 있는지)를 고려했다. (((이렇게 3개가 열려있으면 일단 한번 자르면 3조각이 생..

https://www.acmicpc.net/problem/1874 사실 문제이해를 못해서 문제가 뭔말인지 다른 브로그 읽어본건 안비밀ㅎ 오름차순으로 들어간다는게 작은수 -> 큰수로 들어간다라고 이해를 해서 엥 뭐지?했는데 알고 보니 4를 pop하려면 1, 2, 3, 4 이렇게 push를 해야한다 라는 말이었다. 이렇게 스택에 push pop하면서 입력받은 수열을 만들면 성공, 만들지 못하면 NO를 출력하는 문제였다. import sys n = int(sys.stdin.readline().rstrip()) stack = [] last = 0 o = '' for _ in range(n): i = int(sys.stdin.readline().rstrip()) if i not in stack: f..