분류 전체보기

변수란 무엇인가? 10+20 해당 식을 계산하기 위해서는 10, 20, + 기호의 의미를 이해하고, 10+20이라는 식의 의미도 파악할 수 있어야 한다. 숫자 10과 20은 메모리 어딘가에 기억되고, CPU는 이 값을 읽어 연산을 수행한다. 결과로 생성된 숫자 30도 메모리상의 임의 위치에 저장된다. 이 10과 20, 30은 절대 다시 접근하여 사용할 수 없다. 메모리에 접근할 수도 있지만, 매우 치명적인 오류를 초래할 수도 있기에 자바스크립트는 직접적인 메모리 제어를 제공하지 않는다. 또한, 메모리 주소를 알 수 있는 방법도 없으므로, 사용이 불가능하다 할 수 있다. 이를 해결하기위해 제공되는 것이 변수이다. 변수 하나의 값을 저장하기 위해 확보한 메모리 공간, 메모리 공간을 식별하기 위해 붙인 이름 ..

JS 실행환경 JS엔진은 브라우저에도있으나 Node.js도 JS엔진을 내장하고 있음 기본적으로 브라우저에서 동작하는 코드는 node.js에서도 동일하게 동작함 주의점 용도 브라우저 HTML, CSS, JS를 실행해 브라우저 화면에 렌더링하는 것이 주된 목적 Node.js 브라우저 외부에서 자바스크립트 실행환경을 제공하는 것이 주된 목적 차이점 | 분류 | 웹브라우저 | nodejs | | --- | --- | --- | | DOM API | O | X | | 파일 생성, 수정 | X | O | | WEB API | O | X | | NodeJS고유 API | X | O | 브라우저 개발자도구 자주사용하는 기능 Elements 로딩된 웹페이지의 DOM과 CSS를 편집하여 렌더링된 뷰를 확인할 수 있음 HT..

02. 자바스크립트란 탄생 1995년 자바스크립트 탄생! 1996년 Mocha로 이름이 변경되었다가, 9월에 또 livescript로 변경되었다가 12월에 다시 javascript로 최종 결정! 라이벌인 Jscript가 등장함 → 근데 두개 언어가 달라서 표준화 안됨 ⇒ 브라우저에따라 웹페이지가 됐다가 안됐다함(크로스 브라우징 이슈) 1997년 표준화된 자바스크립트인 ECMAScript로 표준화됨 성장 초기 거의 다 정적인 웹페이지라서 브라우저가 딱히 js를 실행시킬 일이 별로 없음 Ajax(Asynchronous JavaScript and XML) 비동기방식으로 데이터를 교환할 수 있는 통신 기능 초기에 html을 주고받아 전체를 랜더링해서 보여주던 형태에서 (클릭하면 깜-빡해야함), 그럴 필요없이 부..

우아한 테크코스 프리코스에 탈락하였는데, 메일 피드백으로 추천해 준 책들 중 첫번째, 소프트웨어 장인이다. 배운 것들을 어떻게 활용해서 개발하고, 협업 방법, 개발문화라는 것에 대해 처음으로 제대로 고민할 수 있었다. 덕분에 조금 흔들리고 있었던 가치관을 다시 한번 확립할 수 있었다. 무엇보다 이 책을 읽고 왜 TDD를 해야하는 것인지 납득할 수 있었다. 이전까지는 "그냥 좋아서 쓰나보다~" 했는데, 가치관을 배우고, 장인정신을 탐구하여 이전의 마인드셋을 버리고 그 필요를 확인할 수 있어서 너무 좋았다. TDD와 jest를 공부해야겠다는 다짐을 했다. 아래는 책 내용 중 중요하다고 생각한 부분들을 정리한 것이다. 애자일 빠르고, 짧은 피드백 루프 애자일은 프로젝트 시작 첫주부터 동작하는 소프트웨어를 만듦..

멋쟁이사자처럼 10기 중앙대에서의 활동을 끝마쳤다. 사실 끝마친건 11월 30일이긴한데 시험기간이라서 이제야 적는다. 멋사를 통해서 HTML, CSS, JS의 활용을 통해 웹 문서를 만들어보고, 리액트, typescript, nextjs를 배워나가며 아이디어톤과 해커톤에서 적용시키며 많은 것을 배우고, 경험할 수 있었다. 프론트엔드 나는 백엔드로 멋사에 지원해서 합격했다. 그런데 아이디어톤을 앞두고, 트랙을 확정하기 전에 변경할 기회가 있었는데, 그때 프론트엔드로 변경하게 되었다. 사용자의 경험에 조금 더 가까이 있고, 무엇보다 작은 프로젝트에서 개발파트를 많이 가져가기 위해 바꾸었다. 그런데 이게 생각보다 잘 맞아서, 완전히 프론트엔드로 마음을 굳히게 되었다. 카모마일 https://0422.tisto..

우아한 테크코스 마지막 주차, 4주차를 진행했다. 4주차는 다리건너기 문제로, 마찬가지로 도메인 로직, 서비스로직을 분리하고 단위테스트를 수행하는 것이 주요 목표였다. 저번주차와 다른 점은 대부분의 파일이 이미 작성되어있었고, 이것을 기반으로 작성해야 했다. 이번 주차에도 MVC 모델을 사용은 하였으나, 명확하게 디렉토리로 나누지는 않았다. 문제의 디렉토리를 이동하지 말란 조건때문이다. 그래서 App이 Controller 역할을 하고, BridgeGame과 Bridge가 모델로써 핵심 도메인 로직을 수행했다. App을 Controller로 채용한 이유는 몇개의 파일을 이동시킬 수 없어서 명확하게 컨트롤러와 모델을 구분할 수 없다고 생각했기 때문이다. 그래서 결국 App은 입출력의 흐름제어만 하고, Bri..

우아한 테크코스 3주차를 진행했다. 3주차는 로또문제로, 도메인 로직, 서비스로직을 분리하고, 단위테스트를 수행하는 것이 주요 목표였다. 과정에서 클래스를 분리하기 위해 노력했다. 도메인로직? 서비스로직? 뭔소린지 처음에 전혀 이해를 못했다. 해당 블로그를 보고 좀 이해할 수 있었다. https://velog.io/@eddy_song/domain-logic 비즈니스 로직, 도메인 로직이 도대체 뭐지? 🙄 내 앱은 아직 비즈니스가 아닌데요...? velog.io 친구가 말하길 비즈니스로직은 DB에 담기는 데이터들을 처리하는 로직들이라고 생각하면 좀 편하다고 한다. 나는 여전히 좀 어려운듯... 입출력 역시 FE는 입출력이 전부다. 이번에는 무려 입출력이 세개...! 이걸 과연 어떻게 깔끔하게 비즈니스로직과..

SOLID Single Responsibility Principle(SRP) 가장 핵심이며, 가장 지키기 어렵다. ⇒ 클래스는 단 한가지의 변화만 가진다. 즉, 단 하나의 책임만 가진다. 행동(책임) 하나에 연관된 속성들을 엮어 클래스로 만든다. 별개의 행동은 별개의 클래스로 분리한다. 책임을 제대로 만든다는 것은 행동 단위의 명세를 만드는 것과 비슷하다 ⇒ interface를 잘 설계하는 것 여기서 중요한 것은 하나의 책임 뿐만 아니라, 분리된 두 클래스간의 관계 복잡도 역시 줄이도록 설계하는 것이다. Open-Closed Principle(OCP) 소프트웨어는 변경에는 닫혀있되, 확장에는 열려있어야 한다. 추상화를 얼마나 잘하냐에 따라서 갈리게된다. → 추상클래스를 통해 구현 OCP를 위한 조언 모든..

그렇다. 내가 쓰는 this는 대부분 내가 생각하는 그것이 아니었다. js의 this는 함수 호출방식에 따라 결정된다. js의 함수는 호출될 때, 매개변수로 전달되는 인자값 외에 arguments 객체와 this를 암묵적으로 전달받는다. 실행중에는 할당으로 설정할 수 없고, 함수를 호출할 때마다 다를 수 있다. 아래 링크를 참고하여 글을 쓴다. https://poiemaweb.com/js-this this | PoiemaWeb 자바스크립트의 this keyword는 Java와 같은 익숙한 언어의 개념과 달라 개발자에게 혼란을 준다. Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다. this가 객체 자신에 대한 참조 값을 poiemaweb.com 그래서 ES5는 함수가 어떻게 호출..

의존성 관리 : 타입 선언과 @types package.json의 세가지 종류 의존성 dependencies런타임에 필수적인 라이브러리들이며, npm을 통해 설치한다면 dependencies에 들어있는 라이브러리도 함께 설치됨 → 전이 의존성 현재 프로젝트를 실행하는데 필수적인 라이브러리 devDependencies사용자가 해당 프로젝트를 설치하면 해당 라이브러리들은 제외됨 ⇒ typescript 현재 프로젝트를 개발하고 테스트하는데 사용되지만, 런타임에는 필요없는 라이브러리 peerDependencies 런타임에 필요하긴 하지만, 의존성을 직접 관리하지 않는 라이브러리들 → 플러그인 프로젝트에서 공통적으로 고려해야 할 의존성 두가지 ts자체 의존성 ⇒ 팀원들이 모두 같은 버전을 사용해야함 → devDe..