crabLab

같이 가야 멀리간다. 슬랙에 올라오는 질문과 답변의 수준이 올라간다… 조급할 수 있지만 침착해야한다. 어차피 급하게 나 혼자 가면 무수히 많은 과거의 반복이다. 혼자서는 절대 지속하지 못한다. 같이 할때 책임감과 소속감으로 해야 멀리 갈 수 있다. 토이프로젝트 시작일 변경 좀 더 좋은 토이프로젝트 진행을 위해 기존의 6/9 목요일 오후 8시에서 6/10 금요일 오후3시로 변경되었습니다. 만들면서 배워야 한다. 개발자는 자신이 고장낸 장난감의 수에 비례하여 성장한다. 내일이면 거의 첫 프로젝트에 돌입할 것 같다. 사실 첫 프로젝트에서의 준비는 거의 끝났다. 강의를 참고하면 되고 모두가 같은 방향으로 가며 코드리뷰도 제법해왔기 때문이다. 그럼에도 살짝 떨리는 건 처음이기 때문이 아닐까? ㅋㅋㅋ 재밌게 프로젝..

복수의 if 조건문은 switch문으로 바꿀 수 있습니다. switch문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해줍니다. 코드 자체가 비교 상황을 잘 설명한다는 장점도 있습니다. let a = 2 + 2; switch (a) { case 3: alert( '비교하려는 값보다 작습니다.' ); break; case 4: alert( '비교하려는 값과 일치합니다.' ); break; case 5: alert( '비교하려는 값보다 큽니다.' ); break; default: alert( "어떤 값인지 파악이 되지 않습니다." ); } case문 안에 break문이 없으면 조건에 부합하는지 여부를 따지지 않고 이어지는 case문을 실행합니다. 여러 개의 “case”문 묶기 let a =..

useMemo 컴포넌트 내부에서 발생하는 연산 최소화 실습 코드는 insert외에 input 내용 수정되어도 getAverage함수가 호출됨 useMemo 사용하면 특정 값이 바뀌었을 때만 연산을 실행, 원하는 값이 바뀌지 않았다면 이전 연산 결과를 다시 사용 Memoization memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다. 함수형 컴포넌트에 memoization 적용 아래 컴포넌트는 prop으로 넘어온 x와 y 값을 compute 함수에 인자로 넘겨서 z 값을 구한 후..

고독 오늘 아침에 너무 고독하고 힘들었다. 같이 하는 팀원이 있다는게 정말 너무너무 다행이다. 요 며칠간 꼴에 팀장이라고 뭔가 자만심에 빠졌던거 같다. 내가 뭐라고… 나는 나 혼자서는 뚜껑열린 물티슈마냥 말라 비틀어져 갈 뿐이다. 겸손하게 팀활동을 하자. mongoDB certificate issue 팀원분들중 한 분이 종합반 3주차에 mongoDB와 pymongo를 이용해 데이터를 DB에 넣는 과정을 진행중에 문제가 생겼다고 말해 주셨다. 그래서 처음으로 팀원들이 다같이 모여 머리를 맞대고 의견을 모으며 문제를 해결했다. 단언컨대 그 어떤 의견도 불필요한 의견이 없었으며 브레인스토밍이 무엇인지 직접 약간(?)이라도 경험한 것 같아 기분이 좋다. 무의식중에 오류코드가 길고 복잡하니 구글링을 꺼렸었다.. ..

while 반복문 condition(조건)이 truthy 이면 반복문 본문의 코드가 실행됩니다. 아래 반복문은 조건 i < 3을 만족할 동안 i를 출력해줍니다. let i = 0; while (i < 3) { // 0, 1, 2가 출력됩니다. alert( i ); i++; } do…while 반복문 do..while 문법을 사용하면 condition을 반복문 본문 아래로 옮길 수 있습니다. let i = 0; do { alert( i ); i++; } while (i < 3); 본문을 최소한 한번이라도 실행하고 싶을 때만 사용 for 반복문 for (begin; condition; step) { // ... 반복문 본문 ... } 구성 요소 생략하기 let i = 0; // i를 선언하고 값도 할당하였습..

Hooks란? Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다. useState useState는 가장 기본적인 Hook 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook을 사용하면 됩니다. const [value, setValue] = useState(0); useState 함수의 파라미터에는 상태의 기본값을 넣어 줍니다. 현재 0을 넣어 주었는데, 결국 카운터의 기본값을 0으로 설정하겠다는 의미 이 함수가 호출되면 배열을 반환하는데요. 그 배열의 첫 번째 원소는 상태 값, 두 번째 ..

알고리즘 코드 리뷰 처음으로 알고리즘으로 코드 리뷰 시간을 가져봤다. 생각보다 더 유익하고 좋은 것 같다. 자신의 코드에 대해 좀 더 생각해보고 다른 사람은 저 방법을 생각해냈었구나 하고 놀라기도하고 코드를 짜는데 있어 다양한 성격과 선호도가 보여 좋았다. 제대로 이해했는지 확인하려면 설명하는게 가장 좋은 방법이라는 말은 이제 10번 이상 보고 들은 것 같다. 항해99라는 좋은 기회가 왔다. 이제는 실천할때다. git 협업 이제 조금 있으면 스터디 조원들과 함께 git으로 협업을 하려고 하는데 이게 생각만큼 쉽지 않다. 지금까지 나도 항상 독고다이로 혼자 독학했어서 git을 pull request하며 써본적이 한번도 없다. 그래서 git협업에 관한 괜찮은 강의를 골라 팀원들과 같이 학습하고 거기에 나온 ..

nullish 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있습니다. a ?? b의 평가 결과는 다음과 같습니다. a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다. x = (a !== null && a !== undefined) ? a : b; let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? lastNa..

라이프 사이클 메서드의 이해 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기 가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 라이프 사이클 : 페이지에 렌더링되기 전인 준비 과정 ~ 페이지에서 사라질 때 까지 이럴 때.. 처음으로 렌더링할때 어떤 작업을 처리해야할 때 업데이트 하기 전, 후에 어떤 작업을 처리해야 할 때 불필요한 업데이트를 방지할 때 3가지 카테고리와 그 메서드 👀 마운트(mount) DOM이 생성되고 웹 브라우저상에 나타나는 것 컴포넌트가 생성 될때 발생하는 생명주기들을 알아봅시다. ☑️ constructor 컴포넌트 새로 만들 때..

📌문제 출처 https://programmers.co.kr/learn/courses/30/lessons/60057 코딩테스트 연습 - 문자열 압축 데이터 처리 전문가가 되고 싶은 "어피치"는 문자열을 압축하는 방법에 대해 공부를 하고 있습니다. 최근에 대량의 데이터 처리를 위한 간단한 비손실 압축 방법에 대해 공부를 하고 있는데, 문 programmers.co.kr