crabLab

휴가 후 다시 출발 1박 2일간 서울 여의나루 한강으로 잠시 휴가를 떠났다. 휴식은 참 달콤하다.. 사람은 또 왜이리 많은지 테마 맛있는 거 다 먹기라 여의나루에 있는 길거리음식은 다 먹었다 뿌듯하다. 이제 다시 잘 출발해야지! 코드 재활용 리액트에서는 코드 재활용을 중요하게 생각한다. 또한 웹개발 강의에서도 대표님이 종종 얘기하신게 자기도 이거 다 못외운다고 그때 그때 한거 다시 보고 하는거라고 하셨는데 그렇다면 깃허브에 커밋하는것도 좋지만 노션에 따로 보기 좋게 다시 사용하기 좋게 정리해놓는 것도 좋은 것 같다. 사실 이것도 코드 재활용의 의미를 넓게 보면 코드 재활용이 맞지 않나 하는 생각을 해본다ㅎㅎ. 팀 프로젝트 회의 결과 노션의 로드맵 이용 로드맵 템플릿을 이용하여 팀프로젝트의 진행도를 공유하..

||(OR) alert( true || true ); // true alert( false || true ); // true alert( true || false ); // true alert( false || false ); // false 연산 과정에서 숫자 1은 true로, 숫자 0은 false로 바뀌죠. alert( 1 || 0 ); // 1 (1은 truthy임) alert( null || 1 ); // 1 (1은 truthy임) alert( null || 0 || 1 ); // 1 (1은 truthy임) alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함) 단락평가 OR||은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truth..

map() 웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있습니다. 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성합니다. arr.map(callback, [thisArg]) 이 함수의 파라미터는 다음과 같습니다. callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지입니다. currentValue: 현재 처리하고 있는 요소 index: 현재 처리하고 있는 요소의 index 값 array: 현재 처리하고 있는 원본 배열 thisArg(선택 항목): callback 함수 내부..

알고리즘 팀원분들과 알고리즘을 시작하기로 했다. 하루 한개씩 꾸준히 풀어서 좋은 결과가 있었으면 좋겠다. 노션 공유 페이지 완성 기존의 항해99 스터디양식과 다른 팀들의 양식을 비교해서 좋은 부분들만을 추려내려 노력했다. 다들 서로 도우며 의미있는 시간 가질 수 있었으면 좋겠다. 우선은 최대한 한눈에 많은 정보가 보일 수 있도록 구성했다. 많은 정보가 있으면 오히려 부담되고 어지러울 수 있기 때문이다. 심플하게 하고자한다. 위와 비슷한 내용이지만 항목이 많으면 기입할게 많아지고 복잡하기에 마우스 동선을 최대한 줄일 수 있도록 하였다.

if문 if(...)문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true이면 코드 블록이 실행됩니다. if (…) 문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 변환합니다. 숫자 0, 빈 문자열"", null, undefined, NaN은 불린형으로 변환 시 모두 false가 됩니다. 이런 값들은 ‘falsy(거짓 같은)’ 값이라고 부릅니다. 이 외의 값은 불린형으로 변환시 true가 되므로 ‘truthy(참 같은)’ 값이라고 부릅니다. if문엔 else절을 붙일 수 있습니다. else뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행됩니다. 유사하지만 약간씩 차이가 있는 조건 여러 개를 처리해야 할 때가 있습니다. 이때 else if를 사용할 수 있습니다. 조건부 연산자 ‘?’ 조건에..

DOM 요소의 id HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있습니다. 바로 ref(reference의 줄임말) 개념입니다. ref를 사용하는 경우 DOM을 꼭 직접적으로 건드려야 할 때 클래스형 컴포넌트에서 ref를 사용하는 방법을 알아보겠습니다. 함수형 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야 하기 때문에 8장에서 Hooks를 배우면서 알아볼 것입니다. DOM을 꼭 사용해야 하는 상황 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 등 콜백 함수를 통한 ref 설정 {this.input=ref}} /> createRef를 통한 ref 설정 class RefSample extends C..

사전과제 스터디 시작 사전과제 팀이 어제 정해지고 오늘 첫 모임을 가졌다. 사실 항해99의 제일 큰 장점은 강의와 학습의 질 보다도 성장할 수 있는 환경 조성과 성취 과제를 던져주고 현업과 동일하게 문제해결능력을 기르는 것이라 생각한다. 그렇기에 예상보다 더 빨리 스터디가 시작되어 너무 만족스럽다. (사실 나는 뭔가 묶여있고 억압(억제력)받고 같이 경쟁하고 협력하는 환경이어야 집중이 더 잘된다…) 오늘 모임 결과 우선 내일 9시 부터 실제 항해99 진행처럼 9~21시를 하기로 했는데 내도록 계속 여유롭다 하필 약속이 있는 내일과 내일모레가 스터디 첫 날이라니 참 얄궃다… 그래도 내일 약속 가기전과 내일 모레 약속 이후에 최대한 들어가 있어야겠다. 노션 공유 페이지 만들기 모임과 더불어 사전과제 스터디 양..

[수업 목표] Flask 프레임워크를 활용해서 API를 만들 수 있다. '버킷리스트'를 완성한다. EC2에 내 프로젝트를 올리고, 자랑한다! 느낀점 드디어 웹개발 종합반을 끝냈다. 뭔가 후련하면서도 재미도 있고 살짝 아쉽기도 하지만 무언가를 만들어보고 싶기도하고 복잡한 기분이다. 강의의 구성체계가 참 좋았던 것 같다. 강의 자체가 다시 복습하면서도 많은 것을 얻을 수 있게 만들어진것같지만 다른 무언가를 만들면서 복습하는 것도 재밌다. 뭘하든 성장에 도움이 많이 될 것 같다. 일단 아무튼 좋은 강의를 잘 마무리 한 것 같아 기분이 좋다. 01. 5주차 오늘 배울 것 & 설치 파일을 주고받기 위해 파일질라를 설치한다. []() 설치시 추가 확장프로그램은 선택이므로 받기 싫으면 안 받아도된다. 도메인 구매를 ..

변수의 값을 어떤 값 또는 다른 변수와 비교할 때 사용하는 것이 비교 연산자(Cpmparison Operator)입니다. 불린형 반환 다른 연산자와 마찬가지로 비교 연산자 역시 값을 반환합니다. 반환 값은 불린형입니다. true가 반환되면, ‘긍정’, ‘참’, '사실’을 의미합니다. false가 반환되면, ‘부정’, ‘거짓’, '사실이 아님’을 의미합니다. 문자열 비교 자바스크립트는 '사전’순으로 문자열을 비교합니다. '사전편집(lexicographical)'순 이라고 불리기도 하는 이 기준을 적용하면 사전 뒤쪽의 문자열은 사전 앞쪽의 문자열보다 크다고 판단됩니다. 문자열 비교 시 적용되는 알고리즘은 다음과 같습니다. 두 문자열의 첫 글자를 비교합니다. 첫 번째 문자열의 첫 글자가 다른 문자열의 첫 글자..

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 합니다. 리액트에서 이벤트 사용시 주의사항 1. 이벤트 이름은 카멜 표기법으로 작성합니다 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다 함수 전달에 좋은 화살표 함수 사용 렌더링 부분 외부에 미리 만들어서 전달 가능 3. DOM 요소에만 이벤트를 설정할 수 있습니다 html 태그 같은 DOM요소에만 설정 가능 컴포넌트에는 설정이 안된다. 클래스형 컴포넌트 React에서는 DOM엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없다. 대신, 엘리먼트가 처음 렌더링될때 리스너를 제공하면 된다. 이벤트핸들러를 클래스의 메서드로 만들고 이를 ..