개인코딩개발공장

# 펜툴 이게 펜툴이다. 일러스트에서 많이다뤄서 익숙하다. 근데 여긴 세부선택? 그게없다(일러스트레이터 단축키 A) 그냥 펜툴 쓰다가 맘에안드는 점은 cntl+클릭하고 수정해야한다. 대충 우산을 잡아보자. 이렇게 펜툴로 영역잡았따. 여기서 이걸 선택영역이라고 생각하고 먼짓을 하면 안된다. 이상태에서 cntl+엔터를 눌러야 선택영역으로 바뀐다. ㅇㅋ # 레이어 합치기 합칠 레이어 여러개 선택하고 우클릭후 머지레이어 누르기 아니면 그룹내에있는 레이어들을 다 합치려면 그룹 우클릭후 머지 그룹하면됨. 그러면 레이어들이 전부다 합쳐져서 이렇게 표현됨 그룹은 폴더개념이고 머지로 하면 아예 한 레이어에 다 쑤셔박아서 개별적으로 수정이 안됨. # 투명한 그림자 만들기 이걸 그림자를 만들어보자. 레이어 복사후 이걸 위아..

# 첫번째 시도했던 방법 : 코드복붙 걍 vs코드에서 코드복사해서 바로 복붙해버렸따. 근데 이게 코드가 색깔이 뒤죽박죽이다보니 배경색이랑 섞여서 코드를 알아볼수가 없었다. 그래서 이 험난한 여정이 시작되었다.. # 두번째 찾았던 방법 (codesnap 익스텐션) vs코드에서 익스텐션인데 뭐 이쁘긴 하다.. 몇몇 블로그 포스팅에서도 이거 자주 보인다. 근데 일단 단점은 파일로 저장해서 가져와야한다는거.. 사진자체가 복사가 안된다. 그래서 파일저장창 뜨고 바탕화면이든 어디 저장하고 그 이미지를 복사해서 가져와야한다. 성격급한 나로써는 피곤하다.. 책을보더라도 형광펜색깔 나눠쓰지않음.. 그냥 내 옆에 있는 색깔 형광펜 주워다 쓰니까.. 그리고 내가 가장 중요하게 생각했던 단점은 코드를 복사못한다. 사진이니까 ..

# 실제 개발을 하면서.. 여러 데이터들을 백단과 통신하면서 이런 데이터 구조를 많이 봤을것이다. const userInfo = [ { idx: 1, id: "helloman" }, { idx: 2, id: "byeman" }, { idx: 3, id: "sexman" }, { idx: 4, id: "niceman" }, ]; 보통 db쪽에서 받은 데이터들을 JSON형식으로 받아오면 이런 데이터를 가져오게된다. 이런 '어레이안에있는 객체데이터들'을 반복문을 돌려서 사용해보자. 아래 포스팅에서 어레이와 객체를 반복문에 돌리는 방법들을 소개해봤다. https://jacobowl.tistory.com/163 객체, 배열 반복문의 종류 / 어레이 순환 프로토타입 메서드 const arr = ["가", "나", ..

const arr = ["가", "나", "다"]; const obj = { key1: "value1", key2: "value2", key3: "value3" }; 이렇게 어레이와 오브젝트를 하나씩 만들었다. 이걸 반복문을 사용해서 처리를 해보자. ## for in 반복문 (배열 ok, 객체 ok) # 배열 반복 for (i in arr) { console.log(i); } // 출력 0,1,2 0,1,2를 출력한다. 배열의 인덱스를 하나씩 출력하는것이다. 따라서 아래와같이 배열의 인덱스를 참조하는 코드로 쓰면, for (i in arr) { console.log(arr[i]); } //출력 가,나,다 이렇게 배열의 요소를 각각 출력해준다. + i를 선언해도, 안해도 된다. for (let i in a..

js deep dive에 변태마냥 빠져들었다 사실 너무 어려운책인데 백단 프론트단 다 쓸수 있는 js를 좀 빡세게 배우고싶어서 이 책을 읽기 시작했다 지금 프로토타입부분을 세번?정도 읽고있는데 다들 여기서 머리터진다고한단다 나도 어렵게 느껴지긴 마찬가지인데 반면에 내면적으론 재밋다.. 내가 수만줄 써왔던 코드가 이런식으로 구조가 되어있는것이고 논리회로짜듯이 딱딱 맞게 들어간다 사실 클래스부분은 코드를짜면서 그냥 살짝 흉내만 내봤었는데 왜 클래스를 쓸까 라는 궁금증이 있긴했다. 함수로 객체를 return하는것과 (물론 그 객체는 메서드도 포함되어있다) 클래스로 객체를 만드는게 무슨차이인가했는데 이것또한 궁금증이 풀렸다 사실 이 블로그에 포스팅하는건 약 10번정도 읽고 어느정도 이해됐다 하는 부분들을 적는거..

# deepdive에는 없는 내용이다 공부를 하다가 메모리에는 데이터가 2진법의 수로 저장이 된다고 하는데, 숫자데이터는 8바이트, 즉 64비트(1바이트=8비트)로 저장이 된다고 하였다. 그럼 2의 64승가지의 데이터가 저장이 될 수 있다는 말인데, 이렇게 많은 데이터를 표현할수 있는 공간은 어떻게 숫자를 표현할까? 라는 생각에 포스팅을 쓰게되었다. # 자바스크립트 deep dive에서 표현한 방식딥다이브에선 숫자가 이렇게 저장이 된다고 하였는데 물론 집필자쌤도 이건 그냥 예시라고 하였다. 그리고 64비트 부동소수점 방식으로 저장이 된다고 하였는데 사실 저 그림만봐도 맨아래 1바이트 공간빼고 나머지는 걍 다 0으로 채워져있어서 가성비 한남충인 나로써는 저 공간들이 너무 아까웠고 이해를 못하고 넘어가는게 ..

console.log(NaN === NaN) //false console.log(Object.is({}, {})); //false console.log(Object.is(-0, +0)); //false

# 논리합 연산자 (||) OR연산자console.log( true || false )OR연산자는 뭐 다들 학창시절 수학시간에 안졸았다면 뭔지 다 알것이다. 여러 조건에서 참이 하나라도 있으면 전체적으로 참이 되는것이다. 정리하면 console.log(true || true); // true console.log(true || false); //true console.log(false || true); // true console.log(false || false); //false뭐이렇다, 이런것까지 설명하는건 귀찮지만 걍 써본다. 위의 코드에선 단순히 boolean값을 논리곱으로 써놨다. 그럼 여러 자료형으로 써본다면 콘솔값은 어떻게 변할까?console.log(0 || 1); //1 console.l..

사실 이건 중요한건 아닌데 모던 js 읽을때 헷갈렸던 부분이다. # 후위연산자 let num = 1; console.log(num++, " #A"); // 1 #A console.log(num, " #B"); // 2 #B 일단 num에 1을 할당하고 여기에 후위연산자를 붙여서 콘솔로 찍어보면 A부분에 1로 뜬다. 응? 난 분명 1을 증가시켰는데? 그래서 B에서 다시 num을 참조하려고 하면 증가된 2를 볼 수 있다. # 전위연산자 let num = 1; console.log(++num, " #A"); // 2 #A console.log(num, " #B"); // 2 #B 이곳에선 결과가 다르게 뜬다. # 두 차이는 무엇일까? - 후위 연산자는 원래 num의 값을 가지고 있어서 참조시에는 원래 num의..

# 레이어마스크 전에 썼던 사진이다. 여기서 하늘이 맘에 안들어서 다른 사진껄로 합성해보곘다.. 요 하늘사진으로 바꿀거다. 그럼 밑에있는걸 지워야겠지? 이때 레이어마스크를 써야한다. 저 하늘사진 레이어를 클릭한채로 아래 사진기 모양을 클릭한다. 클릭하면 레이어마스크가 씌워졌다. 그럼 이제 브러쉬툴을 클릭하고 전경색과 배경색은 기본 디폴트 (단축키 d)로 흰색 검은색으로 한다. 그리고 문지르면 이렇게 저 배경색 부분만 지울 수 있다. 경계선이 뚜렷한걸 바꾸고 싶으면 브러쉬툴에서 shift + []으로 경계조절을 하면된다. 전경색 배경색 스와이프는 단축키 x로 바꾸면 된다. 또 이 상태에서 걍 엔터키 누르면 바로 opacity바꿀수도 있음. 결과물 전 후 완성본