놀러와요 버그의 숲

1. Frame & Constraints 초기설정 => 디자인패널에서 조정 가로길이: 1440px 세로길이: 900px x: 0 y: 0 단축키 정리 내용 단축키 화면 중앙에 frame 위치 Shift + 2 프레임 이름 변경 Command + R 왼쪽 사이드바 띄우기 ( Layers / Assets ) option + 1 / option + 2 선택된 객체와 사이즈가 동일한 frame이 형성된다. 디자인 패널에 Constraints를 모두 scale로 바꾸기 그리고 1440/2로 width를 설정 2. 이미지 불러오기 단축키: Shift + Command + K 3. 무료 이미지 제공 => Unsplash 플러그인 참고 강의 https://www.youtube.com/watch?v=GsZk8s5JdWg

이번글을 마지막으로 코딩애플 강의 타입스크립트 part1 수강을 완료했다. 그래도 꾸준히 강의를 들어서 뿌듯하다. 아마 강의를 듣게 된다면, 타입스크립트 다른 강의를 들을 예정이다. 간단한 후기를 남기면, 처음 배울 때는 굉장히 쉬워서 좋았다. 근데 지금은 이제는 조금 더 실제 서비스에 적용해보고 싶다. 약간 이번에 강의를 들으면서 배운 것들은 타입스크립트 기초 문법? 느낌이 강하다. 이제 활용을 해보고 싶다. 그래도 초기 목표를 이룬것 같아서 기분이 좋다. 처음에 이 강의를 듣는 목적을 감귤 프로젝트할 때 타입스크립트 오류가 나면, 최소한 어떻게 해결해야겠다 대책이 서는 것을 목표로 했는데, 이제는 조금 알게되었다. 이렇게 목표를 조금씩 잡고 성장해나가는 것도 중요하다는 것을 느낀다. 앞으로도 목표를 ..

멋쟁이 사자처럼에서 특강을 개최해주셨다. 개발자 정원희님 이력서 특강을 듣고 느낀점을 짧게 작성해보려고 한다. 상세한 이력서 팁들은 하단에 참고 자료로 업로드하였다. 우선 가장 놀랐던 점은 발표력과 구성 능력이 탁월하시다고 느꼈다. 특히 목차도 구체적을 정리하고, 각 주제별로 요약을 해주시는 점 덕분에 특강을 잘 이해할 수 있었다. 1. 이력서 일단 다 쓸데없는 것도 다 써보고 강의 내용 생각하면서 빼자! 처음부터 잘 하려고하면 영원히 완성 못한다. 이 말씀이 인상적이었던 이유는 예전의 나를 보는 느낌이었기 때문이다. 나도 처음부터 잘하고 싶어서 이것저것 고려하다가 오히려 완성도 제대로 못한 경험이 많다. 처음에는 힘을 빼고, 부담없이 해보는 것도 중요하다는 것을 다시 한 번 느꼈다. 2. 내가 살면서 ..

이 글은 팀 프로젝트 『판다콘』 의 UI 개선 제안을 위해 팀원들에게 발표하기 위해 작성된 글임을 알려드립니다. 참고 사이트 https://app.giftistar.net/home 기프티스타 - 모바일 상품권 개인간거래 1위 플랫폼 모바일상품권 전품목 평균 20~30% 할인 혜택. 사용하지 않는 기프티콘 빠르고 편리하게 지금 판매해 보세요. app.giftistar.net 1. 위시리스트(장바구니) 우선, 기프티스타라는 어플을 보았을 때, 맘에 들었던 점은 장바구니 탭안에도 상품추가와 구매하기 버튼이 있었다는 점이다. 상품추가 버튼을 통해서 또 새로운 상품을 장바구니에 담을 수 도 있고, 구매하기 버튼을 통해서 바로 구매창으로 넘어갈 수 있다. 또한 총 얼마를 결제해야하는지 총 금액도 표시되어있다. 우리..

// 10강 타입스크립트로 HTML 변경과 조작할때 주의점 // 잘 찾으면 html object 자료가 남고 // 요소를 예를들어 못찾으면 null이 남기 때문에 // union type으로 설정해주어야 함 let title = document.querySelector("#title"); if (title != null) { title.innerHTML = " 반가워요"; } // HTML 조작시 narrowing 방법 5가지 // 1. instanceof연산자 => 가장 많이 쓰게 될 확률 높음 if (title instanceof Element) { title.innerHTML = "반가워요"; } // 2. as로 사기치기 // as는 타입 assertion으로 , Element 타입으로 사기쳐주세..

// 9강 함수와 methods에 type alias 지정하는 법 // type alias에 함수 type 저장해서 쓰는 법 // 함수 타입 지정할 때 ()=>{} 모양으로! // 함수표현식에만 type alias 사용 가능 // type alias 만들기 싫으면 그냥 함수만들 때 직접 타입작성하면 된다. type Func = (x: string) => number; let myFunc: Func = function (x) { return 1; }; // object안에 함수 타입 지정은 어떻게 할까? // type alias도 사용가능 let myComputer = { name: "mac", changeComputer(x: string): string { return x; }, }; myComputer..

이 글은 『성공하는 프로그래밍 공부법』 ( 박재성,고종범,남재창,박지현 저 /로드북 출판사)이라는 책을 읽고 쓴 글입니다. "프로그래밍 학습은 프로그래밍을 통해 무언가를 만드는 작은 성취감을 느끼는 것에서 시작해야한다." "내 주위에서 발생하는 문제를 해결하기 위해 프로그래밍 도구로 활용하는 것에서 시작해야 한다." 이런 생각이 들었다. 요즘 내가 하는 공부가 수단이 아니라 목적이 되고 있지는 않은가?를 돌아보게 되었다. 요새는 어떤 문제를 해결하려고 프로그래밍을 배우려고 하는 느낌보다는 취업, 공부를 위한 공부를 하고 있다는 생각이든다. 그렇다보니 뭔가 동기부여도 떨어지고 무엇보다 흥미가 사라져간다. 지금하고 있는 프로젝트 등.. 모두 내가 정말 흥미있어서 한다고 하기는 어렵다. 무언가 취업에 도움이 ..

// 8강 Literal Types로 만드는 const 변수 유사품 // literal type은 strings, numbers,booleans를 의미함. // 더 엄격한 타입지정 가능. => ~이런 문자만 들어올 수 있다. // Literal types 변수에 더 뭐가 들어올지 엄격하게 관리 가능. // 책이라는 변수에는 'book' 밖에 못들어옴 let 책: "book"; // 이 number라는 변수에는 123 밖에 못들어옴 let number: 123; // union type도 지정가능 let computer: "애플" | "삼성"; // computer = '샤오미' => 에러가 난다. // 함수도 가능하다. // 파라미터로 어떤걸 받을지 어떤걸 리턴값으로 받을지 결정 가능 function m..

// 7강 타입도 변수에 담아쓰세요 type 키워드 써서 & readonly // type alias (타입 변수 만들기) // 작명할때 type은 영어 대문자로 시작하는게 관습. // union type , obeject type등 여러개 쓸 수 있다. type Animal = string | number | undefined; let animal: Animal = 123; // object type alias 적용해보기 type Human = { name: string; age: number }; let human: Human = { name: "jung hee", age: 27 }; // js에서 const 변수는 등호로 재할당을 막는 역할 // const로 담은 object 수정은 자유롭게 가능...

// 6강 타입 확정하기 Narrowing & Assertion // type이 아직 하나로 확정되지 않았을 경우, Type Narrowing을 써야한다. // 어떤 변수가 타입이 아직 불확실하면 if문 등으로 narrowing 해줘야 조작가능 // 참고로 typeof는 문자열을 반환하기 때문에 'string' 이런 형식으로 써줘야한다. function myFunc(x: number | string) { if (typeof x === "string") return x + "1"; else { return x + 1; } } // 배열 nrrowing 해보기 myFunc(123); function myFunc2(x: number | string) { let arr: number[] = []; if (typ..