한번이라도 써볼껄... 하는 후회에서의 시작 최근 사이드 프로젝트를 진행하며 프론트엔드 개발자 4인이 협업을 하게 되었다. 그때 나온 질문이 공통으로 사용하는 UI 컴포넌트의 관리 방법이었다. 그러고보니 프론트엔드 개발자로 일하면서 대부분의 프로젝트를 1인으로 개발해왔기에 스타일 가이드의 문서화에 신경쓴 적이 없었다. 무슨 컴포넌트가 있는지, 어떻게 사용하는지 기억하고 있었으니까... 그나마 웹 퍼블리셔로 일할 때 스타일 가이드 페이지를 제작해서 퍼블리셔 여럿이 함께 작업을 하긴 했는데, 스타일 가이드용 페이지를 따로 파는 것 보다 스토리북으로 컴포넌트를 관리하고 문서화하면 좋을 것 같다는 생각이 들었다. 그래서 스토리북을 써보자고 제안해봤는데, 문제는 내가 스토리북을 써본 적이 없어 스토리북으로 컴포넌..
1. 강의를 선택한 이유 개인 프로젝트를 만들며 점점 코드가 복잡해져서 어떻게 깔끔하게 정리해야 할지 고민이 들었다. 그런 도중에 프로그래머스의 과제관(https://programmers.co.kr/skill_check_assignments/4)을 체험했다. 첫 번째 프로젝트는 초기 코드가 주어지는데 이 코드가 리액트와 흡사했고 내가 자바스크립트로 짠 코드보다 관리하기 편했다. 객체 지향 프로그래밍에 대해서 잘 몰랐지만 이게 객체 지향 프로그래밍이구나 했다. 그런 생각을 가진 도중에 발견한 강의가 타입스크립트 + 객체지향 프로그래밍 마스터 강의다. 타입스크립트는 여러 회사에서 원하는 기술 중 하나라는 것 외에는 잘 몰랐는데, 코드의 가독성을 올려주고 코드를 안정적으로 만들어준다는 점이 마음에 들었다. 점..
정규 표현식 정규 표현식은 텍스트 내에서 일치하는 문자열을 찾기 위해 문자열의 패턴을 표현하는 방식을 말한다. 그래서 그 정규 표현식이 어떤 문제를 해결해 줄까? 정규표현식이 없다면 문자열에서 특정한 패턴이 있는지 확인하기위해선 복잡한 코드가 필요할 것이다. 책 한권 분량의 텍스트에서 전화번호 형식의 문자열을 추출해야 한다고 상상해보면, 복잡한 코드가 나올 것이다. 정규 표현식을 사용하면 코드가 간결해진다. 정규 표현식은 내가 쇼핑몰에서 웹퍼블리셔로 일할 때도 은근히 자주 사용됐었다. 무난한 예로는 고객에게 입력받는 이메일 혹은 전화번호의 형식이 바른지 검사가 필요한 경우에 사용됐고. 또 특정 상품군에만 이벤트 배너를 붙여야 하는 상황인 경우, (애초에 상품을 등록할 때, 상품군 데이터를 따로 입력해준다..
리액트 재활(?)중... 리액트 기본 개념 정리 JSX, State, Props, Class Component Class Component로 간단한 Habit Tracker 제작해봄 JSX 문법 태그를 열면 닫아야 한다. 최사위 태그는 반드시 하나의 태그로 감싸져 있어야 한다. return 뒤 괄호는 필수가 아니지만 가독성을 위해 작성 JSX 안에서 javascript 사용 하는 방법 : {}로 감싸준다. 스타일과 클래스명 넣는 방법 스타일 : 객체를 만들어서 넣어야 함. (속성은 카멜케이스 방식), style속성 안에 객체를 넣는다. 클래스명 : class가 아닌 className 속성으로 넣는다. 주석 쓰는 방법 : 중괄호로 감싸서 js구문을 쓰게 만든 후 /* */와 같은 식 혹은 태그 사이에 한줄..
1. 수강 목적 웹 퍼블리셔로 2년간 근무했었고, 현재 프론트엔드 개발자로 이직 준비중으로 자바스크립트와 리액트를 공부하고 있다. 현재 공부하는 것만으로도 벅차긴 하지만 언제나 파이썬이나 Go와 같은 다른 언어를 배워보고 싶다는 욕심은 있던 차에 이전 회사에서 알게된 동생에게 추석동안 이런 무료강의가 있다는 것을 전해듣고 곧바로 수강신청했다. 수강 목적도 거창한 것 없이, 자바스크립트 외의 다른 언어도 경험해보고 싶다는 것이 전부였다. 2. 배운 점/ 잘한 점 새로운 언어를 배운다는 기대감도 있었지만 부담감도 있었는데, 생각보다 너무 쉽고 재밌었다. 그 이유는 적은 이론 공부를 하고 바로 활용할 수 있는 수업 구성 때문이었다. 스크래핑, 크롤링, 데이터 클렌징 같은 생소한 것들이 어떤식으로 진행되는지 쉽..
DOM 기본 파악하기 DOM이란 id, 요소, 네임 으로 요소 취득하기 HTMLCollection, NodeList
2개월 2주차 예습 1. hasClass, 조건식 class가 안에 있는지 식별하기 jQeury $('ul').eq(0).hasClass('on'); 자바스크립트 (추가 공부) var test = document.querySelector('ul').firstElementChild.classList; Array.prototype.indexOf.call(test,'on'); https://codepen.io/danbi-lee/full/yLYVxzX class여부 테스트 ... codepen.io 3d 복습 https://codepen.io/danbi-lee/pen/zYvomBb?editors=0110 주사위 굴리기 응용 ... codepen.io
리액트 복습 userEffect useMemo useCallback React.memo
- Total
- Today
- Yesterday
- 하우징 도색
- DevOps
- 네트워크
- autoplay
- 취미
- 키크론 v10
- 정규표현식
- 웹퍼블리셔
- 보안
- 강의후기
- 개발일지
- 팁
- 삽질방시
- TIL
- 삽질방지
- 프로젝트
- 앨리스배열
- AWS
- 회고록
- 타입스크립트
- storybook
- 리덕스
- 마크다운
- 토이프로젝트
- 키보드
- 리액트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |