분류 전체보기

프로젝트의 의존성 패키지를 최신 버전(latest version)으로 업데이트 하려고했다. npm update라는 명령어를 쳐서 업데이트를 했는데 package.json 파일에 새로운 버전으로 업데이트가 절~대 되지않았다.   에러메시지가뜨고 npm audit 으로 점검해보라더니 fix --force 를 해도 package-lock.json에만 몇몇 변경사항이 뜨고, 특정 패키지를 update하래도 그 패키지는 package-lock에도 업데이트가 안되고 다른 엄한 패키지들만 업데이트가 되어 있었다.  알고보니 의존성 패키지를 `최신 버전으로` 업데이트하는 명령어는 `npm update`가 아니었다;;  npm update npm-update 는 package.json에 정의된 최신버전까지만 업데이트 된..

상황 turbo라는 패키지를 global로 설치했는데, terminal에서 찾을 수 없는 명령어라는 에러가 계속 떴다. npm list -g 명령어로 어떤 패키지들이 global로 깔려있는지 확인하면, 잘 나온다.    문제패키지를 설치했지만 command not found 에러를 계속 마주한다면, 환경변수 문제이다.  해결 글로벌 패키지의 실행파일이 위치하는 경로를 환경변수에 추가해서, 명령어를 어디에서든지 사용할 수 있게 한다.zsh 쉘의 configuration file (설정 파일)인 `.zshrc` 파일에 환경변수를 추가한다. 현재 npm global path를 알아내기 npm config get prefix 그럼 npm global 패키지가 설치되어있는 경로가 나온다. .zshrc 파일을 수정..

상황1번째 api 요청 결과에 따라서 2번째 api가 처리되도록 동기적으로 실행순서를 보장하고 싶다. 1번째 api 사용자가 입력한 비밀번호가 기존 비밀번호와 일치하는지 확인 //사용자 비밀번호 확인 checkCurrentPassword: builder.mutation({ query: (password: string) => ({ url: 비밀번호확인 요청 주소, method: 'POST', headers: { 'Content-type': 'text/plain', }, body: password, }), }), 2번째 api사용자 비밀번호를 변경//비밀번호 변경updatePasswordQuery: b..

목표플러터 APP에서 webview_flutter 플러그인을 사용해서 최소한의 코드로 리액트 웹페이지를 띄운다. 플러터 프로젝트 준비https://hanaindec.tistory.com/entry/flutter-%EC%9B%B9%EB%B7%B0#2.%20%ED%94%8C%EB%9F%AC%ED%84%B0%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%20%EC%83%9D%EC%84%B1-1 flutter 설치 및 개발 환경 설정 - VS Code, Android Studio 환경 (Mac silicon)플러터로 앱 개발을 해보려고 플러터를 설치하고 필요한 환경을 구축해보았다.나는 원래 웹 프론트 개발자이므로 VS Code는 설치되어있어 앱 개발 editor도 VS Code를 그대로 ..

개요폰 노이만 컴퓨터 구조가 등장하기 이전의 컴퓨터들은 스위치를 직접 설치하고 전선을 연결하여 데이터를 주고 받는 식으로 프로그래밍 해야 했기 때문에 융통성이 매우 낮고 진공관/스위치 등 많은 부품이 쓰여 전력이 엄청나게 소모되었다. 이런 문제를 해결하기 위해 폰 노이만이라는 수학자가 프로그램과 데이터를 모두 기억장소에 저장하여 실행하는 프로그램 내장방식 (stored program concept)라는 개념을 도입하였다.  폰 노이만  컴퓨터 구조폰 노이만 컴퓨터 구조는 제어장치, 산술·논리 연산장치, 기억·저장장치, 입력장치, 출력장치로 구분할 수 있다. 크게 보면 중앙처리장치 (CPU), 메모리, 프로그램 세 가지로 구성되어 있으며 폰 노이만 구조의 핵심은 CPU와 메모리를 분리하여 명령어를 읽고 데..

우리 서비스의 주소찾기 기능은 주소 + 위/경도 정보도 함께 받아와야 한다.  주소찾기는 daum에서 제공하는 무료 우편번호 검색 서비스 api를 사용했고, 위/경도 정보는 카카오에서 제공하는 무료 로컬 API 를 사용해서 구현했다.  다음 우편번호 검색 api는 쌩 js로 구현되어있다. 이를 react 환경에서 구현하기 위해서 react-daum-postcode 오픈소스 패키지를 활용하여 개발하였다.   리액트 페이지에서 pop up 형태로 우편번호 찾기 api를 띄우려면 우선 아래의 코드가 필요하다.아래 두 개 파일 코드만 있으면 우편번호 검색 서비스를 팝업으로 띄울 수 있어 해당 패키지를 npm install로 따로 설치하진 않고 프로젝트 내부에 파일로 추가해주었다.  loadPostcode.tsD..

서론사내에서 사용자에게 이메일 발송하는 템플릿을 만들기위한 html 작업을 했다. 그런데 a 태그로 만든 버튼이 바로 가운데 정렬이 안되는 것이다. 어떤 때는 text-align 속성으로 가운데 정렬이 되고, 어떤 때는 안되는 경우가 있었는데 오늘 그 이유를 확실히 알았다! 이슈사항 a 태그로 만든 버튼이 가운데 정렬이 되지않는다. html 코드 이메일 인증하기 style 코드해당 a 태그의 부모는 body > main > section 이 전부이고, a 태그에 영향을 미칠만한 스타일링 속성은 따로 없다. a 태그에 `pillButton`이라는 클래스를 줘서 버튼 모양의 스타일링을 주었다. 그리고, 가운데 정렬을 하기위해서 a 태그에 text-align: center 를 주었다. 그런데!! 위에서 캡처한..

서론 회원가입 페이지를 프론트에서 리액트로 제작했다. 사실상 우리 프로덕트 시나리오에 따르면 회원가입 페이지는 모바일 앱 내부의 웹뷰로 띄워지는 모바일에 종속된 화면이다. 그렇지만 모바일 앱이 개발되기 이전에 웹페이지에 자체에서도 해당 기능들이 독립적으로 동작할 수 있도록 웹에서의 임시적인 시나리오로 해당 페이지를 만들었다. 그리고 모바일 앱 개발이 완성되고, 내가 만들어놓은 웹페이지를 웹뷰로 올리는 작업을 했다. 개발 환경 모바일: flutter, 웹뷰 패키지 flutter inappwebview 웹프론트: react 이제 내가 제작한 웹페이지가 아래와 같이 두 가지 시나리오로 나뉘게 된 것이다. 1. 모바일 웹뷰에서 띄워졌을 때 2. regular 웹 브라우저에서 동작할 때 따라서 기존 리액트 페이지..

플러터로 앱 개발을 해보려고 플러터를 설치하고 필요한 환경을 구축해보았다.나는 원래 웹 프론트 개발자이므로 VS Code는 설치되어있어 앱 개발 editor도 VS Code를 그대로 가져가고, 나머지 필수적인 것들만 최소한으로 설정하는 것이 목표이다.  이 상태에서 필요한 준비물플러터타겟 디바이스VS Code에서 플러터 개발환경 셋팅 1. Flutter 설치하기 플러터 공식문서를 참고해서 플러터를 설치해준다.https://docs.flutter.dev/get-started/install/macos/mobile-android?tab=download#install-the-flutter-sdk Start building Flutter Android apps on macOSConfigure your system..

이제 곧 내가 프론트엔드 개발자로 일한지 만 1년이 다 되어간다. 1년이 되어가는 상황에서 나중에는 희미해져버릴 기억들을 적어보려 한다. 3개월 단위로는 꾸준히 회고를 적어왔다. 그래서 이번 회고에서 1년 동안 한 일을 다 합쳐서 리스팅 해보는 것 보다는 2024년이 되고난 지난 3개월동안 해온 것을 한 번 정리해보려고한다. 해온 것1. 코드리뷰동료의 코드를 읽고 서로 코드리뷰를 하기 시작했다. 원래는 코드리뷰 문화가 없어서 동료의 코드를 거의 보지 못하고 내가 맡은 부분을 개발하기에 급급했는데, 코드리뷰 문화를 도입하고 남이 짠 코드를 읽는 능력을 기르고있다. 1월부터 하기 시작했는데, 처음에는 남이 짠 코드를 이해하기 시간이 굉장히 오래걸렸다.. 그리고 코멘트를 달때도 이 말이 설득이 가능한지, 상대..