유쾌하고, 유익하게

2023/ 08 /06(일) React router 라이브러리 연습 App.js에 페이지를 연결하는 연습을 해보았다. React router는 라우팅에 따라 다른 뷰를 보여주기 위해 React에서 자주 사용하는 라이브러리이다. React router 라이브러리를 이용하면 SPA(Single Page Application) 구현에 용이하다. SPA가 구현되면, 화면 깜빡임 없이(화면 전체가 리렌더링 되지 않는다.) 페이지 전환이 가능하다. 연결 시연영상 Github 레포지토리 생성 - add - commit - push 오늘 연습한 코드를 깃헙 레포지토리를 생성해 푸시하였다. github은 뭔가 익숙하지가 않아서 그런지 좀 조심스럽다.. 내가 연습한 코드들은 그냥 무작정 올려보도록 해보자! github은 ..

- 리액트로 카운터 앱 만들기 - useState를 활용하여 동적 상태 관리 사용 - onClick, onKeyUp 이벤트 사용 - 카운터 앱 동작 화면 -코드 - 회고 리액트를 이용해서 처음으로 혼자 리액스 설치부터 카운터 앱 작동까지 작성해보았다. 예제로만 연습을 하다보니, useState를 어디에 써야 하는지, 증감 함수는 어떻게 작성해야 하는지 감이 안왔다. 작성하면서 발생한 에러는 우선 return 문에 요소의 이름을 내 마음대로 지어봤다. ex) 를 로 하자 브라우저 콘솔에 아래와 같은 경고가 떴다. 이를 해결하기 위해 를 수정하였다. 다음으로는 input 요소에 숫자를 입력하고 'Enter'를 입력하면 count에 렌더링 될 수 있게 해보려고 하였다. 이 과정에서 onKeyUp 이벤트를 사용..

출처: 프로그래머스 코딩 테스트 연습, https://school.programmers.co.kr/learn/challenges 코딩테스트 연습 | 프로그래머스 스쿨 개발자 취업의 필수 관문 코딩테스트를 철저하게 연습하고 대비할 수 있는 문제를 총망라! 프로그래머스에서 선발한 문제로 유형을 파악하고 실력을 업그레이드해 보세요! school.programmers.co.kr 배열의 평균값 구하기 문제] 정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요. 수도코드 for문으로 풀기 for... of로 풀기 arr.reduce로 풀기 한줄로 풀기(reduce, arrow function 이용) 정리 및 회고 하나의 문제를 이렇..

지난 포스팅까지 컴퓨팅 사고와 관련하여 2진법, 알고리, 스크래치 등을 알아보았다. 이후 포스팅에서는 C언어에 대해 정리해서 포스팅해보고자 한다. C 언어 기초 정리 C언어라고 하면 뭔가 딱딱해보이는 내용인데, 부스트코스 CS50 강의에서는 말랑말랑하게 가르쳐 주는 기분이다. 부트캠프를 통해 자바스크립트를 배우고 있어서 그런지 더욱 쉽게 와닿는 기분!(그래봐야 기초 of 기초를 본거다 ㅎ) 오늘 포스팅한 내용의 핵심은 printf("내용/n") => "내용"을 출력해라! 이다. 또한, 컴파일이 번역기 역할을 한다는 것은 대충 이해하고 있었지만, 내 코드를 뭘로 번역해주는지는 이해하지 못했다. 오늘 강의를 통해 내가 작성한 코드(소스코드)를 2진법으로 구성된 코드(머신코드)로 번환하는 프로그램이라는 것을 ..

강의 듣고 정리하고, 블로깅하는데 시간이 생각보다 많이 든다. 블로깅을 하면서 느낀 생각은 블로그를 꾸준히 관리하는 사람들이 대단하다는 생각뿐이다!ㅎㅎ 이번 포스팅에서는 알고리즘과 스크래치에 대해 알아보겠다. 알고리즘!? 알고리즘(영어:algorithm), 셈법은 수학과 컴퓨터과학, 언어학 또는 엮인 분야에서 어떠한 문제를 해결하기 위해 정해진 일련의 절차이다. - 출처 : 위키백과 알고리즘은 문제를 해결하기 위해 정해진 단계와 규칙에 따라 순서대로 수행되는 절차나 방법입니다. - 출처 : 챗GPT 알고리즘이란 문제 해결을 위한 과정을 단계적으로 나열한 것이라고 정리할 수 있겠다. 정확성과 효율성의 끝판왕! 알고리즘은 정확성과 효율성을 추구한다. CS50 강의에서는 전화번호부에서 이름을 찾는 방법을 예시..

프로퍼티 어트리뷰트? 자바스크립트 엔진이 관리하는 내부 상태 값(meta-property)인 내부슬롯 [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]이다. 개발자가 내부슬롯에 직접 접근할 수 있는 방법은 없다. 단, Object.getOwnPropertyDescriptor(객체의 참조, '프로퍼티 키') 메서드로 간접 접근이 가능하다. Object.getOwnPropertyDescriptors(객체의 참조) 메서드는 전달받은 인자인 객체의 모든 프로퍼티 키를 조회한다. 데이터프로퍼티 키와 값으로 구성된 일반적 프로퍼티이다. [[Value]], [[Writable]], [[Enumerable]], [[Configurable]]

지난 포스팅에서는 컴퓨팅 사고 part.1으로 2진수에 대해 알아보았다. 2023.05.25 - [두번째 공부(개발공부)/CS(Computer Science)] - 부스트 코스 CS50 2019 ] 컴퓨팅 사고 part.1 - 2진법 이어서 이번 포스팅에서는 컴퓨터가 정보를 표현하는 방법에 대해 알아보고자 한다. 우리는 정보를 표현할 때, 문자 또는 그림과 소리 등을 이용해 표현한다. 세계에는 다양한 문자가 있으며, 나라마다 해당 문자를 알아야 정보를 표현할 수 있다. 컴퓨터도 마찬가지다. 컴퓨터가 이해할 수 있는 문자를 사용해야 소통할 수 있다. 컴퓨터는 숫자를 표현하기 위해 2진법을 이용한다고 하였다. 이에 우리가 정보를 표현하기 위한 다양한 매체들을 2진법으로 바꿔야 한다. 다만, 일일이 컴퓨터를 ..

컴퓨터 사이언스와 관련하여 지난 포스팅에서는 챗 GPT에게 컴퓨터 사이언스가 무엇인지, 왜 공부해야 하는지를 다뤘다. 2023.05.18 - [두번째 공부(개발공부)/CS(Computer Science)] - Chat GPT와 컴퓨터과학에 대해 이야기해보기! 앞으로의 컴퓨터 사이언스 관련 포스팅은 CS50 2019 강의를 바탕으로 작성해보려고 한다. 첫번째 포스팅은 컴퓨팅 사고(Computing Thinking)이다. 컴퓨팅 사고에 대해서도 지난 번 포스팅에 다뤘었다. 챗 GPT는 컴퓨터적 사고란 컴퓨터 과학적 접근법을 사용하여 문제를 분석하고 해결하는 사공방식을 말한다고 정의했다. 첫번째로 알아볼 내용은 2진법이다. 우리 숫자를 세기 위해 다양한 진법을 사용한다. 일반적으로는 10진법을 많이 사용한다...

변수란? 데이터 값을 담는 메모리 공간의 이름이다. let, const, var 키워드를 이용해 선언할 수 있다. ES6이전 문법에서는 var 키워드로만 변수를 선언할 수 있었지만, ES6문법부터 let, const 키워드가 도입되었다. var 키워드의 단점 때문에 let, const키워드가 등장하게 되었다. 변수를 선언하는 let, const 키워드의 가장 큰 차이는 재할당의 차이이다. let 키워드는 변수 선언 및 값 할당 후 재할당이 가능하지만, const 키워드는 값의 재할당이 불가능하다. 변수는 선언을 통해 메모리 공간을 확보하고 해당 공간의 이름을 붙인다. 선언을 통해 이름을 가진 공간을 확보했다면, 할당을 통해 값을 채워넣는다. 위 그림을 예시로 들면 바구니(변수)에 YONGTREE FARM..

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

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

이어서 공부하는 연산자 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 ..

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

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

웹개발 종합반도 드디어 완주 성공! html, css, javascript 그리고 파이썬, flask, AWS까지 (AWS는 마지막에 에러가 생겨서 배포하는 연습을 해보지는 못했다...) 5주차 강의 마지막에 강사는 웹개발의 A-Z를 모두 배워본 것이라는 말에 고양감이 들었다. 물론, 그저 따라하는 수준이었지만 주차가 진행될 수록 강의에서 하는 말들이 들리는 게 신기했다. 데이터 분석 강의와 마찬가지로 계속 복습이 필요한 부분이라고 생각이 된다. 또한, 실력 향상과 체득을 위해 스스로 구현해보고자 했던 웹페이지를 만들어보고자한다. 우선, 강의를 시작하면서 생각했던 페이지는 '우리동네 맛지도' 페이지를 만들어보는 것이었다. 지도api 활용이 가능한지는 차차 알아보면서, 나만의 페이지를 만들어 가는 과정도 ..

스파르타코딩클럽 파이썬 데이터분석 5주차 강의 완강! Colab 환경부터 주식데이터 백테스팅 작업까지 작업해볼 수 있는 흥미로운 강의였다. 5주차까지 강의를 완주하면서 돌아보니, 코딩의 기초(?)에서 중요하게 생각하는 것들을 알 수 있었다. 우선, 리스트와 딕셔너리 그리고 조건문, 반복문, 함수 이렇게 5가지는 1주차부터 5주차까지 빠짐 없이 등장하였다. 이 외에 부가적으로 Open API에 접근하여 데이터를 내려받는 작업들이 참 흥미로웠다. 사실 말이 5주차강의지 강의를 듣다보면 1주차 당 1~2시간이면 들을 수 있는 내용이었다. 이에, 처음에는 열의에 타올라 2주만에 다듣고, 복습을 해보자라고 하였으나,,, 생각과는 다르게 5주를 꽉 채우고 나서야 끝낼 수 있었다. 반성 또 반성하며, 조금더 J스럽게..

3일을 남기고 일단.. NCS 수료기준은 충족! 남은 2일간 완주하여 100% 수강 완료도전! 4주차에서는 Flask 를 이용하여 서버를 만들고, 프론트엔드와 백엔드를 오가며 코딩을 진행하였다. 프로젝트를 바탕으로 수업이 진행되어, 그저 따라하는 수준이지만 가시적인 성과에 흥분되었다! 주된 작업은 웹페이지에서 입력한 데이터를 mongoDB 클라우드에 저장하고, 이를 불러와서 페이지에 표현해주는 기능을 실습해보는 것이었다. 뭘 받고, 주고 한다는데 이해가 안되더니, 어느 순간 아! 이건가 하는 순간이 있었다. 내일 새로운 프로젝트로 연습을 할 때, 이게 뭔소리지 하겠지만 영어를 배울 때 귀가 트이는 듯한 느낌이 들어서 자신감이 생긴 것 같다. 마지막 주차의 프로젝트는 강사님이 지시하는 부분을 강의보다 먼저..

주식데이터를 활용한 파이썬 강의를 듣고 있어서 3주차 강의는 수월하게 들었다. 클라우드라고 하면 구글 드라이브나, 네이버 드라이브와 같이 파일을 올리고 내리는 기능만을 가진 것이라고 생각했다. 그런데 클라우드를 통해 코드를 통해 만들어진 정보들을 저장하고 불러올 수 있는 것에 대해 흥미가 생겼다. 게으름을 핑계로 많이 늦어지긴 했지만, 4~5주차 강의까지 완강한 후, 복습 또 복습해서 나만의 웹페이지 정도는 만들어봐야겠다!