유쾌하고, 유익하게

SEB_FE_45 Section2. Unit4. React Intro React의 3가지 특징 선언적(Declarative) : 선언적 방식으로 UI 구성할 수 있으며, 수동으로 DOM을 조작할 필요가 없기 때문에 가독성과 유지보수성이 향상됨. 이에 개발자는 어떻게 화면을 그릴지에 집중할 수 있음 컴포넌트 기반(Component-based) : 컴포넌트 기반 아키텍처(하나의 기능 구현을 위한 여러 종류의 코드 묶음)를 사용하여 UI 구성함. 컴포넌트는 재사용성과 독립성을 가짐. 개발자는 애플리케이션을 작은 단위로 나눠 개발할 수 있음 범용성(Learn Once, Write Anywhere) : 라이브러리인 리액트는 어느 프로젝트에나 사용이 가능함. 많은 개발자들이 사용하고 있기 때문에 유지보수성이 좋음...

출처 : https://chat.openai.com/ 회고 요즘 핫한 챗GPT에게 컴퓨터 과학에 대해 물어보았다. 컴퓨터 과학에 대해 일목요연하게 정리해서 읽고, 이해하기 수월하였다. 컴퓨터 과학에 대한 아주 개괄적인 지식이지만, 정보를 구하기 너무나도 쉬워졌다는 것이 새삼 와닿는다. 소프트웨어 개발자를 준비하고 있는 상황에서 이러한 변화를 내가 따라갈 수 있을지에 대한 두려움이 생긴다. 하지만, 한편으로는 기대도 된다. 이렇게 빠른 변화를 주도하는 산업의 일원이 되어 남들보다 한발 먼저 나아가게 될 나의 모습이! 우리 주변에는 많은 컴퓨터가 있지만, 모든 컴퓨터를 인식하고 살지는 않는다. 우리 손에 하루 종일 들려있는 스마트폰 또한 컴퓨터지만, 우리는 컴퓨터라고 인식하지 않는 것처럼 말이다. 또한, 우..

변수 변수는 어떤 값을 식별하기 위한 저장소에 붙인 이름이다. 변수의 선언, 할당, 종류, 호이스팅 //변수는 아래와 같이 선언한다. let nickName; // 변수가 선언되었다. console.log(nickName) // -> undefiend // 값을 할당하지 않았지만, JS에서 undefiend를 할당하여 초기화 //변수에 값을 할당하는 방법은 아래와 같다. nickName = YongTree; console.log(nickName) // -> YongTree // 닉네임에 용트리 값이 할당되었다. //변수를 선언할 수 있는 키워드 let, const, var /* let, const는 ES6 부터 도입된 변수 선언 키워드이다. const는 상수를 의미하며, 해당 키워드로 선언하는 경우, 원..

arr[ i ] //배열은 대괄호 [] 안에 요소(값)이 있는 형태이다. let arr = [1, 'two', true, function(){}, {key : value}, [1, 2, 3, 4]] //위와 같이 배열 안에는 모든 타입의 데이터가 요소로 포함될 수 있다. //배열은 왼쪽부터 오른쪽으로 순서를 갖는다. 이를 index라고 한다. //배열의 인덱스는 0부터 시작한다. //배열의 요소의 인덱스는 아래와 같이 조회한다. arr[0] // -> 1 arr[1] // -> 'two' arr[2] // -> true arr[3] // -> function(){} arr[4] // -> {key : value} arr[5] // -> [1,2,3,4] arr.length //배열은 길이가 있다. //배..

오늘 아침은 평소보다 조금 더 특별했다. 일주일 정도 아침 6시에 산책을 하고 있는데, 처음으로 아내가 함께 걸어주었다. 둘다 퉁퉁부운 모습으로 손을 잡고 걷는 아침의 느낌 꿈인가 싶었다. 산책한 이후에 씻기 전 잠깐 앉아서 책상에 올려져있던 책을 잠깐 펴보았다. 특별함에 대한 작가의 생각이 나와 비슷해 보였다. 나를 특별하게 해주는 것이 꼭, 반드시 무언가 거창하고, 아름답고, 명예로운 것은 아니다. 아내와 함께 걸은 산책길, 길가에서 좋아하는 꽃을 우연히 만나게 된 즐거움 등등 작은 것에 감사하고, 특별해 할 줄 아는 사람이 되보자!

연산자에 대해 마지막으로 정리해보고자 한다. typeof 연산자란? 피 연산자의 데이터 타입을 문자열로 반환해준다. 데이터 타입은 "number", "string", "boolean", "object", "function", "symbol", "undefined" 7가지 중 한가지를 반환한다. * 예외 : null 값의 경우에는 object를 반환한다. 이에 null값 검사 시에는 일치연산자(===)를 사용하기를 권장한다. 선언하지 않은 식별자의 경우에는 undefined를 반환하기 때문에 주의해야 한다. 삼항 조건 연산자 //조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값 let grade = score >= 90 ? "Gold" : "Silver" if(score ..

하루 쉰 미라클 모닝! 어제는 주일이라 알람을 맞추지 않았는데도 6시에 잠이 깼다...음.. 하루 쉬는 바람에 조금 더 힘들어질 줄 알았지만, 생각보다 쉽게 잠에서 깨어났다! 역시 적응의 동물인가! 오늘 길을 나서는데 엄빠 까치가 새끼 까치들을 훈련시키는 듯한 모습을 보았다. 생각보다 시끄럽더라.. 짜식들... 오늘 아침 만난 새로운 꽃들! 신기한 이름을 가진 덜꿩나무 자세히 보면 꽃망울이 별표 모양이다. 시기마다 피는 모양도 색깔도 다른게 참 신기하다! 오늘도 어려운 공부가 기다리고 있지만 화이팅 해보자!

이어서 공부하는 연산자 part3 할당연산자! 할당연산자? 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다. 우항의 값을 좌항의 변수에 값을 할 당하므로 변수값이 변하는 부수효과가 있다. - 출처 : 모던자바스크립트 DeepDive 수학에서 방정식을 배우다 보면 x = x +1 이런식의 표현을 보게 된다. 위 식을 자바스크립트 언어로 해석하면, =(등호) 좌측의 x는 변수가 된다. 그리고 =(등호) 우측의 x + 1 은 변수에 할당되는 값이 된다. 이때, 선언한 변수 x의 값이 변하기 때문에 부수효과(side effect)가 발생한다. //변수 x에 1을 할당한다. let x = 1; //변수x를 출력한다. console.log(x) // -> 1 //변수 x에 x+1을 재할당한다. x ..

미라클 모닝 4일차! 쉬고싶은 주말이었지만 집을 나서보았다! 토요일 아침 8시 새로 시작한 스터디도 있어서 설레는 마음으로 출발! 살짝 안개가 끼어있어서 적당히 습하고, 적당히 선선한 날씨가 마음에 든다. 적당한 습기 때문인지 공기가 가라앉아 향긋한 꽃향이 더 진하게 느껴진다. 이미 글을 쓰는 시점은 오전 10시라 ㅎㅎ 과거형으로 써야 하지만, 그러기는 아쉽다. 스터디에 참여하면서 느낀 점은 다들 정말 열심히 공부한다는 점이다. 특히, 잘 하는 사람들이 더 열심히 하는게 자극이 된다. 힘내보자아!

어제 밤에 이어서 연산자에 대해 알아보자! 첫번째로 산술연산자을 공부하고자 한다. 산술 연산자? 핵심은 수학적 계산 기능에 있다. 즉, 피연산자를 대상으로 수학적 계산을 통해 새로운 값을 만들어낸다. 산술 연산이 불가능하면, NaN을 반환한다. 피연산자의 개수에 따라 단항(unary), 이항(binary) 산술 연산자로 구분한다. 이항 산술 연산자는 2개의 피연산자를 대상으로 수학적 계산을 통해 새로운 숫자 값을 만들어낸다. 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과(side effect)가 없다. 단항 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자값을 만든다. 단항 산술 연산자 의미 부수 효과 ++ 증가 O -- 감소 O + 어떠한 효과도 없음. 음수를 양수로 반전하지도 않음 X..

연산자를 공부한 이유?! 백준 1000번 문제를 풀기 위해 ! 연산자에 대해 알아보자! 연산자란 특정 연산을 수행할 수 있는 코드로 연산의 대상을 피연산자라고 한다. 모던 자바스크립트 Deep Dive에서는 연산자를 아래와 같이 정의하였다. 연산자(operator)는 하나이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산(operation) 등을 수행해 하나의 값을 만든다. 이 때 연산의 대상을 피연산자(operand)라 한다. - 출처 : 모던 자바스크립트 Deep Dive 07장 연산자 - 우선은 여기까지(아니?! 뭘했다고?)... 음... 변명이지만.. 내일도 미라클 모닝을 실천하여 고정적인 루틴을 만들어야 하기 때문에 오늘은 여기까지 정리하고, 내일 나머지를 이어서 정리해야 하..

3일차 미라클 모닝 성공! 은근 뿌듯하다. 어제의 내가 오늘의 나를 힘들게 했지만..(맥주 3잔이 이리 힘들줄이야..) 어찌 어찌 일어난 스스로에게 박수! 알람을 끄고 있는 와중 들린 아내의 유혹이 어찌나 달콤하던지 그대로 다시 자버릴뻔했다. (아내 : 더 자~ 더 자~) 주말에도 미라클 모닝을 이어가보자! 오늘도 화이팅.. 할게 너무 많은 금요일이다..

SEB_FE_45 Section 2. Unit 2. 객체지향프로그래밍(프로토타입과 클래스) 프로토타입 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있으며, 객체 지향의 상속 개념과 같이 부모 객체의 속성과 매서드를 상속받아 사용할 수 있다. 이러한 부모 객체를 프로토타입 객체 또는 프로토타입이라 부른다. 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이도 객체(인스턴스)를 생성할 수 있다. 자바스크립트는 흔히 프로토타입 기반 객체지향 프로그래밍 언어라 불린다. ES6문법을 통해 클래스 개념이 도입되었다. 프로토타입 체인이란 객체간의 연결을 의미하며, 이를 바탕으로 부모 객체의 속성과 매서드를 상속받아 사용할 수 있게하는 근간이다. .prototype 함수 객체만 가지고 있..

SEB_FE_45 Section 2. Unit 2. 객체지향 프로그래밍 객체지향 프로그래밍 객체지향 프로그래밍은 데이터(속성)와 기능(메서드)을 의미하는 코드를 하나의 단위(객체)로 묶으며, 이러한 단위들의 집합으로 프로그램을 표현하는 방식이다. 객체는 한번 만들고 나면, 메모리상에서 반환되기 전까지 객체 내의 모든 것이 유지된다. 클래스는 세부 사항(속성)이 들어가지 않은 청사진으로, 세부사항을 입력하면 객체(인스턴스)가 된다. 객체의 속성은 클래스(실체)의 고유한 세부사항(또는 특성)(예. 자동차 -> 브랜드, 모델명, 가격, 색상 등)이며, 구체적인 속성은 특정 클래스를 다른 것들과 구별하여 인식할 수 있게 한다. 객체의 매서드는 해당 클래스의 기능(또는 동작)(예. 자동차 -> 전진, 후진, 조향..

SEB_FE_45 Section2. Unit 2. 클래스와 인스턴스 in 객체지향 프로그래밍 클래스(class)란? 자바스크립트에서 클래스는 ES6에서 도입되었다. 자바스크립트는 프로토타입의 객체지향 프로그래밍 언어이다. 클래스란 특정 객체를 생성하기 위해 변수와 매서드를 정의하는 틀(template)이며, 이는 같은 종류의 집단(객체, object)에 속하는 속성(변수)과 행위(매서드)를 정의하는 것이다. 클래스는 같은 종류의 집단(객체) 생성에 사용되는 패턴 혹은 청사진(blueprint)이다. 인스턴스(instance)? 인스턴스는 클래스(청사진, blueprint)를 바탕으로 한 객체(오브젝트, object)를 의미한다. 모든 인스턴스는 오직 클래스에서 정의된 범위 내에서만 작동하며 런타임에 그 ..

어제부터 시작한 미라클모닝 스터디! 아침 6시 알라미 앱에서 알람이 울린다. 뜨기 싫은 눈을 뜨고 간단한 게임으로 알람을 끈다. 대충 옷을 입고, 세수하고, 집을 나선다. 선선한 바람이 참 좋은 아침이다. 밤 산책과는 또 다른 아침 산책 이른 시간이지만, 많은 사람들이 출근하느라 분주하다. 그 속에 섞여있다는 고양감에 기분이 즐겁다. 봄의 끝자락임이 느껴진다. 길가에 흐드러져있던 벚꽃도, 철쭉도 모두 졌다. 그리고 아카시아와 이팝나무꽃들이 피어났다. 철마다 피어나는 꽃들, 식물들이 참 신비롭다. 개인적으로 신앙이 있기에 이런 신비한 풍경을 만드신 하나님께 감사할 따름이다. 요즘 머릿 속을 떠다니는 한마디가 있다. '무언가에 압도 당하지 말자!' 시간의 흐름도 분주한 공부 과정도 결국 내가 컨트롤할 수 있..

코드스테이츠 프론트엔드 부트캠프 45기 Section1 회고 부트캠프를 시작하고 한달이 지났다. 커리큘럼을 따라오다 보니 여기까지 와있네!? 시간 참 빠르다~! 오늘의 커리큘럼이었던 section.1 회고 블로깅! KPT(KEEP / PROBLEM / TRY) 방식으로 노션페이지에 블로깅을 진행하였다. 블로깅 후에는 동기들의 글도 서로 보면서 응원하는 시간도 가져서 의미있는 시간이었다. 온라인에 비대면 수업이라 함께한다는 느낌을 받기 어려운데, 코드스테이츠는 페어프로그램이나 그룹회고 그리고 이런 블로깅에 서로 응원해주시 등을 통해 함께 한다는 느낌을 받게 해주는 것 같다. 아래는 노션페이지에 작성한 나의 1달간의 회고 내용이다. ※ 초기 목표! 수업 출석률 95%달성하기 건강 관리하기(10kg 체중 감량..

SEB_FE_45 Section1. Unit.9 JavaScript 핵심 개념과 문법(Koans) JavaScript에서 호이스팅(hoisting)이란? 출처 : https://developer.mozilla.org/ko/docs/Glossary/Hoisting 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나타나면 예외가 발생한다. 함수 선언식으로 작성한 함수에서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있다. 단, 선언과 초기화를 함께 수..