1. 강의를 선택한 이유 개인 프로젝트를 만들며 점점 코드가 복잡해져서 어떻게 깔끔하게 정리해야 할지 고민이 들었다. 그런 도중에 프로그래머스의 과제관(https://programmers.co.kr/skill_check_assignments/4)을 체험했다. 첫 번째 프로젝트는 초기 코드가 주어지는데 이 코드가 리액트와 흡사했고 내가 자바스크립트로 짠 코드보다 관리하기 편했다. 객체 지향 프로그래밍에 대해서 잘 몰랐지만 이게 객체 지향 프로그래밍이구나 했다. 그런 생각을 가진 도중에 발견한 강의가 타입스크립트 + 객체지향 프로그래밍 마스터 강의다. 타입스크립트는 여러 회사에서 원하는 기술 중 하나라는 것 외에는 잘 몰랐는데, 코드의 가독성을 올려주고 코드를 안정적으로 만들어준다는 점이 마음에 들었다. 점..
정규 표현식 정규 표현식은 텍스트 내에서 일치하는 문자열을 찾기 위해 문자열의 패턴을 표현하는 방식을 말한다. 그래서 그 정규 표현식이 어떤 문제를 해결해 줄까? 정규표현식이 없다면 문자열에서 특정한 패턴이 있는지 확인하기위해선 복잡한 코드가 필요할 것이다. 책 한권 분량의 텍스트에서 전화번호 형식의 문자열을 추출해야 한다고 상상해보면, 복잡한 코드가 나올 것이다. 정규 표현식을 사용하면 코드가 간결해진다. 정규 표현식은 내가 쇼핑몰에서 웹퍼블리셔로 일할 때도 은근히 자주 사용됐었다. 무난한 예로는 고객에게 입력받는 이메일 혹은 전화번호의 형식이 바른지 검사가 필요한 경우에 사용됐고. 또 특정 상품군에만 이벤트 배너를 붙여야 하는 상황인 경우, (애초에 상품을 등록할 때, 상품군 데이터를 따로 입력해준다..
2020년 4월 초를 기점으로 백수생활을 이어가고 있다. 그동안 프론트엔드 개발자가 되기 위한 공부를 하면서 나는 아직 부족하다는 생각이 들어 이력서를 내길 거의 1년 가까이 주저하고 있었다... 공부를 할 수록 공부가 늘었다. 😭 리액트를 공부하니 리덕스나 mobX를 배워야 겠다는 생각이 들었고, 리덕스를 배우니 미들웨어를... 프로젝트를 하다보니 타입스크립트의 필요성이 느껴졌고, 확장성 있고 읽기 쉬운 코드를 짜고 싶다보니 객체지향 프로그래밍을 공부하고 그 뒤로는 브라우저 최적화, 코드 리팩토링을 하려니 테스트 주도 개발의 필요성이 느껴지는 등... 그리고 서비스를 만들고 싶다보니 UI/UX, 서버, 백엔드에 대한 것도 욕심이 나고... 일단 나는 독학을 하는 편이고 무엇을 배울지 커리큘럼을 혼자 선..
쓰로틀링과 디바운싱은 성능상의 이유로 DOM 이벤트를 실행되는 javascript의 양을 제한하는 방법이다. 예를들어 지금 개발자 툴을 열고 콘솔탭에서 아래 코드를 입력해보자. const event = () => { console.log("test"); } window.addEventListener('scroll', event); 그리고 이 페이지 스크롤을 몇 번 해보자. "test"라는 문구가 최소 몇십번은 호출되어 있을 것이다. 콜백 함수가 조금이라도 복잡한 함수로 되어있다면 홈페이지의 성능이 저하된다. 쉽게 말해서 쓰로틀링과 디바운싱은 console창에 뜨는 "test"라는 텍스트가 출력되는 숫자를 줄여주는 방법이라고 생각하면 된다. memo. 위 이벤트를 지우고 싶다면? 아래 코드를 콘솔창에 입력..
지난 이야기... 리액트를 공부했지만 리액트식(?) 사고방식에 익숙해지지 않았다. 때문에 개편할 토이 프로젝트가 리액트로 만드는 것이 편함을 직감했음에도 불구하고 바닐라 자바스크립트로 개발을 강행하게 되는데... (← 토이 프로젝트 개발기 0탄) 하지만 복잡해지는 코드 속에서 이건 망했다는 사실을 깨닫고 만다. (← 토이 프로젝트 개발기 1탄) 그리하여 리액트 프로젝트를 만들어보며 리액트 훈련을 시작한다. - To Be Continued... 프로젝트 개요 🎁 프로젝트 소개 사이트 주소 : 친구 조각 모음 인물 정보를 카드 형태로 저장하는 웹 서비스 *"카톡, SNS, 게임 친구 창 등 이곳저곳 흩어져 있는 친구들을 한 곳에 모아 보세요!"* 원래 드림 코딩 리액트 강의에서 'Business Card M..
토이프로젝트 개편하기 ~0탄~ 예정된 시행착오가 기다리고 있는 토이 프로젝트 개발일지 이번에 2019년도에 제작해서 배포했던 토이프로젝트를 개편하려고 한다. 기존 프로젝트는 무엇인지? TRPG라고 하면 보통은 그게 뭔지 actually-i-am.tistory.com 지난 글에서 이어집니다... 생각보다 빨리 찾아온 시행착오 😱 결론부터 말하자면, 약 반 정도 만들고 다시 만들기로 했다. 이 글은... 실패에 대한 회고록 이 될 것 같다. 그럼 왜 망했는지... 그동안 나는 무엇을 했는지 되돌아보도록 하자... 🔨 왜 망했지? 기획편 작업 과정 먼저 구현하려는 기능과, 필요한 데이터를 쭉 작성했다. 그리고 페이지를 나눠 UI를 그렸다. 만들려고 하는 이미지의 종류를 늘리고, 각 이미지마다 들어가야 할 요소..
웹퍼블리셔로 일하면서 아직 회사를 두개밖에 다녀보지 못했지만, 두 회사에서 모두 PPT를 만들어 프레젠테이션 해야했던 적이 있기에 관련된 팁을 공유하고자 한다. 급하게 PPT가 만들 때 빠르게 작성할 수 있다. PPT 형식으로 사용해도 되고, 일반 문서도 되면서도 작업시간이 단축된다. 😋 기본 사용방법 튜토리얼 준비물 Visual Studio Code (https://code.visualstudio.com/ 에서 설치할 수 있다.) 튜토리얼 ppt파일을 만들 폴더를 하나 만든다. 해당 폴더를 Visual Studio Code로 연다. 폴더 여는 방법을 모르겠다면 VSCode 파일을 열고 화면 안에 드래그 앤 드랍하거 '[파일 > 폴더 열기...] 이동 후, 원하는 폴더 찾아서 선택하자. 익스탠션 ..
음악 자동재생 오류 발생! 리액트로 간단한 토이프로젝트를 하는데, 배경음 자동 재생이 막혀서 삽질하다가 쓰는 글이다. 결론부터 말하자면, 에러메세지를 제대로 안 읽는 내가 잘못했다. Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 웹 사이트에 배경음악을 자동재생해놓고 크롬 브라우저에서 열면 다음과 같은 에러메세지가 나타난다. (정책상의 문제기 때문에 엣지 브라우저에선 되더라) 사용자가 문서(사이트)와 상호작용하지 않았기 때문에 play()가 실패했다는 말이다. 왜 이걸 제대로 읽지 않아서 몇시간을 허비한 것일까... 오류 발생 원인과 해결 방법 아무튼, Chro..
다사다난했던 2020년이 끝을 향해 가고 있다. 나는 올해 3월 말까지 웹퍼블리셔로 일을 했다. 이전 직장까지 합해서 총 2년 경력이라고 할 수 있겠다. 다음은 프론트엔드 개발자로 취직하는 것이 목표이므로 웹퍼블리셔로 일했던 지난날들의 경험을 2020년과 함께 회고하고자 한다. 1. 웹퍼블리셔, 지난 2년의 회고 1-1. 첫 입사 이야기 웹 퍼블리셔로 첫 걸음을 내딛은 것은 2017년 11월이다. 직원이 10명 조금 넘는 인원의 의류 쇼핑몰. 관리 하던 사이트는 총 2개. 사용언어는 html, css, jQuery. 처음엔 많이 헤맸다. 기껏 빌드 자동화 툴도 배웠는데 그건 못쓰나요? 물어볼 사수도 없었다. 사수가 없어? 일은 누가 시키나요? 결론부터 말하면 사수는 물론이고, 회사 안에서 코딩의 코자라도..
- Total
- Today
- Yesterday
- 키보드
- 정규표현식
- storybook
- AWS
- 마크다운
- 토이프로젝트
- 키크론 v10
- 웹퍼블리셔
- 앨리스배열
- 회고록
- autoplay
- 보안
- 강의후기
- 리덕스
- 프로젝트
- 팁
- 개발일지
- 네트워크
- 삽질방시
- DevOps
- 삽질방지
- 하우징 도색
- TIL
- 리액트
- 취미
- 타입스크립트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |