놀러와요 버그의 숲

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 1.1 리액트의 이해 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 (View)만 신경 쓰는 라이브러리입니다. 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트(component)라고 한다. 컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념이다. 템플릿은 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데, 이와 달리 컴포넌트는 좀 더 복합적인 개념이다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하..

이 글은 『성공하는 프로그래밍 공부법』 ( 박재성,고종범,남재창,박지현 저 /로드북 출판사)이라는 책을 읽고 쓴 글입니다. "프로그래밍 학습은 프로그래밍을 통해 무언가를 만드는 작은 성취감을 느끼는 것에서 시작해야한다." "내 주위에서 발생하는 문제를 해결하기 위해 프로그래밍 도구로 활용하는 것에서 시작해야 한다." 이런 생각이 들었다. 요즘 내가 하는 공부가 수단이 아니라 목적이 되고 있지는 않은가?를 돌아보게 되었다. 요새는 어떤 문제를 해결하려고 프로그래밍을 배우려고 하는 느낌보다는 취업, 공부를 위한 공부를 하고 있다는 생각이든다. 그렇다보니 뭔가 동기부여도 떨어지고 무엇보다 흥미가 사라져간다. 지금하고 있는 프로젝트 등.. 모두 내가 정말 흥미있어서 한다고 하기는 어렵다. 무언가 취업에 도움이 ..

작성일: 2022.2.5 (토) 문득, 원범 멘토님과 얘기를 나누던 중, 내가 왜 next.js를 쓰는지에 대한 인지도 하지 못한채, 감귤마켓 프로젝트를 진행하고 있다는 느낌이 들었다. 간단하게 Postman으로 get 요청을 보내봄으로 써, 둘의 차이를 알아보려고 한다. 클라이언트 사이드 렌더링(리액트) 리액트를 통해서 api get을 요청하니까, body안에 내용물이 div하나 밖에 보이지 않았다. 아마 브라우저에 입장에서는 body안의 내용을 제대로 인지하지 못할까 싶지 않다. 서버사이드 렌더링 이런식으로 Postman을 통해서 요청을 보내보니, body안의 모든 내용들이 나와있다. 이러한 성격 때문에 next가 SEO에 좋다고 한다는 것을 느꼈다. (body의 여러 태그들과 내용들을 알 수 있으니..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p218 ~p.252 Today I Learned 1. CSS Module: 타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션. 2.styled-components: 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다. 3. 기본 CSS 이름짓는 규칙: 이름이 컴포넌트 이름-클래스 형태로 지어져 있다(예: App-header). 클래스 이름에 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 사용하는 것을..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p120 ~ p140 새로 알게된 사실 1. 이벤트: 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것 2. Form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다. 3. div, input,span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할수 없다. 4. onChange 이벤트 핸들러에서 e.target.name은 해당 인풋의 name을 가리킨다. 5. 객체 안에서 key를 []로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제값이 key값으로 사용된다. const name = ‘variantKey‘; cons..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 음 2장을 통해서 알아야하는 것은 무엇일까? 나는 어떤 대답을 할 수 있어야할까? 한마디로 2장 JSX 단원의 목표가 무엇일까? 목표: 1. WHY? => JSX를 왜 쓰고, 어떤 문제를 해결해주는지 명확하게 대답을 할 수 있어야 한다. 2. HOW? => JSX를 어떻게 쓰는지 알아야 한다. (규칙) 2.1 코드 이해하기 Create-React-App을 통해서 프로젝트를 만들고 index.js에 들어가보자. import React from 'react'; 이 코드는 리액트를 불러와서 사용할 수 있게 해 줍니다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데요. 프로젝트..

자바스크립트 딥다이브 25장 (p.417~p.435) 25.1 클래스는 프로토타입의 문접적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어이다. 프로토타입 기반 객체지향 언어는 클래스가 필요없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현 할 수 있다. // ES5 생성자 함수 var Person = (function () { // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person.prototype.sayHi = function () { console.log('Hi! My name is ' + this.name); }; // 생성자 함수 ..

12.5 함수의 호출 (p.168~174) 12.5.1 매개변수와 인수 #함수를 호출하는 법 함수는 함수를 가리키는 식별자와 한쌍의 소괄호인 함수 호출 연산자로 호출한다. 함수 호출 연산자 내에는 0개 이상의 인수를 쉼표로 구분해서 나열한다. 매개변수에 인수가 순서대로 할당되고, 함수 몸체의 문들이 실행되기 시작한다. // 함수 선언문 function add(x, y) { return x + y; } // 함수 호출 // 인수 1과 2는 매개변수 x와 y에 순서대로 할당되고 함수 몸체의 문들이 실행된다. var result = add(1, 2); -함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는다. 함수를 호출할 때 매개변수의 개수만큼 인수를 전달하는 것이 일반적이지만, 그렇지 않은 경우..

제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할때 사용한다. #종류 1.조건문 -if else문 -switch 문 2.반복문 -for문 -while문 3.break문 4.continue문 cf) 블록문 :0개 이상의 문을 중괄호로 묶은 것. 코드블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 블록문은 단독으로 사용할수도 있으나, 일반적으로 제어문이나 함수를 정의할 떄 사용하는 것이 일반적이다. {var foo = 10;} 1.조건문 1)if/else 문 if문과 else문은 2번이상 사용할 수 없지만, else if문은 여러 번 사용할 수 있다. 만약 코드 블록 내의 문이 하나 뿐이라면 중괄호를 생략할 수 있다. var num =2; ..

쓰던 내용이 다 날라갔다. 임시 저장 해놨는데도 날라갔다. 그래서 오늘은 가장 자바스크립트 딥다이브 07장 연산자를 읽으면서 가장 실무에 필요할 거 같은 것만 포스팅 해보려고 한다. 연산자는 하나 이상의 표현식을 대상으로 산술,할당, 비교, 논리, 타입,지수,연산 등을 수행해 하나의 값을 만든다. 연산자는 결국 하나의 값을 만든다는 표현이 인상적이었다. 연산자는 결국 어떤 표현을 통해 하나의 값을 만드는 역할까지 수행하는 애였구나! 종류: 1) 5*4 / ++ -> 산술연산자 2) "My name is" + "Lee" => 문자열 연결 연산자 3) color = "red" -> 할당 연산자 4) 3>5 -> 비교 연산자 5) && || -> 논리 연산자 6) typeof "hi" -> 타입 연산자 제일 ..