본문은 아래의 링크를 읽고 해석, 요약한 글입니다. 13 Useful JavaScript Array Tips and Tricks You Should Know 13 Useful JavaScript Array Tips and Tricks You Should Know An array is one of the most common concepts of Javascript, which gives us a lot of possibilities to work with data stored inside. Taking… medium.com 1. 중복 제거 new Set을 사용하고, Array.from() 메서드 또는, 스프레드 연산자(...)를 사용하여 빠르고 쉽게 중복 제거를 할 수 있다. const fruits = ..
제목 그대로 storybook을 만져보다가 프로젝트 실행을 하였는데, 아래와 같이 오류를 만나게 되었다. 스토리북 도입하면서 프로젝트 실행할 일이 없어서 계속 모르고 있었다. 커밋로그 상으로 언제부터 에러가 난 건지 한참 찾아봤었고, Storybook CLI인 npx sb init를 하고 난 이후로 프로젝트 실행이 되지 않는 것을 확인했다. 이슈 찾기 아래의 링크는 Storybook에서 나와 같은 문제를 겪고있는 이슈이다. https://github.com/storybookjs/storybook/issues/5183
1. [우테코 X 원티드] 오늘의 개발자 3회차 주제 : 2년차 프론트엔드 개발자의 생각들 연사 : 토스 개발자 '양성민'님 나의 개발 커리어, 회사를 선택했던 기준 나의 마인드셋과 태도 면접관이 되어보고 깨달은 것들 회사를 선택했던 기준 개발자님께서 어떠한 기준으로 회사를 선택하셨었는지, 들어볼 수 있었다. DOG Fooding ex) Slack, notion 집이 얼마나 가까운가 어떤 스택을 사용하는지 코드리뷰는 어떻게하는지 테스트 코드는 짜는지 기술블로그는 있는지 DevRel팀이 있는지 프론트엔드 팀의 규모 사내추천으로 지원할 수 있는가 퇴사율은 얼마인가 채용공고에 얼마나 신경썼는가 회사 평판 회사 선택시 고려하지 않았던 것 회사 인지도 (B2C 회사가 아니면 잘 모를 수 있다.) 복지 취업 TIP..
📝 프론트엔드 로드맵에 대해서는 너무나 유명해서, 다들 아실 것이라 생각합니다. 아티클 중 React 개발자를 위한 로드맵을 발견하여 기쁜마음에 공유합니다. 출처 : https://medium.com/dhiwise/advanced-roadmap-for-react-js-developers-3a40ce4174b9 리소스 ReactStrap Ant Design Blueprint JS Evergreen Storybook 좀 더 자세한 것은 ReactJS UI Frameworks 를 찾아보세요! 테스팅 React 개발자에게 필수적인 스킬입니다! 단위 테스트 Jest React texting library Enzyme Sinon Mocha Chai AVA Tape E2E 테스팅 (End To End) Seleniu..
📝 이 글은 https://javascript.plainenglish.io/17-killer-websites-for-web-developers-13e1e30345b8 의 글을 번역 및 정리한 글입니다. 1. Random Image via API Unsplash Source Unsplash Source A simple API for embedding free high-resolution photos from Unsplash. source.unsplash.com 랜덤이미지 관련 JSON API 입니다. 2. Embeddable Widget Apps for Notion Apption - Notion friendly Embeddable Widget Apps Apption - Notion friendly Embe..
📝 기존 Git 관련 명령어 정리자료들이 여기저기 흩어져있어서, 이 곳으로 정보들을 합치는 중입니다. Git은 모든 파일을 추적(tracking)하는 버전관리시스템입니다. 따라서, 내가 언제 파일이 변경되고, 만들고, 삭제되었는지를 알게 해줍니다. Github은 파일공유소라고 보면 되겠습니다. 는 무시하고(typing하지말고) 적어주세요! Git 기본설정 Git 하위 디렉토리 생성 (깃 저장소 생성) git init 해당 폴더에 git이 없을 때 사용한다. Git 정보 확인 git --version 깃(git) 버전 확인 git log 커밋(commit)내역 확인 git remote -v 원격저장소(github repository) 확인 Github에 있는 repository 가져오기 (깃헙과 로컬 연결..
1. 드디어 CI/CD 완료 계속 빌드 단계 마지막에서 오류가 일어나는데 왜 이러는지 알 수 없었다. 이것때문에 삽질을 많이 했는데 결론은 build에서 환경변수 설정해주니 해결 완료됐다 ^^... 해내버린 내 자신 대견해... https://cheri.tistory.com/201 Github actions을 이용한 AWS S3 자동배포 애플리케이션에 기능을 더할 때마다 또는 유지/보수할 때마다 빌드 및 배포하는 작업들이 불편하게 느껴지지 않았나요? 그렇다면 Github actions를 사용해보세요! Github Action이란? 이벤트 발생에 따 cheri.tistory.com 2. 3기 멘토로서 게더 멘토링 참가 매번 slack에서 올라온 질문들만 답변달아주다가 실제로 3기 분들을 대면하니 마음이 새..
애플리케이션에 기능을 더할 때마다 또는 유지/보수할 때마다 빌드 및 배포하는 작업들이 불편하게 느껴지지 않았나요? 그렇다면 Github actions를 사용해보세요! Github Action이란? 이벤트 발생에 따라 자동으로 빌드 및 배포하는 스크립트를 실행시켜줄 수 있습니다. 그 말 즉은 push 또는 pull request 이벤트가 있을때마다 Github actions이 build와 deploy를 하고 s3 배포까지 시켜줄 수 있다는 것이죠! Github actions 정복하기 Github 공식문서 https://docs.github.com/en/actions 참고블로그 https://ji5485.github.io/post/2021-06-06/build-ci-cd-pipeline-using-githu..
1. 숨고 탐방 플린님 찬스로 숨고에 슬며시 다녀왔다. (항상 너무 고맙다) 시설도 너무너무 좋고, 정말 찐 개발자들의 일하는 모습들을 보니 너무 멋있었다!! 😎😎😎 나도 얼른 정말 어엿한 개발자로서 프로덕트를 만들어야지! 의욕이 불타오른다!!!! 2. 코딩은 밖에서 하는 게 제맛 놀러나와서까지 왜 코딩하냐, 왜 공부하냐라는 말을 많이 듣는데 나는 오히려 좋은 풍경보면서 공부하면 지식이 더 잘 받아들여진다. 어쩌면 개발을 재미있게 바라보는 하나의 팁이 될 수 있겠다. 왜 다들 샤워하면서 자기 직전에 어떻게 코드를 짜야될지 영감이 떠오른다고 하지 않던가. 나도 나에게서 익숙한 공간에서 벗어나면 그러한 영감이 떠오르는 편이다. 억지로 짜내는 것이 아니라 자연스럽게 번뜩! 무튼 앞으로도 자주오게 될 것 같다...
요즘 한창 TypeScript 공부에 열을 올리고 있다. 공부하던 도중 Generics을 만났고, 도대체 언제 써야되는지 의문이였다. 항상 Javascript의 동적타입에 익숙한 사람인 내가 정적 타입에서 사용하는 Generics을 만난 기분은 갓 개발 처음 시작하여 Javascript의 문법을 배웠을때의 그 느낌과 같았다. 그래서 나와 같은 사람이 있다면 이 글을 읽고 조금이라도 도움이 되었으면 한다. 1. TypeScript가 뭔데? 일단 자바스크립트의 유연함에 대한 문제를 해결하기 위한 언어이다. 자바스크립트는 동적타입, 타입스크립트는 정적타입의 언어이다. 이렇게 말하면 아예 둘이 완전 다른 언어라고 오해하기 쉬운데, 타입스크립트는 자바스크립트의 상위집합이다. 그래서 타입스크립트 내에서 자바스크립트..
TypeScript! 도대체 무엇이길래 요즘 취업시장 자격요건에서 심심찮게 발견할 수 있는걸까요? 또한 수많은 개발자들에게 인기를 받고있는 TypeScript! 아래의 표가 그 인기를 잘 보여줍니다. 도대체 어떤 이유로 이렇게 인기가 많은 걸까요? Javascript는 원래 웹브라우저에서 사용되기 위한 스크립트언어였습니다. ES5의 시작으로 JavaScript의 가장 큰 장점이자 단점은 과도한 유연성에 있습니다. 사용될 때 타입이 정해지는 동적타입속성으로 인해 많은 오류가 발생될 수 밖에 없었는데요! 그때 타입을 지정해주는 TypeScript가 등장하게 됩니다. 타입을 지정하게 된다면 어떤 일이 벌어질까요? 아래와 같은 기능을 만들었을 때, 기존 JavaScript라면 xy 라는 값이 나왔을 것입니다. ..
앞으로, 개발에 대해 깊이있게 공부하기 위해 하나둘씩 정리해나갈 예정입니다. 이제는 어떻게서든 해결하는 개발자가 아니라, 문제를 근본부터 파헤쳐 해결하는 개발자가 되고자 합니다. 유저의 행동흐름에 따라서 동적으로 화면을 보여주기 위해 사용되는 프론트엔드 라이브러리/프레임워크들이 있습니다. 바로 React / Vue / Angular! 그 중 React를 가장 첫번째로 선택해서 공부했던 이유는 당시 채용시장에서 React를 요구하는 회사가 많았었고, 3개 중 가장 인기있는 도구였기 때문였습니다. 하지만, 앞으로 좋은 프론트엔드가 되기위해서는 도구를 가려서는 안되는 법! 이 3가지를 잘 정리해두어서, 상황에 맞추어 도구를 사용하는 개발자가 될 것 입니다! 유저와의 상호작용이 활발하지 않은 홈페이지를 만든다면..
