먼저https://www.data.go.kr/index.do 공공데이터 포털국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datasewww.data.go.kr정부에서 공공의 목적으로 제공하는 API를 이용해서 원하는 데이터를 가져올 수 있습니다.우선 위의 주소로 들어가 로그인을 합니다. 필요한 API 찾기저의 경우는 인천국제공항의 항공편에 대한 정보를 가져오고 싶어서 '인천국제공항공사' 라고 검색했습니다오픈 API 탭으로 들어갑니다.밑에 정말 많은 API 들이 있는데 XML 혹은 JSON 이라고 데이터 형식이 되어 있으면 사용 가능한 API라고 보시면 됩니다.하지만, J..

서론프로젝트 기간 : 24년 6월 10일(월) ~ 6월 21일(금) 첫 팀 프로젝트라서 어떻게 진행해야 할 지 처음엔 감이 안 잡혀서 막막했는데오피스아워 시간에서의 코치님들의 피드백이 도움이 많이 됐고,팀원 전부가 열심히 참여하고 서로 도와준 덕분에 어찌저찌 잘 굴러가서 만족스러운 결과가 나온 것 같다. 2주라는 짧은 시간이었지만 진행하면서 많이 공부가 됐고 성장한 기분이 들었다.✨프로젝트를 통해 얻게 된 큼직한 경험을 요약하자면,1. code-formatter를 이용한 코드 스타일 통일 방법2. gitFlow 협업 방식에 대한 이해와 merge conflict 대처3. 네이버/ 카카오 SSO 구현 (with. passport 라이브러리)4. AWS S3로 정적 이미지 파일 업로드 (with. multe..

-- 문제 https://school.programmers.co.kr/learn/courses/30/lessons/42885 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr -- 최초 풀이 function solution(people, limit) { let cnt = 0; people.sort((a, b) => a - b); while (people.length >= 2) { if (people[0] + people[people.length - 1] 2명이 탈 수 있음 => pop(), shift() 연산 2. limit을 넘는다 => 2명이 탈 수 없음..

-- 문제 https://school.programmers.co.kr/learn/courses/30/lessons/12924 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr -- 최초 풀이 function solution(n) { let cnt = 0; let i = 1; // 예외 처리 if (n === 1) return 1; while (1) { let mid = Math.ceil(n / i); // 중앙값 // 연속된 수 중 가장 작은 값이 1보다 작으면 루프 종료 및 cnt 리턴 if (mid - Math.floor(i / 2) < 1) return..

서론 React 강의를 듣던 중 성능을 최적화할 수 있는 프레임워크인 MillionJS에 대해 알게 되었고, 어떠한 메커니즘으로 성능 개선이 이루어지는 지 궁금해 MillionJS 공식문서를 보고 나서 알게 된 점을 적어보려고 합니다. 우선 React의 virtual DOM 방식을 알아보고, MillionJS이 동작하는 방식이 virtual DOM과 어떠한 차이점이 있는 지 보겠습니다. 리액트의 virtual DOM 동작 방식 virtual DOM은 컴포넌트가 리렌더될 때 기존의 값과 현재의 값을 비교하고, 값이 바뀐 부분만을 찾아 리렌더하기 때문에, 모든 코드가 재평가의 대상이 되는 실제 DOM에 비해 효율적이라고 볼 수 있습니다. 개발자 도구에서 보면 값이 변경된 부분만 깜빡이며 바뀌고 있습니다. 예..

🔨 컴포넌트의 재사용 React는 component로 이루어져 있고, 데이터만 달라지면서 동일한 컴포넌트를 재사용할 수 있습니다. 아래의 커스텀 컴포넌트 에 MY_HOBBY의 데이터를 각각 다르게 props로 전달하는 코드를 보겠습니다. const MY_HOBBY = [ { title : "Movie", description : "Watch movie at theater", }, { title : "Running", description : "Run 3km", }, { title : "Football", description : "Kick a ball with our team", }, ]; 1. spread operator를 사용하여 배열의 인덱스로 props를 전달합니다. import Hobby fro..

-- 문제 https://school.programmers.co.kr/learn/courses/30/lessons/120812 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr -- 최종 풀이 const solution = (array) => { // 1. 해시테이블 Map 이용 const map = new Map(); // 2. 반복문을 통해각 el 별 등장 횟수 구하기 // 2-1. 해당 el가 map에 존재하는 지 확인 for (let i = 0; i value 1 증가 if (m..

-- 문제 https://school.programmers.co.kr/learn/courses/30/lessons/120808 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr -- 처음 제출한 답안 function solution(numer1, denom1, numer2, denom2) { let num = (numer1 * denom2) + (numer2 * denom1); let den = denom1 * denom2; let min = findMinDivider(num, den); return [num / min, den / min]; } functi..

0. HTML 요소 inline VS block - inline : 하나의 태그가 자신의 width만큼(내부 컨텐츠만큼)만 차지하는 덩어리 ,, ,,,,, - block : 하나의 태그가 자신의 width와 상관없이 좌우공간을 모두 차지하는 덩어리 ,,~,,,,,,,,,,등 HTML tag는 block 이 대다수를 차지하므로, 예외적으로 자주 쓰는 , , 정도가 inline에 해당한다~ 정도만 알고 있으면 될 것 같습니다. 1. 중앙정렬 - inline 요소의 경우 bring me center!! 이 글씨를 박스의 정중앙에 위치하게 하고 싶습니다. span은 inline 요소에 해당하며, inline 요소를 중앙정렬할 경우는 .container { /* default */ height: 60px; wid..