crabLab

리덕스 더 편하게 사용하기 액션 생성 함수, 리듀서를 작성할 때 redux-actions라는 라이브러리와 이전에 배웠던 immer 라이브러리를 활용하면 리덕스를 훨씬 편하게 사용할 수 있습니다. redux-actions 액션 생성 함수를 더 짧게 작성할 수 있다. switch/case 문이 아닌 handleActions 함수 사용 가능 업데이트 함수를 설정하는 형식으로 작성 counter 모듈에 적용하기 // createAction을 이용해 액션 생성 함수 설정 export const increase = createAction(INCREASE); export const decrease = createAction(DECREASE); // handleActions를 이용한 리듀서 함수 설정 const cou..

자바스크립트는 끊임없이 진화하는 언어입니다. 새로운 제안(proposal)이 정기적으로 등록, 분석되고, 가치가 있다고 판단되는 제안은 https://tc39.github.io/ecma262/에 추가됩니다. 그리고 궁극적으로 명세서(specification)에 등록됩니다. 엔진이 표준 전체를 지원하지 않고 일부만 지원하는 건 흔한 일이죠. 엔진별로 어떤 기능을 지원하고 있는지는 https://kangax.github.io/compat-table/es6/에서 확인할 수 있습니다. 표가 상당히 큰데, 각 기능에 대해선 차근차근 배울 예정이니 너무 겁먹지 않으셔도 됩니다. 바벨 바벨(Babel)은 트랜스파일러(transpiler)로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔줍니다. 트랜스파일러..

📌강의 정리 해쉬, 슬라이딩윈도우, 투포인터 알고리즘의 종합선물세트같은 문제이다. 슬라이딩 윈도우를 b의 길이만큼 만들지만 투포인터 알고리즘을 써서 계속 a와b를 비교하며 a의 슬라이딩윈도우를 한칸씩 옆으로 옮긴다. 슬라이딩 윈도우를 만들때는 b의 길이 -1 을 해서 만들고 옮기면서 하나씩 더하고 빼주며 옮긴다. 비교할때는 해쉬를 사용하여 키,밸류 형태로 비교한다. 키, 밸류 형태로 비교할때는 size가 맞는지와 키는 있는지, 키 당 밸류의 개수가 맞는지를 비교한다. 📌느낀점 문제를 볼때 강의시간이 27분이라 정말 엄청 어려운 문제인줄 알았는데 생각보다는 할만했다. 물론 생각보다 할만했다는 거지 결코 쉽지는 않았다. 이 문제의 까다로운 점이 있다면 지금까지의 알고리즘들을 다 써야 할줄은 물론이고 그것들을..

뒤쳐지는 느낌 보이지 않는 적과 싸우는 느낌이다. 기준을 어제의 나 자신에 두고 싸워야 하지만 어쩔 수 없이 다른 사람과 비교를 하게 된다. 그럴때마다 뭔가 부족한 느낌, 더 초조하고 불안해진다. 경험이 중요하다. 이럴때는 수많은 자료들을 보고 생각한 후에 경험에 제일 의지 해야 한다. 그러니까 평소에 메모 좀 해둘껄… 메모하는 습관을 지금이라도 잘 들이자 내가 전에 이랬을때는 어떤 선택을 했고 어떤결과가 왔으며 어떤 선택을 해야 더 좋았는지 그러므로 지금 상황에 대입하면 결국 집중 우선 무언가를 만들어보는것이 제일 중요하다. 항상 배우고나서 그걸 내것으로 만들었다고 착각하지말자. 내가 어떻게든 만들어보고 직접 실행시키고 마무리 해야 그게 진짜 내것이 된 것이다. 그러므로 오늘의 input 들 속에서 빠..

📌강의 정리 이번에도 해쉬(맵)를 써서 알고리즘을 짠다. 처음 맵에는 str1의 값을 키에는 영문자를 밸류에는 그 개수를 누적으로 구해주고 그 다음에는 각각의 str1의 키값을 str2의 문자들로 비교하여 있으면 밸류를 -1해주고 없거나 그 개수가 0이 되었으면 answer를 NO로 바꿔준다. 📌느낀점 Map을 쓴 두번째 풀이였다. 솔직히 그냥 정렬 2번써서 비교하면 편하겠다라는 생각을 수도 없이 했지만 그러면 그냥 푸는 의미가 없으니 이 악물고 Map으로 풀었다. Map이 익숙하지 않아서 시간이 좀 걸렸고 심지어 풀이도 내가 for문 3개로 강사님 풀이보다 for문이 한 개 더 많다. 그 이유는 나는 map을 2개 만들고 그 둘을 다시 비교했지만 강사님은 하나만 만들고 그 안에서 증감하며 비교했기 때문..

소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만, 프로젝트의 규모가 커짐에 따라 상태 관리가 번거로워질 수 있습니다. 리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는 데 도움이 됩니다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수도 있습니다. store 보단 react-redux 라이브러리에서 제공하는 유틸 함수 connect와 컴포넌트 Provider 사용하여 리덕스 관련 작업 처리. 작업 환경 설정 yarn create react-app react-redux-tuto..

테스트 자동화는 앞으로 풀어야 할 과제에서뿐만 아니라 현업에서도 광범위하게 쓰입니다. 테스트는 왜 해야 하는가? 개발 중엔 콘솔 창 등을 이용해 실제 실행 결과가 기대했던 결과와 같은지 계속 비교하면서 원하는 기능이 잘 구현되고 있는지 확인할 겁니다. 실제 실행 결과가 기대했던 결과와 다를 땐, 코드를 수정하고 다시 실행해 그 결과를 기대했던 결과와 다시 비교해 볼 겁니다. 원하는 기능을 완성할 때까지 이 과정을 계속 반복하겠죠. 코드를 수동으로 ‘재실행’ 하면서 테스트를 하면 무언가를 놓치기 쉽습니다. Behavior Driven Development BDD는 테스트(test), 문서(documentation), 예시(example)를 한데 모아놓은 개념입니다. 개발 순서 실제 개발에 착수하면 아래와 ..

옛말에 그런 말이 있다. “진정 즐길줄 아는 여러분이 이 나라의 챔피언입니다.” 변명은 없다. 차라리 쉴거면 그냥 당당하게 쉬자. 그래! 나 오늘 쉰다! YEAH~

오늘은 팀프로젝트도 하지만 전에 했던 첫번째 프로젝트의 완료 및 정리를 해보기로 하였다. 하다보니까 느낀건데 왜 코딩을 처음에 완료했을때 되면 안되는지도 조금은 깨달았다..ㅋㅋㅋ 그게 운이었다니… 사실 잘못짠게 우연히 들어맞은거다 실수가 안들키고 성공으로 둔갑해서 더 큰 화로 다가왔다 뒤늦게 알게 된 점 api기능에서 나는 url을 통한 라우팅 기능을 제대로 이해한 상황에서 짠 게 아니기에 지금의 내 의도대로 진행되는 이 웹서비스는 운(우연,실수)에 의한 한정적인 성공이라는 점…(그냥 url을 같은 이름으로 했는데 원래 그러면 안됐고 아직은 어떻게 해야 운에 의한 걸 실력으로 바꿀지 좀 더 공부해야한다.) 여기서 잠시 멈추고 배포한 이후에 다시 개발실력을 한 스택(라우팅, JWT, _id(mongoDB)..

https://ko.javascript.info/ninja-code 닌자 코드 ko.javascript.info 이 글은 반어법입니다. 닌자라 불리던 전설 속 개발자들은 유지보수 담당 개발자를 혹독하게 훈련하고자 (아래에서 소개해 드릴) 다양한 편법을 사용하곤 했습니다. 구루 급의 코드 리뷰 전문가들은 테스트 코드에서 이런 편법을 발견하면 박수갈채를 보내곤 했죠. 어떨 때는 초보 개발자가 닌자보다 더 적극적으로 나서서 이런 편법을 사용하곤 합니다. 닌자가 사용하던 편법을 잘 살펴보시고, 자신은 닌자인지, 코드 리뷰어인지, 초보 개발자인지 판단해 보시기 바랍니다. 코드 짧게 쓰기 가능한 한 코드를 짧게 써서, 당신이 얼마나 똑똑한 사람인지 보여주십시오. 지엽적인 문법 지식 등을 총동원하면 코드 양을 획기적..