본문 바로가기

분류 전체보기

 (43)
README 안녕하세요! 👋🏻프론트엔드 개발자로 활동하고 있는 Shelly입니다.저는 "한 번 경험하면 포기할 수 없는 편리함을 제공하는 서비스를 만든다!"라는 야심 찬 꿈을 갖고 있습니다! 🌟 다이어트를 할 때 가장 참기 힘든 것은 바로 "아는 맛"입니다.그 음식이 얼마나 맛있는지 아니까 포기하기 힘든 것이죠.마치 32인치 모니터를 사용하다가 13인치 노트북을 사용하려고 할 때의 답답함과도 비슷합니다. 이처럼 경험은 강력한 힘을 갖고 있습니다.저는 그런 서비스를 만들고 싶습니다.한 번 사용하면 이전으로 돌아갈 수 없는 경험을 주는 서비스를 말이죠! 그리고 그 꿈을 이루는 과정을 블로그에 남겨보려고 합니다.티스토리를 처음 시작할 땐 프론트엔드 기술에 중점을 두고 글을 쓰려고 했지만,블로그의 목적을 조금 바꿔보려..
[React] 컴포넌트 Property type 가져오기 | Get component props type 상황블로그 글 내용을 표시하는 React 어플리케이션을 개발 중입니다. 각 글은 제목, 내용, 고유 ID 등의 다양한 정보를 가지고 있습니다. PostDetail 컴포넌트는 props로 전달받은 글의 제목과 내용을 표시합니다. interface PostDetailProps { post: PostType}function PostDetail({ post }: PostDetailProps) { return ( {post.title} {post.content} );}  MyParent 컴포넌트에서 PostDetail 컴포넌트를 사용하고자 합니다. PostDetail의 post 타입은 어떻게 추론할 수 있을까요? // MyParent.tsxfunction MyParent() ..
[Javascript] 스크롤 이벤트로 비디오 재생 | 클론코딩 | 인터렉티브 웹 클론코딩 대상토스의 브랜드 스토리 사이트(https://toss.im/new-dimension/brand-story)의 첫 번째 섹션을 클론한다. 새로운 차원의 토스토스의 새로운 로고를 만나보세요toss.im 분석뒷 배경은 비디오로 되어있으며, 스크롤에 따라 재생시킨다. video src : https://static.toss.im/homepage-static/newtoss/intro-video.mp4   글자는 비디오와 분리되어 있다.h1태그를 사용하여 글자를 html에서 입력했다. 텍스트를 비디오에 포함시키지 않은 이유는, 뒷 배경은 그대로 사용하더라도 텍스트는 유연하게 변경하기 위함이라고 예상 "완전히 차원이 다른 토스의 새로운 얼굴" 텍스트는 페이지 진입 시 fade up 되며 나타난다. fade..
React useEffect 제대로 사용해보자! 이 글은 React 공식 문서 중 You Might Not Need an Effect 내용을 바탕으로 작성된 글입니다.  You Might Not Need an Effect – ReactThe library for web and native user interfacesreact.dev 불필요한 Effect를 제거하자A1. 랜더링 되는 동안 모든 것을 계산하기상황props로 전달받은 문자열 리스트를 보여주는 컴포넌트가 있다. 그 문자열 중 'filter'라는 문자열은 화면에 보여주고 싶지 않다. 불필요한 Effects 예시아래의 코드에서는 화면에 보여줄 리스트(filteredItems)를 따로 관리하고있다. useEffect가 initialList가 변경되었음을 감지하면 내부 state를 변경한다. 이는..
[도서/자기계발] 나의 하루는 4시30분에 시작된다 PART1. 새벽은 배신하지 않는다사람들은 내가 무언가를 더 하기 위해 4시 30분에 일어난다고 생각하지만나에게 새벽은 잠시 충전하는 휴식시간이다. 저자도 한 때는 매일 반복되는 일상을 보내며 "모두가 이렇게 사는데!"라고 스스로를 위안했다. 주말에는 보상심리 때문인지 아무것도 하고 싶지 않았다. 하지만 아무리 쉬어도 에너지가 채워지는 느낌을 못하고, 오히려 우울감이 늘어날 뿐이었다. 어느 날 우연히 일찍 일어난 아침, 새벽의 고요가 스트레스받던 자신을 돌아볼 수 있는 기회가 되었다. 그 시간 동안 무엇이 자신을 힘들게 하고 슬프게 만드는지 써 내려가며 스스로를 위로했다. 그렇게 새벽시간은 저자에게 휴식시간이 되었다.  몸이 무엇을 하고 있는지가 아니라머리와 마음이 무엇을 느끼는지가 휴식의 질을 좌우한다..
[도서/자기계발] 간단한 습관이 끝까지 간다 끝까지 해내기 위한 행동 습관습관에는 의지, 열정이 필요하지 않다.퇴근길은 나의 습관 중 하나이다. 오늘 하루 있었던 일을 생각하며 걷다가 문득 정신을 차려보면 집 앞이다. 어느 역에서 지하철을 갈아타고, 어느 골목에서 꺾는지 생각하지 않았다. 머리로는 다른 생각을 하면서 몸은 자연스럽게 집으로 향하고 있다. 의지와 열정이 없어도 그냥 몸이 움직이는 것, 이것이 습관이다.  고민이 무엇인지 고민하라.아쉽게도 퇴근길은 그저 어쩔 수 없는 반복을 통해 만들어진 습관일 뿐 무언가 바꾸진 못한다. 우리는 조금 더 유의미한 행동을 습관으로 만들고 싶어 한다. 이 책은 나의 고민이 무엇인지부터 생각해 보라고 말한다. 구체적인 고민이 있다면 그 고민의 존재는 내가 행동할 수 있는 의지를 부여한다. 즉, 고민은 나를 ..
실용주의 프로그래머 정리 1. 고양이가 내 소스코드를 삼켰어요 * 코드를 백업하지 않고 컴퓨터를 포맷시켰을 때, 고양이가 소스코드를 삼켰다고 하는 변명이 과연 통할까? * 자신이 모르거나 실수한 것을 인정하기를 두려워하지 말자. * 변명을 하기보단 인정을 하고, 대안을 제시하자. 11. 프로토타입과 포스트잇 * 이전에 해본 적 없는 것, 기술적으로 모호한 부분, 실험적인 것, 심적으로 뭔가 불안한 것 등이 프로토타입 대상이 된다. * 프로토타입은 꼭 코드가 아니어도 된다. 화이트보드에 포스트잇을 붙이는 것도 충분한 프로토타입이 될 수 있다. * 프로토타입을 통해 얻는 것은 코드가 아니라, 경험이다. 33. 리팩터링 * 리팩터링은 고통을 관리하는 것이다. * 잘 동작하는 코드를 해체하고 다시 맞추는 것은 고통스러운 일이다. 하지만..
코끼리와 밧줄, 프로덕트와 레거시 코끼리와 밧줄사람들은 서커스에서 공연하기 위해 어린 코끼리를 잡아 단단한 밧줄로 묶어두었습니다. 어린 코끼리는 탈출하기 위해 온 힘을 다해 밧줄을 끊어내려고 노력합니다. 하지만 단단한 밧줄을 끊어내기에 어린 코끼리의 힘은 역부족이었죠. 그렇게 어린 코끼리는 탈출하기를 포기합니다. 몇 년이 흐르고, 어린 코끼리는 어른 코끼리로 성장했고, 밧줄을 끊어내기에 충분한 힘을 가졌습니다. 하지만 코끼리의 발에는 여전히 밧줄이 묶여있습니다. 어렸을 때 실패했던 탈출 시도의 경험에 지금도 여전히 탈출할 수 없을 것이라 생각하기 때문에 시도조차 하지 않은 것이죠. 이 이야기는 특정한 실패 경험으로 학습된 무기력에 빠질 수 있다는 것을 보여줍니다. 프로덕트와 레거시저는 코끼리와 밧줄 이야기를 프로덕트와 레거시의 관점에서 ..

티스토리툴바