sharingStorage

Package Manager 패키지 매니저란? 패키지를 관리하는 작업을 자동화, 안전처리 하기 위해 사용되는 도구 패키지 관리란 ? 프로젝트가 의존하고 있는 패키지를 효과적으로 설치, 관리, 갱신, 삭제하는 작업 패키지 매니저가 필요한 이유 ? 어떤 패키지가 동작하기 위해서 필수적으로 필요한 다른 패키지를 의존성(dependency)라고 하는데 이는 수동으로 관리하기 불가능하기 때문에 각각 패키지가 자신의 의존성 정보를 가지게 하여 패키지 매니저가 자동으로 설치해준다. 패키지는 코드의 배포를 위해서 사용되는 코드 묶음이며 일반적으로 라이브러리, 실행파일, 컴파일한 binary, 환경설정(configuration)정보, 의존성 정보 등을 포함한다. 자바스크립트 패키지 매니저 프론트엔드 개발자가 가장 흔히 ..

문제 요약 왕복 달리기 선수는 N개의 이어진 일직선상의 코스들을 모두 지나 끝까지 도달한 뒤에, 다시 출발 지점으로 돌아와야 한다. 전체 코스들을 지나고 있는 상황에서 이동 거리가 K일 때, 현재 지나고 있는 코스의 번호를 출력하는 프로그램을 작성하시오. 접근 1. vector에 코스 길이를 입력받는다 2. 이동거리 K가 코스의 길이의 합 sum보다 큰경우와 작은경우를 나눠서 계산한다. 3. K가 sum보다 크거나 같다면 편도를 지났다고 가정하고(K-=sum) 벡터를 거꾸로 순회하면서 현재 코스를 찾는다. K가 sum보다 작다면 벡터를 순회하면서 현재 코스를 찾는다. 코드 #include #include #include #include #include #include using namespace std;..

label 태그와 그 역할 태그사이에 위치한 text, checkbox, radio 등 클릭 가능 영역이 텍스트로 확장됩니다 label for 속성을 통해 다른 요소와 결합할 수 있으며, 이때 요소의 for속성값은 결합하고자 하는 요소의 id 속성값과 같아야 합니다. 이러한 요소는 브라우저에 의해 일반적인 텍스트로 렌더링 되지만 사용자가 마우스로 해당 텍스트를 클릭할 경우 과 연결된 요소를 곧 바로 선택할 수 있어서 사용자의 편의성을 높일 수 있습니다. 사용예시 label의 for 속성이 input의 id속성과 일치하므로 “분” 텍스트를 클릭해도 input에 focus가 맞춰지는 것을 볼 수 있습니다. 분/시 변환기 분: setMinute(e.target.value)} /> 사용예시 2 label 태그의..

여러 프로젝트를 동시에 하다보니 각 프로젝트마다 node 버전이 달라서 각각 관리를 해줘야하는데 그 방법을 알아본 후 공유해보려고 합니다. NVM window환경에서 Node.js의 버전을 관리하고 개발 환경에 따라 버전을 변경하기 위해 사용하는 것이 NVM입니다 NVM은 Node Version Manager의 약자로 말 그대로 node의 버전을 관리해주는 툴입니다. NVM은 ubuntu, Mac, Window WSL 플랫폼에서 작동합니다. 우리가 보통 사용하는 window에서는 사용하는 방법이 조금 다르기에 window에서 리눅스를 설치해서 사용하거나 아래의 방법으로 사용하실 수 있습니다. NVM을 사용하는 이유 다양한 협업시에 여러 버전의 Node를 쉽게 사용할 수 있습니다. (기존의 버전을 삭제할 ..

세 번째 SOPT에 도전한 끝에 좋은 결과를 얻었습니다. 2학년때는 서류탈락, 3학년때는 면접에서 낙방, 마지막 4학년때결국 합격 통보를 받았네요. 대학생활을 끝마치기 전에 꼭 한번 SOPT라는 동아리를 경험해 보고싶었기에 서류기간이 나오자마자 지원서를 쓰기 시작했고 많은 노력을 기울여서 서류를 붙어 면접을 보게 되었습니다. 중요한건 꺾이지 않는 마음입니다. 제 글을 읽고 이후에 지원하시는 모든 분들이 좋은 결과를 받길 바랍니다. 사실 붙지 않더라도 세번의 도전동안 많이 성장하고 배웠기때문에 이 글을 작성하려고 했는데 작성하고 임시 저장해둔 상태에서 합격 통보 문자를 받았네요. 매 면접준비때마다 제가 한 프로젝트나 공부한 것들을 되돌아보면서 되돌아보는 시간도 갖게 되고, 또 새로운 기술질문을 대비해서 C..

팀 프로젝트를 진행하는 도중 매일 9시부터 10분씩 데일리 스크럼을 하는데 팀원 한분이 저에게 왜 proccess.env.PUBLIC_URL을 사용하냐고 여쭤보시더군요. 일반 public/asstes/ ,,, 으로 사용해도 되는데 말이죠 분명 저는 전자로 배우고 사용했었는데 막상 질문 받으니 한마디도 할 수 없었어요. 그래서 CRA(create-react-app)의 문서를 뒤져보고, stack overflow와 github의 create-react-app/issue 도 참고하여 이해한 것을 바탕으로 글을 적어봅니다. create-react-app은 CRA로 명칭해서 글을 작성하겠습니다. 1. public폴더와 src폴더 이 문제를 시작하기 앞서 CRA을 통해 만들어진 파일 구조와 쓰임을 확인해보겠습니다...

React API 연동하기 1번 과정에서 상태관리를 위해 사용했던 useState대신에 useReducer를 사용해보겠습니다. useReducer를 사용했을 때의 좋은 점 1. useState의 setState 함수를 여러번 사용하지 않아도 돼서 코드의 길이가 짧아진다. 2. reducer로 로직을 분리하면 재사용이 용이하다. 결과 User.js import React, { useEffect, useReducer } from 'react'; import axios from 'axios'; const reducer = (state, action) => { switch (action.type) { case 'LOADING': return { loading: true, data: null, error: nul..

1.React에서 API를 사용해보기 1.1 API 연동의 기본 API연동을 위해서 우선 새 프로젝트를 만들어야 한다. npx create-react-app react-api-use API를 호출하기 위해서 axios 라는 라이브러리를 설치한다. cd react-api-use npm install yarn // yarn add axios axios를 사용하여 GET, PUT, POST, DELETE 등의 메서드로 API요청을 할 수 있다. API연동 실습에는 JSONPlaceholder 에 있는 연습용 API를 사용해볼 것이며 API는 https://jsonplaceholder.typicode.com/users 주소이다. 결과물 [ { "id": 1, "name": "Leanne Graham", "use..

0. 우선순위 큐(priority Queue)란? Priority Queue는 Container의 한 종류이며 일반 queue는 First In First Out인 것에 반해 설정된 우선순위에 따라 우선순위가 가장 큰 것이 Top을 유지하고 먼저 Out(pop)된다. 내부적으로는 Heap의 자료구조를 갖고있다. 1. 기본 사용법 1.1 헤더 우선순위 큐는 queue를 include 하여 사용한다. #include 1.2 선언 priority_queue pq; 구현체와 비교연산자는 각각 vector와 less가 default 값이다. 자료형 : int, double등 기본 자료형 뿐만 아니라 구조체, 클래스 등 다양하게 사용 가능 컨테이너 : 요소를 저장하는데 사용할 기본 컨테이너 유형. (보통 vecto..

문제 요약 주어진 식에 괄호를 적절히 쳐서 식의 값을 최소로 만드시오. 가장 처음과 마지막은 숫자이며 두 개 이상의 연산자가 나타나지 않으며 5자리보다 많이 연속되는 숫자는 없다. 접근 1. -뒤에 무조건 괄호를 넣어서 계산한다. 2.1. -가 나오면 괄호를 닫고 그 후 -를 계산한다. 2.2 +가 나오면 괄호를 유지한 채로 큰 수를 만들어 -를 계산한다. 코드 #define _CRT_SECURE_NO_WARNINGS #include #include #include #include using namespace std; string str; int N; int main() { cin >> str; int result = 0; string num; bool isMinus = false; //-기호가 나왔는지..