[React - 그래서] key prop은 렌더링에 어떻게 쓰이는가 (Fiber / 재조정 reconciliation)

`${stack} - 그래서` 카테고리 탄생 배경 새로운 카테고리를 개설했습니다. 기술 공부를 할 때 그래서..? 이게 뭐..?라는 느낌이 들며 지식 간 연결이 끊어져있는 느낌이 들 때가 잦습니다. 그럴 때 다른 분들은 '왜?'를 떠올리던데 저는 대부분 그것보다 이전 단계에서 이해를 못하는 편이라 '그래서? 이게 무슨 상관인데?'로 인덱싱 문제를 해결하곤 합니다. why? 보다 then.....what? 느낌이랄까요 노력형 개발자가 저뿐만은 아니겠죠, 계속 성장 하고 있는 걸 보면 사실 큰 문제는 아닌 것 같습니다. 하나씩 모으다 보면 어느 순간에 뭔가 연결되는 느낌이 드는데 그때 적지않은 도파민이 나오기에 그 쾌감이 퍽 재밌기도 합니다. 개인적으로는 새로운 개념을 받아들일 때 얕게 우선 정의부터 대략적..

→2023.12.17

Code/Dev environment

[AWS] amplify 배포 / 빌드 현황 슬랙 웹훅(slack webhook) 알람봇 구현 (lambda)

현재 담당하고 있는 서비스는 amplify 를 통해 master 와 staging 브랜치를 기준으로 배포 환경 구성이 되어있다. 그동안은 프론트를 혼자 담당하고 있었고 마스터 배포가 잦은 편은 아니었기에 직접 aws amplify 에 접속해 배포 현황을 보고 배포가 완료되면 팀 채널에 공유하는 식으로 업무를 진행했었는데, 조금씩 마스터 배포가 훨씬 자주 일어나게 되자 amplify 접속하는 것도 귀찮아져서 슬랙 알람 봇을 구현해야겠다는 생각을 했다. amplify 는 이메일 알람 이외 다른 notification은 제공하지 않았기에 이메일 트리거를 사용하는 방법을 택했다. 그렇게 찾은 두 가지 방법 개인용 슬랙 메일 주소로 알람 받는 법 amplify의 이메일 노티를 감지해 lambda 함수로 슬랙 웹훅..

→2023.09.23

Code/React - Node

[React/node] 하드코딩 방어하기 _ notion 문서 react 렌더링 (html-react-parser)

개발자 스타일마다 다를 순 있지만 개인적으로는 하드코딩을 피하기 위해 정말 노력하는 편이다. 데이터가 변경될 가능성 + 추후 유지보수 + 확장 가능성 등등을 고려하며 추후 데이터의 변경이 있을 때에도 간단하게 변경할 수 있는 구조를 생각하며 구현하는 편인데 처음엔 조금 공수가 드는 것 처럼 보여도 결국 조금만 지나도 큰 효용을 느낄 수 있다고 생각하기 때문이다. 문제 서비스 릴리즈를 앞두고 있던 때에 다양한 이용약관이 추가되어야 하는 상황이었는데 이용약관들은 법적 검토 등의 과정을 통해 다소 여러가지 형태의 각기 다른 레이아웃을 가진 채 노션 (notion)에 정의되어 있었고, 약관을 보여주는 공통 모달 컴포넌트 디자인은 타이틀, 소제목, 본문, bullet, numbering, 여백 등등이 따로 커스텀..

→2023.09.10

Code/React - Node

[React / Typescript] IOS safari 상태바 색상 변경 / 커스텀 훅을 이용한 동적 처리

문제 : 반응형 웹 서비스 구현 중 IOS의 사파리 브라우저 환경에서 상단바가 페이지 배경색과 일치하지 않음을 확인 브라우저의 상단바 색상을 해당 페이지의 배경색과 동일하게 변경을 해야 했고, 페이지 별 상이한 배경을 갖고 있는 경우가 있기에 이를 핸들링할 수 있어야 했다. 1. 상태바 색상 변경 (change safari status bar color) - index.html html 파일 내부에 meta 태그를 위와 같이 작성할 경우 content의 색상을 고정으로 가지고 있을 수 있다. 나는 페이지 별로 다른 색상의 상태바를 보여주길 원했기에 커스텀 훅을 생성했다. 2. Custom hook 커스텀 훅 추후 유지 보수를 생각했을 때, 기본으로 설정된 흰색이 아닌 다른 색상이 필요한 경우만을 예외로 ..

→2022.12.09

Algorithm/Algorithm Study

[프로그래머스] 2021 KAKAO BLIND _ 신규 아이디 추천

2021-07-03 알고리즘 문제 풀이 문제 URL : https://programmers.co.kr/learn/courses/30/lessons/72410 코딩테스트 연습 - 신규 아이디 추천 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 programmers.co.kr tmi 종종 프론트엔드 개발자는 백엔드만큼의 알고리즘 능력을 요구하지 않는다. 그렇게 많이 필요한 것 같진않다..라는 말을 듣곤 하는데 코딱지 주제에 내가 감히 뭐라고.. 알고리즘!! 필요없다!!! 옳다!! 그르다!! 할 수는 없는 문제이지만, 일하면서 느낀 게 좀 있었다. 우선 입사한 지 한 달이 ..

→2021.07.03

Today I Learned

TIL 2021.03.29 ~ 04.02

TIL이라 쓰고 일기라 읽는다. 사진은 오늘 타코집에서 먹은 비프 치아 어쩌고 블로그는 나한테 일기또는 지식 메모장 같은 느낌이라 그냥 주절주절 의식의 흐름대로 글을 써놓곤 하는데 이상하게 방문자가 많다. 누구세요? 😂😂😂 Code 작성글보다 주절주절 TIL이 더 조회수가 높을 때가 있어서 매우 민망하다. 뭐 하여튼 이번 일주일이 어떻게 지나갔는 지 잘 기억이 안난다. 특정 키워드로 인스타 정보를 크롤링하여 렌더링하는 패이지를 제작했고, 블로그 검색 결과를 react-slick 라이브러리를 사용하여 슬라이드 형태로 렌더링 될 수 있는 코드를 구현했다. 슬라이더 구현을 했던 게 제일 기억에 남는데.. react-slick 은 api 문서를 확인해보면 간단하게 사용할 수 있다. 기본으론 div로 감싸진 엘리..

→2021.04.03

Project

[퍼스트 프로젝트 / 리팩토링] weSeason v2.0.0 배포 완료, 리팩토링 회고록

weSeason 소개 시시각각 변화하는 기온과 내 위치! 오늘은 뭘 입을까? 기온에 맞는 옷차림을 추천해드립니다!! 접속 위치와 기온을 확인하고 옷차림을 추천합니다! 현재 기온을 포함한 9시간의 데이터를 미리 확인할 수 있습니다! 원하는 기온 데이터를 클릭하여 옷차림을 확인할 수 있습니다! 다른 곳으로 이동을 해야 한다면? 동네 검색을 이용하여 해당 지역 정보를 확인할 수 있습니다! 구글, 깃허브로 편리한 로그인이 가능합니다! 1. 기획 퍼스트 프로젝트는 2주 정도의 상당히 짧은 기간이었다. 그 중 1주일은 sr을 계획하고, 피그마로 UI, UX를 모두 실사화로 만들어 계획하는 데에 사용했다. 그 후 1주일은 코딩을 진행했다. 첫 번째 프로젝트이고, 내 아이디어가 직접 구체화 되어 구현되는 것만큼 재밌는..

→2021.02.26

Frontend