뉴비 개발자의 학습일기

이번 과제는 React와 Styled Component를 사용해 가장 기본적이고 자주 사용되는 UI 컴포넌트를 구현해보는 과제였다.지금까지의 과제들처럼 빈칸을 채우는 형식으로 진행되었는데, 의사코드를 적거나 머릿속으로 어떤 기능이 필요한지 떠올려보는 것은 쉬웠으나 막상 직접 코드를 타이핑해보려고 하면 어디서부터 적어야 할지 막막하기만 했다. 아직 JSX 문법과 React 컴포넌트를 만들고 사용하는 방법, props와 state의 개념 및 활용 등 많은 부분에서 익숙하지 않기 때문이었다.하지만 페어프로그래밍을 진행하면서 페어 분과 같이 어떤 코드를 작성해야 하는지 차근차근 고민해보고 조금씩 완성해나가는 과정에서 조금이나마 더 리액트와 자바스크립트 활용 능력을 기를 수 있었다. 또한 완성된 코드를 의사코드로..

재귀: 원래의 자리로 되돌아가거나 되돌아오는 것을 뜻함재귀함수는 자기 자신을 호출하는 함수를 말합니다.function recursion () {console.log("이것은")console.log("재귀함수입니다.")recursion()}//함수 recursion은 무한히 콘솔로그를 찍는 재귀함수입니다.함수 recursion은 자기 자신을 끝없이 호출합니다. 이 함수는 그저 콘솔로그에 무한히 문장을 출력하는 딱히 써먹을 곳이 없는 함수일 뿐이지만, 재귀함수의 이런 특성을 잘 활용하면 반복적인 작업을 해야 하는 문제가 발생했을 때, 좀 더 간결한 코드로 해결할 수 있습니다. 재귀 함수를 언제 써야 할까요?어떤 문제가 비슷한 구조의 더 작은 문제로 나누어지는 경우중첩된 반복문이 많거나 반복문의 중첩 횟수를 ..

클라이언트와 서버의 통신을 담당하는 API는 요청과 응답을 통해 통신하는 과정에서 각각의 메시지를 '잘 보낼 수 있는 방법'이 존재합니다.REST API에서 REST는 Representational State Transfer의 약자로 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말합니다.이런 REST API를 작성하기 위해 지켜야 할 몇 가지 규칙이 존재합니다.REST 성숙도 모델은 위 그림에서 볼 수 있는 것처럼 0~3단계로 이루어져 있지만, 실제로는 3단계까지 엄격하게 적용하기 어렵기 때문에 2단계까지만 적용해도 좋은 API 디자인이라고 할 수 있고, 이런 API를 HTTP API라고도 부릅니다.0단계에서는 요청과 응답에 단순히 ..

1. 클라이언트-서버 아키텍처사람들이 사용하는 어떤 앱이든 앱의 기능을 수행하는 과정에서 필수적으로 데이터를 다뤄야 하는 것이 일반적입니다.이 때 필요한 데이터는 리소스(Resource)라는 개념에 포함됩니다. 리소스는 컴퓨터나 네트워크에서 사용되는 데이터나 하드웨어 자원, 소프트웨어 자원 등을 의미합니다. 이는 프로그램이 실행되는 환경에서 사용할 수 있는 모든 것을 포함합니다. 메모리나 디스크 공간, cpu등은 하드웨어 리소스이고 웹 서버나 파일 서버, 데이터베이스 등이 소프트웨어 리소스에 해당합니다. 프로그램을 실행하는 동안 이러한 리소스를 효율적으로 관리하고 활용하는 것은 성능 향상이나 보안, 안정성 측면에서도 중요한 부분입니다. 리소스를 효율적으로 관리하기 위한 방법 중 하나가 바로 클라이언트-서..

오늘은 리액트의 기본 문법인 props와 state를 활용해 트위터와 유사하게 만들어진 웹페이지가 실제로 작동하도록 코드를 작성해보고구체적인 작동 원리에 대해 고민해보고 리액트를 사용해 작성된 코드에 익숙해지는 시간을 가졌다.Footer.js 파일의 코드, process.env 참 자세하게 설명해주지만 배경 지식이 부족한 나는 얼른 이해하기 어려웠기 때문에 계속해서 질문했다.마치 사람과 대화를 나누는 것처럼 내가 이해한 부분이 맞는지 두루뭉술하게 적어서 질문했지만, 찰떡같이 알아듣고 설명해주는 지피티..굉장히 도움이 되지만 한편으로는 너무 똑똑한게 아닌가 하는 생각을 자연스레 하게된다. 아무튼 이 답변으로 어느 정도 이해가 되었지만 환경 변수라는 생소한 개념이 또 등장한다.그래서 환경 변수가 무엇인지도 ..

"처음 접하는 개념이라서 아직 정확하게 이해하지 못 한 개념들이지만 현재 알고 있는 것을 글로 작성해보는 1차 정리 노트 정도로 생각해 주시면 좋겠습니다!" 클래스와 인스턴스는 객체 지향 프로그래밍에서 중요한 개념입니다. 객체 지향 프로그래밍은 실제 세계에 존재하는 것을 모델링하여 프로그래밍하는 방법이라고 할 수 있습니다. 그래서 객체 지향 프로그래밍에서는 데이터와 절차를 하나의 덩어리로 묶어서 생각합니다.칼집과 칼을 만들 때 서로 다른 곳에서 만들어지는 것이 아니라, 한 군데에 모여 있는 것이죠. 왜냐하면 칼과 칼집은 기능적으로 연관이 있기 때문입니다. 클래스와 인스턴스는 대량 생산을 위한 틀을 만드는 과정이라고 생각하시면 좋습니다.쉽게 비유하자면, 객체 지향 프로그래밍의 핵심은 철로 된 검을 여러 개..

이번 과제는 테스트 케이스를 활용해 주어진 문제들의 빈칸에 적절한 답을 입력하고, 그 결과를 테스트해보면서 지금까지 배워온 여러 가지 개념들을 체크해보는 시간이었다. 이 과제를 통해 점검해 볼 수 있었던 개념은 크게 8가지였다.타입변수스코프와 클로저화살표 함수원시 자료형과 참조 자료형배열과 객체전개연산자구조 분해 할당위 이미지에 쓰여있는 코드처럼 아주 기초적인 개념부터 다시 차근차근 되새겨봄과 동시에, 이해하기 어렵고 어떻게 작동하는지 알아채기 쉽지 않은 부분들까지 공부하면서 지금까지 배운 내용을 머릿속에 정립해가는 과정이었다.// *함수 선언문으로 작성된 코드는 변수 호이스팅이 발생한다*//함수 표현식으로 사용하는것이 바람직하다!(회사별 코드 컨벤션에 따라 조금씩 다르지만) 3. 스코프와 클로저클로저..

JS에서 자료형(type)은 값(value)의 종류를 가리킵니다.자료형에 따라서 고유한 속성과 메서드를 가지고 있으며, 자료형은 크게 원시자료형(primitive type)과 참조 자료형(reference type)으로 나눌 수 있습니다. 1. 원시 자료형(primitive type)자바스크립트에서 원시 자료형에 해당하는 타입은 6개입니다.-number-string-boolean-undefined-null-symbol 원시 자료형의 특징원시 자료형을 변수에 할당하면 메모리 공간에 값 자체가 저장됩니다.원시 값을 갖는 변수를 다른 변수에 할당하면 해당 값 자체가 복사되어 전달됩니다.원시 자료형은 변경 불가능한 (immutable value)이며, 한 번 생성된 원시 자료형은 읽기 전용 값입니다.let a ..