본문 바로가기

전체 글

 (159)
삽질은 배움이다 개발을 하다보면 어마어마하게 많은 고생을 한다. 익숙치 않은 용어, 개념, 복잡한 알고리즘, 등등. 때문에 새로운 프레임워크, 언어를 공부할때면 매번 시행착오, 일명 삽질을 겪게 된다. 그러나 삽질은 사실 도전이고 완성을 위한 과정이다 삽질하는 과정에서 시도해본 수많은 토이프로젝트, 이곳저곳 염탐한 다른사람의 코드, 또는 공식소스코드, 문서, 이 모든것들이 모여서 클릭하게 된다. 이번에 개인 프로젝트를 처음써보는 react-query, recoil을 적용하면서 느꼈다. 그 과정에서 수많은 에러와 버그를 만났다. 특히 cookie를 저장하고 읽어오는 과정에서 많은 에러를 만났다. cookie를 받아오기 위하여 에러를 검색하고 읽어내려간 문서에서 또다시 모르는 개념을 찾기를 반복하였다. 당장 react-qu..
Select 태그에서 placeholder 만들기 개요 HTML의 select 태그에 placeholder를 넣어야 하는 상황이 생겼다 대충 이런식이다 하지만 select 태그는 placeholder 속성이 없다. 그래서 이렇게 option 하나를 placeholder를 대신해서 써야 한다. 해결 플레이스홀더 옵션1 옵션2 옵션3 옵션4 옵션5 옵션6 이렇게 나온다. 맨 위 옵션은 selected 되었지만 disabled 및 hidden 되었기 때문에 옵션 리스트에는 보이지 않는다. 옵션 한 개를 선택하면 그 다음부터는 보이지 않는다. 그리고 추가로 플레이스홀더가 있을 때와 없어졌을 때 스타일이 달라져야 했다. select와 option의 value에 플레이스홀더 값을 달고 onChange 이벤트 핸들러를 다음과 같이 붙일 수 있다. styles.sel..
Atomic Design Pattern: 아토믹 디자인 패턴 아토믹 디자인 패턴 아토믹 디자인 패턴은 개발 방식은 개발에만 적용되는 개념이 아니라 디자인에도 적용되는 실제 패턴이다. 말 그대로 작은 단위의 컴포넌트를 재사용성이 강하고 단단하게 설계함으로서 점진적으로 지속적으로 개발하기 용이하게 하는 방식이다 웹 프론트엔드 개발에서 가장 많이 쓰이는 라이브러리 및 프레임워크인 React, Vue 모두 컴포넌트 단위로 개발을 진행하기 때문에 이러한 컴포넌트 중심 설계 패턴이 주목받게 됐다. 상위 컴포넌트는 순서대로 Atoms, Molecules, Organisms, Templates. Page Atom(원자) Atom은 말 그대로 가장 작은 단위의 컴포넌트이다 원자는 어떠한 context가 주어지든지 이에 해당하는 컴포넌트가 생성될 수 있어야 한다. 따라서 다양한 s..
styled-component의 고찰 나에게 가장 선호하는 스타일링 라이브러리가 무엇이냐고 물어본다면 styled-component라고 대답할 것이다 그만큼 지금껏 개발할때 줄곧 스타일드 컴포넌트를 사용했다 . 최근에는 tailwind css 같은 라이브러리도 접했지만 아직까지도 스타일 컴포넌트를 주로 사용해왔다. 하지만 최근 이런 의문이 들었다 내가 그토록 많이 사용하는 라이브러리라면 누군가 스타일드 컴포넌트의 장점과 단점을 물었을때 설명할 수 있는가? 질문을 던졌을때 대답을 못할것 같았다 그래서 이 참에 스타일드 컴포넌트의 장점은 무엇이고 또 단점은 무엇인지 정리해보려고 한다 . styled-components의 장점 공식문서에서 장점을 가지고 와봤다. styled-components is the result of wondering ho..
[Redux] - 당신의 useSelector는 잘못되었다!! 개요 부끄럽지만 최근까지 나는 react-redux의 useSelector를 다음과 같이 구조 분해 할당하여 사용해왔다. const { id, name } = useSelector((state: RootState) => state.user) 이와 같이 스토어의 슬라이스를 전부 갖고 와서 그 중 필요한 값만 구조 분해 할당으로 빼왔다. 최근에 불필요한 리렌더링을 잡기 위해 데브툴을 켜놓고 만져보던 도중, 리렌더링이 전혀 발생하지 않아야 할 곳들이 반짝반짝하는걸 봤다. useSelector가 문제 될 줄은 전혀 모르고 삽질만 하다가, "혹시 ?" 하는 마음에 검색해봤다가 알게 되었다. useSelector + 구조 분해 할당 useSelector로 state.user 까지만 가져온 후 구조 분해 할당으로 값..
[Javascript] - 자바스크립트 배열 고차 함수 직접 구현해보기 * 시작하면서 평소에 개발과 알고리즘 문제를 풀면서 자바스크립트 배열의 고차함수들은 어떤 원리로 동작하는지 호기심이 있었다 단순히 built-in으로 존재하다보니 사용법만 익힌 다음 사용하기만 했는데 이번 기회로 MDN과 같은 여러 자료를 참고했고 직접 구현도 해보면서 배열의 고차함수들이 어떤 원리로 동작하는지 파악했다 구현하면서 개인적으로 신경 썼던 점은 기존의 배열 메서드를 최소화해서 직접 짜보는 것이였다 이번 포스팅에서는 map, every, filter만 작성했지만 나머지 고차함수들도 다뤄볼 예정이다 참고로 기본 자바스크립트 배열 고차함수들과 100% 같다고 확신할 수는 없다 ㅎㅎ 1. map map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 ..
[Javascript] - async와 await asyc와 await - async와 await라는 특별한 문법을 사용하면 프로미스를 좀 더 편하게 사용할 수 있다. async 함수 - async 키워드는 function 앞에 위치한다. - function 앞에서 async를 붙이면 해당 함수는 항상 프로미스를 반환한다. - 프로미스가 아닌 값을 반환하더라도 이행 상태의 프라미스로 값을 감싸 이행된 프라미스가 반환되도록 한다 - 예제의 6번째 줄처럼 후속 처리 메서드 then을 통해서 result 값인 1을 호출할 수 있다. - 위 예제처럼 명시적으로 프라미스를 반환하는 것도 가능하다. 결과는 동일하다 await - await키워느는 async 함수 내에서만 동작한다. - 기본적인 문법은 위 예제와 같다. - 자바스크립트는 await키워드를 만나면 프..
[Javascript] - Promise 체이닝 프로미스 체이닝 - 콜백 챕터에서 언급한 문제인데 스크립트를 불러오는 것과 같이 순차적으로 처리해야 하는 비동기 작업이 여러개 있다고 가정해보자 어떻게 하면 이런 콜백 문제를 코드로 해결할 수 있을까? - 결과적으로 프로미스를 이용하면 여러가지 해결책을 만들 수 있다 그 중 프로미스 체이닝을 이용한 비동기 처리에 대해 알아보자. - 프로미스 체이닝은 위와 같이 생겼다. - 프로미스 체이닝은 result가 then(handler)에서 handler의 체인을 통해 전달된다는 점에서 착안한 아이디어이다 - 위 예제는 다음과 같이 실행된다. 1. 1초 후 최초 프로미스가 이행된다 (*) 2 이후 첫번째 then() handler가 호출된다 (**) 3 2번에서 반환된 result 값은 그 다음 then() ha..

티스토리툴바