우선 JavaScript는 타입 변환에 대해 유연하게 동작한다. 1. "==" 연산자 == 연산자의 경우, 두 피 연산자의 값(value)가 다를 경우 일부 피 연산자의 타입(type)을 변환하여 값을 비교. : 타입을 비교하지 않는다. 10 == 10//true 10 == '10'//true true == 1//true true == '1'//true null == undefined//true 2. "===" 연산자 === 연산자의 경우 타입을 변환하지 않고 값을 비교한다. : 타입과 값을 모두 비교한다. 10 === 10//true 10 === '10'//false true === 1//false true === 'true'//false null === undefined//false NaN === N..

디자인 패턴, 렌더링 패턴, 퍼포먼스 패턴 등 관련 종사자라면 어디서 들어봤을 법한 단어들인데 사실 그 실상은 잊고 사는 것이 대부분이다.. 그게 내 이야기이니까.. 정처기 공부할 때 디자인 패턴 달달 외웠고 정처기 공부한 지도 얼마 안 지났는데 공부한 기억은 있고 내용은 기억도 희미한게 현실이다. 그 개념이 드문드문 기억난다 하더라도 어디에 어떻게 사용되는지도 몰르구 would like hater one for the chuck 동네사람들 그래서 그 패턴들의 개념을 정리해둔 사이트를 하나 소개하려고 한다. https://patterns-dev-kr.github.io/ Home Patterns.dev.kr 은 웹 앱의 성능을 위한 바닐라 자바스크립트와 React기반의 디자인 패턴과 컴포넌트 패턴에 대한 ..

프로젝트 관리 생애주기 (Project Management Lifecycle) 1. 착수 : 프로젝트 각 단계의 시작이나 다음 단계로의 진행을 승인 타당성 조사 / 목표 설정 / 범위 지정 / 결과물을 위한 SOW 작성 2. 계획 : 프로젝트 목적을 정의하고, 그 목적을 달성하기 위한 대안을 탐색하고 계획 수립 프로젝트 범위 조정 / WBS 구성 / 업무 순서도 구성 / 업무 승인 3. 실행 : 수립된 계획을 이행하기 위해 자원을 배분하고, 실제 작업 수행 팀 구성 확정 / 프로젝트 이해 당사자와 협의 / 예산, 인력, 장비 등의 자원 확보 / 작업 수행 4. 통제 : 계속적인 모니터링을 통해 계획과 실제의 차이를 파악하고 적절한 대응조치 팀 구성 확정 / 프로젝트 이해 당사자와 협의 / 예산, 인력, ..

리액트로 웹앱을 개발하기 시작하게 되면, Redux dev tool을 설치하게 된다. 게시글에 들어가기 앞서 Redux에 대한 개념부터 짚고 가도록 하겠다. ✨ Redux(리덕스란)? JavaScript(자바스크립트) 상태관리 라이브러리이며, 본질은 Node.js 모듈이다. ✨ Redux의 3가지 원칙 1. Single Source of Truth - 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미. 2. State is read-only - 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능. - 같은 맥락으로, 리덕스에서도 액션(action) 이라는 객체를 사용해서만 상태 변경이 가능. 3. Changes are made with pu..

개발에 착수하기 전.. 중요한 것은 요구사항 분석 등 기능 등을 정형화할 수 있는 문서도 있겠지만, 그런 가시화된 문서를 만들기 전에 해야하는 것은 단연 '일정 수립'이라고 할 수 있겠다. 앞에서 말한 요구사항 분석, 개발환경 분석.. 더 나아가 디자인, 기능 개발 후 서비스 런칭은 언제할 것인지를 어느정도 계획에 두고 진행하는 것이 좋은데.. 그때 나오는 개념 중에 하나가 WBS이다. 프로젝트 일정관리. 우리는 대충 이렇게 생긴 '프로그램 개발일정표'를 종종 보고는 했을 것이다. 이것을 정형화하여 작성하는 것이 WBS라고 할 수 있는데... WBS(Work Breakdown Structure)란? ** 작업분류체계 [산출/투입]. - 웹사이트 제작 시에 프로젝트의 범위와 업무의 세부사항들을 분류하여, ..

상태를 효율적으로 관리하고 보여주는 것이 프론트엔드 역량의 핵심이라는데.. 여기서 자주 나오는 용어인 '상태 관리'는 무엇인가? Front-End 에서의 '상태관리'란? 1. 데이터를 설계된 UI/UX에 맞게 설계하고 구현하는 일이며, 2. 네트워크를 통해 서버로 전달되는 client의 요청에 따라 변화하는 상태를 관리하는 일. 상태관리 방법 1. 프레임워크 등장 - React, Vue, Svelte 등의 프레임워크 등장 - 앵귤러의 등장으로 상태는 과거의 DOM에서 탈출할 수 있게 되었다. front-end 개발자는 DOM이 아닌 JavaScript에서 상태를 관리할 수 있게 되었다. 즉, DOM에 접근하는 로직이 필요없어지게 되었다는 것이다. 거기에다 필요한 상태들을 controler에 모아서 관리하..

일반 함수는 하나의 값(혹은 return 값이 없을 수도 있음)만을 반환. but. 제너레이터(generator)를 사용하게 되면, 여러 개의 값을 필요에 따라 하나씩 반환(yield)할 수 있게 된다. generator과 iterable 객체를 함께 사용하면 손쉽게 data stream을 만들 수 있다고 함. * 이터러블(iterable) - 반복 가능한(iterable, 이터러블) 객체는 배열을 일반화한 객체. 이터러블이라는 개념을 사용하면 어떤 객체에든 for..of 반복문을 적용할 수 있다. - 배열이 대표적인 이터러블임. 배열 외에도 다수의 내장 객체의 반복도 가능. [ 이터레이터 iterator : obj[Sysbol.iterator]의 결과. 이어지는 반복 과정을 처리한다. ] ** 이터러블..

공부하다가 ?. 라는 첨 보는 문법이 나와서 검색하려고 했더니 ?. 키워드는 검색이 안됨.. 그래서 더 찾아보니 이걸 Optional Changing이라고 한다더라 ~ 참고로 이 문법은 javascript.info 에 검색하면 최근에 추가된 문법이라고 뜰 정도임 처음 보는게 ㅇㅇ 당연함 옵셔널 체이닝(optional Chaining) 인 ?. 을 사용하면, 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다고 한다. 배경) 어떤 페이지에 존재하지 않는 요소에 접근하여 요소의 정보를 가져오려고 하면 문제가 발생한다. // querySelecter(...) 호출 결과가 null인 경우 에러 발생 let html = document.querySelector('.my-element').innerHT..

폼 디자인은 가볍게 Button 1개와 글을 써줄 공간인 FlowLayoutPanel 1개를 넣어주자 * FlowLayoutPanel 은 무언가 동적으로 처리할 때 많이 사용함 예를 들면.. 버튼이나 라벨 같은 걸 동적으로 추가해줘야 하는 경우 왜냐면.. 자동 배치 기능(?)이 있기 때문.. * 이 것에 대해서는 차후에 포스팅을 하도록 해야겠다 namespace Syn_example { partial class Form1 { /// /// 필수 디자이너 변수입니다. /// private System.ComponentModel.IContainer components = null; /// /// 사용 중인 모든 리소스를 정리합니다. /// /// 관리되는 리소스를 삭제해야 하면 true이고, 그렇지 않으면 ..

https://www.delftstack.com/ko/howto/csharp/how-to-make-a-dealy-in-csharp/ C#에서 지연 타이머를 만드는 방법 이 문서에서는 C#에서 지연 타이머를 만드는 방법을 소개합니다. Sleep() 메서드와 Delay() 메서드가 포함됩니다. www.delftstack.com Task.Delay는 비동기식 -- 특정 활동을 하기 전에 일시적으로 지연을 주는 것 Tread.Sleep은 동기식 -- 아예 폼 자체를 멈춰버림 https://kangworld.tistory.com/25 [C#] async await 예제 코드 #2 (+ 동기 비동기의 개념) async await 두 번째 편이자 마지막 편! 빵! 끗! 인트로 이틀간 밤을 새우며 stackoverfl..

Module not found Error: Can't resolve 'history' in @type/history 라는 오류가 뜬다 이것을 해결해보도록 하자. 1번. VSCode 같은 경우 다중 언어를 지원하는 프로그램이라 기본 패키지에 대한 유형 정보를 typescipt에 가지고 있지 않다고 함. 고로 history 같은 기능은 포함이 안되어서 따로 설치해주어야 한다는 것 같음. = 사용자가 이런 언어를 쓰겠다 ~~ 라는 정보를 넘겨주고 이런 기능이 필요해요 하는 일종의 과정 powershell 에 npm install --save history npm install react-router-dom --save 를 입력해서 두개를 깔아줌.. 나는 두개 다 깔았지만 계속 같은 오류 발생.. 하지만 뭔가 ..

RFCE 는 React Functional Component Export의 약자로 visual studio code 를 사용할때 빈 js 파일 안에서 rfce 를 치고 tab을 누르면 기본 껍데기라고 불리는 코드들이 또롱~! 하고 생긴다. 사용방법 1. VSCode 에서 ES7+ React/Redux/React-Native snippets 설치해주자. https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace Extension for Visual Studio Code - Extensions for..