전체 글

개요폰 노이만 컴퓨터 구조가 등장하기 이전의 컴퓨터들은 스위치를 직접 설치하고 전선을 연결하여 데이터를 주고 받는 식으로 프로그래밍 해야 했기 때문에 융통성이 매우 낮고 진공관/스위치 등 많은 부품이 쓰여 전력이 엄청나게 소모되었다. 이런 문제를 해결하기 위해 폰 노이만이라는 수학자가 프로그램과 데이터를 모두 기억장소에 저장하여 실행하는 프로그램 내장방식 (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를 그대로 가져가고, 나머지 필수적인 것들만 최소한으로 설정하는 것이 목표이다.  이 상태에서 필요한 준비물플러터타겟 디바이스  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 to develop Flutter ..

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

리트코드를 풀때 문제에 such that 이라는 구문이 많이 나온다. 그리고 대학 수학을 배울때도 such that 이라는 구문이 많이 나왔다. 대충 감은 오는데 정확히 어떤 뜻으로 해석해야 하는 걸까? "다음에 오는 것을 만족하는" 이라고 해석하면 가장 적합하다. 리트코드 15. 3SUM 문제 Given an integer array nums, return all the triplets `[nums[i], nums[j], nums[k]]` such that `i != j`,` i != k`, and `j != k`, and `nums[i] + nums[j] + nums[k] == 0`. 해석 정수 배열 nums가 주어졌을때 모든 3원소집합 `[nums[i], nums[j], nums[k]]`을 리턴해라..

서론 이미지 데이터를 서버에서 받아올때, 이미지 src 태그로 바로 사용할 수 있는 string 형태로 바로 받아올 수 있는 것이 아닌, 이미지 데이터 정보 + 이미지 파일 다운로드를 통해 이미지를 화면에 띄울 수 있다. 1. 이름, 날짜 등이 포함되어있는 이미지 데이터 api를 먼저 호출 2. 이미지를 받아오기 위한 이미지 파일을 다운로드하는 api를 호출 두 가지를 api를 활용해서 화면에 이미지를 띄운다. 문제 이미지 목록을 화면에 띄울때 string 형태의 이미지 관련 데이터만 띄우는 것이 아닌 이미지 파일을 다운로드 받아서 화면에 표출해야하니, 이미지 데이터 목록을 먼저 쿼리로 받아오고, 받아온 목록 정보로 이미지 파일을 다운로드 받고나서 화면에 렌더링하게 했다. 그랬더니 전체 이미지가 다운받아..