전체 글 (147) 썸네일형 리스트형 performance of array & object object 객체는 순서(unordered)가 없고, key - value 쌍으로 이루어진 데이터의 집합이다. 따라서 순서에 관계 없는 데이터를 보관할 때 사용하면 좋다. 뿐만 아니라, 빠르게 데이터에 접근하거나 데이터를 추가/삭제 할 때에도 유용하다. 이 때 빠르다는 것은 상수의 시간 복잡도(O of constants)를 갖는다는 것을 의미한다. let harry = { fullName: 'harry styles', age: 28, favoriteNumbers: [1, 2, 3, 4], } insertion => O(1) removal => O(1) access => key를 이용해 value에 접근하는 것을 의미, O(1) searching => 어떤 value가 객체에 존재하는지 확인하는 것을 의미.. BigO Notation intro big o 표기법은 같은 문제를 해결하는 여러 방법, 즉 여러 알고리즘 중 어떤 것이 더 나은지 판단할 수 있는 기준이 된다. 어떤 알고리즘이 더 낫다고 이야기하는 것은 상황에 따라 다르지만, 빠른 속도와 적은 메모리 사용량이 보편적인 기준이다. +) 속도나 메모리 사용량 뿐만 아니라 코드의 가독성, 간편한 유지보수 가능성 등이 더 나은 코드를 판별하는 기준이 될 수 있다. time complexiry | how long to execute the function? perfomance.now 이용하기 예를 들어 문자열을 input으로 받고, 그 문자열을 거꾸로 뒤집은 값을 반환하는 함수를 만든다고 해 보자. 이 함수를 구현해내는 방법은 아래의 두가지 외에도 많을 것이다. 둘 중 어떤 함수가 더.. React with web accessibility npm install eslint-config-airbnb npm info "eslint-config-airbnb@latest" peerDependencies # peerDependencies 목록 ## eslint-plugin-import ## eslint-plugin-jsx-ally ## eslint-plugin-react ## eslint-plugin-react-hooks 에어비앤비에서 설정한 es lint 모듈을 설치하면, 다음과 같은 하위 dependencies가 프로젝트에 포함된다. eslint-plugin-jsx-a11y 모듈 이 모듈은 web accessibility 규칙을 준수하는 JSX 코드를 작성할 수 있도록, JSX 코드를 평가한 뒤 코드 에디터에 경고/에러를 띄운다. => 자세한 .. what is MVC pattern? MVC Model–view–controller is a software architectural pattern commonly used for developing user interfaces that divide the related program logic into three interconnected elements. model | view에서 보여줄 데이터 데이터를 가져오거나, 생성/업데이트 하기 위한 로직? view | 어플리케이션 사용자에게 보여지는 화면 구성 가져온 데이터를 화면에 표시하는 로직? controller | model과 view가 어떤 일을 해야 하는지를 제어(control), 웹 서버라고 이해하면 쉽다. model과 view는 직접 상호작용 하지 않고, controller를 통해.. Jest configuration | official docs $ npm install --g jest $ npm install --D @types/jest $ npm install --D jest $ jest --init 터미널에서 jest를 global 옵션으로 설치하면, npm 명령어 jest를 실행할 수 있다. 타입스크립트 코드를 테스트하는 것이 아니더라도 @types/jest를 설치하면 코드에디터에서 자동완성, 메서드 설명 확인 등의 기능을 이용할 수 있다. jest --init 명령어를 사용하면, jest 설정과 관련된 파일(jest.config.js)을 간편하게 작성할 수 있다. script에 test - jest 자동 연결 typescript 코드의 테스트 설정 clearMocks: true | 테.. Testing, TDD what is testing? testing이란, 어플리케이션의 함수, 기능, ui 등이 예상한 대로 동작하거나/렌더링 되는지 미리 확인하는 것을 말한다. 예를 들어 어플리케이션에서 사용되는 utility 함수를 작성했다고 하자. 함수를 작성한 개발자는 input x가 전달 되었을 때 output y가 반환될 것으로 예상한다(expectations, requirements). 이 때 이 함수에 대한 test code를 작성하고, 실행하면 그 결과를 통해 x가 전달되었을 때 y가 반환되는지 등을 확인할 수 있다. +) 테스트 코드를 작성하기 이전에는, 제품 개발이 완료 되면 QA(quaility assurance) 팀이 사용자의 입장에서 소프트웨어를 테스트하는 것이 보편적이었다. 개발이 모두 완료된 시점에.. [Zeros] 버그 & 건의 사항 Zeros에 방문해 보기 혹시 다른 버그를 발견하시거나, 건의 사항이 있으시면 댓글로 알려주세요!✨감사합니다. 버그 모바일로 접속했을 때, 저축 목표를 수정하는 form의 submit 버튼이 안보이는 버그. 다른 react icon 으로 바꿨더니 아주 잘 보인다! 모바일에서 구글/깃허브 로그인 버튼을 처음 클릭했을 때 아무런 반응이 없는 버그. 다시 로그인 버튼을 클릭하면 제대로 로그인이 되는데, signInWithPopup 함수랑 관련이 있는 것 같다는 막연한 생각(모바일에서는 signinWithRedirect 으로 호출했더니 해결됐다.) firebase auth 공식 문서에서 모바일 로그인 시 popup 보다 redirect를 사용하는 것을 선호한다고 나와있다. useDeviceCheck 훅을 만들어.. [Zeros] 1.0.0 마무리 프로젝트를 시작하게 된 계기 2022년 2월 프론트엔드 공부를 시작하고, 7월 원티드 프리온보딩 코스를 통해 처음으로 다른 프론트엔드 지망생 분들과 협업해 보았다. 나는 주로 강의 듣기 + 실습 하기 + 배운 내용 블로깅하기 방식으로 공부를 해 왔다. 그래서 기업과제를 기반으로 하는 팀 프로젝트가 낯설기도 했지만, 내가 구현하기 어려운 기능이 무엇인지 직접 정의해 보고, 문제를 해결하는 경험을 여러 차례 쌓으며 재미를 느꼈다. 특히 생각한 대로 코드를 작성해 보고, 원하는 대로 동작하지 않을 때 그 문제가 무엇인지 찾아보고 해결하는 과정 자체가 재미있었다. 내가 생각하는 나만의 프로젝트 만들기가 이런 공부의 끝판왕이 되어 줄 것이라는 생각이 들었다. 프로젝트를 하며 어려웠던 점 (feat. 새로 만난 문.. 이전 1 2 3 4 5 6 ··· 19 다음
