겨리의 개발일기

https://school.programmers.co.kr/learn/courses/30/lessons/17681 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 1. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다 2. 전체 지도는 두..

Programming/Algorithm 2023. 5. 25. 15:25

세팅하기 create-react-app 사용해서 설치하기 ✅ npx create-react-app 명령어 사용 cf) git에 node_modules 폴더는 올리지 않는 것이 낫다. (크기도 크고 파일도 많음) package.json 만 올리면 된다! → package.json에 있는 걸로 설치하면 되니까 프로젝트 실행하기 npm run start 사용 (npm run start == npm start) start 명령어가 실행되면 해당 화면을 확인할 수 있다! npm start 등의 명령어는 package.json 내의 script 쪽에 명시되어있다. ✅ “react-scripts start” : 개발모드로 프로그램 실행 ✅ “react-scripts build” : 실제 배포모드로 만들어줌 ✅ “re..

Programming/React 2023. 5. 22. 23:54

DOM(Document Object Model)이란? ✅ 문서 객체 모델 ✅ HTML, XML 문서의 프로그래밍 interface ✅ 문서의 구조화된 표현을 제공하고 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다. DOM 자신에게 접근, 수정하는 방법은 일반적으로 프로퍼티와 메소드를 갖는 자바스크립트 객체로 제공되는데, 이를 DOM API(Application Programming Interface)라고 한다. DOM의 기능 1. HTML 문서에 대한 모델 구성 브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다.이 때 모델은 객체의 트리(DOM Tree)로 구성된다. 2. HTML 문서 내의 각 요소에 접근/수정 DOM은 모델 내의 각 객체에 접근하고 수정..

Programming/JavaScript 2023. 5. 15. 23:00

객체(Object)란? ✅ 자바스크립트에서 원시타입(Primitives)을 제외한 나머지 값들은 모두 객체이다. ✅ 자바스크립트의 객체는 key(키)-value(값) 으로 구성된 Property들의 집합이다. ✅ 함수는 일급 객체 이므로 값으로 취급할 수 있다. → Property 값으로 함수를 사용할 수 있음. 이 경우 일반 함수와 구분하기 위해 method 라고 부른다. ✅ 객체는 데이터를 의미하는 property와 데이터를 참조하고 조작할 수 잇는 동작을 뜻하는 method로 구성된 집합 ✅ 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 prototype 이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 1. Property(프로퍼티) ✅ 프로퍼티키(이름)와 프로퍼티 값으로 구성된..

Programming/JavaScript 2023. 5. 1. 18:31

Parameters primitiveparameters(원시파라미터) ✅ passed by value(값에 의한 전달) objectparameters(객체 파라미터) ✅ passed by reference(참조에 의한 전달) ✅ 주소를 통해 참조값에 접근 할 수 있다. passed by reference 예제 function changeName(obj){ obj.name = 'hello'; } const me = {name:'gyeol'}' changeName(me); console.log(me) // {name:'hello'} 출력 Default Parameters(ES6+) ✅ 매개변수에 값이 없거나 undefined가 전달될 경우 해당 매개변수를 기본값으로 초기화할 수있다. function show..

Programming/JavaScript 2023. 4. 25. 23:25

JavaScript를 HTML에 링크하는 방법 1. script 태그가 head에 위치한 경우 ✅ script 태그가 보이면 HTML 파싱을 멈추고 스크립트 파일을 실행한다. ✅ 단점 : 파일이 크면 느려진다. 2. script 태그가 body 내 끝 부분에 위치한 경우 ✅ 페이지가 완성된 후 스크립트 파일을 패칭한다. ✅ 장점 : HTML 컨텐츠를 빨리 노출시킬 수 있다. ✅ 단점 : JavaScript에 의존적인 페이지인 경우 사용자가 저상상적인 페이지를 보기 전까지 오래 걸릴 수 있다. 3. head 태그 안에 script 태그를 넣되 async 옵션을 사용한 경우 ✅ 브라우저가 HTML을 파싱하다가 script 파일을 병렬로 받도록 명령만 해놓고 파싱 후에 JavaScript 파일이 다운이 완료되..

Programming/JavaScript 2023. 4. 25. 00:21

https://school.programmers.co.kr/learn/courses/30/lessons/178871 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Q.얀에서는 매년 달리기 경주가 열립니다. 해설진들은 선수들이 자기 바로 앞의 선수를 추월할 때 추월한 선수의 이름을 부릅니다. 예를 들어 1등부터 3등까지 "mumu", "soe", "poe" 선수들이 순서대로 달리고 있을 때, 해설진이 "soe"선수를 불렀다면 2등인 "soe" 선수가 1등인 "mumu" 선수를 추월했다는 것입니다. 즉 "soe" 선수가 1등, "mumu" 선수가 2등으로 바..

Programming/Algorithm 2023. 4. 14. 00:20

https://school.programmers.co.kr/learn/courses/30/lessons/161989 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Q. 어느 학교에 페인트가 칠해진 길이가 n미터인 벽이 있습니다. 벽에 동아리 · 학회 홍보나 회사 채용 공고 포스터 등을 게시하기 위해 테이프로 붙였다가 철거할 때 떼는 일이 많고 그 과정에서 페인트가 벗겨지곤 합니다. 페인트가 벗겨진 벽이 보기 흉해져 학교는 벽에 페인트를 덧칠하기로 했습니다. 넓은 벽 전체에 페인트를 새로 칠하는 대신, 구역을 나누어 일부만 페인트를 새로 칠 함으로써 예산을..

Programming/Algorithm 2023. 4. 12. 15:43