코드스테이츠

웹표준이란? 2000년대 초에는 인터넷 익스플로러에서는 작동이 되어도 사파리나 파이어폭스 같은 다른 브라우저에서는 작동이 되지 않는 등 브라우저간 호환이 되지 않아서 댓글을 못 다는 정도가 아니라 화면이 아예 정상적으로 나오지 않는 일도 있었습니다. 이를 막고, 웹을 정상적으로 구동시키기 위해서는 개발자들이 각 브라우저마다 따로 개발을 해주어야만 했습니다. 이런 수고를 없애고 웹 개발의 형식을 통일시킨 것이 바로 웹 표준이라고 합니다 웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’으로, 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 담고 있습..

코딩 입문자들이 코딩을 어려워 하는 이유는 크게 2가지라고 생각한다 첫번째, 긴 코드를 볼때 어디서부터 읽어야 할지 모른다는 점 두번째, 오류가 있을때, 어디서 오류가 생겼는지 모른다는 점 이 두가지 원인때문에 몇시간이고 머리를 싸매면서 괴로워하는데,,, 그러다가 번아웃이 쉽게 온다아ㅏ 그리고 나는 코딩을 못하는 구나... 크흡 라고 말하며 좌절감에 눈물을 훔치게 된다. 이미 코딩을 좀 하는 인간들은 이해를 못하겠지만, 나처럼 아직 노하우를 터득하지 못한 사람들에게 조금이라도 코딩을 수월하게 만들어줄 이야기를 해보려고 한다 앞서 두가지 문제를 해결하는 방법은 무엇일까? 첫번째, 긴 코드를 볼때 어디서부터 읽어야 할지 모른다는 점 => 순차적으로 읽는다 두번째, 오류가 있을때, 어디서 오류가 생겼는지 모른..

React Custom Component 중에서 가장 난이도가 높았던 autocomplete이다. 상당히 코드가 길고 관련있는 함수와 state들이 섞여있어 처음부터 감을 잡기가 어려웠다. 하지만, 포기할 수는 없지 될때까지 하는 스타일인 나는 하나하나 코드를 뜯어보며 이해하기로 했다 어떤 리액트 코드를 볼때, 그 코드를 보고 바로 구조를 잡기란 쉽지 않다. 그래서 3가지 기준을 가지고 구조를 파악한다 첫번째, 컴포넌트끼리 tree 구조를 만든다 두번째, state가 어디서 정의되어서 어디로 흐르는가? 세번째, 함수가 어디서 정의되어서 어디로 흐르는가? 이 3가지 기준을 고려하면서 간단한 그림을 그려보았다. (쉽지는 않았다... 애썻다 내자신) 코드는 너무 기니까, styled component와 rea..

CCD (Componet Driven Development) 만약 기획자가 이전에 사용했던 버튼을 이번에도 사용하자고 합니다 그렇다면 디자이너와 개발자는 새롭게 버튼을 만들어야 할까요? 재사용 할 수 있는 UI 컴포넌트가 필요하겠죠! 이 고민을 해결하기 위해 등장한 개발 방법이 바로 Componet Driven Development(CCD) 입니다 레고처럼 부품 단위로 UI 컴포넌트를 만들고 조립해나가는 개발입니다 CSS in JS CSS가 복잡해짐에 따라, CSS도 컴포넌트 영역으로 불러들이게 됨! CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 됩니다. 이..

처음에 (my agora states) 파일을 봤을때 생소한 코드가 너무 많아서 어떻게 코드를 시작해야 할지 감도 잡기 힘들었다 그래서 챗 지피티에게 코드 한줄 한줄씩 물어보며 주석을 달기 시작했다 특히 어떤 개념을 이해하기 어려우면 예시도 추가적으로 물어보면서 접근했다 A와 B의 차이점을 묻는 질문도 큰 도움이 된다 내 친구 챗 gpt ...ㅎ 이번에 느낀점은 아무리 생소하고 어려운 코드라도 의사코드를 작성한다면 이해하지 못할게 없다는 것이다. 잘 모를 수록 멀뚱멀뚱 코드만 보지 말고 뭐라도 쳐야 한다!! (my agora states) const express = require('express');//express 라이브러리를 불러와, express 변수에 할당하고 const app = express..

문제 src 디렉토리 안에는 클래스가 존재합니다. constructor, super, extends, class 키워드를 이용하여 구현합니다. 상속과 관련된 키워드 super, extends는 공식문서를 읽어본 후 적용해봅니다. 풀이 먼저 Grub 을 완성한뒤, Bee, HoneMakerBee,ForagerBee 순서대로 완성하면 됩니다. class Grub { // TODO.. constructor(){ // class는 항상 constructor()를 포함한다 this.age = 0; this.color = `pink`; this.food = `jelly`; } eat(){ return `Mmmmmmmmm jelly` // 콘솔이 아니라 리턴을 써야 했다 } } module.exports = Grub..

scope 함수선언문으로 정의한 함수는 함수 호이스팅이 일어난다.함수 표현식은 불가능 함수 호이스팅: 함수 선언 이전에 호출이 된다. describe('scope 대해서 학습합니다.', function () { // scope는 변수의 값(변수에 담긴 값)을 찾을 때 확인하는 곳을 말합니다. 반드시 기억하시기 바랍니다. it('함수 선언식(declaration)과 함수 표현식(expression)의 차이를 확인합니다.', function () { let funcExpressed = 'to be a function'; expect(typeof funcDeclared).to.equal("function"); expect(typeof funcExpressed).to.equal("string"); functio..