본문 바로가기

Programming32

[React] Styled-Components 개요1. className 을 지정하여 , 별도의 css파일에서 Styled를 지정하는 방법.  div>'        a href="https://vitejs.dev" target="_blank">          img src={viteLogo} className="logo" alt="Vite logo" />        a>      div>하나의 예시로 className은 logo로 지정되어 있기에 상단에서import './App.css'App.css 파일을 import 하고 있기에, .logo {  height: 6em;  padding: 1.5em;  will-change: filter;  transition: filter 300ms;} App.css에서는 이러한 className에 대한 st.. 2024. 8. 20.
[Javascript]Javascript 자바스크립트의 변수(var,const,let) 과 scope // 전역 스코프 global scope , 블록 스코프 block scope , 함수 스코프(function scope)let blockScopeVariable = "Available only in this block";if(true) {    // var blockScope = "Visible inside this block";    let blockScope = "Visible inside this block";    console.log(blockScope);} // console.log(blockScope);console.log(blockScopeVariable);// console.log(blockScope); // for (let i =0;i//     console.log(i);// }fo.. 2024. 8. 11.
[JavaScript] 자바스크립트에서의 클래스(Class) 1. Class?객체를 생성하기 위한 일종의 템플릿// 클래스 생성class Person {    constructor(name, age, hobby) {        this.name = name;        this.age = age;        this.hobby = hobby;    }    speak() {        console.log("hello");    }    speak1() {        console.log(`my name is ${this.name} and my hobby is ${this.hobby}`);    }}위의 코드는 class Animal 이라는 class가 선언 2. Class를 통한 Instance 생성// class를 통한 instance 생성const .. 2024. 7. 31.
[Code Review, Prgoramming Style] 코드리뷰, 프로그래밍 스타일에 관하여.. 1. 개요 - Code Review(코드 리뷰) 와 프로그래밍 스타일(Progmming Style)코드 리뷰는 개발자들이 서로의 코드를 보면서 이게 못났니, 저게 못났니 하는 문화이다. 더 나은 코드, 유지보수성이 좋도록 가독성이 좋도록 고쳐나가는 개발 과정의 한 단계이자 문화이다. 코드 리뷰를 통해서 사소한 규칙부터, if문이나 for문을 내가 너무 남발하고 있지는 않은 것인지? , 반복문에 대해 시간 복잡도는 고려한 것인지? , 내가 하고있는 어떠한 프로그래밍 스타일이 어떠한 팀의 룰을 깨고있는 것이 아닌지 메타인지, 자기객관화가 항상 부족한 자신을 위해 도움이 되는를 알 수 있는 그러한 문화이다. 하여 이러한 문화가 있는 회사의 구성원들이나 팀원들은 자신의 의견을 제시하고, 수용하고, 부족했던 점을.. 2024. 7. 30.
[Javascript] this 객체 바인딩 , 함수 바인딩 var fullname = 'Ciryl Gane'var fighter = {    fullname: 'John Jones',    opponent: {        fullname: 'Francis Ngannou',        getFullname: function () {            // 객체 this 바인딩 -> Francis Ngannou            return this.fullname;        }    },    getName: function() {        // 객체 this 바인딩 -> John Jonse        return this.fullname;    },    getFirstName: () => {        // 함수 this 바인딩 -> Ciry.. 2024. 7. 29.
[Javascript] slice() , splice() 차이점 difference 1. 개요자바스크립트에는 배열을 자르기 위한 함수가 있습니다. 그 중에서 항상 쓸데마다 용도가 좀 거슬리는, 헷갈리는 함수가 2개 있는데slice, splice 입니다 이름도 비슷해서 사용 용도가 가끔 헷갈리더라구요.  var Arr = [1,2,3,4,5,6,7,8,9,10];위 그림과 같이 배열을 선언하였습니다.   2. slice(startIdx, (endIdx))slice() - 배열의 일부분을 잘라 내어 새로운 배열로 리턴하기 위해서 사용하는 함수console.log(Arr.slice(1,3)); // [2,3]  console.log(Arr.slice(-3,-1)); // [8,9]console.log(Arr.slice(5)); // [6,7,8,9,10] Arr.slice(1,3) : 배열의.. 2024. 7. 16.