티스토리

Übermensch Dev

검색하기

블로그 홈

Übermensch Dev

cksxkr5193.tistory.com/m

철학 학사의 개발블로그

구독자: 5

방명록 방문하기

주요 글 목록

요즘 하는 일과 흥미있는 일 1. 요즘 하는 일최근 node.js를 사용한 백엔드와 docker, k8s, aws, ci/cd 등을 조금씩 학습 중이다. 물론 원래부터도 프론트엔드에 몰빵하기 보다는 여러가지 분야를 해보고 싶다는 욕심이 있었고, 지금의 회사에 입사를 결정한 것도 여러 분야를 하기에는 소규모 스타트업이 유리할 수 있다는 생각이 컸었다. 이후 회사에서 일을 하면서 확실히 못을 박게 되었는데, 이유는 다음과 같다.여러 방면에서 문제를 해결할 수 있는 시각을 넓히고 싶다. 프론트엔드만 알기에 모든 문제를 프론트에서 해결하려고 하고 있는데, 망치만 쓸 줄 알아서 모든게 못으로 보인다고 느꼈다. 충분히 고도화된 서비스에서는 기술을 미친듯이 깎는 것이 유저에게 가치를 전하는 것과 직결될 수 있지만, 그게 아니라면 당장 서비스가 .. 공감수 4 댓글수 1 2025. 2. 14.
Amplify로 Merge Request Preview 띄워주기(with Gitlab) 0. TL;DRAWS Amplify를 사용해 MR(PR) Preview를 띄워주기Frontend 개발을 하지 않는 분들이 mr에서 변경된 내용을 쉽게 확인할 수 있도록 병합 전, Cloud 환경에서도 문제없이 작동하는지 확인할 수 있도록Amplify에 서비스 배포하기Gitlab에서도 Commnet로 Preview 링크 띄워주기1. Why?현재 팀 내에 4명의 웹 개발자가 있지만, 나를 제외한 3분 모두 FE보다는 BE에 더 가까우신 분들이다. 고로 자연스럽게 리뷰는 코드에 중점을 두기보다는 기능이 정상적으로 동작하는 것에 집중하게 되었다. 그러다보니 코드 리뷰는 다음 세 가지 케이스 중 하나로 진행되게 되었다.local에서 내가 작업한 branch를 pull해서 확인내가 직접 시연믿고 리뷰하지 않기(여유.. 공감수 3 댓글수 1 2025. 1. 26.
코드 가꾸기 - 테스트 코드 1. Why?프론트엔드에서 테스트 코드를 작성하는 비율은 상대적으로 높지 않다. 삼성청년SW아카데미 내에서 3차례 프로젝트를 진행하며 그 때마다 10팀 씩, 총 30팀을 봤지만 한 팀도 테스트를 도입하지 않았다. 심지어는 현업에서도 테스트 코드를 작성하지 않는 경우를 보기도 했다. 하지만 테스트 도입에 대해서 고민하면서, 그리고 직접 테스트 코드를 작성하면서 느낀 것은 보통 테스트를 작성할때의 비용이 테스트를 작성하지 않았을 때의 비용에 비해 훨씬 적다는 것이다. 프론트엔드에 관심이 많은 학생이라면, 이 글을 읽고 테스트에 대해 관심을 가지게 되면 좋겠다. 2. 코드를 가꿔야하는 이유는 내가 진행한 프로젝트 중 테스트를 도입한 첫 프로젝트이다. 정확히는 Mock API를 사용한 비즈니스 로직 테스트와 .. 공감수 0 댓글수 0 2024. 7. 9.
개발을 시작하게 된 계기 1. Intro...요즘 취준을 위해서 자주 면접을 다니는데, 늘 듣는 질문이 있다.철학과인데, 어떻게 전혀 상관없는 개발쪽으로 진로를 바꾸셨나요? 주위 친구들 중에서도 왜 개발을 시작했는지, 진로는 어떻게 결정하게 됐는지에 대해서 궁금해하는 사람이 많아, 면접 준비라는 명목으로 블로그에 글을 작성해볼까 한다.2. 개발을 시작하게 된 계기내가 개발자로 진로를 결정하는데 큰 영향을 준(그리고 지금도 계속 주고 있는) 두 사람이 있는데, 이 글에서도 자주 등장하기에 미리 소개를 하고 시작하겠다.우리 영남대학교 철학과의 자랑, 유메타랩의 대표 서승완첫 수능 때 경북대 컴공과 붙어놓고 삼수해서 다시 경북대 컴공과 간 쿠팡맨 배찬우어떻게 시작했는지우선 보드게임을 먼저 소개해야 한다. 나는 영남대학교 독도 동아리 .. 공감수 0 댓글수 0 2024. 7. 1.
커뮤니케이션 잘 하기 1. Why?Pennyway팀은 팀원들의 상황이 학생 / 취준생 / 인턴 등으로 다양했기에 팀 프로젝트 중 처음으로 비대면으로 진행한 프로젝트다. 물론 스프린트 계획 / 리뷰를 위해 각각 2시간씩 주 2회 만나긴 했지만, 이를 제외한 대부분의 시간을 각자 진행했다. 그러다보니 다양한 시간대와 일정으로 인해 실시간으로 소통하기 어려운 경우가 많았고, 또 비대면으로 대부분의 소통을 진행하다 보니 서로의 의도를 오해하는 등 협업 과정에서 문제도 많이 발생했다. 이번 글에서는 정확히 어떤 문제들이 있었고, 이를 해결하기 위해 어떤 문화를 도입했는지 작성해보고자 한다.2. 문제 & 해결1. 코드 리뷰 관련문제우선 프로젝트가 시작되는 시점에서 함께 하는 팀원을 파악하지 못한 상태였기에, 큰 문제점이나 의문이 아니.. 공감수 0 댓글수 0 2024. 6. 16.
최고의 공통 컴포넌트를 찾아서 0. TL;DR작업의 효율성과 유지보수성을 위해 고려해서 공통 컴포넌트를 구현문제 발생, 원인은 `명확성`을 충분히 고려하지 않았기 때문이를 개선하고, 공통 컴포넌트가 고려해야할 `명확성`에 대해서 이해1. Why?여러 차례 프로젝트를 진행하며, 어느정도 초기 설정이 끝나면 그 다음으로 공통 컴포넌트를 구현하게 된다. 이번 Pennyway에서도 마찬가지였는데, 이를 구현해서 작업의 효율성 높이기유지보수 용이하게 하기에 도움을 줄 수 있을 것이다. 하지만 프로젝트가 그렇게 쉽지만은 않은 법이다. 이번 글에서는 Pennyway에서 구현한 공통 컴포넌트에서 어떤 문제를 겪었고, 어떻게 컴포넌트를 수정해서 문제를 해결했는지 작성해보고자 한다. 2. 1차 코드 구현구현 코드가장 많이 고민한 부분이자 이후 수정하게.. 공감수 0 댓글수 0 2024. 5. 21.
SCSS mixin으로 font 및 반응형 레이아웃 정의하기 0. TL;DRFont성능을 위해 woff2, subset font 사용. 지원 안할 경우를 대비 woff는 fallback font로 설정mixin을 사용해 classname으로 간단히 font 사용 가능하도록Layout모든 iPhone 사이즈에 대응가능하도록 media query로 계산mixin을 사용해 레이아웃 요소가 일관적인 사이즈 유지하도록1. Why?현재 iPhone용 App에 들어갈 Webview page 제작 중mixin을 사용해서 팀이 사용할 Font와 Layout을 설정해보자2. Font빠르게 Font를 설정할 수 있도록, 용량이 가장 작은 woff2 사용woff를 지원하지 않을 경우를 대비해 woff를 fallback font로 설정또한 기본 font 대비 1/3가량인 subset f.. 공감수 0 댓글수 0 2024. 4. 21.
eslint + husky + lint-staged로 CI 부담 덜어주기 0. TL;DR CI/CD 구축이 완료되었으나, CI단계에서 lint와 test를 모두 진행하는 것이 적절한지 고민 CI단계에서는 많은 코드가 한번에 추가될 것 어긋난 코드를 한번에 수정하는데 많은 리소스가 소모될 우려가 있음 Git hooks를 사용해 pre-commit 단계에서 lint catch를 하기로 결정 husky와 lint-staged를 사용해서 구현 1. Why? Pennyway 프로젝트에서 CI/CD 파이프라인 구축이 완료되었다. 대략적인 로직은 아래와 같다. CI & CD 더 자세한 사항은 repository wiki에서 볼 수 있다. 고민 근데 CI에서 eslint를 catch하는 게 적절한지에 대한 고민이 생겼다. 현재 CI의 로직은 다음과 같다. Main branch로 PR 작성 .. 공감수 0 댓글수 1 2024. 4. 18.
Next.js 14 다크모드 구현하기 / 웹 이력서(작성 중) 0. TL;DR 웹 이력서에 다크모드를 적용할 필요성을 느낌 일관적인 경험을 위해 system값을 기본값으로 사용하고, 이후에는 dark / light모드를 토글로 변환하도록 결정 'system 값 사용'과 'load 시 flickering 이슈' 해결에 장점이 있는 next-themes 라이브러리를 사용해서 구현 1. Why? 이력서의 경우 많은 사람들에게 피드백을 받아보는 것이 좋다고 생각한다. 그래서 어느정도 완성된 이력서 사이트를 친구에게 보여줬더니 개발자를 위한 다크모드는 없냐고 불평을 했다. 난 사실 화이트모드를 더 좋아하지만, 상당수의 개발자들이 다크모드를 선호하는 것은 사실이다. 내 이력서 보는 사람들도 어두운 화면을 보다가 갑자기 밝은 화면을 보면 불쾌할 수도 있고, 눈 아프다고 그냥 끄.. 공감수 0 댓글수 0 2024. 4. 2.
Web Worker로 백그라운드에서 타이머 작동시키기 0.TL;DR 기존의 타이머 수정방안 3가지 모두 서버 리소스와 UX측면에서 약간의 손해를 감수해야 했기에 아쉬웠음 JavaScript의 비동기 처리 브라우저의 멀티 스레드 동작, 그리고 백그라운드 스레드에서 동작하는 Web Worker 학습 이후 Web Worker를 사용해서 background에서 타이머가 동작하도록 해 문제 해결 1. Why? 스타게이트에서 타이머를 동작시키는 과정에서, 백그라운드로 탭이 넘어갈 시 1000ms에 한 번 동작해야 할 타이머가 60000ms에 한 번 동작하게 되는 문제점이 있었다. 이를 해결하기 위해 Page Visibility API로 타이머가 정상적인 값을 보내주도록 처리했었다. setInterval과 Page Visibility API로 정확한 대기시간 알려주기 .. 공감수 0 댓글수 0 2024. 3. 19.
Next.js에서 MongoDB Data 가져오기 / 웹 이력서 1. Why?최근에 취업을 위해서 Web으로 이력서를 만들었다. 회사에 지원할때 제출할 용도로 만들었기에 최대한 빠르게 구현하고자 했고, Project와 Experience등의 사용되는 Data를 src/data 폴더에 넣어두고 가져와서 쓰고 있었다. 하지만 이런 방식으로 구현하다 보니 여러 문제점이 생겼다.내용을 조금 바꿀때마다 새로 commit 하는것이 불편함다른 사람들이 변경 전의 내용을 모두 볼 수 있다는 점마침 Next.js를 사용하는 김에 DB에서 직접 데이터를 가져와서 사용해보고 싶었기에, MongoDB를 사용해서 data를 가져와 사용하는 방식으로 변경하기로 결정했다.MongoDB를 선택한 이유몽고DB는 구글에 검색만 해도 연관검색어 맨 위에 쓰지말라는 말이 뜨는 아주 놀라운 DB이다. 그.. 공감수 0 댓글수 0 2024. 3. 3.
Next.js 14 SEO(검색엔진 최적화) 도전기 / 웹 이력서 1. Why?SSAFY가 끝나고 나서 취업을 위해 그동안 진행한 프로젝트를 정리해서 웹 이력서 사이트를 만들었다. Next.js 14와 MongoDB를 사용했고, Vercel을 통해서 배포했다. 전체적인 UI는 이 분의 이력서를 참조했고, 내용은 내가 개발을 하면서 그 동안 고민한 부분과 알게 된 부분들을 보여주고자 했다. 이제 이렇게 열심히 만들었으니, 취업만 하면 된다. SEO를 통해서 내 이력서를 최대한 많은 사람이 볼 수 있도록 하게 하고싶다. 채용 담당자님들이 내 이력서를 볼 수 있도록!2. SEO란?먼저 SEO에 대해서 알아보자. SEO(Search Engine Optimization)란 검색엔진 최적화를 의미한다. 그렇다면 어떻게 해야 검색엔진 최적화를 할 수 있을까? Google의 검색엔.. 공감수 6 댓글수 2 2024. 3. 1.
쿠키와 세션 / 네트워크 HTTP W3 상에서 정보를 주고받을 수 있도록 정의된 프로토콜 Connectionless(비연결성) : 요청에 따른 응답을 받고나면 연결을 끊음 Stateless(무상태성) : 클라이언트-서버 관계에서 서버가 클라이언트의 상태를 보존하지 않음 → 그런데 상태가 없다면 로그인같이 상태가 필요한 경우는? 쿠키 & 세션 HTTP의 무상태성 보완을 위해 등장한 기술들 쿠키 클라이언트에 저장되는 Key-Value 쌍의 작은 데이터 파일 사용자의 정보를 브라우저에 저장하기 위해서 등장 초창기에는 사용자의 정보를 서버가 보관하기에는 사양이 떨어졌음 그래서 쿠키를 클라이언트가 가지고 있다가 요청할 때 보내도록 함 최대 용량은 4KB, 개수는 20개(한 사이트 당) 동작 과정 클라이언트가 요청을 보내면 서버에서 쿠키를.. 공감수 0 댓글수 0 2024. 2. 23.
Firefox에서의 setInterval 문제 해결 0.TL;DR타이머를 setinterval을 사용해 구현V8엔진을 사용하는 크롬/엣지 등에서는 문제가 없지만 Firefox에서는 오차 누적 이슈 발견userAgent를 사용해 접속환경에 따라 경고문을 출력하도록 함또한 Firefox라면 delay값을 이전 오차값에 따라 적절하게 변동해서 넘겨주도록 구현1. Why?에서는 setInterval 문제가 다 해결된줄 알았다. 그런데 "크롬에서는 setInterval 보정이 들어가지만, firefox에서는 보정이 들어가지 않는다"는 글을 보게 되었다.브라우저별로 실행 엔진이 다르니까 충분히 가능한 이야기인데 어째서 고려를 안했을까...🥲 혹시나 해서 chrome과 같은 V8 엔진을 사용하는 edge와 brave 브라우저에서도 실행해봤는데, 얘네는 보정이 들어.. 공감수 0 댓글수 0 2024. 2. 7.
🧑‍🍳토이 프로젝트 <아워홈 사전과제> 회고 그냥 혼자서 고민한거 아까워서 적으려는 거구요,, 혹시 문제가 될 부분이 있다면 연락주시면 바로 내리겠습니다. 1. Why? 12월 29일부터 1월 3일까지 아워홈의 사전과제를 진행했다. 아워홈 사전과제 프로덕트의 사이즈가 매우 작아 코드의 퀄리티를 어떻게 높일지에 많은 고민을 해야했고, 또 제출후에도 아쉬운 점이 있어 코드를 추가적으로 수정하기도 했다. 이렇게 고민한 부분들을 작성해보고자한다. 2. 기획 일단 과제 내용은 "이 화면을 따라서 만들어봐라."로 주어졌다. 기능 명세서 작성 상당히 러프하게 주어졌기 때문에, 우선 화면을 보고 어떤 기능이 있는지 파악 이를 Notion에 정리했고, 당장 화면에는 보여지지 않더라도 구현시에 필수적인 기능도 작성 ex)장바구니 버튼 그리고 추가적으로 있으면 좋겠다.. 공감수 0 댓글수 0 2024. 1. 31.
런타임을 고려해 타이머 구현하기 0.TL;DR Next.js에서 setInterval을 동작시키니, 오차가 누적되는 현상을 발견 Next.js가 node.js 환경을 전제로 구현된 프레임워크라는 점을 원인으로 추측 기본적인 오차 누적 문제는 delay값을 이전 오차값에 따라 적절하게 변동해서 넘겨주도록 구현해 해결 비활성화 문제는 탭 비활성화 시간 기록 -> 재활성화 시, 기록한 시간을 기반으로 남은 시간 재계산 1. Why? 나는 핀테크 프로젝트 에서 회원관리 및 보안 처리를 담당했는데, 그 중에서 아래의 타이머 부분에 setInterval을 사용했다. 에서 setInterval을 사용한 글을 보고 왔다면 알겠지만, Js의 setInterval은 정확하게 동작하지 않는 문제가 있기 때문에 이를 고쳐보고자 한다. 2. 뭐가 문젠데? 우.. 공감수 0 댓글수 0 2024. 1. 29.
로그인 여부에 따른 접근 제한 처리하기 0.TL;DR 로그인 여부에 따라 접근제한 처리를 해야했음 우선 하단 Navbar에 검증 로직을 넣어 로그인 상태에 따라 리다이렉트 처리 이후 쿠키에 담긴 Refresh Token의 여부를 확인하고 곧바로 리다이렉트 하도록 개선 1. Why? 프로젝트 을 진행하며, 로그인 여부에 따라 접근제한 처리를 할 필요가 있었다. 로그인을 완료한 유저 메인 페이지를 비롯한 다른 페이지 접근 가능, auth 관련 페이지 접근 불가능 로그인을 하지 않은 유저 splash & auth 관련 페이지만 접근 가능, 나머지 페이지들 접근 불가능 2. How? 처음 떠올린 방법은 Layout에 검증 로직을 넣는 것이였다. 장점 모든 페이지에 손쉽게 접근 제한 처리를 할 수 있다. 관리도 쉬워진다. 단점 Layout에 useEf.. 공감수 0 댓글수 0 2024. 1. 29.
setInterval과 Page Visibility API로 정확한 대기시간 알려주기 0.TL;DR문제팬사인회까지 남은 시간을 보여줘야 했기에 setInterval을 사용해 1000ms마다 1초가 줄어들도록 구현하였으나, 탭 비활성화로 인해 1초당 최대 60000ms까지 오차가 발생비대면 팬사인회는 연예인 1명 당 60~120초로 진행되기에, 만약 오차가 누적되어 30초 정도가 지연된다면 사용자는 불쾌한 경험을 하게 될 것고려한 해결 방안1초마다 서버에서 시간을 가져오기정확한 시간을 출력할 수 있지만, 많은 유저가 접속할 경우 서버에 부담탭이 활성화 될 때, 서버에서 시간을 가져오기서버의 리소스를 1번보다 적게 사용하지만, 변경 이전 시간이 잠깐 보여 사용자 경험에 악영향가짜 audio로 강제로 탭의 비활성화 막기클라이언트 리소스 사용 + 모바일 환경이라면 오디오 점유 이슈 발생 가능성결.. 공감수 2 댓글수 2 2024. 1. 25.
메모리 / 운영체제 (면접을 위한 CS 전공지식 노트) 컴퓨터의 기억장치, CPU도 메모리에 저장된 명령어들을 불러와서 실행하는 장치일 뿐 1. 메모리의 계층 레지스터 : CPU안의 작은 메모리 캐시(L1, L2, L3도 있음) 메모리(RAM) / 주기억장치 저장장치(HDD, SSD) / 보조기억장치 → SDD라고 적혀있는데 오타인듯? 캐시 데이터를 미리 복사하는 임시 저장소 빠른 장치와 느린 장치의 속도 차이로 인한 병목 현상을 줄이기 위한 메모리 속도 차이를 해결하기 위한 계층을 캐싱 계층이라고 함 지역성 캐시를 효율적으로 쓰려면? 자주 사용하는 데이터를 캐시에 설정해야 프로그램은 일반적으로 시간적으로나 공간적으로 가까운 데이터에 자주 접근 이걸 각각 시간 지역성과 공간 지역성이라고 함 한 번 사용한 데이터를 일정시간 캐시에 보관함(시간 지역성) 메모리를.. 공감수 0 댓글수 1 2024. 1. 25.
🌟SSAFY 우수 프로젝트, 비대면 팬사인회 서비스 <스타게이트>회고 1. Why?삼성 청년SW아카데미 첫 프로젝트가 마무리 되었다. 처음으로 팀장을 맡은 프로젝트인데, 팀원들과 함께 열심히 한 결과 현직 개발자분에게 심사를 받아 우수 프로젝트로 선정될 수 있었다. 또 개인적으로도 베스트 멤버(싸피에서는 매주 10팀 중에 최고의 멤버를 뽑는다)에 뽑히기도 했다. 하지만 처음 기획했던 추가 기능 부분들을 구현하지 못하는 등 아쉬운 점들도 많았다. 이러한 부분들을 더욱 발전시키기 위해 이번 글에서는 프로젝트를 회고하고, 계속해서 이어나갈 것과 보완해야할 점을 정리해보고자 한다. 프로젝트 요약🌟프로젝트 Github🌟관리자 관점 시연영상🌟팬 관점 시연영상기간 : 23.07.04 ~ 23.08.18(7주간)팀원 : 6명(Frontend 3인, Backend 3인)역할 : F.. 공감수 0 댓글수 1 2024. 1. 23.
💳 카드 혜택, 기프티콘 서비스 <모익> 회고 1. Why? 모익도 삼성 SW아카데미에서 7주동안 기획과 개발을 진행한 프로젝트다. 주제를 선정해서 하는 특화 프로젝트로 핀테크 도메인을 선택해 진행되었다. 또한 처음으로 내가 회원관리쪽을 맡은 프로젝트이기도 하다. 이번 글에서도 프로젝트를 회고하면서 Keep, Problem, Try를 정리해보자. 프로젝트 요약 💳프로젝트 Github 💳시연영상 기간 : 23.08.21~23.10.06(7주간) 팀원 : 6명(Frontend 3인, Backend 3인) 역할 : Frontend 개발자 사용 기술 Frontend : Next.js, TypeScript, Tailwind CSS, React Query Collaboration : Notion, Figma, Git, GitLab 2. 기획 우리의 주제는 "카.. 공감수 1 댓글수 0 2024. 1. 21.
LCP 개선하기 / 아워홈 사전과제 1. Why? 아워홈 과제는 상품 리스트 + 장바구니 페이지 만들기. 도메인 특성을 고려했을 때, 클라이언트 단에서 어떤 부분을 고려해서 개발해야할까 고민했다. 쇼핑몰 사이트니까 이미지가 미친듯이 쏟아진다는 특성이 있다는 것을 떠올리고 Lighthouse로 랜더링 시간을 측정해보았다. 측정해보니까 LCP(Largest Contentful Paint)시간이 지나치게 길어서 점수가 낮게 나왔다. 점수를 올려보자. 2. How? Font 바꾸기 font 형식을 ttf에서 woff2로 변경. 호환성이 낮은 woff2보다는 용량이 30%정도 크더라도 호환성이 높은(물론 ttf만큼은 아니지만)woff로 하고 싶었으나, suit가 woff가 없어서 woff2로 설정. 폰트 파일 사이즈가 570, 578kb에서 166.. 공감수 0 댓글수 0 2024. 1. 15.
비슷한 컴포넌트 재사용하기 / 아워홈 사전과제 1. Why? 아워홈 사전 과제를 진행하며, 어떻게 하면 컴포넌트의 재사용성을 높일 수 있을까 고민을 많이 했다. 다른 프로젝트를 진행하면서도 비슷한 요소의 컴포넌트를 어떻게 재사용/분리여부를 결정할지 고민했었기에, 이 기회에 정리를 해보고자 한다. 2. 도전 아래의 태그 2가지를 랜더링시켜줘야할때, 여러 방법으로 나눠보고 어떤 방법이 적절한 방법인지 생각해보자 1. 하위 컴포넌트에서 부담 ListCardTag type CardTag = 'best' | 'new'; interface ListCardTagProps { tag: CardTag; } export default function ListCardTag({ tag }: ListCardTagProps) { if (tag === 'best') { ret.. 공감수 0 댓글수 0 2024. 1. 14.
Context Api + Reducer로 전역상태 관리하기 / 아워홈 사전과제 1. Why? 아워홈 사전과제에서 상품 리스트의 물건을 장바구니에 담는 부분이 있었다. 이를 위해서는 전역 상태에 장바구니에 담겨있는 상품과 수량 이 필요해 보였다. 이를 사용하는 기능으로는 상품 리스트에서 버튼을 누를경우 장바구니에 담김 이미 담겨 있을 경우 수량 + 1 장바구니에서 수량을 조절할 경우 상품의 수량이 변경 정도가 있을텐데, 겨우 이 정도의 상태 관리를 위해서 전역 상태관리 라이브러리를 사용하는 것은 낭비라는 생각이 들었다. 그래서 React의 네이티브 기능인 Context Api를 통해서 장바구니 상태를 구현했다. 2. How? Context Api란? 일단 Context Api에 대해서 공식문서로 먼저 알아보자. Context Context lets a parent—even a dis.. 공감수 1 댓글수 1 2024. 1. 12.
액션, 계산 분리해보기(함수형 프로그래밍) 1. Why?함수형 프로그래밍은 오래동안 도전해보고 싶은 영역이였다.특히 테오님의 블로그에서 함수형 프로그래밍을 소개한 글을 읽고서는 '나도 코드를 저렇게 써봐야지'라고 맘먹고 "쏙쏙 들어오는 함수형 코딩" 책도 구매했었다.내가 쓴 코드를 리팩토링하려다 너무 복잡해서 때려친 적도 있었고, 다른 팀원이 질문을 했을 때, 로직을 살펴보다가 한시간 넘게 잡아먹은 적도 있었다. 이런 상황을 겪으며 함수를 나누고 복잡성을 낮추는것의 필요성을 느꼈기 때문이다. 하지만, 싸피의 타이트한 일정(7주간 프로젝트 X 3번 + 쉬는 기간 없음 + 남는 시간에는 자소서 쓰고 코테 준비) + 프로덕트에 대한 욕심(실제로 사용 가능한 프로덕트를 만들고 싶어!) 때문에 구현을 마치기에도 늘 벅차서 미뤄두고 있었다.그런데 마침! 원.. 공감수 0 댓글수 0 2024. 1. 8.
이재용 '동행철학' 결실이 쓰는 삼성 청년 SW 아카데미 aka SSAFY 9기 수료 후기 1. Why? 이재용 '동행철학' 결실…SSAFY 누적 취업자 5년만에 5천명 넘어 | 연합뉴스(서울=연합뉴스) 장하나 기자 = 삼성의 대표적인 CSR(기업의 사회적 책임) 프로그램인 '삼성청년소프트웨어(SW)아카데미'(이하 SSAFY)의...www.yna.co.kr안녕하세요, 이재용 동행철학의 결실입니다. 홍보용 사진으로 쓰일 수 있다는건 알았지만 이 정도로 오만데 다 쓸지는 몰랐습니다...얼굴도 다 팔린김에 후기 작성합니다.2. How?지원과 합격컴퓨터공학과 졸업작품을 팀원들과 함께 만드는 중에, 함께 만들던 후배가 "선배님 프론트 반년하고 이 정도면 재능이 있는거 같은데, 개발쪽 진로 생각있으시면 SSAFY 지원해보시는게 어때요?" 라고 추천을 해줘서 지원했다. 이후 합격까지의 과정을 간략하게 설명.. 공감수 0 댓글수 3 2024. 1. 8.
유저 인증 상태 관리하기 1. Why? 프로젝트 에서 회원 관리 및 프론트엔드에서의 보안을 담당하게 되었는데, 그 과정에서 JWT와 OAuth를 사용해서 유저의 인증 상태를 관리했다. 이번 글에서는 어떻게 백엔드와 데이터를 주고받았는지, 그리고 왜 이런 방식으로 구현했는지에 대해서 설명하고자 한다. 만약 네트워크에 대한 배경지식이 없으시다면 아래 링크의 글부터 읽는 것을 추천드립니다. 쿠키와 세션 / 네트워크 HTTP W3 상에서 정보를 주고받을 수 있도록 정의된 프로토콜 Connectionless(비연결성) : 요청에 따른 응답을 받고나면 연결을 끊음 Stateless(무상태성) : 클라이언트-서버 관계에서 서버가 클라이언트의 cksxkr5193.tistory.com 2. How? 어떤 선택지가 있는지 1) 세션 기반 인증 인.. 공감수 0 댓글수 0 2024. 1. 8.
Vite를 사용하면서 svg 컴포넌트로 만들기 1. Why?과제 테스트를 위해 React + Vite 환경에서 setting 진행중이다. svg파일을 React Component로 만들어 쓰려고 했지만 계속해서 정상적으로 랜더링이 이뤄지지 않았다. 결론부터 말하면 Vite 4.0 이후로 문법이 달라져서 생긴 이슈였다. 2. How?순서vite-plugin-svgr 라이브러리 설치svg.d.ts 파일 생성(이름 달라도 상관 X)vite.config.ts 수정tsconfig.json 수정svg.d.tsdeclare module '*.svg' { const content: React.FC>; export default content;} vite.config.tsimport svgr from 'vite-plugin-svgr';export default.. 공감수 0 댓글수 0 2024. 1. 1.
Eslint와 Prettier 설정하기(React + Ts 사용) 1. Why?과제 테스트를 React와 TypeScript로 진행하는 중이다. 간만에 Eslint와 Prettier를 설정하다보니 기억도 가물가물한데, 그 김에 Eslint와 Prettier를 어떻게 설정했는지를 설명하고 왜 이렇게 설정했는지에 대해서 적어보고자 한다. 아래의 설정은 React + TypeScript + pnpm 기준이다. 2. Eslint init잠깐!일단 설명하기 전에, 나는 실수로 eslint를 정상적으로 적용시키지않고 과제를 제출했다...eslint를 설치하고 나서 .eslintrc.json 파일도 정상적으로 설정해줬으니 알아서 잘 돌아가겠거니~ 했는데과제 제출 후 글을 작성하는 도중에 혹시나 하고 var를 코드에 입력해봤는데 에러가 출력되지 않았다...뒤늦게 eslint init.. 공감수 0 댓글수 0 2023. 12. 31.
Interface VS Type / TypeScript 1.Why?TypeScript로 프로젝트를 진행하는 중, interface와 type(정확히 말하면 type alias-타입 별칭-이지만 편의상 type으로 부르겠다)의 차이점에 대해서 의문이 생겼다. 함수의 매개변수를 선언할때는 type, props 객체를 선언할 때는 interface를 사용하는 중이였는데, 둘의 차이점을 대략적으로는 알고있었지만 정확하게는 모르고 사용하고 있었다. 그렇기에 이 기회에 둘의 차이점을 정리해보고, type과 interface를 언제 사용할지에 대해서 명확히 정의해보고자 한다. 2. Interface VS Type둘 다 type을 설정해줄때 사용하고, 대부분의 경우에서 비슷하게 작동한다고 설명한다. 그럼 어떤 차이점이 있을까?1. 객체로만 사용가능한 InterfaceInt.. 공감수 0 댓글수 1 2023. 12. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.