개발자 퉁이리

자바스크립트 패키지 매니저 자바스크립트 패키지 매니저는 프로젝트에서 사용할 패키지에 대해 설치, 수정, 삭제 등을 도와주는 도구다. 최고의 오픈 소스 생태계를 가진 자바스크립트에서 패키지 매니저는 정말 중요한 존재이다. 최근에는 오픈 소스를 사용하지 않으면, 개발 진행이 안 될 정도로 유용하고 좋은 자료들이 너무 많이 개발되어있다. 그리고 서로서로 의존성이 높아서 하나를 받으면 다른 것을 받아야 하는 상황도 연출된다. 패키지 매니저를 통해 오픈 소스를 다운로드하게 되면 프로젝트 안에서 package.json에 목록이 저장되고, 후에 install 명령어를 통해 package.json 안에 있는 정보들을 손쉽게 다시 다운로드할 수도 있다. 그렇다면 패키지 매니저의 종류로는 무엇이 있을까? npm과 yarn..

CORS CORS는 Cross Origin Resource Sharing의 약자로 교차 출처 리소스 공유를 말한다. 날 너무나도 힘들게 하고 괴롭혔던 CORS CORS가 무엇인지에 대해서는 이전 포스팅에서 이미 다루었으므로 SKIP!! 오늘은 CORS를 proxy로 해결해보자. proxy로 CORS 해결하기 배포 : netlify WEB 배포를 netlify로 했는데 배포 후 서버에서 데이터를 불러오려고 시도하면 계속해서 CORS 오류가 발생했다. CORS가 무엇인지는 알고 그에 대한 해결법도 알고 있었지만 막상 직접 경험하니 머리가 새하얘졌다. 이전 프로젝트에서도 CORS를 만났는데 서버에서 받아오는 데이터를 그냥 저장하여 불러오는 식으로 해결했었는데 이번에는 정말 해결하고 싶었다. 나는 배포를 net..

Flexbox Flexbox는 반응형 레이아웃 및 구성 요소를 만드는 데 사용된다. Flexbox는 CSS3 레이아웃으로 사용자 인터페이스에 대해 최적화된 배치를 해준다. 지금부터 행과 열 형태로 레이아웃을 구성하는 Flexbox에 대해 알아보자 Flexbox 적용법 display : flex; 적용법은 간단하다. Flexbox를 적용하고 싶은 레이아웃에 대해 display 속성을 flex로 설정하면 된다. FlexBox를 설정하면 여러 속성을 활용하여 커스터마이징을 할 수 있다. 위 사진을 보면 여러 속성이 있는 것을 확인할 수 있다. 기본 Flexbox 속성들을 지금부터 알아보자. Flexbox 속성 main axis main-start | main-end main size cross axis cro..

※대학생이 공부하면서 작성한 글입니다※ ※이 글은 CRA로 만들었을 시 기준입니다※ env env는 API key, port, DB 등 민감한 정보를 환경변수에 담아 관리하는 방법이다. 🛑 env 주의사항 🔴 root 폴더에 생성해야 한다. root 폴더에 env 파일이 위치하지 않으면 정상적으로 작동하지 않는다. 🔴 변수명은 반드시 'REACT_APP_'으로 시작해야 한다. 'REACT_APP_변수명' 형식이 아닐 시, React가 인식하지 못하여 정상적으로 작동하지 않는다. *process.env.REACT＿APP＿는 예약어다. 🔴 .gitignore에 env를 등록해야 한다. .gitignore에 등록해주어야 git에 등록할 때, 파일이 올라가지 않는다. *기본으로 세팅이 되어있지만 확인해주도록 하..

인터페이스 인터페이스는 타입을 정의하는 강력한 방법으로 변수, 함수, 클래스의 타입을 정의할 수 있게 도와준다. 인터페이스는 변수, 함수, 클래스의 타입을 정의함으로써 일관성을 유지시켜주는데 크게 기여한다. 인터페이스가 어떻게 작동하는지 다음 예시를 통해 확인하자. interface Items { id: string category_id: string category_name: string name: string price: number } 위 예시를 보면 Items라는 인터페이스 안에 여러 변수가 들어있다. 그리고 각각 타입이 지정되어 있는 것을 확인할 수 있다. interface 형식 interface 이름 { 키: 타입 key : type } interface를 선언한 후 이름을 지정해준다. 그리고..

https://programmers.co.kr/learn/courses/30/lessons/92343?language=python3 코딩테스트 연습 - 양과 늑대 [0,0,1,1,1,0,1,0,1,0,1,1] [[0,1],[1,2],[1,4],[0,8],[8,7],[9,10],[9,11],[4,3],[6,5],[4,6],[8,9]] 5 [0,1,0,1,1,0,1,0,0,1,0] [[0,1],[0,2],[1,3],[1,4],[2,5],[2,6],[3,7],[4,8],[6,9],[9,10]] 5 programmers.co.kr ⊙ 문제 ⊙ 제한사항 ⊙ 입출력 예 ⊙ 입출력 예 설명 ⊙ 문제 접근 과정 백트래킹으로 풀자! 계속해서 양의 수와 늑대의 수를 비교! 같아지는 순간 return. 아니라면 다음 노드를..

https://www.acmicpc.net/problem/20055 20055번: 컨베이어 벨트 위의 로봇 길이가 N인 컨베이어 벨트가 있고, 길이가 2N인 벨트가 이 컨베이어 벨트를 위아래로 감싸며 돌고 있다. 벨트는 길이 1 간격으로 2N개의 칸으로 나뉘어져 있으며, 각 칸에는 아래 그림과 같이 1부 www.acmicpc.net ⊙ 문제 ⊙ 입력 ⊙ 출력 ⊙ 예제 입출력 ⊙ 알고리즘 분류 구현 시뮬레이션 ⊙ 문제 접근 과정 파이썬에서 회전 -> deque 라이브러리에 있는 rotate 함수 사용 1. 무한 반복문 생성 2. rotate(1) : 한 칸 회전 3. 로봇 내리는 위치라면 내리기 4. 이동 가능 여부 체킹 5. 가능하다면 이동 후 내구도 감소 6. 로봇 내리는 위치라면 내리기 7. 로봇 올..

Git mirror mirror를 사용하면 외부 소스와 리포지토리를 복사할 수 있다. git mirror를 사용하는 이유 그냥 복사를 하면 되지 않을까라고 생각할 수 있다. 그냥 복사를 진행하게 되면 커밋 기록을 잃게 된다. git mirror를 사용하면 커밋 기록을 잃지 않고, 리포지토리를 복사할 수 있다. 사용법 1️⃣ 복사할 리포지토리를 local에서 미러링 한다. git clone --mirror 2️⃣ 미러링이 되면 폴더가 생기는데 해당 폴더로 이동한다. cd 리포지토리.git 3️⃣ 복사를 진행할 새 레포지토리 URL을 입력하여 push 한다. git remote set-url --push origin 4️⃣ 마지막으로 push git push --mirror 위 과정을 순서대로 진행하면, 모..

inputmode inputmode 속성을 이용하면 input에 대한 요소, 가상 키보드를 지정하여 사용할 수 있다. inputmode 속성 none text (기본값) decimal numeric tel search email url 1️⃣ none 가상 키보드를 사용하지 않는다. 페이지가 자체 키보드나 입력 컨트롤일 때 사용한다. 2️⃣ text 사용자의 표준 입력 키보드가 나타난다. 3️⃣ decimal 소수점( , or . )을 지원하는 숫자형 키보드를 제공한다. 장치에 따라 음의 부호( - )의 제공 여부는 다르다. 4️⃣ numeric 숫자형 가상 키보드를 제공한다. (소숫점은 없다) 5️⃣ tel 전화번호 키보드를 제공한다. 숫자 0~9, 별표(*), 해시(#) 키를 포함한다. 6️⃣ sea..

FLUX FLUX는 FaceBook에서 고안한 단반향 데이터 흐름의 디자인 패턴이다. FLUX 패턴은 REACT Redux의 디자인 패턴으로 사용되고 있다. MVC 모델을 사용하고 있던 FaceBook에서 데이터가 많아지고, 복잡해지자 예상치 못한 오류들을 FaceBook에게 안겨주었다. 위 그림처럼 복잡해졌고, FaceBook은 이를 해결하기 위해 FLUX 패턴을 고안해낸다. FLUX 패턴 FLUX 패턴은 데이터를 보다 명확하게 구분하기 위해, MVC 복잡성을 해결하기 위해 데이터의 방향이 한쪽으로만 이동한다. FLUX 요소 Action Dispatcher Store View 🔥 Action Action은 데이터 상태 변경을 도와준다. Action 생성자는 type과 payload를 묶어 Dispatc..