평범한 개발자

빠른 개발 + 웹과 앱에서 모두 사용할 수 있는 어플을 개발을 위해 나름대로 판단 내린 React-Native(RN) + Webview 기술 스택 하나 ios 나 android 기기를 연결해 웹뷰 형태로 개발 시 로컬의 변경사항이 바로 반영되지 않아서 불편함을 겪었다.. webview uri에 localhost:3000 번을 넣어 봤지만 당연히 되지 않는다.. 해결방법은 간단하다. webview의 uri 속성에 IPv4 주소를 넣어주면 된다. 노트북과 핸드폰이 같은 와이파이를 사용하고 있다는 가정하에 사용하고 있는 컴퓨터의 ip주소를 가져오면 되었다~ 핸드폰과 노트북이 같은 와이파이를 사용하고 있어야 하는 이유 같은 Wi-Fi 네트워크에 연결된 기기들은 로컬 네트워크 상에서 서로 통신할 수 있습니다. 이..

경쟁상태(Race Condition) 경쟁 상태(Race Condition)는 둘 이상의 스레드나 프로세스가 공유된 자원(예: 변수, 메모리 등)에 대해 동시에 접근하고 변경하는 경우 발생할 수 있는 문제입니다. 이 경우, 어떤 스레드나 프로세스가 먼저 접근하여 변경한 값을 다른 스레드나 프로세스가 무시하거나, 올바르지 않은 값을 사용하는 등의 문제가 발생할 수 있습니다. 예를 들어, 두 개의 스레드가 동시에 같은 변수에 접근하여 값을 증가시킨다고 가정해보겠습니다. 만약, 첫 번째 스레드가 값을 증가시키기 전에 두 번째 스레드가 변수에 접근하여 값을 변경한다면, 첫 번째 스레드가 기대한 값이 아닌 변경된 값으로 변수를 증가시키게 됩니다. 이러한 문제를 경쟁 상태라고 합니다. JavaScript에서도 멀티..

프로그래밍의 핵심은 유저들에게 가치를 제공하는 것 개발자는 자신이 기술자라고 생각해서는 안된다. 너무 구체적인 것에 집중해선 안됩니다. 소비자에게 더 나은 가치를 제공하여 그들의 불편함을 해소할 수 있는 것을 개발해야 합니다. 개발자는 “세상을 어떻게 더 좋게 만들 수 있을까“라는 고민을 해야만 합니다. 당신이 더 좋은 제품을 만들 수 있다면 세상은 더 좋은 곳이 될 수 있을 겁니다. 특정한 아키텍처나 기술 또는 코드 시퀀스에대해 약간의 자부심을 가지는 것은 좋습니다. 그러나, 최우선적으로, 제품이 가치를 줄 수 있는 가를 생각해야 좋은 프로그래머라고 할 수 있습니다. 개발자는 유저를 위해 일을 해야합니다. 그리고 기술적 역량이 있다면, 최소한의 노력으로 가장 많은 가치를 제공하는 디자인을 만들어 내야 ..

마이그레이션 의사 결정 결과 aws lambda를 이용해 backEnd에서 색상을 추출하는 방식을 FE에서 모두 처리 서버비용 절감 Rust를 사용한 WebAssembly 도입 및 사내 시스템화 기존 방식 filedId & sliceId를 넘겨 backend에서 컬러를 추출해 보여주는 방식(sliceApi) 적용 방식 Rust & wasm-pack을 이용해 wasm 모듈 생성 wasm 모듈이 적용된 webworker를 생성 해당 webworker에 메세지를 주고 받으며 데이터 교환 도입이유 이미지에서 색상 데이터를 추출하여 추천 색상을 찾는 것은 기존에도 가능했지만, 이 과정에서 많은 계산 작업이 필요하고, 이는 웹 페이지의 성능에 영향을 미칠 수 있습니다. WebWorker는 백그라운드 스레드에서 작업..

자바스크립트는 브라우저에서 실행되는 스크립트 언어입니다. 이 언어는 변수, 함수, 객체 등의 요소를 이용하여 동적인 웹페이지를 만들기 위해 사용됩니다. 자바스크립트의 동작 원리와 메모리 관리는 다음과 같습니다. 1. 동작 원리 자바스크립트는 클라이언트 측에서 동작하며, 실행 순서는 다음과 같습니다. 스크립트 파일을 다운로드합니다. 파싱(parsing) 과정에서 코드를 읽어들이고 문법적으로 검사합니다. 실행 엔진(execution engine)이 코드를 실행합니다. 실행 과정에서 발생하는 이벤트를 처리합니다. 실행이 완료되면 메모리에서 삭제됩니다. 2. 메모리 관리 자바스크립트는 가비지 컬렉션(garbage collection)을 이용하여 메모리를 관리합니다. 가비지 컬렉션이란, 사용하지 않는 메모리를 자..

컴파일 언어: 컴파일 언어는 소스 코드를 기계어로 미리 변환하는 과정을 거친 다음, 이를 실행합니다. 이때 변환된 기계어 코드는 실행 속도가 빠르고, 컴파일된 코드는 반복적으로 사용될 수 있어서 실행 속도가 빨라집니다. 대표적인 예시로는 C, C++, Java 등이 있습니다. 인터프리터 언어: 인터프리터 언어는 소스 코드를 실행하는 동안에 한 줄씩 해석하여 실행합니다. 이 때문에 컴파일 언어보다 실행 속도가 느리지만, 컴파일 언어에서 발생하는 컴파일러의 오류 등이 없기 때문에 디버깅이 쉽습니다. 대표적인 예시로는 Python, Ruby, JavaScript 등이 있습니다. 인터프리터 언어와 컴파일 언어는 각각의 장단점이 있습니다. 인터프리터 언어는 실행 시간에 코드를 해석하기 때문에, 즉석에서 코드 수정..

무분별한 lint 정렬로 인한 헤맴... lint 오류 무시...(lint에러 좀 해결하자 ^^ 구글링하면 다 나온다) 편견에 덮인 오류 찾기 애초에부터 개발자 도구로 번들링 된 파일에 CSS가 script가 빠져있다는 것을 확인하지 않은 것에 대해 자괴감이 들었다...! 그것도 모르고 노드 버전이니 npm 캐시 문제니 getSiteControl 문제이니... 앞으로 문제가 생기면 문제가 생긴 지점부터 그 아래 구동원리를 파악 하자..! 해결방법을 지엽적으로 생각하지 말자 빠르게 하지 말고 그 밑에 돌아가고 있는 구조부터 파악하자..! 그리고 모르는 것은 물어봐도 된다. 사냥개 같이 집요하게 문제를 자발적으로 해결하려는 것도 중요하지만 조직 전체로 봤을 때 리소스 낭비이다. 그러니 오늘 깨달은 점을 실천..

개발 작업은 개발자의 컴퓨터에서 코딩하고 테스트 후에 문제가 없으면 서버에 배포한다. 서버에서 프로그램을 구동시키기 위해선 개발자의 컴퓨터 환경과 호환이 되는 실행환경(버전)이 세팅이 되어있어야 한다. ex) 노드, 파이썬, mysql 등의 버전 이러한 호환을 맞추기 위해 여러 공수가 들어갈 수가 있다..! 이를 해결하기 위한 방법은 여러 가지 방법이 있지만 현재 가장 보편적으로 많이 쓰이는 것이 바로 도커이다! 도커의 컨테이너는 개발자가 코딩을 하고 서버에 배포할 때 코드와 설계도를 같이 서버에 보내면 서버는 그 설계대로 컨테이너들을 설치해 서비스를 실행할 수 있게 해 준다. 1. 매번 환경을 세팅할 공수를 해결해준다. 2. 도커 허브에선 세팅해 놓은 환경을 가져올 수 있다! 3. 이렇게 세팅해놓은 환..

ESM(ES Modules)가 등장하기 전까진 Javascript 모듈화를 네이티브 레벨에서 진행할 수 가 없었습니다. 따라서 개발자들은 번들링(bundling)이라는 우회적인 방법을 사용할 수 밖에 없었습니다. (번들링: 모듈화된 소스 코드를 브라우저에서 실행할 수 있는 파일로 한데 묶어 연결해주는 작업) 이 같은 상황에서 webpack, rollip 같은 도구로 번들링 작업을 하며 프론트엔드 개발자의 생산성을 향상 시켰습니다. 하지만, 1000개가 넘는 JavaScript 모듈이 있는 거대한 프로젝트라면 어떨까요? 실제로 이러한 상황을 어렵지 않게 마주할 수 있으며, 이 경우 Webpack과 같은 JavaScript 기반의 도구는 병목 현상이 발생하곤 합니다. (개발 서버를 실행하는 데 있어 비합리적..

웹팩 이전의 script 태그를 가져오는 방식 아래 방식의 단점 1. 변수 이름 충돌의 가능성 script 태그의 module 타입 사용하기 아래처럼 script 태그의 type의 module을 사용하면 변수 충돌 가능성을 배제시킬 수 있다. 각각의 word 변수는 각각 모듈 안에서만 유용하다 아래 방식의 단점 1. 오래된 웹브라우저에서 호환성이 낮다. 2. 자바스크립트 파일을 모두 다운로드 받아야 하므로 리소스 가 많이 든다. hello.js var word = "Hello"; export default word; world.js var word = "World"; export default word; 웹에서도 모듈의 개념을 사용하고, 여러개의 파일을 하나로 묶어 제공하고 싶다는 생각이 반영된 것이 바..