회사에서 디자인시스템을 만들고 있는 어느 날...디자인 시스템내에 Button 컴포넌트의 클릭 효과를 <span style='color: 버튼을 클릭할 때 클릭한 마우스 커서의 좌표값에 맞춰서 물결이 퍼지는 효과를 만들어야 했다.<span style='col

회사에서 디자인 시스템을 만들어 보라고 해서 프론트엔드 동료와 함께 둘이서 스펙도 정하고, NPM에 배포도 하고, 피그마에 연동도하고, 열심히 영차영차 만드는 도중 DatePicker을 맡아서 만들게 됌.일단 내가 만들어야하는 DatePicker는 두 가지 였다.날짜의

며칠전 회사에서 디자인 시스템을 구축하라는 명을 받았다.이때다 싶어 평소에 사용해보고 싶었던 Vite와 Storybook을 사용해서 디자인 시스템을 구축하고 더불어 npm에 배포 후 원하는 프로젝트에서 편리하게 사용해보기로 했다.(시니어 프론트엔드 개발자가 없어서 나름

UI/UX 디자인이 발전함에 따라 UI 화면을 생성해야 하는 규모나 속도도 끊임없이 발전되고 있습니다. 이러한 발전 속도 때문에 설계 작업을 간소화 하기 위해서 여러 기업에서 디자인 시스템을 구축하고 있습니다.디자인 시스템이란?디자인 시스템은 디자인 원칙, 규격, 재사

실행 컨텍스트(Execution Context)란?실행 컨텍스트란 자바스크립트 엔진이 코드를 실행하기 위해 필요한 정보들을 가진 환경을 추상화 하기위해 객체 형태로 나타낸 것을 말한다.위의 내용으로만 실행 컨텍스트를 이해하기는 어려울 수 있다.차근차근 정리해보며 실행

이번 포스팅에서느 Django로 백엔드 서버를 배포해서 만드는 과정에 대해서 포스팅 하려고 한다.Django 백엔드 웹 서버는 AWS EC2 인스턴스를 하나 추가해서 프론트엔드와 분리 시켜줬다. EC2 배포 방법은 이전 포스팅의 내용을 참고하면 된다.먼저 nginx를

AWS EC2에 인스턴스를 생성하려면 AWS에 로그인 후 EC2로 이동하면 된다.좌측 상단에 서비스를 누르고 EC2 검색하면 맨 위에 바로 나오니까 얼른 이동하자!EC2로 들어온 후 좌측 메뉴에서 인스턴스를 선택하고 우측 상단에 인스턴스 시작을 선택해서 위와 같은 페이

AWS S3에 버킷까지 다 만들고 이미지 업로드까지 제작이 끝나고나니 컴포넌트 제작과 기능은 원래 기획대로 순조롭게 제작이 완료되었다!Home 에서는 Emotion의 ThemeProvider를 사용해서 불을 켜고 끄는 방식의 light 테마와 dark 테마를 적용시켰고

이전의 포스팅에선 로그인과 회원가입 부분까지 구현을 했었는데, 처음 해보는 부분이기도 했고 백엔드까지 직접 처리를 해줘야 하다보니 고생을 좀 많이 했었던 것 같다.하지만 그 부분을 해결하고 나서는 기획했던 대로 쭉쭉 컴포넌트들과 기능을 만들었다.100% 완성은 아니고,

이전 포스팅 후 꽤 많은 시간이 흘렀다.. 오래 걸린 이유는 유효성 검증을 프론트와 백엔드에서 처리 후 회원가입을 진행하는 부분을 만들고, JWT(JsonWebToken)을 활용한 로그인 처리를 해주기 위해 자료조사와 로직을 이해하고 프론트단과 백엔드단을 만들다 보니

이전 작업에서 디자인까지 마무리를 지었다.지금은 프론트 부분의 전반적인 초기 세팅을 전부 해주고 있는데 이번 프로젝트에서는 전체적으로 재사용성이 높은 코드들로 제작을 해보려고 한다.처음에는 많은 부분을 생각하고 코드를 짜고 모듈화가 잘 되었다고 생각했는데, 결국 예상치

이전의 포스팅에서는 MySQL 적용하고 Workbench에 연동하는 것 까지 구현을 진행 했었다.그 이후 CardLog 기획대로 디자인 작업을 시작했다.아무것도 없이 기획만 가지고 디자인을 해보려니 생각보다 아이디어가 안 떠올랐다...그래서 일단 다른 사람들의 디자인이

나는 이전에 Django + React 를 사용해서 게시글과 게시글 상세페이지를 구현하는 과정을 3편에 걸쳐서 포스팅 했었다.원래는 React + Typescript 기능을 최대한 중점으로 잡고 공부 겸 블로그 기능을 제대로 제작해 보려고 했었다. 근데 갑자기 욕심이

혼자서 공부하다가 팀 프로젝트를 해보고 싶다는 생각에 Okky 커뮤니티를 둘러보다 프론트엔드 팀원을 구한다는 글을 보고 지원해서 포트폴리오 메이커라는 서비스를 만드는 팀원으로 합류하게 되었다.총 인원 5명 (BE: 2 / FE: 3) 으로 진행되었다.서비스 내용취업을

위의 명령어를 사용하면 내가 현재 있는 위치에 타입스크립트가 적용된 리액트를 설치할 수 있다.순서대로 입력해서 react-router-dom, emotion, axios를 설치해주자.그 후 eslint와 prettier 세팅을 해줘야하는데 이미 자신에 맞게 세팅이 되어

재귀함수란?재귀함수(recursive function)는 함수가 자기 자신을 호출하는 것을 말합니다. 즉, 함수가 실행 중에 자기 자신을 호출하여 문제를 해결하는 방법입니다. 이를 통해 반복문을 사용하지 않고도 문제를 해결할 수 있습니다.종료 조건은 필수 재귀 함수는

프로토콜이란?여러 컴퓨터 사이나 중앙 컴퓨터와 단말기 사이에서 데이터 통신을 원활하게 하기 위해 필요한 통신 규약 입니다. ex)신호 송신의 순서, 데이터의 표현법 등위의 이미지를 참고해서 이해하시면 더욱 이해하기 쉽습니다.위에서 아래로 진행된다고 생각하시면 되고 일단

이전에 올렸던 포스팅에서 배열의 자료구조에 대해서 알아봤었습니다.배열은 초기 선언 당시에 배열의 크기를 정확히 모르면 메모리가 낭비될 수 있다는 단점이 있습니다.이 단점을 해결하기 위해 저장하려는 데이터들을 메모리 공간에 분산해서 할당하고 분산된 데이터들을 연결해주면

배열이란? 프로그래밍 언어에서 배열은 기본적으로 제공되는 자료 구조(Data Structure)입니다. 자바스크립트가 아닌 일반적인 프로그래밍 언어에서는 보통 배열을 선언할 때 배열의 크기도 같이 선언하게 됩니다. 출처: 인프런 '감자'님의 그림으로 쉽게 배우는

객체란?원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조입니다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값(Immutable value) 이지만 객체 타입의 값은 변경이 가능한 값(Mutable