grace's dev_note

원소 간 다대다 관계를 가지는 구조로 계층적 구조나 망형 구조를 표현하기에 적절합니다. 그래프 그래프는 정점과 정점 사이를 연결하는 간선으로 이루어진 비선형 자료구조 입니다. 정점(Node) 집합과 간선(Edge) 집합으로 표현할 수 있습니다. 그래프는 우리가 흔히 쓰는 지하철 경로 탐색 등에도 사용되는 소프트웨어 개발에서 중요한 자료구조 중 하나입니다. 정점은 여러 개의 간선을 가질 수 있으며, 크게 방향이 존재하는 방향 그래프와 방향이 존재하지 않는 무방향 그래프로 나눌 수 있습니다. 간선은 가중치를 가질 수 있으며, 탐색 시 그래프의 정점과 간선의 집합에서 계속 순환 가능한 사이클이 있습니다. 때문에 탐색 시 무한루프에 빠지지 않도록 사이클을 잘 찾아줄 필요가 있습니다. 그래프의 종류 무방향 그래프..

단순 구조 정수, 실수, 문자열, 논리 자료형 같은 것들입니다. 선형 구조 한 원소 뒤에 하나의 원소만이 존재하는 형태로 자료들이 선형으로 나열되어 있는 구조를 가집니다. 배열(순차 리스트) 일반적으로 변수를 선언하면 메모리 상에 데이터가 기록되게 됩니다. 우리는 변수를 통해 기록된 데이터를 꺼내 쓸 수 있습니다. 연관된 데이터를 쓰기 위해서는 여러개의 변수를 선언하는 방법이 있지만 보통 이렇게 작성을 하지는 않습니다. 이런 상황에서는 배열을 사용하게 됩니다. 배열은 연관된 데이터를 연속적인 형태로 구성된 구조를 가집니다. 배열에 포함된 원소는 순서대로 index를 가지며, index를 사용해 조회하거나 데이터를 수정할 수 있습니다. 원하는 원소의 index를 알고 있다면 O(1)로 원소를 찾을 수 있습..

💡 알고리즘을 공부하고 문제를 풀 때 마음가짐 1. 항상 여러가지 풀이 방법이 있을 수 있다. 2. 항상 예외가 있을 수 있다 3. 내가 이미 푼 답을 최적화하는 방법을 항상 고민해야 한다. 4. 풀지 못했던 코드 또한 남겨두는 것이 좋다. 5. 다른 사람의 코드를 많이 봐야, 나의 생각에서 벗어나 새로운 사고를 할 수 있다. 6. 문제를 쉽게 포기하지 말고, 도저히 모르겠다면 답을 보고 시간이 지난 후 다시 풀어보는 것이 좋다. 7. 알고리즘 마스터가 될 필요는 없지만, 익숙해져야 한다. - 회사는 업무를 수행 할 수 있는 기초 능력을 확인하고 싶은 것이기 때문에 문제 해결 능력을 기르는 것이 좋다. - 예외적으로 알고리즘이 중요한 회사(게임, 인공지능 등의 분야)인 경우에는 중요하기 때문에 알고리즘/..

CI/CD는 간략히 말씀드리면 우리가 작성한 코드가 하나로 합쳐질 때마다 그 코드를 반영하여 배포해주도록 하는 빌드/배포 자동화 과정입니다! 이전에는 Jenkins, TravisCI 등을 많이 사용했지만 github에서 git Actions 기능을 추가하면서 github 하나만으로도 편리하게 협업이 가능해졌습니다🙂 github Actions+ AWS S3+EC2를 활용하는 방법도 있지만 소스코드 관리를 위해 S3를 추가적으로 사용하는 것은 비용적으로 부담이 되고 우리는 이미 docker를 사용하기 때문에 docker+EC2를 사용해서 배포하는 과정을 알려드립니다. Github Access Token을 Secret에 등록하기 github의 권한 인증이 token으로 변경된지가 벌써 꽤나 오래되었죠? 이제 ..

iOS와 iPadOS 13.4부터 시작된 Intelligent Tracking Prevention(ITP)에 대해서 먼저 알아봅시다. 웹사이트는 자체 도메인이 아닌 다른 도메인에서 이미지 및 스크립트 리소스를 가져올 수 있는데 이를 Cross origin, Cross-Site loading 이라고 한다. 그러나 이런 로딩은 사이트 간 추적을 가능하게 만듭니다. example-products.com과 example-recipies.com이 있다. 두 사이트 모두 example-tracker.com에서 리소스를 로드하고 example-tracker.com에 사용자의 쿠키가 저장되어 있는 경우 example-tracker.com에서 두 사이트의 정보를 추적할 수 있는데, 이를 교차 사이트 추적이라고 하며 ex..

사용자의 행동은 전적으로 비동기적입니다. 사용자가 언제 클릭할지, 터치할지, 또는 타이핑할지 전혀 알 수 없습니다. 하지만 비동기적 실행이 사용자 입력 하나 때문에 필요한 건 아닙니다. 사실 자바스크립트의 본성 때문에 비동기적 프로그래밍이 필요합니다. 자바스크립트 애플리케이션은 단일 스레드에서 동작합니다. 즉, 자바스크립트는 한 번에 한 가지 일만 할 수 있습니다. 멀티코어를 장착한 대부분의 최신 컴퓨터는 한 번에 여러 가지 일을 할 수 있고, 싱글코어 컴퓨터도 매우 빨라서 작업 A를 잠시 하고, 작업 B를 잠시 하고, 작업 C를 잠시 하는 식으로 멀티태스킹을 흉내 낼 수 있습니다. 사용자가 보기에는 세 가지 작업이 동시에 일어나는 것처럼 보입니다. 실제로 멀티코어에서 수행하지 않았더라도 말입니다. 자바..

함수는 자신이 존재하는 컨텍스트에 따라 다양한 모습을 취합니다. 우리가 가장 먼저 되짚어 볼, 가장 간단한 일면은 코드를 재사용하는 수단이라는 측면입니다. 서브루틴으로서의 함수 서브루틴은 아주 오래 된 개념이며 복잡한 코드를 간단하게 만드는 기초적인 수단입니다. 서브루틴은 반복되는 작업의 일부를 떼어내서 이름을 붙이고, 언제든 그 이름을 부르기만 하면 실행합니다. 서브루틴은 대개 어떤 알고리즘을 나타내는 형태입니다. 알고리즘이란, 주어진 작업을 수행하는 방법이죠. const year = new Date().getFullYear() if(year%4 !== 0) console.log(`${year} is NOT a leap year.`) else if(year%100 !== 0) console.log(`$..

Recoil은 업데이트된 state 부분만 리렌더를 해줍니다. Setting //app.tsx 파일 import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( //RecoilRoot로 모든 컴포넌트를 묶어주세요 ); } 사용 Recoil에서는 Atom으로 state의 일부를 보여줍니다. 컴포넌트들은 자신이 필요한 Atom을 참조하고 있습니다. 따라서 자신이 참조하고 있는 Atom에 변화가 있으면 해당 atom을 참조하는 모든 컴포넌트에 리렌더링이 일어납니다. // Atom const textState = atom({ key: 'textState..

이터레이터는 '지금 어디 있는지' 파악할 수 있도록 돕는다는 면에서 일종의 책갈피와 비슷한 개념입니다. 배열은 이터러블 객체의 좋은 예입니다. 배열에는 여러 요소가 들어 있으므로, 이터레이터를 사용할 수 있습니다. book이란 배열이 있고, 이 배열의 각 요소는 책의 한 페이지를 나타내는 문자열이라고 합시다. const book = [ "Twinke, twinkle, little bat!", "How I wonder what you're at!", "Up above the world you fly,", "Like a tea tray in the sky.", "Twinkle, twinkle, little bat!", "How I wonder what you're at!", ] 이제 book 배열에 valu..

예외 처리는 에러를 컨트롤하는 매커니즘입니다. 에러 처리라고 하지 않고 예외 처리라고 하는 이유는 예상치 못한 상황에 대처하는 방식이기 때문입니다. 예상한 에러와 예상치 못한 에러(예외)를 구분하는 기준은 불명확하고 상황에 따라 크게 달라집니다. Error 객체 자바스크립트에는 내장된 Error 객체가 있고 이 객체는 에러 처리에 간편하게 사용할 수 있습니다. Error 인스턴스를 만들면서 에러 메시지를 지정할 수 있습니다. const err = new Error('invalid email') Error 인스턴스를 만드는 것만으로는 아무 일도 일어나지 않습니다. 이 인스턴스는 에러와 통신하는 수단입니다. function validateEmail(email){ return email.mach..