react8 2022 상반기 프론트엔드 개발자 곰돌찌의 회고 🙌🏼 티스토리에는 거의 오랜만에 글을 올려본다. 😱 정리하고 싶은것도 많았는데 회사 일이 크런치를 두 달이상 하다 보니 번아웃처럼 와서 집에 와서 아무것도 안하는중..! 그러다 어느새 7월이 되어서 양심에 찔렸기 때문에 다사다난했던 상반기 회고를 작성해 본다. (작년 연말 회고도 안함) 상반기에는 무엇을 했는가 🐥 서비스 Admin 개발 여러가지 이유로 원래 외주사에서 담당하기로한 admin을 가지고와서 개발하게 되었다. 처음으로 웹디자이너분과 협업을 해보았고 생각보다 재미있었다. (똥손인 내가 이렇게 홈페이지를 만들었다고? 갓디자이너님 ㅠ) 이전회사에서는 퍼블리싱을 담당해주셨던 팀장님도 계셨기 때문에 우걱우걱 만들어놓으면 뚝딱뚝딱 예쁘게 작업해주셔서 전혀 손댈일이 없었는데, 회사에 입사하면서 퍼블리싱도 함께.. 2022. 7. 3. [React-Router] v6로 적용하기 리액트의 단짝친구 리액트 라우터가 v6 버전이 나왔다..! 새로운 프로젝트에 들어가면서 리액트 라우터 v6 버전을 쓰게 되었는데 사용하면서 간단하게 달라진 점들을 정리해보고자 한다! v5에서 v6 로 마이그레이션 하는 부분은 공식문서 참고 https://reactrouter.com/docs/en/v6/upgrading/v5#upgrading-from-v5 React Router | Upgrading from v5 Declarative routing for React apps at any scale reactrouter.com 1. 에서 로! 일단 큰 부분은 Switch 대신 Routes로 네이밍이 변경되었다. 이름이 변경된거지만 뭔가 REST 스러운..느낌? Routes 하위에는 Route가 여러개 존재.. 2021. 11. 26. [자바스크립트] IntersectionObserver 일단 MDN 먼저 깔고 시작하기 https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver/IntersectionObserver IntersectionObserver.IntersectionObserver() - Web API | MDN IntersectionObserver() 생성자는 새로운 IntersectionObserver 객체를 생성하고 반환합니다. developer.mozilla.org IntersectionObserver는 내 화면에 선택한 대상이 들어오는지를 확인하는 옵져버이다! 스타에서도 옵져버는 계속 감시하는 애니까... 비슷한 의미로 보면된다. 옵져버할 대상의 엘리먼트를 지정하고 이 요소가화면에 보여졌을 때, 콜백함수가 호출되.. 2021. 7. 7. [프론트엔드 개발자] 공부하고싶은 것들 자바 개발자에서 벌써 프론트엔드 개발자로 전직한지 1년 2개월즈음 되어버렸다..! 확실히 자바하면서 개발하는거보다 더 의욕적이고 공부하고 싶은것도 많아졌다! 지금까지 해왔던거와 공부하고싶은 것들을 정리하고 매일 봐야지(거짓말) 지금까지 해왔던 것 1. 방통대 입학 (2020년 9월) CS에 약하다고 생각이 드니 열심히 다니고 있고! 이제 두 학기를 보냈다. 이제 더 열심히 하고싶은데.. 다시 대학생이 되어버렸더니... 대학생 때의 마인드가 불쑥불쑥 등장한다. 2. Svelte 훑어서 개발해보기(찍먹) 회사에서 인스타그램 크롤링해서 행사에 쓰기 위헤서 작업한 프로젝트가 있었다. 그 때 당시에 Svelte에 대해서 처음 들었고 가볍고 러닝커브가 높지 않다고 해서 도전을 해보았다. 한 워킹데이로 20일 정도 .. 2021. 6. 16. [React] 나만의 폴더 트리 구성 일단 Next를 사용하기 전, 나름대로 규칙을 가지고 폴더 트리를 구성하였다. 기본적인 스펙은 react-router, redux-saga를 썼을 때의 나만의 폴더 트리를 정리해보았다. 1. App.tsx 리액트 라우터를 정리해 두었다. 라우터가 여기저기 분산되어있으면 보기도 불편하고 유지보수가 어려워서 이쪽에 다 몰아 넣는 편. 2. components 페이지가 아닌 컴포넌트들을 정리해두었다. 특별한 페이지에서만 사용되는 컴포넌트는 페이지에 해당되는 폴더안에 두고 공통은 common 폴더 안에 두도록 정리했다. 3. lib 어플리케이션 내에서 공통으로 사용되는 함수들을 넣어놓는 곳! 주로 여러 어플리케이션에서 사용되는 것들이 많아서 많은 복붙을 하는 곳이기도 하다. 3-1. lib/api 백엔드와의 통.. 2021. 6. 7. [내입맛대로만들기] TodoApp 만들기 대부분 프론트 개발자로 공부한다면 첫걸음은 TodoApp 을 만드는 것부터 시작한다.. 간단한 CURD로 가볍게 만들수 있지! 이미 프론트엔드 개발자로 이직한지 마음먹은지 1년, 이직한지 6개월 넘은 지금 이제야 Todo App을 만들어본다... 이유는? 일할 때 너무 필요해서... 회사 특성상 다양한 프로젝트를 동시에 하는 경우가 많은데 할일을 정리하는게 쉽지 않다.. 매일 프로젝트를 세 개씩 하는데.. 얘가 얜지 이런 라벨링이 너무 필요했고... 그리고 사람 특성상(?) 오늘의 할일을 내일의 나에게 미루는건 넘나 당연해서 ..... ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이런 특성을 살린 내 입맛대로 만드는 Todo app을 만들고 싶었다. 그래서 기본적으로 Todo app의 특징은 1. 할일 등록 2. 할일 수정 3... 2020. 10. 15. [Canvas] text 랜덤으로 나오다가 하나씩 나타나도록 하기 아래는 요런 느낌으로! random text가 좀더 다양한 캐릭터가 들어가면 이쁠거같음! 이건 react로 canvas 와 같이 구현해봄 import React, { useRef, useState, useEffect } from 'react'; const randomText = '~!@#$%^&*()_+`-={}[];":,./?qwertyuiopasdfghjklzxcvbnm'; function Canvas1() { const canvasRef = useRef(); const [context, setContext] = useState(null); const text = '얘들아 안녕!'; const textArr = text.split(''); let textIndex = -1; let rafId = un.. 2020. 8. 10. [Typescript] @type이 없는 외부 라이브러리 사용 방법 업무때 고생해서 일단 적어보기 1. tsconfig.json 아래 typeRoots와 declaration, declarationDir 등 입력할 것 { "compilerOptions": { ... "typeRoots": ["./types", "./node_modules/@types"], // 보통 types 폴더를 만들어 타입 정의 "declaration": true, // lib 만들 때 .d.ts 파일을 자동으로 "declarationDir": "./types" // 이 폴더에 만들어주는 옵션 }, "typeRoots": ["./types", "./node_modules/@types"], "include": ["src"] } 2. root에서 types 라는 폴더를 생성 3. type이 없던 외부 .. 2020. 7. 8. 이전 1 다음
