본문 바로가기

전체 글107

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.
string 배열에서 중복이 있는지 확인하기 / 중복 제거하여 리턴하기 string 배열에서 중복이 있는지 확인을 해야하는 작업이 필요해서 서치를 하다가 남겨두면 좋을 것 같아서 남겨보고자 한다. const arry = ['hello', 'world', 'hello', 'bears', 'go', 'to', 'home']; const findDuplicates = (arr) => { return arr.filter((item, index) => arr.indexOf(item) !== index); } const duplicates = findDuplicates(arry); console.log(duplicates); // Output: ['hello'] indexOf의 특징을 사용하는 것인데, indexOf는 배열에서 첫 번째로 찾아지는 데이터의 index의 값을 리턴하는데 .. 2021. 10. 25.
[Github] Github actions 수정시 다른 브랜치에서 적용이 안되는 이슈 회사에서 Github actions를 수정해야할 상황이 생겼었다! 기존에 있던 actions는 PR(Pull Request)을 올리거나 수정했을 때 actions가 돌아갈 수 있도록 되어있는 workflow였는데 다른 브랜치에도 해당 actions를 적용하려고 수정을 하고 commit을 했는데 actions가 동작하지 않았다!(두둥) 이유는 workflow가 저장된 yml이 main 브랜치에만 커밋이 이루어졌기 때문이었다.... actions flow 안에서 branches에 여러 branch 리스트를 적어도 step에서 checkout을 하면 해당 yml이 적용이 안되기 때문에 모두 머지를 해주어야한다.. 멍청한 곰돌찌를 위해 작성함... 2021. 9. 15.
21.09.10 주절주절 새로운 회사에 입사하고 한달이 넘어갔고 점점 업무에 적응해가고있다 이번 프로젝트를 진행하면서 그렇게 매우 많이 미뤄왔던 테스트코드를 작성하기로했다!!! (드디어!!) 거의 프로젝트가 기존의 기능 베이스로 처음부터 끝까지 갈아 엎는거여서 테스트코드 작성 시도를 할 수 있는 계기가 되어서 무언가 뿌듯! 그래서 다시 열심히 나의 언제나 매우 쓰앵님인 구글을 찾아다니구 많은 글을 보다가 그렇게 어려워했던 테스트코드작성이 갑자기 이해가 되었다! 학교에서 교직이수를 하면서 다양한 교육이론을 배웠는데 이게 바로 아하!이론에서 얘기하는 급이해하는 순간인가 싶었다(?) 2021. 9. 10.
[기타] 디자인을 위한 참고할만한 사이트! 이전에 요소의 애니메이션에 대한 건 GSAP를 사용했는데 검색을 하다 보니 anime.js라는 라이브러리를 알게 되었다. 나중에 참고하면 좋을 것 같아서 기록해두기! https://animejs.com/documentation/ anime.js Javascript animation engine animejs.com 아래 GSAP도 사이트 기록해두기 https://greensock.com/gsap/ GSAP Timeline Tip: Understanding the Position Parameter The secret to building gorgeous sequences with precise timing is understanding the super-flexible "position" parameter.. 2021. 8. 12.
[자바스크립트] 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.
[기타] 매일 보면 좋을 자바스크립트 관련 사이트 최근에 자바스크립트 공부도 하면서 영어공부도 할겸.. 여기저기 찾아보다가 좋은 사이트를 발견했다. https://javascript.plainenglish.io JavaScript in Plain English New JavaScript and Web Development content every day. Follow to join our +2M monthly readers. javascript.plainenglish.io 영어로 자바스크립트 관련 글들을 모아놓은거고 매일 업데이트가 된다! 꾸준히 읽으면 영어도 자스도 공부할 수 있을 것같,..........겠지?.... medium기반이라서 일단 미디엄을 정기구독해야하지만 확실히 좋은 글들도 많고 새로운 내용들도 접할 수 있고 알던 내용들도 영어로 다시.. 2021. 7. 7.
[2021년 상반기 회고] 주니어 프론트엔드 개발자의 회고 자바개발자로서 2년 5개월, 프론트엔드 개발자로서 1년 3개월 즈음 지나고 보니 벌써 2021년 상반기가 지나버렸다. 작년에는프론트엔드 개발자가 되고 싶었고, 결론적으로 프론트엔드 개발자가 되면서 회사에 적응하고 추가적인 공부도 하고.. 다양한 개인적인 일들까지 있어서 다이나믹하게 살았던거 같았다. La vita c'è ecco qua e adesso 지금을 기억하라는 뜻이고 몇년 전부터 나의 원래 모토(법에 접촉되지 않는 한 다양한 경험을 최대한 해보자)와 함께 쌍벽을 이루게 된 모토이다. 현재에 최선을 다하라는 뜻이고, 2021년 상반기는 이 뜻에 맞게 잘 살았던 것 같은 느낌적인 느낌아닌 느낌이 들었다! 프론트엔드 개발자로서 공부에 대한 좌절감은 몇 번이고 있었지만 프론트엔드 개발자로서 개발을 하는.. 2021. 7. 2.

티스토리툴바