영원히 흘러가는 강

칠월칠석인 오늘 하루 새로운 프로젝트를 해보자!!! 공공데이터포탈에서 맘에 드는것을 찾아서 어떠한 데이터가 있는지 뜯어보는데 이게 웬걸 너무 정보가 없다... json으로만 찾아봐서 그런가 xml로 활용하는 법도 익혀야 할것 같다 새로 찾을 데이터는 잘되기를 빌어본다..!!!

back to the basic을 쓰는 나의 마음 더보기 내 경험상 많은것을 경험하고 여러가지를 체득하게 된다면 나를 다시 돌아보며 내 현재의 현실에 중심하게 되는 편인거 같다 프로그래밍적으로 얘기해보자면 많은 프레임워크와 라이브러리를 아는것도 중요하겠지만 그 사용 용도와 기초는 다 의미가 있어 존재하는것이라고 생각하고 기초에 중점을 잡아보려한다. 기본형 타입 Immutable data 타입 number : 64비트 부동 소수점 ,모든 숫자를 실수로 처리 string : 16비트 유니코드 문자셋으로 구성된 문자열 boolean : true,false 의 값 undefined : 값이 할당되지 않았을때 null : 의도적으로 값이 없음을 위해 symbol : 유일한 식별자 생성시 사용 Objcet type..

js 기초 다지기 알고 하는것과 모르고 하는것의 차이는 극명하다! '백문이 불여일견' 의 뜻처럼 행동으로 옮기는건 중요하다 보는것과 한번이라도 타자를 쳐보는것은 다르다 라는 뜻을 내포하고 있는데 이 말이 내 모토였기도 하다 하지만 그동안 뒷전으로 미뤘던 기초중의 기초 동작 원리에 대해 알아보도록 하자 1. 자바스크립트 동작 원리 js 엔진 js 엔진은 메모리 힙 영역과 콜 스택으로 구성 되어 있고 메모리 힙은 메모리 할당,변수,함수 등이 담겨있고 콜 스택은 함수가 실행되는 순서를 기억하는 스택이다 js는 단일 스레드 프로그래밍 언어로 콜스택이 하나임을 말한다 스택의 특성상 여러가지가 쌓이면 맨아래의 작업은 무한정 대기하게 된다 이를 위하여 비동기 콜백이 존재 Web APIs Web API는 브라우저에서 ..

Styled-Component 를 사용한 react 프로젝트! 제작해본 이유는 간단하다 Styled-Component 사용법 익히려고! 그리하여 Styled-Component 에 대해 정리를 해보려한다 🎨 S t y l e d - C o m p o n e n t s javascript 파일 내에서 css를 사용할 수 있게 해준 대표적 css in js 라이브러리 js 코드 내에서 css 스타일 지정 가능 ❔ 그 렇 다 면 왜 쓰 는 가 ?! component가 많을 경우 class명이 중복될수 있는 문제 발생할수 있어서 이를 방지하기 위해 class 선언 없이 component에 접목 💾 설 치 법 npm install styled-components 🚀 사 용 법 const 태그이름 = styled.d..

js는 동기적 처리 방식으로 위에서 아래로 순차적으로 읽어 내려간다 console.log('1'); setTimeout(function() { console.log('2'); }, 1000); console.log('3'); 위에서 부터 순차적으로 1,2,3번을 매겼지만 실제 출력은 1,3,2 순으로 될것이다. 비동기적으로 처리하는것은 효율성에 있어서 매우 큰 핵심 요소이며 callback -> promise -> async,await 로 발전해 왔다 먼저 콜백이란 js에서의 callback 함수는 다른 함수의 인자로써 이용되는 함수 라고 정의 되어있다 function getData(callbackFunc) { $.get('https://main.com', function(response) { callb..

TypeScript의 기본 타입에는 크게 12가지가 존재! String let str:string='Hello'; Number let num:number=100; Bolean let isLastName: boolean=true; Object let user: { name: string, age: number } = { name: 'GR', age: 100 }; console.log(user); // {name: "GR", age: 100} Array let arr:number[]=[1,2,3];//배열시에 let arr:Array=[1,2,3]; //제네릭을 사용할 수 있다 Tuple 튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식 let arr:[string,number]=['..

TypeScript는 JavaScript에 타입을 부여한 언어이다! JavaScript의 확장된 언어라고 볼 수 있다 TypeScript는 JavaScript와 달리 브라우저에서 실행하려면 파일을 컴파일 해야한다 타입스크립트를 쓰는 이유 에러의 사전 방지 JS 사용시 function sum(a,b) { return a + b; } sum(10,20) //30 sum ('10','20') //1020 우리는 숫자 계산을 위해 sum이라는 함수를 만들었는데 위의 결과는 우리가 예상한 결과지만 아래의 결과는 우리가 생각했던 결과가 아닐것이다! 그리하여! TS 사용시 function sum(a:number, b:number){ return a + b; } sum(10,20) //30 sum('10','20') ..

overflow-x 와 overflow-y 는 내용이 넘칠때에 해당 축에 대하여 어떻게 보여줄지를 지정한다. 브라우저 지원 Chrome Edge FireFox Safari Opera 4.0 9.0 8.0 -ms- 1.5 3.0 9.5 속성으로는 scroll , hidden , auto , visible 이 있다 scroll 해당 영역에 내용이 잘리면 스크롤바가 생성된다. hidden 해당 영역에 내용이 잘려서 보인다. auto 해당 영역에 내용이 잘려서 보이나 필요시 스크롤바 나타난다. vivible 내용이 밖을 넘어선다 ex) 해당 스크롤에 대해서는 ::-vebkit-scrollbar로 스타일 혹은 보이지 않게 가능하다 ::-vebkit-scrollbar 에 대한 내용은 나중에 정리 해보려한다!

개인적으로는 러닝커브가 매우 높은거 같아서 정리해본다! 리덕스란? 상태관리 라이브러리 복잡한 리액트 구조에서 state를 쉽게 공유하기 위한 방식 액션? state에 변화 필요시 액션 발생 동작에 대해 선언된 객체 type을 반드시 가지고 있어야한다 export const addSomething=()=>{ return{ type:ADD_SOMETHING // 필수 }} export const minusSomething=()=>{ return{ type:MINUS_SOMETHING } } 리듀서? state에 변화를 일으키는 실질적 수행 현재의 state와 action을 인자로 받아 store에 접근해 action에 맞춰 state 변경 (⭐x 100 중요) const initialState={ count..

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. 아무리 읽어봐도 어려운거 같다.. 각설하고 코드부터 보는게 더 나을수도 있다는 생각에 장바구니 예제를 꼼꼼히 뜯어보자! 파일 구조 보기 더보기 src ㄴApp.js ㄴcomponents ㄴCart ㄴCart..js ㄴCartItem ㄴCartItem.js ㄴNavbar ㄴNavber.js ㄴProducts ㄴProducts.js ㄴProduct ㄴProduct.js ㄴredux ㄴstore.js ㄴrootReducer.js ㄴShopping ㄴshopping-actions.js ㄴshopping-reducers.js ㄴshopping-types.js components에 들어가 있는 부분을 제외하고! 우선 shopping-types.j..