FoO의 개발 블로그

공식 문서를 따라 환경을 구축 해보자. Conda 설치 및 가상환경 활성화Conda 설치파일 레포지토리에서 설치 파일을 다운로드 한다.내 환경은 우분투 22.04이기 때문에 최신 리눅스 버전을 curl로 땡겨왔다.curl --output anaconda.sh https://repo.anaconda.com/archive/Anaconda3-2024.06-1-Linux-x86_64.sh sha256sum로 파일 해시를 따서 다운로드 페이지에서 제공하는 해시와 비교해 검증할 수 있다.sha256sum anaconda.sh 해시가 일치한다면 무사히 파일이 다운로드 된 것이고 다운로드 된 sh 파일을 실행시키면 conda 설치가 시작된다.설치가 끝난 뒤에 conda init을 하면 필요한 설정이 ~/.bashrc ..

JavaScript의 scope(스코프)는 변수와 함수의 접근성과 생존 기간을 결정하는 규칙이다. 스코프의 종류전역 스코프(Global Scope)함수 스코프(Function Scope)블록 스코프(Block Scope)렉시컬 스코프(Lexical Scope)스코프와 관련된 개념들스코프 체인(Scope Chain)호이스팅(Hoisting)클로저(Closure) 전역 스코프(Global Scope)코드의 가장 바깥쪽에 선언된 변수나 함수어디서든 접근 가능과도한 사용은 네임스페이스 오염을 일으킬 수 있음 함수 스코프(Function Scope)함수 내부에 선언된 변수var 키워드로 선언된 변수에 적용해당 함수 내에서만 접근 가능function exampleFunction() { var functionS..

call, apply, bind 메서드는 JavaScript에서 함수의 this 값을 명시적으로 지정하고 함수를 호출하는 방법을 제공한다. Function.prototype의 메서드이므로 모든 (화살표함수를 제외한)함수에서 사용할 수 있다.  call 메서드syntax: func.call(thisArg, arg1, arg2, ...)주어진 this 값과 개별적으로 제공되는 인수들로 함수를 호출function greet(greeting) { console.log(`${greeting}, ${this.name}`);}const person = { name: "Alice" };greet.call(person, "Hello"); // 출력: Hello, Alice apply 메서드syntax: func.a..

항상 Next.js에서 자동으로 설정해주는 환경을 쓰다보니 기초적인 개념이 확고하지 않아 정리하고 간다. Script 태그의 속성들1. 기본(속성 없음)HTML 파싱을 중단하고 스크립트를 즉시 다운로드 및 실행스크립트 실행이 완료될 때까지 HTML 파싱이 재개되지 않음2. async 속성스크립트를 비동기적으로 다운로드HTML 파싱과 병렬로 다운로드 진행다운로드가 완료되면 HTML 파싱을 중단하고 즉시 스크립트를 실행여러 스크립트가 있을 경우 다운로드 완료 순서대로 실행3. defer 속성스크립트를 비동기적으로 다운로드HTML 파싱과 병렬로 다운로드 진행HTML 파싱이 완료된 후에 스크립트 실행여러 스크립트가 있을 경우 HTML에 작성된 순서대로 실행4. type="module" 속성스크립트를 ES6 모듈..

극초기 스타텁 초기 멤버로 일하면서 벌써 4번째 랜딩 리뉴얼을 하고 있다. 첫 랜딩은 되는대로, 두번째도 되는대로, 세번째는 부스 직전에 3일만에 만들고 이번에는 개발하는데 일주일 정도 걸린 것 같다. 기존 랜딩페이지는 홈, 회사 소개, 제품 소개로 구성되어 있었고 이번에는 간결하게 원페이지에 제품 소개만 담는 방향으로 가기로 했다. 랜딩은 규모가 작아서 매번 다양한 UI 라이브러리를 써보고 있다. tailwindcss, chakra-ui를 거쳐 이번엔 panda css와 framer-motion의 조합으로 진행했다. 보통 Next.js를 기본으로 사용했는데 한번은 Svelt를 썼다가 팀원들의 항의에 다시 Next.js로 돌아왔다. 소기업에서 괜히 기술 스택 늘리지 맙시다.   개발이 끝났다면 이제 KP..

다형성 다형성이라는 말은 이번에 처음 들어봤지만 생각보다 이해하기 쉬웠다. 짧게 말하면 어떤 객체를 다른 객체로 선언할 수 있다는 것이다. Student bonbon = new Student(); Person bonbon = new Student(); 위처럼 객체를 Person 타입으로 선언했지만 Student로 초기화할 수 있다. 대박~ 그런데 다 되는 것은 아니다. ㄱ- 위키백과의 다형성 정의는 이렇다. 프로그램 언어의 다형성(多形性, polymorphism; 폴리모피즘)은 그 프로그래밍 언어의 자료형 체계의 성질을 나타내는 것으로, 프로그램 언어의 각 요소들(상수, 변수, 식, 오브젝트, 함수, 메소드 등)이 다양한 자료형(type)에 속하는 것이 허가되는 성질을 가리킨다. 반댓말은 단형성(mono..

계기 무작정 OpenCV 박치기를 해보니 openCV의 이미지파일이 numpy 배열이라는 것을 알게 되었다. 하지만 알아봤자 대체 rgba가 어떤 식으로 펼쳐져 있는지, 파이썬에서 어떻게 배열을 다뤄야하는지 몰라 난항을 겪고 있다. 일단 뭘 하는지 알아내기 위해 각 채널 별 배열부터 알아보자. OpenCV의 채널 openCV에서 이미지 파일을 읽을 때 cv2.imread() 함수를 사용한다. 첫 번째 인자는 파일의 주소이고 두 번째 인자는 flag다. flag에 따라 이미지를 불러 올 때 채널 값이 바뀐다. 채널은 불러온 이미지에.shape를 하여 얻은 배열의 3번 째 값이다. cv2.IMREAD_COLOR 혹은 1 : 이미지를 Color로 읽음. 투명 무시. Default. cv2.IMREAD_GRAY..

최근 개발 중이던 Next.js 프로젝트에서 핵심 로직을 떼서 패키지화 하기로 했다. 아직 패키지 제작 경험이 없기도 해서 Next.js보다 그냥 React.js를 사용해 클라이언트 컴포넌트, 훅 정도로 제공할 생각이다. 그 중에서도 핵심 로직은 서버에서 돌리고 싶긴 하지만 d3와 함께 사용하면서 클라이언트에서만 돌릴 수 있는 로직과 서버로 숨기고 싶은 로직이 끈적끈적하게 섞여 있는 상태라 차차 고민할 문제로 미뤄 놓았다. 나중엔 만들어둔 패키지를 또 서버 패키지와 클라이언트 패키지로 분리할 같기도.. 몇 개월 동안 몇 개 프로젝트를 하면서 새로운 프론트 프레임워크나 라이브러리 도입이 없었기 때문에 이번엔 좀 핫하다는 vite와 yarn berry(pnp), chakra.ui를 사용하기로 했다. 기존에는..