전체 글

서론사내에서 사용자에게 이메일 발송하는 템플릿을 만들기위한 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월부터 하기 시작했는데, 처음에는 남이 짠 코드를 이해하기 시간이 굉장히 오래걸렸다.. 그리고 코멘트를 달때도 이 말이 설득이 가능한지, 상대..

리트코드를 풀때 문제에 such that 이라는 구문이 많이 나온다.그리고 대학 수학을 배울때도 such that 이라는 구문이 많이 나왔다. 대충 감은 오는데 정확히 어떤 뜻으로 해석해야 하는 걸까? "다음에 오는 것을 만족하는" 이라고 해석하면 가장 적합하다. 예제1.문제 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 형태의 이미지 관련 데이터만 띄우는 것이 아닌 이미지 파일을 다운로드 받아서 화면에 표출해야하니, 이미지 데이터 목록을 먼저 쿼리로 받아오고, 받아온 목록 정보로 이미지 파일을 다운로드 받고나서 화면에 렌더링하게 했다. 그랬더니 전체 이미지가 다운받아..

사건의 발단원래 티스토리에서 제공해주는 기본 스킨 중 가장 심플하고 맘에 드는 애로 골라서 약간의 커스터마이즈를 해서 사용했었다.그런데 글을 쓸때마다 bullet point 간격이 제멋대로임 + 텍스트 줄 간격 사이가 너무 가까워 가독성이 매우 매우 안 좋았다.또 이상하게 폰트크기를 제목으로 설정하면 줄 간격이 어떤 곳은 엄청 크고 어디는 아예 줄간격이 안생기고... 블로깅하는데 올리기 전에 미리보기로 백만번 열었다 닫았다 올리기 전에 비교해서 보다보니 슬슬 참을 수 없는 지경이었다.그래서 잘 만들어진 오픈 소스 스킨을 도입하기로 마음먹었다..!! 기존 스킨에서 인라인 코드를 적용했던 방법개발자들 사이에서 꽤나 유명한 hELLO 스킨을 가져다 적용했는데.. 문제가 한 가지 있었다.이 스킨을 적용하기 이..

프로젝트 폴더구조 📦public ┣ 📂policy ┗ ┗ 📜service.html 📦src ┣ 📜App.tsx ┣ 📂assets ┃ ┣ 📂fonts ┣ 📂components ┣ 📂containers ┗ ... 시도한 방법 1. vite.config.ts 파일에 html 경로 지정 ❌ https://ko.vitejs.dev/guide/build.html#multi-page-app build: { rollupOptions: { input: { main: resolve(__dirname, 'index.html'), public: resolve(__dirname, 'public/policy/service.html'), }, }, }, 2. iframe 에서 src 로 띄우기 https://ko.vitejs.de..