전체 글

[React] props와 state의 차이

리액트는 컴포넌트 단위로 나눠서 작업하기에 최적화되어 있다. 그래서 작은 컴포넌트 단위로 잘개 쪼개서 작업하고 또 합쳐서 큰 컴포넌트에 들어갈 수도 있다. 부모와 자식이 존재할 수 있다는 것이다. 이런 사전 지식을 알고 나서 props와 state를 인지하게 되면 둘의 차이를 보다 쉽게 알 수 있다. 참고: 본 블로그의 리액트 사용 예시는 모두 리액트 훅스(함수형)를 사용하고 있습니다. 틀린 내용이 있다면 댓글로 피드백 부탁드립니다 :) props란? 자식 컴포넌트에서 상속받아 쓰는 부모 컴포넌트의 상태 값 사용 예시 function Welcome(props) { // 자식 컴포넌트 return Hello, {props.name}; } function App() { // 부모 컴포넌트 return ( )..

4월 3주차 주간 회고

잘한 점 저번주보다 즐기면서 할 수 있었던 것 같다. 마지막까지 버그를 해결하려고 노력했다. 공부한 키워드를 정리했다. 이제 조금씩 정리하면서 해 보자 백엔드의 요구사항(로그인 기능)을 받아들여 만들었다. 잘 못한 점 문제 상황에 대해 빠르게 대처하지 못했다 (특히 마지막에) 리팩토링을 거의 못 했다. 매직넘버.. 윽.. 서버에서 프론트에서 잘못해서 생긴 버그까지 다 핸들링해 주셔서 너무 미안했다. 잘 이해하지 못한 것을 더 파고들어 질문하지 못했다. 더 적극적으로 나서야 겠다. 공부한 내용을 정리하려고 계획을 세웠지만 못 했다. 개발 하면서 해야겠다. 알게 된 내용 mouse event drag event offsetHeight, getBoundingClientRect webpack.config pro..

4월 2주차 주간회고

잘한 점 할 수 있는 만큼만 했다. 타입스크립트에 도전했다. 페어와 소통을 열심히 했다. 못한 점 스크럼,회고를 매일 제대로 하지 못 했다. 집에 일찍 가는 날이 많았고, 지각을 많이 했다. 타입스크립트의 타입 다루는 게 생각보다 까다로워서 개발 시간이 지연됐다. 생각 요즘 내가 왜 이렇게 혼자 스트레스 받나 생각해 봤다. 나는 성향 상 (mbti 중 사회생활 젤 적응 못한다는 그 infp) 하고 싶은 걸 하기 좋아하고 심지어 하고 싶은 주제가 자주 바뀐다. 근데 하고 싶은 것에 저번주~이번주까지는 코쿼에서 코딩하기가 포함이 안 됐던 것 같다. 비교고 뭐고 돌이켜 보면 하기 싫단 말을 입에 달고 지냈다. 스트레스를 받은 건 하기 싫은데 해야 돼서 그런 듯 싶다. 근데 이걸 쓰는 지금은 또 하기에 재밌다 ..

[WakaTime] VSCode 22시간 6분 (2020년 4월 1주)

[WakaTime] VSCode 22시간 6분 (2020년 4월 1주) 일주일 간 사용 시간: 22시간 6분 가장 많이 쓴 언어: Javascript

코드스쿼드 마스터즈 과정 3개월 회고

코드스쿼드 마스터즈 과정 6개월 중 3개월이 지났다. 2020년의 1분기도 지났다. 사실 인지하지 못하고 있다가 누군가 말해 줘서 깨달았다. 3개월 동안 정신 없이 열심히는 산 것 같은데 정확히 어떻게 배우고 성장했는지 기록하기 위해 오늘은 특별하게 분기 회고를 작성해 보려고 한다. 목차 1월의 나 2월의 나 3월의 나 잘 하는 것 못 하는 것 앞으로의 나 1. 1월의 나 적응기. 1월에는 모든 게 어색했고, 혼돈 그 자체였다. 지금 생각을 해 보면 미션을 할 때 독서실 같은 분위기였다 (ㅋㅋㅋ) 세상 조용... 지금은 그럴 틈이 잘 없다. 초반엔 마스터들이 말 좀 하라고 했었다;; 난생 처음 하는 페어 프로그래밍에 혼자 속앓이를 하기도 했다. 페어 그라운드 룰도 지키기 힘들고 하루 종일 내 짝에 대해 ..

[모두의 네트워크] 3장 물리 계층 : 데이터를 전기 신호로 변환하기

3장[준비편] 물리 계층 : 데이터를 전기 신호로 변환하기 네트워크의 구조 이해하기 목표 전기 신호 랜 케이블 리피터 허브 :one: 물리 계층의 역할과 랜 카드의 구조 데이터 : 전기 신호로 변환되어 네트워크를 통해 전송 물리 계층 OSI 모델의 최하위 계층 데이터(0과 1의 비트열)를 전기 신호로 변환하기 위해 필요 송신 : 데이터 => 전기 신호 수신 : 전기 신호 => 데이터 전기 신호 전압이 일정 패턴으로 변해 생기는 일련의 흐름 전압의 변화가 모여서 만들어진 신호 종류 : 아날로그 신호, 디지털 신호 아날로그 신호 전화 회선이나 라디오 방송에 사용되는 신호 물결 모양디지털 신호 막대 모양 랜 카드 0과 1을. 전기 신호로 변환함 컴퓨터의 네트워크 연결 및 데이터 전송 담당 :two: 케이블(전..

[모두의 네트워크] 2장[준비편] 네트워크의 기본 규칙

2장[준비편] 네트워크의 기본 규칙 네트워크의 기초 지식 익히기 목표 프로토콜 OSI 7 & TCP/IP 캡슐화 & 역캡슐화 프로토콜 통신하기 위한 규칙 데이터를 주고받기 위한 통신 규격 OSI 모델 회사가 달라도 공통으로 사용 가능한 표준 규격 네트워크 기술의 기본이 되는 모델 7계층(레이어)으로 컴퓨터 내부에서 일을 나눠서 함 송신 측의 7계층(상위 계층 => 하위 계층) 수신 측의 7계층(하위 계층 => 상위 계층) 1계층 - 물리 계층 : 시스템 간 물리적인 연결과 전기 신호 변환 및 제어 2계층 - 데이터 링크 계층 : 네트워크 기기 간의 데이터 전송 및 물리 주소 결정 3계층 - 네트워크 계층 : 다른 네트워크와 통신하기 위한 경로 설정 및 논리 주소 결정 4계층 - 전송 계층 : 신뢰할 수 ..

[모두의 네트워크] 1장[준비편] - 네트워크 첫걸음

1장[준비편] - 네트워크 첫걸음 네트워크의 기초 지식 익히기 목차 네트워크 패킷 램(LAN), 왠(WAN) 인터넷 전 세계의 네트워크를 연결하는 거대한 네트워크 패킷(=택배) 데이터를 주고받을 때 네트워크를 통해 전송되는 데이터의 작은 조각 큰 데이터(=대형 트럭)를 보낼 때 네트워크의 대역폭을 너무 많이 점유해 다른 패킷의 흐름을 막을 위험(=교통 정체)이 있어 작게 나누어 보냄 용량이 큰 데이터는 패킷을 분할하여 전송한다 패킷이 도착지에 도착하면 번호순으로 정렬해 다시 합친다 LAN vs WAN LAN WAN 좁은 범위의 네트워크 Local Area Network 넓은 범위의 네트워크 ISP 서비스로 구축된 네트워크 Wide Area Network 범위 특정 지역 LAN과 LAN을 연결 예시 가정,..

[WakaTime] VSCode 23시간 14분 (2020년 3월 4주)

[WakaTime] VSCode 23시간 14분 (2020년 3월 4주) 일주일 간 사용 시간: 23시간 14분 가장 많이 쓴 언어: Javascript 주말이 될수록 풀어지는 모습을 보이고 있다

[WakaTime] VSCode 23시간 31분 (2020년 3월 3주)

[WakaTime] VSCode 23시간 31분 (2020년 3월 3주) 일주일 간 사용 시간: 23시간 31분 가장 많이 쓴 언어: Javascript

3월 4주차 주간회고

일주일 동안... 뭐 했나 월요일 요구사항 기술서 도출 팀 그라운드 룰 정하기 프로젝트 이해하기 화요일 HTML, CSS 작성하기 수요일 관심사 부분 완성하기 리뷰요청 pr 보내기 목요일 리뷰 코드에 반영하기 모달 팝업 완성하기 아이디, 비밀번호 유효성 검사 완료하기 금요일 바벨, 웹펙으로 빌드하기 fetch요청 코드 작성 프로젝트 마무리하고 회고하기 가장 많이 성장한 부분 요구사항 기술서를 상세하게 작성했더니 기획서를 많이 보지 않아도 기술서만 보고 구현 사항을 체크하면서 구현할 수 있었다. 거의 혼자 코딩을 진행하다 보니 하고 싶은 만큼 코딩을 하고 하고 싶은 부분을 주로 했다. 매일 10시에 스크럼을 작성해 팀원들과 상태를 공유했다. 가장 많이 부족했던 부분 메시지로 회고를 하다 보니 하루의 느낀 ..

[Javascript] 코딩할 때 먼저 고민하면 좋을 10가지

프로젝트를 진행하고 코드리뷰를 받으면서 공통적으로 여러 번 받거나 다수에게 남겨진 코드리뷰 피드백을 정리해 보았다. 경험적으로 지키지 않아 좋지 않은 결과를 가져온 부분에 대해서도 작성했다. 다음 프로젝트에서는 잊지 않고 적용해 보기 위함이다. 1. env(환경변수) 활용하기 dotenv 라는 npm 라이브러리를 설치하고 프로젝트 루트에 .env 파일을 만들어 환경변수를 넣을 수 있다. 이를 활용하여 매직넘버를 줄이자. env에는 API 주소 등이 포함될 수 있다. 2. 커밋 단위를 작게작게 줄이자 함수 하나가 동작이 된다면 커밋을 날리는 습관을 들여 보자. 함수 = 하나의 기능으로 생각하고 함수가 완료되면 커밋을 보낸다면, 커밋 로그를 보다 자세하게 기록할 수 있다. 위의 이미지는 나의 일주일 동안 프..

3월 3주차 주간회고

가장 많이 성장한 부분 모델의 역할, 데이터가 어떻게 처리되어야 하는지 원없이 고민해 볼 수 있었다. 설계가 잘못되면 어떤 결과가 일어나는지 알 수 있었다. 릿코드 1문제 수요일에 풀었다. 가장 많이 부족했던 부분 역할 정의와 코드 구현이 처음에 너무 막막했다. 주변에 물어볼 곳이 없었으면 구현 시작을 못했을 것 같다. 마음이 힘들어서 회고를 많이 못 했다. 리팩토링에 어려움을 느껴 진행이 더뎠다.

[LeetCode][Javascirpt] 15번 - 3Sum

문제 [LeetCode][Javascirpt] 15번 - 3Sum 배열에서 3개의 수를 더했을 때 0이 되는 경우를 배열에 저장해서 리턴해 줘야 하는 문제 3개의 수는 ([-1,0,1], [-1,0,1])과 중복되어 들어 있으면 안 된다. 코드 설명 실패 코드 경우의 수만큼만 반복문을 돌게 하고 싶었는데 딱히 기억이 안 나서 반복문으로 풀었다. for문을 중첩해서 3개 쓰면 복잡도가 기본적으로 O(N^3)이다. 근데 for문을 돈다고 해서 필요한 경우의 수만 반복문을 도는 것은 아니다. 그래서 문제이다. 문제의 예제 배열은 경우의 수가 아래와 같다. 하지만 for문의 경우 모든 경우를 돌게 되어 중복한 값이 결과로 나올 수 있다. 0 1 2 0 1 3 0 1 4 0 1 5 1 2 3 1 2 4 1 2 5..

[Git] 기본 용어 정리

Git 용어 정리 저장소 관련 용어와 의미들 저장소 관련 용어와 의미들 remote 원격 서버의 주소를 로컬 저장소와 연결하기 위한 명령어 git remote add origin local 컴퓨터에 존재하는 저장소 init .git이라는 하위 디렉토리를 만드는 명령어 .git 디렉토리에는 저장소에 필요한 뼈대 파일이 있다. git init clone 1. 디렉토리 생성 2. 생성한 디렉토리에 진입 3. git init으로 git 저장소 생성 4. 입력한 URL을 origin의 remote로 추가 5. git fetch로 리모트 저장소에서 데이터를 가져옴 6. 최종 commit을 workinkg directory에 checkout함 git clone 상태관리 용어와 의미들 상태관리 용어와 의미들 git r..