개발 일짱 블로그

😵 들어가며 회사에서 개인 계정과 회사 계정을 번갈아가면서 써야하는 경우가 있었다. 그런데 vscode 계정을 하나로 쓰다보니 다른 계정의 clone/pull/push 에 문제가 생겼고 이를 해결하기 위해 SSH 방식을 택했다. 사실 이게 뭔지 제대로 공부하지 않고 쓴 것 같아서 해당 인증의 원리와 방식에 대해 공부하고 정리할 필요가 있어보여 정리하는 오늘의 포스팅이다. 🔐 본문 SSH 란? SSH란 Secure Shell의 약어로 컴퓨터끼리 보안 연결을 통해 통신할 수 있도록 해주는 프로토콜이다. 😃 쉽게 말하면 내 컴퓨터를 인증된 사용자로 등록하여 비밀번호 없이 안전하게... Read More

😵 들어가며 외주사에서 작업한 프로젝트 중 관리자 프로그램의 스크립트가 다른 프로젝트와 다르길래 확인해보았더니 localhost 에서 https 사용을 위한 설정임을 알았다. 로컬 개발 환경에서 https 를 사용하는 이유는 여러가지일 수 있다. 배포 환경과 동일하게 구성하여 올바른 테스트를 위해서 일 수 있고, 소셜로그인 혹은 외부 API 사용 시 https 가 아니면 거절하는 경우 등.. 이러한 상황에서 로컬환경을 쉽게 https 로 구현할 수 있는 도구가 mkcert인데 오늘은 해당 도구가 무엇인지, 어떻게 설정하는지, 사용 방법에 대해 포스팅 해보려 한다. 🔐 본문 mkce... Read More

😵 들어가며 지난 게시글에서 vite 환경에서 svg를 리액트 노드 컴포넌트로 가져오는 법을 포스팅했었다. 그리고 오늘은 이어서, 가지고 온 컴포넌트를 Icon 컴포넌트 하나로 관리한 코드를 공유해보려 한다. 전체 코드 import Delete from '../icons/svg/delete.svg?react'; import Loading from '../icons/svg/loading.svg?react'; import Note from '../icons/svg/note.svg?react'; import Seed from '../icons/svg/seed.svg?react'; import Down ... Read More

😵 들어가며 과제를 하는데 아이콘 라이브러리를 설치하기엔 내가 필요한 아이콘은 5개 남짓이라, svg를 사용하는게 더 효율적일 것 같았다. 기존 webpack 환경의 리액트에서 사용하던 방식처럼 svg를 리액트노드 형식으로 바로 사용할 수 있을 것 같아 vite에서의 사용법을 서치하였다. 그리고 vite-plugin-svgr 라는 플러그인을 찾았는데,,,, 쉽지않네..? 구글링한 블로그 글을 아무리 따라해도 왜 난 에러가..?나지..? 근데 블로그 글들에 버전에 새로운 버전에서 이렇게 하면 되더라 얘기가 자꾸 중복되어 버전이 달라 그런건가? 해서 공식문서를 찾아보았다.. 그렇게 나는 또 한번 깨달았다,,... Read More

😵 들어가며 지난 게시글에서 vite 환경에서 svg를 리액트 노드 컴포넌트로 가져오는 법을 포스팅했었다. 그리고 오늘은 이어서, 가지고 온 컴포넌트를 Icon 컴포넌트 하나로 관리한 코드를 공유해보려 한다. 전체 코드 import Delete from '../icons/svg/delete.svg?react'; import Loading from '../icons/svg/loading.svg?react'; import Note from '../icons/svg/note.svg?react'; import Seed from '../icons/svg/seed.svg?react'; import Down ... Read More

😵 사건의 발단 우리가 지원하려는 React 기반의 디자인시스템 라이브러리에서는 모든 컴포넌트가 pretendard 폰트를 지원해야한다. 그래서 폰트 지원이 필요한 컴포넌트 스타일 파일 내에서 @import"https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"; 해당 임포트 구문을 추가해주고 있었다. 스타일도 우리가 의도한 대로 잘 먹었는데,,,그런데 말입니다.🫠 라이브러리를 만들고, 해당 라이브러리를 소개하는 사이트를 Next.js 로 구축하였다. 그런데? 하나의 컴포넌트가 추가되고 사라지... Read More

😵 들어가며 Github Actions은 Github 레포에서 개발 워크플로우를 자동화할 수 있는 도구이다. 이건 여담이긴 하지만 사실,, 최근 모노레포를 사용하다 특정 패키지에서 다른 패키지의 컴포넌트를 인식하지 못해 원인을 찾느라 엄청 헤맨 경험이 있었다..근데 알고보니 누군 또 되서 이상하게 여겼는데 알고보니 내가 빌드하지 않고 컴포넌트를 참조하려 해서 그랬던 것이였다.. 매우 바보같은 사람🤪ㅠ 여튼 한차례 챙피함을 느끼고 우리 패키지 구조상 빌드에 대한 중요성을 배웠다. 사수님이 프로젝트 초기에 빌드 체크하고 커밋하라고도 하셨는데 아차차~ 역시 울 사수님 틀린만 하나없다~ 그래서 언급해보는 자동화 ... Read More

😵 들어가며 왜 우리는 웹팩대신 비트를 선택했을까? 현재 구축하고 있는 라이브러리에서 비트를 처음 사용해보았다. 물론 회사에서도 처음 시도하였다. vite를 채택한데는 이유가 있을 것인데, 오늘은 그 이유에 대해 정리해보고자한다. Webpack VS Vite Webpack Webpack은 자바스크립트 파일과 그 의존성을 분석하여 하나의 번들 파일로 묶는 방식을 사용한다. 이는 브라우저에 전달할 파일 수를 줄이고 네트워크 요청을 최적화하려는 목적이 있지만, 다음과 같은 단점이 있다: 전체 번들링의 비용 Webpack은 프로젝트의 모든 파일을 분석한 뒤 하나의 번들 파일을 생성한다. 작은 코... Read More

😵 들어가며 리액트와 넥스트의 차이점이라 하믄 렌더링을 어디서 하느냐며, CSR과 SSR 의 차이라고만 생각했다. 하지만 SSR에도 종류가 여러가지가 있었는데,,! 정확히는 Next.js의 렌더링 종류엔 여러가지가 있는데,,! 를 깨닫고 써보는 오늘의 포스팅이다. 🔥 기본 개념 정리 React의 Rendering 리액트에서는 브라우저가 서버에서 JavaScript, CSS, HTML 파일을 다운로드한 후, JavaScript가 실행되어 화면을 렌더링한다. 이 과정에서 사용자는 초기에 빈 화면을 보게 되며, 초기 빈 껍데기인 html로 인해 검색엔진최적화(SEO)가 불리하다. Next.js의... Read More

😵 들어가며 현재 회사에서 라이브러리를 구축중인데 lit 패키지 쪽 CDN 배포를 리서치하게 되었다. 처음에는 CDN이라는 개념을 잘 모르니 어떤걸 해야하는지 나의 롤을 정확히 파악하지 못했다. 그래서 정리해보는 나의 CDN 탐험 및 라이브러리 배포기. CDN이란? CDN(Content Delivery Network)은 전 세계 여러 서버에 파일을 분산 저장하여 사용자가 요청하는 파일이 물리적으로 가장 가까운 서버에서 제공되어 더 빠르고 안정적인 콘텐츠 전달을 가능하게 하는 시스템이다. 내가 서울에 있으면 서울에서 가장 가까운 서버에서 콘텐츠를 불러오고, 멕시코에 있으면 멕시코에서 가장 가까운 서... Read More

😵 들어가며 디자인 시스템을 구축하며 평소에 접해보지 못했던 라이브러리들을 경험해보고 있는데, 그 중 비주얼 테스트 도구인 chromatic을 알게되었다. 오늘의 글은 chromatic의 사용법은 아니고 해당 도구의 필요성, 사용해보며 느낀점을 간단히 정리해보는 글이다. 🔥 chromatic 도입 계기 현재 디자인 시스템에서 컴포넌트를 설계할 때, 피그마의 variables에 토큰을 등록하여 사용하고 있다. 토큰을 사용하면 특정한 토큰만 변경하면 해당 토큰으로 설정된 모튼 컴포넌트의 값을 한번에 변경할 수 있는 장점이 있다. 예를 들어, 우리 디자인 시스템의 메인 색상을 BrandColor 라는... Read More

😵 들어가며 디자인 시스템의 방향성을 정리하는 과정에서, 디자인팀과 개발팀이 각각 중요하게 생각하는 원칙을 정리해보기로 했다. 관련 자료를 찾아보니, 대부분의 글이 디자인팀의 관점에 더 많이 초점을 맞추고 있었다,,또륵. 그런데 글을 읽다보니 초반에 내가 생각했던 원칙 중 일부가 사실은 개발보다는 디자인적인 원칙에 가까웠다는 점에서 혼란을 느꼈다. 물론 디자인 요소를 완전히 배제할 수는 없지만, 디자인 시스템은 개발자에게도 중요한 역할을 한다. 그래서 개발자의 시각에서, 디자인 시스템이 어떻게 구성되어야 하고 어떤 원칙을 따라야 하는지 정리할 필요가 있었다. 이를 위해 저는 일관성, 확장성, 사용성이라는 ... Read More

SEO(Search Engine Optimization)는 웹사이트의 가시성을 높이고 검색 엔진에서 쉽게 찾을 수 있도록 최적화하는 프로세스이다. 마케팅 관점에서 주로 다루어지지만, 프론트엔드 개발자로서도 SEO는 매우 중요하다. 프론트엔드 코드는 검색 엔진이 사이트를 이해하고 순위에 반영하는 데 큰 영향을 미치기 때문이다. SEO의 중요성 SEO는 Zero Moment of Truth(ZMOT)의 일부로, 소비자들이 제품이나 서비스를 구매하기 전에 정보를 찾는 과정이다. ZMOT 중 검색 엔진이 40%를 차지하는 것으로 보았을때, SEO를 고려한 사이트를 구현하는 것은 매우 효과적이며 중요함. *ZMOT... Read More

@customElement 공식문서참고 @customElement("my-element") LitElement 를 <my-element>처럼 사용할 수 있도록 정의해주는 역할 이름을 지정할때 ‘-‘사용은 필수! customElements.define('my-element', MyElement); 와 동일한 문법 엘리먼트의 타입을 선언해 줌으로써 다른 파일에서 해당 웹 컴포넌트를 찾을 수 있게한다. declare global { interface HTMLElementTagNameMap { "my-element": MyElement; } } ... Read More

Shadow DOM의 스타일 격리 개념 외부 스타일이 Shadow DOM 내부에 영향을 미치지 않음 외부 스타일시트나 전역 스타일 설정은 Shadow DOM 내부의 요소에 영향을 미치지 않는다. 예를 들어, 외부에 h1 태그에 대한 전역 스타일을 지정해도, Shadow DOM 내부의 h1 태그는 그 스타일을 상속받지 않는다. Shadow DOM 내부 스타일이 외부에 영향을 미치지 않음 반대로, Shadow DOM 내부에서 정의된 스타일은 그 컴포넌트 내부에서만 적용되고, 외부 DOM에 있는 요소들에는 영향을 미치지 않는다. ... Read More

1. Lit 웹 컴포넌트(Web Components)를 쉽게 만들 수 있도록 도와주는 경량의 라이브러리 lit-html : HTML 템플릿을 렌더링하는 데 사용한다. html`<h1>Hello Tomato!</h1> ` lit-element : lit-html을 내부적으로 사용하여 컴포넌트의 템플릿을 렌더링하여 커스텀 엘리먼트를 만들고, 상태 관리, 속성 정의, Shadow DOM과 같은 기능을 제공한다. 2. 웹 컴포넌트의 특성 Shadow DOM (섀도우 DOM) 컴포넌트의 DOM을 캡슐화하여 외부의 스타일이나 자바스크립트가 내부에 영향을 미치지 않는다. ... Read More

웹 브라우저(크롬, 사파리 등)는 자바스크립트 코드를 해석하고 실행해주는 중요한 환경이다. 이를 이해하기 위해서는 브라우저 내부의 구조와 자바스크립트의 동작 방식을 알아야 한다. 웹 브라우저 내부 구조 1. 스택(Stack) 코드 실행이 이루어지는 공간. 자바스크립트는 싱글 스레드(single-thread) 기반 언어로, 한 번에 하나의 작업만 처리할 수 있다.(stack이 하나기 때문). 이는 코드가 스택에서 순차적으로 하나씩 실행된다는 의미이다. 자바스크립트는 싱글 스레드이기 때문에, 스택이 바쁘면 새로운 작업을 바로 처리할 수 없다. 반복문을 ... Read More

자바스크립트는 싱글스레드 언어로, 한 번에 하나의 작업만 처리할 수 있다. 그러나 비동기 작업을 지원하기 위해 이벤트 루프와 Web API 같은 여러 메커니즘이 사용된다. 1. 콜백 함수 (Callback Function) 콜백 함수는 다른 함수의 인자로 전달되어, 특정 시점에 호출되는 함수이다. 콜백 함수는 동기적(synchronous)으로 호출될 수도 있고, 비동기적(asynchronous)으로 호출될 수도 있다. 동기적 콜백 함수 예시 function greeting(name) { console.log(`Hello, ${name}!`); } function pro... Read More

데이터 구조와 알고리즘을 공부해야 하는 이유는 여러 측면에서 중요하다. 단순히 코드를 작성하는 것보다, 효율적인 해결책을 제공하고, 성능과 자원 관리에서 큰 차이를 만들 수 있기 때문이다. 1. 알고리즘 알고리즘은 문제를 해결하는 명확한 절차나 단계로 이루어진 지시사항의 집합이다. 프로그램이 어떤 작업을 어떻게 수행할지를 설명하는 것으로, 동일한 문제를 해결하는 데 다양한 알고리즘이 존재할 수 있다. 알고리즘을 공부하는 이유는 더 효율적인 방법을 찾기 위해서이다. 특히, 처리해야 할 데이터가 많아질수록 알고리즘의 효율성은 성능에 큰 영향을 미친다. 효율성: 효율적인 알고리즘은 처리 시간을 줄이고 메모리... Read More

CORS : Cross-Origin Resource Sharing 1. 브라우저 정책과 보안 브라우저는 보안상 이유로 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 특정 규칙에 따라 제한함. SOP : Same-Origin Policy 정의: 동일한 출처에서만 자원을 요청할 수 있도록 제한하는 보안 정책 목적: 서로 다른 출처 간의 정보 공유를 방지하여, 악의적인 스크립트가 사용자 데이터를 도용하거나, 웹사이트 간의 공격을 시도하는 것을 차단 구성: 프로토콜, 호스트, 포트 - https://www.example.com:443 CORS : Cross O... Read More

시간 복잡도 시간 복잡도는 알고리즘의 성능을 평가하는 척도이다. 데이터 구조나 알고리즘이 얼마나 빠르거나 느린지를 실제 시간이 아닌, 단계(step)로 측정하기에 단계 수가 적을수록 더 효율적인 알고리즘이다. 예를 들어, 선형 탐색(Linear Search)은 O(n)의 시간 복잡도를 가지며, 데이터 양에 비례해 시간이 증가하지만, 이진 탐색(Binary Search)은 O(log n)으로 훨씬 빠르게 작동한다. 비휘발성 메모리와 휘발성 메모리 비휘발성 메모리는 컴퓨터를 껐다 켜도 데이터가 유지되는 메모리. 휘발성 메모리(RAM)는 컴퓨터가 실행 중일 때만 데이터를... Read More

HTTP : Hypertext Protocol HTTP란 서버와 클라이언트 간의 TCP/IP 통신 위에서 메시지 교환하기 위해 사용되는 프로토콜이다. 프로토콜 : 서로다른 하드웨어 기기끼리 원활하게 통신하기 위해 필요한 규칙 HTTP 프로토콜 : 웹 브라우저와 웹 서버 간의 데이터를 주고받는 규칙 1-1. HTTP의 특징 Stateless 과거 정보를 남기지 않고 새로운 리퀘스트를 보낼때마다 새로운 리스폰스를 보낸다. 상태를 유지하고 싶을때는 세션과 쿠키가 쓰인다. 리퀘스트에서 URI로 리소스를 식별 요청 라인 ... Read More

들어가며😃 프로젝트에서 차트를 보여주는 페이지를 내가 담당하게 되었다. 다양한 라이브러리가 후보군에 있었지만 표현해야했던 그래프 종류를 모두 포함하고 있었고 가장 정보를 많이 얻을 수 있었던 echart 라이브러리를 채택하였다. 해당 라이브러리를 사용하면서 트리쉐이킹 관련 문서를 많이 접할 수 있었는데, 이는 echart 공식 문서에서도 tree shaking API를 사용하라고도 나와있었다. 여튼 트리쉐이킹 관련 정보를 찾아보며 다른 부가적인 정보들도 알게되어 정리하고자 하는 오늘의 포스팅이다.🍃 1. Tree Shaking 이란? Tree shaking은 JavaScript의 모듈 번들링 도구... Read More

들어가며😃 Antd에서 notification이라는 기능을 사용하면서 겪은 이슈를 바탕으로 globalContext에 대한 개념을 익히게 되었다. 조금 더 잘 익혀두기 위해 정리해보는 오늘의 포스팅이다. 1. 이슈 발생: noti가 사라진다?! Antd 문서에서 제공해주는 샘플대로 페이지를 만들고 노티를 생성해보았다. const NotificationDetail = () => { const [api, contextHolder] = notification.useNotification(); type NotificationType = "success" | "info" | "warning"... Read More

들어가며😃 프로젝트에서 yaml 파일을 읽고, 수정하고, 만들어보았다. 팝업을 호출할 때 등록한 파일을 넘겨주고, 팝업은 전달받은 파일을 해석하여 이름과 내용을 에디터에 보여준다. 그리고 사용자가 내용을 수정하고 팝업을 닫으면 변경된 내용을 바탕으로 파일을 새로 만드는 과정이였다. 해당 내용을 처음 접했을때는 파일을 만드려면 라이브러리를 사용해야하는 것인가? 라고 생각할 만큼 파일 해석, 생성 과정에 초면이였다. 결론은 new File 이라는 파일 객체 생성으로 간단하게 구현할 수 있었고, 이 과정에서 Blob 이라는 타입을 처음 접하게 되었다. 그래서 파일 관련 로직과 Blob 타입에 대해 간단하게 정리하고... Read More

들어가며😃 프로젝트에서 CKEditor를 사용하였는데 해당 라이브러리에서 제공해주는 기본 에디터보다 커스텀해서 쓰는 편이 더 효율적이였다. 워낙 필수기능만 구성하자는 취지가 있었던지라 기본 기능도 프로젝트 핏엔 워낙 넘쳐 필요한 기능만 쓰는 것 보다 커스텀을 통해 훨 가볍게 가져다 쓸 수 있는 이점도 있었다. 그래서 이번에 라이브러리 패키징을 처음 접하게 되었는데 생각보다 꽤 쉬웠고 다음을 위해 정리해보는 오늘의 포스팅이다.✍🏻 에디터 다운로드 순서 CKEditor 홈페이지에 접속 Online builder 에디터 타입 선택 (나는 기본 cla... Read More

들어가며😃 프로젝트에서 Antd 테이블을 사용하다가 문제를 발견했다. 페이지네이션 중 체크박스를 선택하고 다른 페이지에서 체크를 하고 다시 돌아오면 이전 페이지의 체크가 해제되어있었다. 간략하게 정리하자면 antd 테이블의 rowSelection 속성이 페이지별로 체크된 데이터를 저장하고 있는데 실제 api는 전체데이터가 아닌 페이지 별로 데이터를 받아오기 때문에 저장이 되지 않는 이슈였다. 해당 이슈를 어떻게 해결해나갔는지 정리해보고자 올리는 오늘의 포스팅이다. 이슈 재현 *해당 이슈를 재현하기 위해 faker 라이브러리를 사용하였고, 데이터 생성기는 해당 페이지에서 참고 가능하다! 위에서 ... Read More

들어가며😃 현재 진행하고 있는 프로젝트에서 실제 서비스 api를 사용할 수 없어 대안으로 가짜 데이터를 생성하여 사용하고 있다. 이 가짜 데이터를 하나하나 생성하기엔 비효율적이라 faker 라이브러리를 사용하였다. 써보니 데이터를 생성하는데 시간을 엄청나게 아껴주고, 지원하는 데이터 형식도 다양하여 만족도가 높은 라이브러리였다. 그런데 데이터가 랜덤으로 생성되다 보니 테이블 같은 데이터에 페이커를 사용하면 원하는 페이지에 항상 똑같은 데이터가 들어오지 않는 현상이 있었고 이를 또 seed 라는 api로 제어할 수 있어 해당 방식을 정리해보려 쓰는 오늘의 포스팅이다. faker.js 간단한 사용법 사용... Read More

들어가며😃 지난 프로젝트를 생각해보면 테이블에 대한 이슈가 꽤 나왔다. 다음 프로젝트에서도 꽤나 비슷한 상황들이 나오길래 정리해두면 좋겠다 싶어 정리해보는 내용이다. 이번 포스팅은 테이블의 체크 박스 선택 시 일어나는 에로 사항과 그 해결 과정이다. 이슈 재현😵‍💫 이미지에서 보는 것 처럼, 테이블의 row 를 클릭하면 해당 데이터에 대한 상세페이지로 접근한다. 그런데,,,,! 체크박스를 선택하다보면 해당 영역 그 이외의 부분을 클릭하는 경우가 있다. 빠르게 리스트를 체크하거나 대충(?) 체크하다보면 다른 영역을 선택하는 경우가 허다했다. 그러면 다시 테이블 페이지로 돌아갔을때, 하나하나 ... Read More

들어가며😃 정말 바쁜 하루하루를 보내고 있다. 새 프로젝트를 진행중에 있는데 비지니스적인 이슈가 너무 많아 일 이외에 다른 생각을 할 수 없는 일상이 되어버렸다,,,흑,,😵‍💫 이와중에 팀 내 스터디를 하고있는데 생산적인 느낌보단 조금 부담이 되어버렸다. 일할 시간도 없는데 무슨 스터디야!! 라는 생각이 들 참에 이번 챕터에서는 에러처리에 대해 공부하였고 굉장히 기본적이고 내가 제대로 배우지 않고 넘어갔던거라 꼭 기록하고 싶어서 남기는 글! 에러 처리 방법 Error State : 예상할 수 있는 에러에 대한 상태 설정 Exception Error : 예상하지 못한 에러에 대한 처리 프... Read More

들어가며😃 나는 이제껏 대부분의 파일명 혹은 폴더명을 카멜케이스로 작성하였다. 그런데 프로젝트 진행 중 컨벤션을 맞추는 과정에서 폴더명이 하이픈(-)으로 이어져있길래 이전에 맞춘적이 있냐고 물어봤더니 ‘아 케밥케이스요? ~~~!@#$%^’라고 하셨다. 여기서 오잉? 케밥?🥪 이라는 생각과, 외울필요는 없지만 문득 코딩 용어를 정리할 필요는 있겠다 싶었다. 그래서 정리해보는 오늘의 포스팅 주제 : 네이밍 컨벤션 정리 카멜케이스_camelCase 표기 : 시작 단어의 첫문자는 소문자, 다음단어의 첫문자는 대문자. 첫 단어 이후에 오는 첫 문자가 대문자가 붙으면서 중... Read More

들어가며😃 자바스크립트의 맵 메소드가 있다면 타입스크립트에는 맵드 타입이 있다니! 맵드 타입(Mapped Type)이란? 이름에서 알 수 있다시피 자바스크립트의 map 메소드를 타입에 적용한 것이다. 기본문법 { [ P in K ] : T } type Fruits = "apple" | "banana" | "grape"; 예를 들어, 과일 이름을 타입으로 지정하는 Fruits 타입이 있다고 하자. 그리고 각 과일의 이름에 숫자를 붙인 객체를 만들기 위해 Fruits의 타입들을 맵드 타입 문법을 이용해 키를 만들어주고 넘버 타입을 할당해준다. type FruitsAccount = { ... Read More

들어가며😃 이전에 정리한 제네릭 타입에 이어 유틸리티 타입을 정의해보려한다. 유틸리티 타입이란? 유틸리티 타입이란 이미 정의된 타입을 변환할때 쓰는 타입 문법이다. interface MyType { name: string; age: number; gender: number; height: number; } 예를 들어 MyType 이라는 타입을 지정했는데 어떤 객체에는 age가 없는 3개의 타입만 필요하고, 어떤 객체에는 age 와 name 이 필요할 수 있다. 이런 경우에 지정된 타입을 입맛대로 쏙쏙 골라 타입을 지정해줄 때 사용하는 것이 유틸리티 타입이다. 그리고 오늘은 가... Read More

들어가며😃 프로젝트를 진행하면 타입스크립트를 거의 필수적으로 쓰고 있는데 기본적인 타입만 썼었다. 그래서 유독 제네릭 타입만 보면 오잉? 싶은 느낌이,,, 다음 프로젝트 들어가기 전에 시간적인 여유가 잠깐 있어서 타입스크립트 강의를 듣고있는데 제네릭 타입이 예전처럼 어렵지도 않게 느껴졌고, 그리고 앞으로 더 가까워지려고 기록하는 글 제네릭이란? 제네릭은 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. 타입을 사용할때 타입을 정의하는 것이다. 아래의 기본 틀을 보자. 일반 함수에 제네릭 사용 function genericReturnFunc1<T>(arg: T): T { ... Read More

들어가며🐥 상황 정리 프로젝트 진행 중 기존에 있던 분이 나가시고 신입 두명이 들어와서 프로젝트에 바로 투입되었다. 얼탈 시간도 없이 바로 실무를 하다보니 작은 실수도 크게 느껴지고 이렇게 몰라도 되는건가 싶었다. 신입이 이렇게 빡센건가요…?🥲 나는 한참 헤메이고 있을때 다른 팀원들은 이미 진행하던 일에 매우 바쁘셔서 나만 더욱 헤메이는 느낌ㅠㅠ 정말 입사 한달차에는 내 실력에 대한 현타를 많이 느끼고 성장하고 싶은 생각을 가장 크게 했던 것 같다. 그리고 조금씩 감정적으로도 타격이 있었는데 그럴때마다 내 소중한 동기 한명이 있어서 얼마나 다행인지,,ㅠㅠ 같이 헤메고 머리 합치고 이슈 풀어나가려고 했던 날... Read More

들어가며😃 프로젝트 중 하나의 게시물에 트리구조로 자식 게시물이 여러개가 있는 페이지가 있었다. 외부 페이지에서 자식 페이지의 제목을 클릭하면 상세 페이지로 진입 후, 해당 게시물이 있는 영역으로 자동으로 스크롤이 되는 구조를 만들어야 했다. 사실 내가 맡은 파트는 아니였지만 해당 로직이 궁금해서 따로 공부해보았다. 그리고 겪은 실패들과 그 요인을 정리해보려한다. 한 페이지에서 특정 요소 클릭 시 특정 위치로 스크롤을 이동시키는 방법을 두가지로 정리해보았다. 한 페이지 내에서 스크롤 - href 와 id 같은 페이지 내에서는 a 태그의 요소 href에 이동하고 싶은 요소(div)의 id값을 #으로... Read More

들어가며😃 입사 후 가장 처음으로 개발한 건이 회원정보를 조회하는 목록페이지였다. 조금 더 풀어보자면, 회원목록이 테이블로 나타나고 필터로 설정된 값을 통해 api를 호출하는 식이였다. 그동안은 state로만 값을 설정하고 api를 호출했었던 터라 처음 개발에 들어가서 조금 버벅였다. 반복되는 목록 페이지 개발에 조금 익숙해진 상태이지만 조금더 개념을 잡을겸, 다음에 참고할겸, 블로그에 개발 로직을 정리해보려한다. 크게 정리하면 쿼리스트링을 받아와 api를 호출하고 쿼리스트링의 값을 아래 이미지의 필터에 넣어주는 형태인데 아래에서 자세하게 알아보자.🧐 1. 쿼리 파라미터 받아오기 페이지에 접근했... Read More

들어가며😃 사용자가 입력하는 값은 어떤 값이 들어올지 모르기 때문에 항상 다양한 경우의 수를 생각해야한다. 사이트에서 글을 쓸때, 비속어를 쓰면 자동으로 지워지는 현상이 있고, 사용자는 교묘하게 다른 방식으로 해당 언어를 표현하는 경우를 많이 접할 수 있다. 오늘은 이 상황을 재현해보려한다. input창에 불순한 언어(금지어)가 들어오면 지워지는 로직을 만들어보자! 1. 금지어 리스트 생성 우선 아래와 같이 금지어를 선언한다. const BANNED_WORDS_LIST = "나쁜말1,나쁜말2,나쁜말3,나쁜말4"; // 모든 페이지에서 리스트를 공유할 수 있도록 localStorage에 저장 lo... Read More

들어가며😃 useRef에 대한 포스팅을 초반에 한적이 있었는데, 그때는 DOM 속성을 조작하는 기능에 초점을 두었었다. 그래서 그런지 useRef에 변수를 저장할 수 있다는 법을 잠시 잊고있었고, 속성 조작하는 식으로 변수를 조작하려 삽질했다가 변수로 저장하는 법을 다시금 일깨우게되었다… 내 머릿속에 개념을 정리하고자 오늘은 useRef로 변수를 저장하는 법과 useState와의 차이점을 다뤄보려한다. useRef React 라이브러리에서 제공하는 훅(Hook) 중 하나로, 함수형 컴포넌트 내에서 변수를 만들고 관리하는 데 사용된다. 컴포넌트가 리렌더링되더라도 그 값을 유지하며, useState와는 다... Read More

들어가며😃 이전에 관심사의 분리에 대해 정리하였다. 그때 ‘소프트웨어는 변화에 유연하게 대응할 수 있어야한다’ 라는 것을 배웠는데 오늘의 주제 또한 이 이념과 맞닿아있다. 오늘은 개념적인 부분도 참 중요하지만 이것을 적용하는게 더 중요한 것 같다. 코드가 엉망이지만 아직 다른 개발 건이 많을 때, 혹은 다른 프로젝트가 있을 때, 에라 모르겠다 다음에 하지 뭐 가 아닌 처음부터 잘 개발할 수 있도록 이 원칙을 마음에 새기자는 뜻으로 오늘의 포스팅 시작해보겠다. 의존성 역전 원칙(Dependency Inversion Principle)이란? 쉽게 말하면 변화하기 쉬운 것에 의존하지 마라는 것 인데, 우... Read More

들어가며😃 클로저의 개념을 정리하기 전에 더 필수적으로 정리해야할 개념들이 있어 이전 포스팅에 정리해보았다. 공부하면 할수록 어림짐작만 되었던 자바스크립트 구조가 더 선명하게 보이고 로직들을 잘 이해하게 된다. 이번 포스팅에선 또 어떤 가르침을 줄지 기대가 된다. 어쨋던 돌고 돌아 클로저로 왔는데 확실히 실행 컨텍스트 관련 개념을 이해하니 클로저 파트도 이해하기 쉬워졌다. 이로써 나온 나의 포스팅도 누군가에게 쉽고 깔끔하게 다가오기를 😇. 스코프 해당 개념은 이전 포스팅에서 정리한 렉시컬 환경의 외부 환경 참조 부분과 식별자 개념에 아주 연관이 깊다. 함수가 실행되면 실행 컨텍스트가 쌓이고 식별자가... Read More

들어가며😃 프리온보딩 인턴십 중 강사님이 Class 와 함수를 비교하면서 동작+상태 가 필요할때는 Class, 동작만 필요하면 함수를 쓰는게 효율적이라고 했다. 함수에서 값을 기억하려면 Closure를 써야한다 했는데 나는 여기서 클로저에 꽂혔다⚡️. 그런데 말이다,,,강사님이 한 말이 어떤 의미인지 알고싶어 클로저에 대해 공부하려했던 것인데,,, 클로저 > 스코프 > 호이스팅 > 렉시컬 환경 > 실행컨텍스트 까지 거슬러 올라와버렸다..😵‍💫 이런 비하인드 스토리와 함께 오늘은 클로저를 정리하기전에, 꼭 알아두어야하는 개념인 실행컨텍스트와 렉시컬 환경에 대해 먼저 포스팅해보려한다. ... Read More

들어가며😃 알면 알수록 중요한 개념들이 쏟아져 나오는 요즘이다. 개발을 시작할 당시엔, 인강에서 강사가 치는 코드를 따라하며 개발을 하다 보니 함수를 왜 저렇게 만들지? 에 대해 생각하기 보단, 우선 코드를 따라치고 코드 자체를 이해하는게 우선이였다. 유지보수를 좋게 하기 위해 리팩토링, 가독성과 재사용성을 높이는 클린코드를 작성하는 것이 중요하다 해도 아 그렇구나~ 하고 넘어갔었다. 하지만 이번에 관심사 분리라는 소프트웨어 개발의 원칙을 배우고 나니, 왜 코드를 분리해야하는지, 유지보수가 왜 중요한지 정확히 알게 되었다. 정말 중요한 개념을 배웠고, 앞으로 내가 이 원칙을 잘 지켜 코드를 잘 짤 수 있도록 ... Read More

들어가며😃 next.js로 리액트를 입문하다보니 리액트를 공부하면 넥스트가 정말 편하구나 라는 역체감을 자주하게된다. 다시 돌아 리액트를 공부한다는게 어쩌면 귀찮고 어려워 흥미가 떨어질 수 있겠지만, 오히려 나에겐 재밌게 느껴진다. 참 다행인 부분이다. 파도 파도 재밌는 리액트의 세계.. 어쩌면 난 전생에 리액트 써퍼…?🌊🏄🏻🧐 크흠… 어쨋던 이번엔 url에서 정보를 꺼내오는 법에 대해 정리해보려한다. 넥스트에서는 router.query.id 식으로 당연하게 썼었고, 초반 극극극 개린이 시절 다른 기능들을 배우느라 급급해 해당 부분에 대한 원리를 알아볼 여유가 없었다. 그리고 리액트로 돌아가 학습하며 아~ 그... Read More

들어가며😃 context API의 개념을 접하다가 React.memo를 사용해보게 되었고 따로 더 공부하고 싶었던 memoization 부분을 참 타이밍에 잘맞게 프리온보딩 시간에 배우게 되었다. 암 어 럭키 걸😎 그리고 해당 개념을 적용하기 전에는 더 많은 핵심 개념들이 탄탄히 잡혀야 한다는 것을 깨닫게 되었고 자바스크립트 엔진의 메모리 구조와 할당 부분을 먼저 정리해보았다. 그리고 이번 포스팅에서는 리액트 렌더링 최적화와 React.memo, useMemo 에 대해 정리해보려한다. 렌더링이란? 리액트에서 렌더링이란 화면에 특정한 요소를 그려내는 것을 의미한다. 👩🏻‍🎨 그리고 이 렌더링 과정을 ... Read More

들어가며😃 리액트를 사용하면서 배열이나 객체를 복사할때 마치 공식처럼 spread 연산자를 사용하곤 했다. 처음 공부 시작이 이론은 간단하게, 그리고 실습 위주로 빠르게 배우기도 했고, 큰 문제없이 사용했기 때문에 이론부터 다시 접근하려 하지 않았던 것 같다.🤯 매우,,부끄러운 발언이다. 어쨋던 그 벌로 이번주 원티드 프리온보딩 시간에 메모리제이션 최적화 파트에서 띵~ 해버렸다. React.memo 개념이 나와서 “아싸! 안그래도 정리하고 싶었던 개념이였는데 잘됐다!” 했는데 오히려 강의를 들을수록 기초부터 정리를 해야겠다라는 반성을 하게되었다. 어쨋던 강의를 통해 데이터의 불변성에 대해 알아보며 해당 개념에... Read More

들어가며😃 교육 프로그램에서 가장 기대되었던 리덕스 수업이 시작되었다. 그런데 왠걸? 너무 빠르잖아? 🤢 슨생님 원래 안그러셨잖아요ㅠ 오늘따라 진도가 왜이렇게 빨리 나가는 느낌인지ㅠ 프로젝트가 다가오면서 강사님 마음도 급해지셨나부다,,,여튼 수업을 바탕으로 반복적으로 예제를 돌려보니 이해가 슬 가기 시작했다. 수업에서는 Redux-Toolkit에 대한 개념을 알아보았고 그 개념들을 오늘 포스팅에 정리해보려 한다. Redux-Toolkit 이란? 우선 Redux-Toolkit(RTK)이란, Redux를 더 쉽게, 간단하게 작성할 수 있도록 도와주는 라이브러리이다. Redux의 복잡한 설정과 보일러 코... Read More

들어가며😃 이전 포스팅에서 context API 와 reducer를 사용해서 useState 를 대체하는 상태관리 기법을 알아보았다. 그런데 Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링되는 문제가 있다는 것을 알게되었다. 해당 이슈를 다루기 위해서는 메모이제이션 과정이 필요했는데, 오늘은 그 과정에 대해 포스팅 해보려한다. 리렌더링 되는 과정은 context API 와 useReducer 훅을 함께 사용해 상태 값을 변경해보며 알아보자. context API 선언 export const Context = createContext();... Read More

들어가며😃 상태관리를 어떻게 더 쉽게 하는지에 대해 알아보다 리액트 context 를 통해 props를 내려주고, useReducer 를 통해 상태 변경을 해주는 조합을 알게되었다. 이 과정을 차근히 이해하기 위해 이전 포스팅에서 useReducer 훅을 정리해보았고, 오늘은 context 에 대해 정리해보려한다. Context API 리액트 context는 컴포넌트에 props를 사용하지 않고 전역으로 데이터를 공유할 수 있도록 해준다. (여기서 데이터란, 값이 될수도 있고, 함수 혹은 DOM이 될 수도 있다.) 이러한 특성으로 context 는 props drilling 을 막는데 도움을 준다.... Read More

들어가며😃 프로젝트를 진행하며 상태관리를 모두 useState로 했었다. 그러다보니 어마무시한 props drilling 현상이 나타났는데…🤢 이를 해결할 수 있는 방법을 찾다가 useReducer()와 useContext()에 대한 개념을 배우게 되었다. 오늘은 우선 useReducer() 훅에 대해 배운 개념들을 정리해보려한다. useReducer()란? useReducer는 React에서 제공하는 Hook 중 하나로, 상태 관리를 위해 사용된다. 엥? 이미 useState 가 있는데요?🤷🏻‍♀️ 그렇다. 이미 useState 라는 상태관리 훅이 있고, 이와 비슷하게 state를 관리하고 ... Read More

들어가며😃 프로젝트를 진행하며 가장 어려었던 부분은 마이페이지였다. 요구사항이 계속 디벨롭되어 기존 로직이 변경되어 개발해야할 컴포넌트가 갑자기 많아지기도 했고, 그 과정에서 한 컴포넌트 당 최소 세개의 이슈는 만났던 것 같다.. 그만큼 아픈 성장통을 주었던 마이페이지 녀석,,🥲🥲🥲 오늘은 발생했던 이슈들에 대해 정리하고 어떻게 문제를 해결했지 기록해보려한다. 아래는 내가 만났던 이슈 리스트이다. 마이페이지 필터링 메뉴 유지 현상 : 공통컴포넌트를 사용하며 게시물의 카테고리를 변경해주는 메뉴가 다른 컴포넌트로 넘어가도 선택되었던 메뉴로 유지되어 강제 필터링 현상 데이터 패치 오류 : 프로필 ... Read More

들어가며😃 리액트를 사용하다 보면 페이지 이동(화면 전환)이 빈번하게 일어난다. 이때 Link 컴포넌트를 통해 이동하는 방식, useNavigate() 함수를 통해 이동하는 방식이 대표적일 것 이다. 오늘은 이 두 방식에 대해 알아보고 비교해보겠다. 앗! 그전에! SPA?!🤷🏻‍♀️ 리액트는 SPA(Single Page Application)로 전체 프로젝트가 하나의 페이지로 구성되어있다. 그렇기 때문에 페이지를 이동할 수가 없다. 하지만 React Router를 통해 익숙히 우리가 해왔듯 페이지를 이동할 수 있다. React Router는 리액트 애플리케이션의 라우팅을 관리하기 위한 라이브러리로, 주... Read More

들어가며😃 프로젝트에서 알람 컴포넌트를 다루게 되었다. 알람은 페이지 헤더에 속해 있고, 알람 아이콘을 누르면 리스트가 짠 하고 나타나는 전형적인 알람 UI를 따랐다. 단순할 줄 알았던 작업에서 생각보다 많은 이슈들을 만나게 되었고, 오늘은 이슈들을 어떻게 핸들링 했는지 트러블 슈팅 과정에 대해 포스팅 해보려한다.🥲 Issue_01.모바일 화면으로 변경 시 알람창 사라지는 이슈 발생 알람 컴포넌트 내에서 알람이 활성화 된 상태인지를 구분하는 setState를 설정해줬었다. 그런데 데스크탑에서 브라우저 창을 줄여 모바일 사이즈로 넘어갔을때 열려 있던 알람이 사라지는 현상이 나타났다. 오마이... Read More

javascript 두번째 과제는 날씨 데이터를 받아오는 것이다. 오늘은 날씨 데이터를 받아와 해당 날씨에 따른 배경이미지를 매칭하는 과정을 포스팅 해보겠다. 과정은 아래와 같다. 1. navigator로 위도 경도 가져오기 날씨를 알려면, 내가 있는 위치를 먼저 알아야한다. navigator 라는 자바스크립트 내장함수로 나의 위치를 불러오고 변수에 담아주자. function geolocation() { navigator.geolocation.getCurrentPosition(handleSuccess, handleError); } // 함수실행 geolocation(); // 성공 로직 func... Read More

들어가며😃 프로젝트 랜딩페이지를 기획하는데 정적인 이미지만 보여지니 약간 심심한 느낌이 들었다. 그러던 중 흐르는 전광판, 무한 롤링 배너 효과를 쓴 사이트를 보게 되었고, 이거다!🔥 싶어서 우리 프로젝트에도 바로 적용해보았다. 아래는 무한 롤링 배너가 적용된 화면이다. 짜자잔!🚀 오늘은 이 효과를 어떻게 구현했는지 과정에 대해 포스팅하려한다. 1. 컴포넌트 생성 우선 저 롤링 박스의 컴포넌트 뼈대를 생성해줘야한다. export default function FlowBox() { return ( <FlowContainer> {Array(15) ... Read More

들어가며😃 리액트를 처음 접했을 때부터 npx react-create-app으로 프로젝트를 생성했었다. 그래서 CDN으로 리액트를 접하는건 나에겐 처음이였는데, 교육 프로그램에서 배워보았고 jsx 파일이 아닌 html 파일에서 리액트가 실행되는게 꽤 흥미로웠다. 오늘은 간단하게 리액트 CDN으로 리액트 프로젝트를 실행하는 법을 포스팅 해보려 한다. html에서 리액트를 사용하는 절차는 간단하다. html 생성 script 태그에 cdn 3개 추가 리액트 코드 추가 여기서 2번 과정에서 리액트와 관련된 2개의 js 파일, 그리고 babel 파일 1개를 설정한다. 여기서 왜 babel 설정... Read More

html과 css 이후 javascript 실습시간을 가지고 있다. 이번 과제는 아래와 같다. vanilla js로 배경이미지 랜덤 변경 vanilla js로 인사 만들기 vanilla js로 시계 만들기 우선 1번을 수행하기 위해 마음에 드는 배경 5가지를 골라 이미지의 주소를 배열로 정렬하였다. 무료 배경이미지는 unsplash 에서 픽픽!😎 const images = [ "https://images.unsplash.com/photo-1567095761054-7a02e69e5c43?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGNvbG9... Read More

들어가며😃 교육시간에 간단한 채팅창을 만들어보았는데 메시지를 담는 div가 넘치면 최신 메시지가 아닌 가장 오래된 최 상단의 메시지가 계속 보이는 걸 발견했다. 우리가 아는 모든 채팅창들은 메시지가 위에서 부터 아래로 쌓이고, 가장 최신 메시지가 있는 맨 아래 화면을 보여주기에 원리가 궁금했고 UX를 반영하고 싶었다. 찾아보니 스크롤 속성을 조정하면 됐는데 오늘은 새로 알게된 높이 관련 속성에 대해 정리하려 한다. scrollTop scrollTop은 DOM 요소의 수직 스크롤 위치를 나타내는 속성이다. 수직 스크롤바를 가진 요소에서 스크롤바의 위치를 조작하고 제어할 수 있도록 도와준다. 아래... Read More

지난 포스팅에서 작성했던 세이프홈즈 html파일에 css를 적용해보았다. 반응형까지 적용하는게 과제였고 Break Point는 1024px, 768px, 480px 이였다. 이 외로 나는 이전에 계속 display: flex 방식을 이용해왔었는데 과제를 진행하면서 grid를 익혀보고 싶어 최대한 grid 를 사용하려했다. .articleContainer { display: grid; grid-template-columns: repeat(3, 300px); gap: 30px; margin-bottom: 30px; } @media (max-width: 1024px) { .articleCont... Read More

들어가며😃 카드 컴포넌트 아래에 원래는 날짜형식으로만 표시되었다. 사실 프론트에서 날짜를 정리하지않고 백단으로 부터 정리된 날짜형식 (2023-06-15)으로 받아서 그대로 사용했었다. 하지만 최근 게시물에는 시간을 보여주는게 좋을 것 같아 현재시간과 비교하여 24시간 이전에 등록된 게시물이면 등록된 시간을 n시간 전으로 표시될 수 있도록 로직을 추가 하였다. 위와 같이 24시간 이전에 등록된 게시글이면 n시간 전이라는 문구(좌)를, 24시간이 지나면 날짜(우) 로 대체할 것이다. 그리고 위를 구현하기 위해 나는 함수 2개를 사용하였다. yyyy-mm-dd 형식을 만드는 date 함수 1번의 ... Read More

2주차 수업의 첫째날이다. 이번주는 세이프홈즈 대표님의 html, css, javascript 교육이 예정되어있다. 오늘은 웹표준, html의 개념을 팀과제를 수행하며 익히는 시간을 가졌다. 그리고 우리에게 주어진 빡센 과제,,,세이프홈즈 초기ver. html 클론하기. 피그마로 세이프 홈즈의 초기 버전의 랜딩페이지를 공유해주셨고 강의를 바탕으로 html을 구성하는 것이 과제로 주어졌다. 강의에선 아직 css 파트가 진행되지 않아 우선 html만 구성하면 된다. 나는 이 페이지를 header, section, footer 태그로 크게 나누고 진행해보았다. 우선 로고와 버튼 2개가 있는 header 부... Read More

들어가며😃 프로젝트에서 로고, 랜딩페이지에 나타나는 이미지들을 제작하면서 svg파일을 다루게 되었다. 사실 이전까지는 png, jpg 파일 들을 이용하면서 svg 파일을 써야하는 이유를 체감하지 못하고 있다가, 화면 사이즈가 커지면서 이미지가 완전 깨져보이는 현상을 경험과 동시에 ++프로젝트 내에서 다크모드/라이트모드를 적용하며 해당 모드에 따른 이미지를 2개 제작하는 것보다 svg 파일에 속성 하나만 추가함으로 쉽게 색상을 조정할 수 있는 법이 있음을 알고 기존 이미지 파일을 svg 파일로 변경하게 되었다. 우리 프로젝트는 넥스트 기반으로 구현된거라 리액트에서 svg를 설정하는 법에 약간 더 추가 설정이 필... Read More

웹표준 👩🏻‍💻 웹 표준은 웹에서 사용되는 기술과 규약으로 웹사이트를 일관되게 구현하고 상호 운용성을 확보하기 위해 따라야 하는 규칙이다. 웹은 다양한 운영체제(OS)와 브라우저가 존재하는데, 각각의 운영체제와 브라우저는 다양한 기술과 표준을 구현하고 있다. 이로 인해 웹 페이지가 특정 브라우저나 플랫폼에서만 정상적으로 동작하거나, 호환성 문제로 인해 웹 콘텐츠가 올바르게 표시되지 않는 크로스 브라우징 이슈가 발생할 수 있다. 이때 공통된 약속인 웹 표준을 준수한다면 웹 페이지는 모든 브라우저와 기기에서 일관된 방식으로 작동하기 때문에 웹 표준을 지키는 것은 웹 페이지의 보편성과 접근성 관점에서 매우 중요하... Read More

아이디어 스케치 📝 아이디어 스케치란 말 그대로 아이디어를 스케치화하는 과정이다. 제품이라면 떠오르는 쉐입을 스케치로 슥슥 그리는 것이 되겠고, 서비스 기획이라면 해당 서비스의 로직에 해당되는 화면 즉 UI를 그려보는 것이다. 서비스 기획 과정에 있어 아이디어 스케치는 스토리보드 제작을 위한 사전 작업이 된다. 여기서 잠깐, 스토리보드란?🧐 스토리보드는 실제 작업 담당자(디자이너, 개발자, 퍼블리셔)가 업무를 수행하기 전에 이해해야할 작업 지시서 이다. 위의 이미지처럼 서비스나 제품의 사용자 경험을 시각적으로 설계하고 전달하기 위해 사용되는 도구이다. 스토리보드는 사용자의 이용 시나리오를 시각적으로... Read More

UML 🗣️ UML(Unified Modeling Language) 이란 시스템을 설계하고 문서화하기 위해 사용되는 표준화된 언어이다. 시스템의 구조, 동작 및 상호작용을 시각적으로 표현하기 위해 그래픽 기호가 제공된다. UML 다이어그램은 크게 구조, 행위 두가지로 이루어져있는데 이번 시간에는 행위 다이어그램, 그중 유스케이스 다이어그램(Use Case Diagram) 과 활동 다이어그램(Activity Diagram)에 대한 강의가 진행되었다. 그리고 이 다이어그램들을 직접 설계하는 시간을 가졌는데 draw.io 라는 툴을 이용해서 진행되었다. 우선 둘의 개념을 비교해보자. 유스케이스 다이어그램(U... Read More

이번주부터 유데미x스나이퍼팩토리 에서 진행하는 리액트 교육을 듣게 되었다. 1주차는 서비스 기획에 대한 과정이 진행된다고 하는데 이 커리큘럼이 꽤나 마음에 든다. 이 프로그램에서든 외부에서든 향후 진행할 프로젝트에 대한 가이드가 되어 줄 수 있을 것 같다. 첫번째 강의는 플랫폼을 주제로 플랫폼이 변화와 생태계에, 성공한 플랫폼의 특징에 대해 알아보았고 플랫폼 설계까지 실습해볼 수 있었다. 설계 방식은 단순했다. 마인드 맵으로 서비스에 대한 키워드를 작성하고 계속 가지를 뻗어 나가는 것이다. 이를 토대로 내가 만들고 싶은 서비스의 마인드맵을 그려보았다. 우선 내 서비스는 인스타그램에서 인기있는 그림 컨텐츠를... Read More

모집카드 컴포넌트를 제작하면서 발생했던 이슈, 그리고 그것을 해결했던 과정들을 기록하려한다. 우선 아래 컴포넌트 디자인을 살펴보자. 웹 뷰 모바일 뷰 모집 게시판에서 글을 작성하면 해당 카드 컴포넌트가 만들어 지는데, 게시글 작성 부분에 모집분야와 사용언어를 선택하는 란이 있다. 해당 태그들은 필터링 기능을 용이하게 하기 위해 이미 정해져 있는 태그로 구성되어 있고, 사용자들이 선택할 수 있는 갯수는 각 6개, 5개로 최댓값이 정해져있다. 그래서 웹 뷰에서는 가장 긴 태그들로만 구성이 되어도 태그가 잘릴 일이 없는 것을 확인했다. 하지만 문제는 모바일 뷰에서 나타났다.... Read More

지난 포스팅에서는 키워드가 변할 때 마다 데이터를 필터링 했다. 하지만 작업량이 많아질 수록 필터링이 느려지는 이슈가 발생한다. 오늘은 해당 이슈를 해결하기 위한 딜레이드 필터링을 구현하려한다. 방식엔 두가지가 있다. setTimeout,clearTimeout 내장함수를 이용한 딜레이 방식 이를 쉽게 구현할 수 있는 lodash 라이브러리 오늘 포스팅에서는 팀 프로젝트에서 사용했던 1번 방식을 풀어볼 것 이다. 이전 포스팅에서는 전체데이터를 필터 컴포넌트로 불러와 필터링 된 데이터를 내보내는 방식을 구현했었는데 이번에는 키워드만 전달하는 방식으로 변경하려 한다! input 창에 입력된 키워드 값을... Read More

지난 포스팅에 이어 검색(필터) 기능을 해주는 Search 컴포넌트 구현 과정에 대해 더 풀어보려한다. 이전에서는 검색 버튼을 클릭하거나 엔터키를 눌러 받은 키워드를 필터링했다면 이번에는 키워드가 변할 때 마다 필터링을 해보겠다. 방법은 3가지가 있다. 키워드가 변할 때 마다 필터링 시간차를 두고 필터링 2번을 쉽게 해주는 lodash 라이브러리 이용 이번 포스팅에서는 1번의 경우를 다뤄보려한다. 키워드가 변할 때 마다 필터링 부모 컴포넌트 부모컴포넌트에서 이전과 마찬가지로 원래의 데이터(defaultData)와 필터링 된 데이터를 리패치하는 handleSearch 함수를 받아... Read More

프로젝트에서 키워드를 검색하면 필터링해주는 필터 컴포넌트 구현을 맡았다. 데이터를 불러오는 방식이 전체 -> 무한스크롤 로 변경이 되기도 하고 키워드를 받는 api가 개발되어 필터 방식도 filter 함수로 쓰는 법 -> 키워드만 전달하는 법 으로 바껴 해당 방식은 결국 쓰이진 않게 되었지만..🥲 그래도 필터함수와 더 친해진 느낌이랄까..? 어쨋던 필터 컴포넌트를 구현해보고 변경된 과정 그리고 겪었던 에러&해결과정을 기록하려한다. 위는 팀 프로젝트에서 사용되는 카드 컴포넌트이다. 필터링한다면 제목과 내용이 필터링 될 수 있겠다! 우선 Filter 컴포넌트를 사용하는 부모 컴포넌트에서 defa... Read More

나는 리액트를 올해 배우기 시작했기 때문에 처음부터 함수형 컴포넌트로 프로젝트를 꾸려나갔다. 그런데 모르는 것이 있어 구글링을 하다보면 함수형 컴포넌트말고 익숙하지 않는 클래스형 컴포넌트가 예제로 주어질 때가 있다. 그럴 때 마다 당혹스럽기도하고 키워드를 바꿔서 찾기도 했다. 현재는 클래스형 컴포넌트가 사용되지 않는 추세라고 해서 배울필요가 있을까? 하지만,,, 내가 어떤 회사에 취업해서 어떤 업무를 할 지 모르고, 그 회사가 여전히 클래스형 컴포넌트를 사용할 수 있고, 내 업무가 기존 클래스형 컴포넌트를 함수형 컴포넌트로 바꾸는 업무를 할 수도 있는 것이다. 이 외에도 내가 클래스형 컴포넌트를 마주칠 수 있는 상... Read More

자바스크립트에서는 DOM 요소에 class나 id를 주고, document.getElementById(), document.querySelector() 등 과 같은 함수를 사용해 DOM을 직접 조작하였다. 하지만 리액트에서는 DOM을 직접적으로 조작하는 것을 권장하지 않는다. 그런데 프로젝트를 진행하다보면 특정한 DOM요소를 콕 찝어 조작해야할 때가 생긴다. 그렇다면 useRef를 사용해보자. useRef 우선 ref, 즉 reference로 참조를 뜻한다. useRef는 React에서 제공하는 hook 중 하나로, React 함수형 컴포넌트에서 Ref를 사용할 수 있게 한다. 그리고 .current ... Read More

javascript에서 배열의 중복되는 값을 제거하는 방식은 다양하다. 그 중 filter(),indexOf() 함수를 이용하는 방법과 reduce(),includes() 함수를 이용하는 방법을 다루려고 한다. 우선 각 함수들의 개념을 정리하고 혼합하여 쓰는 방식을 정리하려 한다. indexOf() indexOf 함수는 특정 문자열을 검색하고, 검색된 문자열이 처음으로 나타나는 위치 index를 리턴하는 기능이다. 만약 문자열을 찾지 못했다면 -1를 리턴한다. 예시1. 문자열 const str = "hahahoho"; let result = str.indexOf("ha"); // 결과 : 0 (0번째 인... Read More

DOM 이란 DOM은 문서 객체 모델(Document Object Model)로, HTML 문서의 모든 요소를 객체로 인식하여 프로그래밍적으로 제어할 수 있게 한다. 예를 들어, HTML 문서에서 <p> 요소, <div> 요소, <input> 요소 등은 모두 DOM 요소이다. 이러한 DOM 요소들은 부모-자식 관계에 따라 계층 구조를 이루며, 이를 통해 웹 페이지를 구성한다. 가상DOM 이란 리액트에서는 가상 DOM(Virtual DOM)이라는 개념이 도입되어 있다. 사실 가상 DOM은 실제 DOM과 거의 동일한 개념이다. 그저 가상 DOM은 메모리상에 존재하는 가짜 D... Read More

깃허브 블로그 만드는 게 보통 일이 아니였다,,삽질의 연속 그리고 그것은 현재진행형!!! 그런데 이렇게 힘들게 만든 블로그가 검색이 안된다면 매우 슬플것이다🥲 그래서 내 사이트를 검색엔진에 등록해보려한다. 구글, 네이버, 다음 등등이 있겠지만 나는 구글, 네이버만 등록했다. 절차는 따라오시라!! 1. 구글 등록하기 구글 서치 콘솔에 들어가 시작하기를 누르면 아래와 같은 화면이 나온다. 두번째 URL접두어 부분에 깃허브 블로그 주소를 입력한다. 다음은 소유권 확인을 위한 단계이다. 파일을 다운받고 확인버튼을 누르기전에!! 파일을 깃허브 블로그 파일에 저장해준다. 위치는 _confi... Read More

깃허브 블로그에 댓글 창 만드는 법을 포스팅 하려고 한다. 사실 유튜브 보다가 disqus로 먼저 댓글창을 만들었지만,,, 다른 글들을 찾아보다 disqus는 광고가 심하고 무겁다는 등의 평으로 github 랑 연동되는 utterances 라는 플랫폼으로 많이 갈아타고 있는것을 알았다. 그렇다면 나도 해야지!! github로 만든 블로그에 github로 알림오는 댓글,, 너무 깐지나쟈나..!?🤩 😎그렇다면 바로 시작해보자! 1. utterances 설치하기 utterances 페이지에 들어가서 install 버튼을 눌러준다. 2. repositories 선택하기 install 을 누르면 어디 저장소... Read More

본격 내가 쓰고 내가 참조 할 글😅. 깃허브 블로그를 시작하고 포스팅해보면서 마크다운 문법을 처음 접해보았다. 마크다운 문법이 쉽긴 하다만, 기존 포스팅 플랫폼에서 제공해주던 에디팅 기능을 밥먹듯이 사용하던 내가!!!! 여기서 포스팅 할 때는 직접 문법들을 적용해야하는 방식이 여간 귀찮은 일이 아니다. 하지만,, 어쩌겠어 익혀야지,, 은근 재밌기도햐,, 그래서 내가 참고할 겸 이 글을 쓰는 중이다. 약간 진짜_진짜_진짜_최종버전으로 총정리를 해보았다. 순서는 내가 자주 쓸만한 것 순이다. 1. 헤더 포스팅 내 제목/소제목 등을 쓸때 보통 사용한다. # 띄우고 글자 순. #이 적을 수록 글씨가 크다. #... Read More