맨땅에서 프론트엔드

드디어 스위프(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..

드디어 졸업을 했다..! 취업은 언제,,? ㅎ.. 프로젝트를 진행 중에 손쉽게 날짜를 선택할 수 있도록 캘린더(달력)를 구현하려고 하였다. 캘린더를 사용하는 일은 많으니까 라이브러리를 여러 가지 찾아보았으나... 구현에 있어 몇 가지 불편함이 있었다. 라이브러리를 왜 쓰지 않으셨습니까?! 1. 커스터마이징 등의 사용법에 대한 설명이 부족하다. 관련된 설명이 부족하다! 물론 나의 문해력이 부족해서 그럴 수도 있지만,, 다른 라이브러리에 비해 설명이 부족하다고 생각한다. 어떠한 기능을 사용하고 싶을 때 찾기가 굉장히 힘들었다. 2. 프로젝트가 무거워지는 걸 원치 않는다. 라이브러리를 추가할 수록 프로젝트의 무게가 점점 무거워지는 걸 원치 않는다. 최종적으로 해당 브라우저를 열 때 성능 저하가 생길 수 있기 ..

2024.02.01 - [javascript] - [JWT] 로그인 세션 관리하기 2 (Session Storage, Local Storage, Recoil) [JWT] 로그인 세션 관리하기 2 (Session Storage, Local Storage, Recoil) 2024.02.01 - [javascript] - [JWT] 로그인 세션 관리하기 1 (JWT에 관하여) [JWT] 로그인 세션 관리하기1 (JWT에 관하여) 오늘이 아시안컵 16강이 있던 날인데, 축구를 보니 볼 차고 싶은 생각이 너무 들던 하루 mini-frontend.tistory.com 이번에는 실제 코드를 통해 로그인 세션에서 토큰이 어떻게 하면 처리되는지 알아보자. 토큰이 만료 등의 토큰 처리는 Axios 인터셉터(Intercep..

2024.02.01 - [javascript] - [JWT] 로그인 세션 관리하기 1 (JWT에 관하여) [JWT] 로그인 세션 관리하기1 (JWT에 관하여) 오늘이 아시안컵 16강이 있던 날인데, 축구를 보니 볼 차고 싶은 생각이 너무 들던 하루,,, (사진은 축구하고 있는 나) 오늘은 프론트엔드를 개발하면서 로그인 세션을 어떻게 관리하였는지 작성 mini-frontend.tistory.com 이전 글에서 JWT에 대해 알아보았다. 그렇다면 프론트엔드에서 JWT가 어떻게 쓰이는지 한 번 알아보자. 1. JWT 보관 방법 JWT 토큰을 서버로 부터 발급받는다면 브라우저 등에 보관해야 한다. 프론트엔드를 개발할 때 JWT 토큰을 보관하는 방법을 다음과 같다. 1) Local Storage 브라우저를 닫아도..