맨땅에서 프론트엔드

이전 게시글 [NCP] 프론트 개발자가 '서버 이관'을 해보다정처기 시험이 드디어 끝났다!1회 시험을 안일하게 봤다가 불합격이 되어서, ONLY 정처기만 준비하며 시간을 보냈다. 예상 점수로는 합격인 것 같아서 살짝 들뜬 하루들을 보내고 있다.(얏호)스위mini-frontend.tistory.com 포폴용으로 사용하는 서버를 하나 띄웠는데서버를 계속 띄운다면 한 달에 8만원 정도가 나간다고 한다.(그 돈이면 애니 볼 라프텔을 결ㅈ ㅔ..) 엣헴 그런데 갑자기 띠용하고 의문이 들었다.서버를 계속 띄울 필요가 있나..? 다들 자는 시간에는 꺼두면 되지 않는가!? 마침 NCP에는 사용한 시간 당 서버 비용을 지불할 수 있도록 되어 있다.물론, 서버 생성 시점에서 시간 요금제로 설정하지 않으면 서버를 새로..

정처기 시험이 드디어 끝났다!1회 시험을 안일하게 봤다가 불합격이 되어서, ONLY 정처기만 준비하며 시간을 보냈다. 예상 점수로는 합격인 것 같아서 살짝 들뜬 하루들을 보내고 있다.(얏호)스위프 프로젝트가 끝나고 더이상 프로젝트가 사용되지 않아 서버를 닫기로 하였다.하지만 나에겐 소중한 프로젝트..몸을 갈아 넣은 결과물은 취업할 때 꼭 사용하고 싶었다. 그래서!서버를 직접 관리하고자 팀원 분들의 동의를 받아 기존에 있던 서버를 이관하기로 결정하였다. 서버 이관에 대한 세부적인 목적은1. 필요할 때 서버를 열고 닫을 수 있을 것2. 혹시 모를 유의미한 데이터가 있는지 확인할 수 있을 것3. 새 계정으로 생성하여 계정 초기 서버 비용 지원을 받을 수 있을 것 서버를 사용하지 않을 때는 임시적으로 닫아야 비..

세상이 빠르게 변하고 있다.전에는 여러 CSS 라이브러리와 Next.js가 나오면서 혼란을 주더니,지금은 AI가 급변하고 있다. 항상 트렌드를 잘 파악해야지.. 토큰 만료 후 어떻게 처리할까? 예전에는 토큰 만료 후처리를 인터셉터(Interceptor) 방식으로 구현했다. 하지만 뭔가 다른 방법이 있지 않을까 싶었다.관련하여 찾던 도중, 이벤트 버스(event bus)를 활용하여 토큰 만료 후처리를 구현할 수 있는 것을 확인하였다. 대체적으로 토큰 만료 후처리를 인터셉트를 통해 구현한 내용이 담긴 아티클이 많았고, AI도 인터셉터가 더 좋을 수도 있다고 하였다.하지만, 사이드 프로젝트이니 새롭게 학습하고, 도입하는 것에 좋은 경험이 될 것이라 생각하여 인터셉터 방식을 사용하기로 결정하였다. ..

드디어 스위프(SWYP) 웹 12기 프로젝트가 끝이 났다! 6주 간 일어나서 코딩, 밥 먹고 코딩, 자기 전에 코딩코딩 코딩 코딩을 하며 살다가 결과적으로 기분 좋게 1등을 했습니다! 🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉 이번 글에는스위프(SWYP) 웹 12기를 참여하면서 어떤 과정을 겪었는지,그리고 제가 생각한 1등의 이유와 함께 개인적인 견해들을 남겨보았습니다. 6주 간 함께할 팀이 어떻게 만들어질까? 팀을 모으기 앞서, 운영팀에서 제공하는 노션 페이지에 각자의 프로필을 작성하게 됩니다.팀 빌딩 기간이 되면 함께 하고 싶은 분에게 연락하여 팀으로 데려올 수 있습니다.(초기에 모든 사람이 Slack에 초대되기 때문에, Slack을 통해 연락을 주고받습니다.)..

서비스가 돌아가고 있는 와중에 예기치 못한 버그가 발견된다면 개발자들은 식은땀을 흘리면서 컴퓨터 앞에 앉는다.버그는 유저 이탈의 충분한 계기가 될 수 있기 때문에 버그가 일어나지 않도록 사전에 방지하는 것이 중요하다. 그래서 서비스를 출시하거나 새로운 기능을 도입 혹은 수정하면 QA를 진행한다. 하지만, QA는 사람이 진행하기 때문에 놓치는 부분이 있을 수 있다. QA를 진행하기 전에 우리는 테스트 자동화, 즉 테스트 코드를 작성함으로써 사전에 버그가 발생하는 것을 예방할 수 있다. 전 직장에서는 아쉽게도 테스트 자동화를 다루지 못했다. 다만 당시에는 적용하지 못했어도, 꾸준히 관심을 갖고 지켜보던 주제 중 하나가 테스트 자동화였다. 이 글에서는 프론트엔드에서 다루는 테스트 자동화에 대해 알아본 내용을..

이전 포스트:https://mini-frontend.tistory.com/13 [React] 텍스트 에디터 제작기 1 (DOM을 이용한 에디터 직접 제작)평일 내내 배가 아파서 병원을 갔더니 "응급실 가야겠는데요?"...?병원 간 당일에 바로 수술을 하였다..해야 할 일이 산더미인데 회복과 함께 일주일이 날아갔다.건강하게 지내는 게 참 중요한 것mini-frontend.tistory.com Tiptap 텍스트 에디터 개발 코드와 배포 링크는 아래에서 확인할 수 있습니다.배포 링크: https://text-editor.bio/Github 코드: https://github.com/jaqwe2301/text-editor 이전 포스팅에 이어서 아래 세 가지에 관하여 이야기해보고자 한다. 라이브러리 없이 텍스트..

평일 내내 배가 아파서 병원을 갔더니 "응급실 가야겠는데요?"...?병원 간 당일에 바로 수술을 하였다..해야 할 일이 산더미인데 회복과 함께 일주일이 날아갔다.건강하게 지내는 게 참 중요한 것 같다. 다들 건강한 날들 보내길! 이번 글에서는 직접 텍스트 에디터를 구현하면서 겪은 시행착오, 그리고 다음 글에서 다룰 Tiptap 라이브러리 사용기의 배경까지 정리해 보려고 한다. 이전 포스팅과 같은 외주사에서 블로그와 비슷한 텍스트 에디터 개발을 부탁하셨다.전달받은 디자인을 기반으로 하되, 각각의 텍스트 스타일 기능들은 네이버 블로그를 참고하여 만들면 좋겠다고 하셨다.텍스트 에디터 라이브러리를 살펴보고, 네이버 블로그를 간단히 훑어보았다. 텍스트 에디터 라이브러리를 찾아보자 이번 개발에서 중요한..

이전 포스트:https://mini-frontend.tistory.com/11 Next.js 에서 NICE 본인인증 구현하기 (iOS, 카카오톡 인앱 브라우저 환경에서는 왜 안될까)오랜만에 블로그를 쓴다...회사에 일을 시작하면서 하루하루가 바쁘게 돌아가다 보니 블로그를 쓸 여력이 없었다.. (핑계야 핑계 이 자식아)일하면서 블로그 쓰시는 수많은 개발자 분들 존경합mini-frontend.tistory.com 이전 글에서 주안점은 request Method가 POST이고, body를 통해 form data을 받을 수 있다는 것이었다. 뭔가 서버와 연관 지어 해결할 수 있지 않을까 싶고, Next.js는 클라이언트 뿐만 아니라 서버와 관련된 처리를 할 수 있지 않는가!그렇다. 이 문제의 해결 Key로 Ne..

오랜만에 블로그를 쓴다...회사에 일을 시작하면서 하루하루가 바쁘게 돌아가다 보니 블로그를 쓸 여력이 없었다.. (핑계야 핑계 이 자식아)일하면서 블로그 쓰시는 수많은 개발자 분들 존경합니다! 그래도 노션에 이것저것 정리해 두었으니 판도리의 상자를 열어보자다니던 회사에서 외주를 하나 맡아 진행하였는데, 외주사에서 NICE 본인인증 개발을 요청하셨다.오! 한 번도 해보지 않은 것이잖아! 재밌겠는 걸(?)이때까지는 몰랐다.. 험난한 일이 겪을 줄은... 데스크탑에서는 되는데, 다른 곳에서는 안되네..? 처음에 구현하였을 때는 데스크탑과 모바일 브라우저(크롬 웹 뷰와 갤럭시 인터넷)에서는 인증이 정상적으로 되었다.하지만, iOS 웹(사파리)와 카카오톡 인앱 브라우저에서는 본인인증 후 오류 화면이 나타났다..

본 글은 AWS 사용 경험이 거의 무지한 사람이 작성한 글입니다.따라서, '엥, 이걸 모른다고?' 라는 생각이 들 수 있습니다...허허.. 최근에 스타트업이랑 같이 진행한 웹 프로젝트가 있는데, 기업 쪽에서 서버 비용이 생각보다 많이 발생해서 한 번 봐달라고 부탁하셨다.금액을 정확히 밝히기 어렵지만, 말씀으로 들었던 금액을 듣고 '그렇게 많이 나올 수 있나..?' 라는 생각이 들긴 했다. 서버를 직접 구축한 것은 아니지만, 백엔드 분이랑 연락이 뜸한지도 오래 되었고,,전에 개발 동아리에서 EC2를 다룬 경험(?)이 있으니 한 번 도전해보기로 하였다. 우선 금액이 얼마나 나오는지 확인해 보자! https://us-east-1.console.aws.amazon.com/costmanagement/home?r..