Main Concepts 처음 React를 시작할 때 거의 이해 못하고 practice 정도만 참조했을 듯 싶어서 다시 읽어보았다. 개념을 이번에 명확히 했다거나 처음 들어본 것들을 정리해보았는데, Main concept에서도 꽤나 많았다. 이번 기회로 해당 정리 글을 주기적으로 보도록 해야겠다 😊 Introducing JSX React는 기존에 html, js 와 같이 기능 별로 문서를 나누던 데에서 한 컴포넌트 단위로 나누게 함으로써 js, html(jsx), css를 컴포넌트 단위로 다룰 수 있게 하였다. JSX의 내부의 변수들은 렌더 시점에 이미 문자열로 변경 되므로 XSS 공격을 피할 수 있다. Rendering Elements React로 만들어진 어플리케이션은 하나의 root DOM 노드를 ..

개발을 진행하면서 안드로이드 OS에서 네이버 앱을 사용할 때 (특정 안드로이드 버전 - 아마도 11 이상 에서만) flex 레이아웃이 깨지는 이슈가 발생하였다. css를 다방면으로 고쳐보면서 해결해보았는데, 원인은 'flex-shrink를 지원하지 않는 것'이었다. (caniuse) 반응형 웹을 구축할 경우 해당 사례를 피하기 위해 css 코드에 flex-shrink 사용을 지양하도록 하자.

Open Graph란? 어떤 웹페이지든 social graph의 일부분이 될 수 있도록 하는 프로토콜이다. Metadata og:title : url 공유 시 제목으로 들어가는 영역이다. (카카오톡 공유는 title만 공유된다.) og:type : object의 type이다. (ex_ video.movie, website) og:image : url 공유 시 나타나는 이미지이다. og:url : graph에서 id로 쓰이는 url이다. og:audio, og:video : audio, video 파일의 url이다. og:description: object에 관한 설명이다.카카오톡 공유에서는 표시되지 않고 슬랙 공유, 블로그에서는 description까지 표시된다. og:site_name : 방대한 웹사이..

문제 상황 next/link를 사용한 GNB의 mouseEnter event가 작동하지 않아서 메인 메뉴에 마우스를 움직여도 subMenu가 바뀌지 않는 이슈가 발생한다. 원인 GNB에서 사용하는 LinkContext의 SuperLink를 next/link로 처리했는데, next 12 version에서 mouseHover 이벤트가 제대로 작동하지 않는 문제가 있다. fix(Link): Do not ignore onMouseEnter prop with absolute href by ericmatthys · Pull Request #32012 · vercel/next.js Fixes #22733 Regardless of whether it's recommended that Link be used with e..

요약 css 내부의 font asset을 받아오는 path를 절대경로가 아닌 상대경로로 바꾸면 된다. 문제 css에 url로 정의해 둔 font asset이 개발모드(dev)에서는 잘 적용되다가 실서버(production)에서 반영되지 않는 이슈 실제 구현 /* style.css */ @font-face { font-family: spoqaSansNeo; font-weight: 700; src:url('/font/SpoqaHanSansNeo-Bold.ttf'); src: url('/font/SpoqaHanSansNeo-Bold.otf') format("opentype"), url('/font/SpoqaHanSansNeo-Bold.ttf') format("truetype"); } /* next.config..

Hello, I’m ressi 2021년 개발자로서의 첫 회고를 쓰면서 자축하고 싶은 것은 (중간과정 생략하고 어찌됐건) 취업에 성공하고 개발자로서의 길을 걷기 시작했다는 것이다. 나에게는 이제 새로운 이름 렛시(ressi)가 생겼다. 올해 개발자로서의 나를 만난 사람들은 나를 이렇게 기억해줬으면 한다. “아, 그 질문 많고 열심히 하던 렛시님”. 2021’s Key tag #취뽀 #오늘의집 #여행 #가족 #졸업 올해는 졸업 후 취업에 성공하여 오늘의집이라는 앱을 만드는 버킷플레이스라는 회사에 들어간 아주 중요한 해이다. 개발자로서의 삶을 시작하는 해이기도 하고 대학생으로서의 생활을 끝내는 해이기도 했다. 상반기 때는 1학기를 다니던 내가 하반기 때는 회사 일을 처리하고 있으니 몇 개월의 차이를 두고 너..

문제 불량 사용자 문제 바로가기 코딩테스트 연습 - 불량 사용자 개발팀 내에서 이벤트 개발을 담당하고 있는 "무지"는 최근 진행된 카카오이모티콘 이벤트에 비정상적인 방법으로 당첨을 시도한 응모자들을 발견하였습니다. 이런 응모자들을 따로 모아 불량 programmers.co.kr 풀이 처음에는 제재 아이디 당 몇 가지의 경우의 수가 가능한 지 계산하려고 했으나, 이렇게 한다면 기존에 제재 아이디에 걸린 아이디는 다시금 판단하면 안되는 등 생각해야 할 문제가 많아지므로 아래의 방법을 사용한다. 제재 아이디와 매칭되는 아이디를 찾을때마다 dfs로 돌면서 모든 제재 아이디에 매칭되는 경우의 수를 찾으면 된다. 입력의 범위가 작아서 시간복잡도는 문제 없다. 더해서 순열이 아니라 조합이므로 순서에 관계없이 하나의 ..

정직원으로 출근한 지 두 달째, 학교에서 졸업생을 대상으로 하는 졸업생 특강에서 강연을 맡게 되었다. 내가 과연 해줄 말이 있던가 싶었던 처음과 다르게, 준비하다보니 1시간이라는 시간을 꽉 채울 정도로 많은 말을 하게 되었다. 내뱉은 수많은 말들 중 듣는 이의 가슴에 와닿는 말을 얼마나 했는지는 모르겠다. 다만, 나는 진심을 담아서 본인이 걸어온 길에서의 후회를 꾹꾹 눌러 담아 준비했다. 약 30명의 인원을 데리고 한 강연, 어떻게 보면 고등학교 한 반을 대상으로 한 강연 정도의 규모였지만 개인적으로 만족스러웠다. 종종 아는 이들의 DM 메세지를 보고 대답해주는 등 익숙치 못했던 점을 처음이라고 대충 뭉뚱그려본다면 1시간이라는 시간동안 끊이지 않고 나름 재밌게(?) 이야기를 했다는 것 자체로 성공적이었다..