분류 전체보기
-
[ReactJS] Module이란 무엇일까?웹 개발/ReactJS 2022. 2. 10. 10:26
프론트엔드 개발 올인원 패키지 with React Online. Webpack 강의 내용을 기반으로 정리한 내용입니다. Module이란 Module은 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져있는 형태를 의미함 1) 한 파일에 쓰여진 코드를 여러 파일로 관리할 수 있으며 2) 다른 모듈로부터 특정 기능을 가져오거나, 다른 모듈이 특정 기능을 참조할 수 있게 함 모듈화를 하면 코드 재사용성이 증가하며, 모듈을 기준으로 코드 내용을 구조적으로 확인가능하기 때문에 코드의 관리가 편해진다. 모듈화를 위해서는 키워드, 모듈 시스템, 모듈의 기준이 필요하다. Module의 표준 1. CommonJS (node.js) 2. ESM Module의 키워드 1. 내보내기 - 내보낼 값을 객체 안에 넣고 객체를 통..
-
svg 파일 형식을 사용하는 이유UI UX 디자인 2022. 2. 9. 21:47
https://brunch.co.kr/@ggk234/11 'SVG'를 사용하는 이유! SVG에 대한 이해와 활용법에 대한 설명 | 왜 요즘 수많은 디자이너들은 SVG 아이콘을 쓰는 것일까? 그 이유는 명확합니다. '안 깨지고' '용량이 적고' '출력이 빠름' '수정과 애니메이션이 가능' brunch.co.kr https://ossam5.tistory.com/112 [HTML기초문법] 13강 SVG태그 및 이미지 활용 - OSSAM강좌 1. SVG 태그란? - SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미합니다. - SVG태그는 SVG그래픽을 담기 위한 요소입니다. - SVG태그 내부에 담을 수 있는 ossam5.tistory.com
-
[힙주비] 개발자 에반님 시니어 세션 강연 (1/27)나의/강의 세션 2022. 1. 27. 22:51
세션 요약 1. 잘하는 PM의 특징 - 일정 변경이 생겼을 때, 왜 늘어났고 늘어난 스콥이 왜 런칭에 필요한지를 솔직하게 공유함 - 개발자도 개발 기간을 솔직하게 이야기해주길 원함 2. 내가 모르는 부분을 확실히 알기 확실하지 않을 때는 잘 말하는 것이 중요하다 내가 뭘 모르는지 파악하고, 많이 물어보자! 3. T자가 되기 위해 폭을 넓히지 말자. 남들이 모르는 기술 깊이 뿐 아니라 지식의 너비를 넓히는 것도 중요하다. 깊이는 성장의 속도를 도와주고 너비는 성장의 방향성을 정해준다. 4. 콤포트 존에서 벗어나기 스트레스가 동반되는 것은 당연하다. 감당할 수 있는 스트레스는 동기부여가 되기도 한다. 컴포트 존에서 나가야한다. 5. 일 잘하고 유능한 팀장 성장시켜주는 팀장은 팀원들을 진심으로 신경써주고, 감..
-
[Next.js] kakao 인앱 user-agent 감지웹 개발/NextJS 2021. 12. 27. 13:24
1. 문제상황 카카오톡으로 전송된 링크를 인 앱으로 열었을 때 기능이 제대로 동작하지 않은 경우가 있다. 구글 로그인 기능도 마찬가지! 2. 해결방법 강제로 사이트를 외부 브라우저로 열도록 하는 방법도 있지만 안정적인 방법을 찾지 못했다. 사용자가 혼란스러울 경우를 대비해, 카카오톡 인앱 브라우저일 경우 사용자가 구글 로그인을 시도한다면 alert로 안내문구를 띄우기로 했다. 3. 해결 과정 _ 카카오톡 브라우저에 대한 user-agent 감지 - 카카오톡 인앱에는 userAgent에 KAKAOTALK 문구가 포함되어있다. Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0 KAKAOTALK - useEffect에서 navigator 객체를 통..
-
[NextJS] npm run build 시 code ELIFECYCLE 에러 해결 방법웹 개발/에러 2021. 11. 3. 22:52
code ELIFECYCLE npm ERR! errno 1 npm run build 빌드 과정에서 ELIFECYCLE 코드 에러가 발생했다. ELIFECYCLE 코드로 구글링 해본 결과 많은 분들이 1)로 문제를 해결하고 있었다. 1) npm cache clean --force 캐시를 강제로 삭제 2) rm -rf ./node_modules 3) rm -rf ./package-lock.json 4) npm install https://stackoverflow.com/questions/42308879/how-to-solve-npm-error-npm-err-code-elifecycle 하지만 나의 경우와 맞지 않은 방법이였고, 로그를 찬찬히 읽어보니 서버사이드 렌더링과정에서 생긴 코드 에러가 문제였다. 코드..
-
스타트업에서 진행한 구글 디자인 스프린트를 회고하며 (디자인 스프린트를 해야하는 이유/ 디자인 스프린트에서 중요한 점)나의/회고 2021. 9. 17. 10:23
학부생 시절 3번의 구글 디자인 스프린트 캠프 참여, 스타트업에서 3번의 스프린트 프로젝트 참여를 회고하며 정리한 글입니다. 디자인 스프린트를 해야하는 이유 아이디어 빌딩을 하면 팀 내에서 의견을 조율하고 얼라인 해가는 과정에서 많은 토론이 진행된다. 특히 여러 직무가 섞여있거나, 열정넘치고 수평적인 관계의 팀원들이 여러 명 모여있을 경우 토론 시간이 더 길어진다..! 내가 생각하는 구글 디자인 스프린트의 장점은 이런 팀 내의 토론, 뇌피셜을 줄여준다는 것이였다. 각자 생각하고 투표하여 결정한다는 컨셉으로 팀원들과 토론없이 빠르게 의사결정할 수 있고 문제정의부터 유저테스트까지의 단계를 통해 아이템을 뇌피셜이 아닌 고객 반응을 통해 증명할 수 있어 좋았다! 내 경험에 빗대어 아래의 경우에 해당하는 팀에게 ..
-
-
[Flutter] 플러터 2.0 null safety 를 이해해보자웹 개발/Flutter 2021. 8. 4. 22:46
Null safety를 이해 해보자 flutter가 2.0 버전으로 업데이트 되면서 dart 언어에 null safety가 적용되었다. null safety가 null을 사용하지 못하게 하는 것이라 오해할 수도 있는데 (왜냐하면 내가 그랬다 ㅎ..), null로 인한 런타임 에러를 방지해 개발자의 생산성을 높이고자 하는 목적이 있다. 자세히 말하면, null safety는 변수가 null을 허용하는지 구분하기 위한 개념인데 기본적으로 null을 허용하지 않는다. dart 언어는 null safety를 지원하지 않았기 때문에 변수 값이 초기화 되지 않았거나 null 값을 전달하면 컴파일 에러는 발생하지 않고 런타임 과정에서 오류가 발생했다. 이러한 이유로 코드를 작성할 땐 오류가 발생할 것을 예상하지 못하..