본문 바로가기
반응형

안뇽

전체 글
111

프론트엔드 개발 초격차 패키지 인강 후기(패스트캠퍼스 온라인) 서론: 망한 진로테크와 오만가지 업무 역량 키우기 Java Spring 개발자 교육을 받고 쉬운 취직을 이유로 PHP개발자가되었는데 어쩌다보니 풀스택이 되어버려서 디자인과 퍼블리싱을 시작하게되었다.. 그래서 디자인 툴 올인원 패키지를 4년전에 수강했다. 온라인 강의 플랫폼중에서는 인프런, 클래스101도 써봤지만.. 패스트캠퍼스가 가장 깔끔하고 강의질이 나쁘지 않았다. 강사by강사 차이가 좀 작은 느낌... 그렇게 포토샵, 일러스트레이터, XD, 인디자인 까지.. 배우고나서(나는 아마추어 문어발아티스트입니다.) 어쩌다보니 또 디자인, 퍼블리셔로 이직을 하게됐다. (망한 진로맞음) 잠깐 일하다 프론트엔드개발로 이직하는것을 노리고 그런 길을 가게됐는데.. SI업체라 프로젝트가 끊임없었고 야근도 잦았다. 결제해.. 2023. 12. 7.
[React] vite프로젝트에서 react-virtualized 사용하기 리스트에서 스크롤시 렌더링되게 하는 컴포넌트를 구현하기위해서 react-virtualized를 설치했다. vite프로젝트에서 react-virtualized 를 사용하니 다음과 같은 에러가 뜬다. No matching export in "node_modules/react-virtualized/dist/es/WindowScroller/WindowScroller.js" for import "bpfrpt_proptype_WindowScroller” node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js:74:9: 74 │ import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.. 2023. 11. 22.
[Typescript] Typescript Essentials3 10. 호출 시그니처, 인덱스 시그니처 호출 시그니처(call signature) interface getLikeNumber { // 계속 사용하고싶다면 interface생성 (like: number): number; // call signature } interface Post { id: number; title: string; getLikeNumber: getLikeNumber; } const post1: Post = { id: 1, title: "post 1", getLikeNumber(like: number) { return like } } post1.getLikeNumber(1); 인덱스 시그니처(index signature) 속성의 모든 이름을 미리 알지 못하는 경우가 있지만 값의 형태는 알고.. 2023. 11. 1.
[Typescript] Typescript Essentials2 04. type annotation, type inference type annotation 개발자가 타입을 타입스크립트에게 직접 말해주는것 const rate: number = 5 type inference 타입스크립트가 알아서 타입을 추론하는것 const rate = 5 타입을 추론하지 못해서 타입 annotation을 꼭 해줘야하는 경우 any타입을 리턴하는경우 const json = '{"x": 4, "y": 7}' const coordinates = JSON.parse(json) console.log(coordinates) coordinates에 hover해보면 const coordinates: any라고 뜨는것을 볼 수 있다. JSON.parse는 json을 파싱해준다. 인풋으로 들어가는 js.. 2023. 11. 1.
[Typescript] Typescript Essentials1 타입스크립트 기본 01. Typescript란? Typescript가 나오게 된 배경 Javascript는 원래 클라이언트 측 언어로 도입되었다. 그런데 Node.js의 개발로 인해서 JS를 클라이언트 측 뿐만이 아니라 서버 측 기쉴로도 활용하게 만들었다. 그러나 JS의 코드가 커질 수록 소스코드가 더 복잡해져서 코드를 유지관리하고 재사용하기가 어려워졌다. 더욱이 Type 검사 및 컴파일시 오류검사의 기능을 수용하지 못하기 때문에 JS가 본격적인 서버 측 기술로 엔터프라이즈 수준에서 성공하지 못한다. 이 간극을 메우기 위해 Typescript가 제시되었다. Typescript란? 타입스크립트는 자바스크립트에 타입을 부여한 언어. 자바스크립트의 확장된 언어(superset)라고 볼 수 있다. 타입스크립트는.. 2023. 11. 1.
[font] pretendard variable 설치시 프로젝트에 폰트굵기 적용안됨문제 문제발견 얼마전에 업무용 컴퓨터 윈도우에 에러가 나서 초기화를 시켰는데 그때문에 폰트를 새로 설치해야했다. 작업하던 디자인파일에 필요한 Pretendard Variable 폰트를 설치를 하니까 프로젝트 전체가 폰트굵기가 thin이 되었다....! 폰트테스트 폰트테스트 폰트테스트 폰트테스트 폰트테스트 이렇게 작성했다면 이렇게 나오는 현상...... 해결 원인 폰트를 적용하는 css파일을 살펴보면 나같은 경우에 로컬 파일을 우선사용하고있었다. @font-face { font-family: "Pretendard Variable"; font-weight: 45 920; font-style: normal; font-display: swap; src: local("Pretendard Variable"), url(".. 2023. 9. 13.
[VS Code] Visual Studio Code Live Server Not Working 라이브서버 오류 발견 live server something went wrong 이란 오류가 하단에 뜨면서 라이브서버가 안열린다.. 로컬 주소인 127.0.0.1~로 들어가도 안켜진다. 나같은 경우는 컴퓨터가 초기화되면서 개발환경을 새로 세팅했는데 이때 확장프로그램을 하나하나 깔지 않고 C:\Users\user\.vscode\extensions에 있던거를 압축해서 풀었더니 오류가 났다.(전에는 잘 됐는데... ) 해결 재설치-설치를 아무리해도 똑같은 오류가 계속 뜬다. 이때 확장프로그램이 깔려있는 파일 위치인 C:\Users\user\.vscode\extensions에 다시 가서 ritwickdey.liveserver-5.7.9 폴더 전체를 지워버린다. 그리고 다시 Live Server를 설치하고 VS .. 2023. 9. 12.
[emotion] 이모션을 styled-component처럼 사용하기(@emotion/styled) emotion 설치 npm i @emotion/react @emotion/styled styles 파일 만들기 User.tsx페이지에 사용할 User.styles.ts파일을 만들었다. import는 꼭 @emotion/styled로 해주어야한다. @emotion/react로하면 styled문법이 적용안된다. 아래는 테스트용 컴포넌트이다. import styled from '@emotion/styled'; export const TopBox = styled.div` margin-right: 25px; `; 컴포넌트 import하여 사용 TopBox라는 컴포넌트를 사용했다. import React from 'react' import { TopBox } from './Users.styles'; const Us.. 2023. 9. 5.
[티스토리 스킨 만들기] 카테고리 드롭다운으로 만들기 치환자로 HTML 구조 작성 이미 카테고리가 작성 돼있는경우 생략하면 된다. skin.html에서 티스토리 치환자 ##_category_list_##를 이용해 HTML구조를 작성한다. https://tistory.github.io/document-tistory-skin/sidebar/category.html JS파일에 스크립트작성(Jquery) 스킨파일에 임포트 안에 추가하기 dropdown코드작성 먼저 sub_category_list이름의 2차 카테고리를 가진 1차 카테고리에 has-ch클래스를 추가하고 2차카테고리를 가진 1차카테고리의 링크이동을 막고(e.preventDefault) active클래스가 없으면 active클래스를 추가하고 2차 카테고리를 slideDown으로 보여준다. active클래.. 2023. 9. 5.
[React] React Component Styling React Component Styling 01. Style Loaders style-loader, css-loader가 .css나 .scss를 컴파일링해서 빌드함 eject 설정 웹팩설정을 꺼내서 설정을 하기위해 npm run eject 한번해야한다. 커밋하기 eject는 아직 git에 커밋되지 않은 변화가 있다면 진행되지 않아서 먼저 커밋해줘야한다. git add . git commit -m "commit before eject config/webpack.config.js 설정 config/webpack.config.js 열어본다. 임포트 절대경로 설정방법 기존에 상대경로 임포트를 절대경로로 사용하기위해 설정할 수 있는 방법이다. @import '../../../styles/utils'.. 2023. 8. 25.
[highlight.js] 티스토리 코드블럭 색, 라인넘버 넣기 코드블럭 하이라이트 넣기 기본 플러그인을 사용해도 되지만 cdn으로 넣어봤다. 더 다양한 스킨 스킨은 hightlightjs.org 에서 styles폴더 아래 있는데 스킨편집 > html수정 > 파일 업로드에서 업로드하여안에 링크해서 사용하면 된다. 플러그인에서 4가지정도밖에 없었지만 더 다양하게 있는 듯 하다 CSS추가하기 라인넘버를 추가했더니 기존의 코드블럭이 table로 들어가게 돼서 본문에 table css와 충돌이 있어서 초기화 시켜주는 작업이 필요했다. 다음 코드를 넣고 사용하는 스킨과 맞게 좀 더 다듬으면 될 듯하다. code.hljs table { width:100%; margin-bottom: 22px; border: none !important; border-collapse: colla.. 2023. 8. 25.
[Photoshop] 포토샵 베타버전으로 AI 사용해보기(포토샵 AI로 사람지우기) 먼저 포토샵 AI를 사용하기 위해서는 베타버전 포토샵을 설치해야한다. 포토샵 베타버전은 Creative Cloud Desktop 어플리케이션에서 Beta앱 카테고리를 선택하면 어도비의 베타버전 앱을 설치할 수 있다. (Creative Cloud Desktop > Beta앱 > Photoshop(Beta) 설치) 포토샵 베타버전 앱을 열어주고 올가미/라쏘 툴로 지우려는 개체를 선택한 후에 (유모차 손잡이는 같이 선택하면 같이 지워지길래 -해서 선택에서 지워줬다. ) 생성형채우기 erase people 또는 사람 지워줘 라고 써주면 됨! 결과는 3가지가 나오고 선택할 수 있다. 플로팅메뉴 또는 속성 패널에서 미리보기하고 변경할 수 있다. 근데... 아직 테스트단계라 그런지 선택하는 영역에따라, 또는 명령어에.. 2023. 8. 9.
반응형

최근댓글

최근글

© Copyright 2023 jngmnj

티스토리툴바