반응형 분류 전체보기201 프론트 주니어 2022 상반기 회고 벌써 여름이라니! 내가 프론트 개발자 주니어라니! 벌써 입사한지 약 1년이 되어간다. 그간 많은 변화가 있었지만 정리가 너무 안되어 있어 쓰는 글✏️ 목차 | 신규 서비스 오픈 ⚙️ 기술적인 고민들 웹 앱간 interface 정리 및 처리 크로스 브라우징 이슈 react-query 도입 🙏 협업의 고민 | 코드스쿼드 프론트엔드 리뷰어 | 개발 기초 다지기 🍿 출퇴근길에 보는 유튜브 모음 📒 모자스 다시 읽기 | 건강한 마음과 몸 만들기 🏋️ 습관적 헬스 🥜 심심풀이 땅콩 독서 🚀 신규 서비스 오픈 지난 달에 webview 신규 서비스를 오픈했다. 중고거래에 필요한 노하우나 관련 지식에 대해 소개하는 커뮤니티형 서비스였는데 댓글 기능과 2depth의 카테고리 22종이 포함된 6페이지 정도의 웹앱 프로젝트였.. 2022. 7. 4. @emotion/css error 에러 in React - you have tried to stringify object returned from css function error message You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used. You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can h.. 2022. 6. 29. [React 오류] A component is contentEditable and contains children managed by React 😮 문제 상황 index.js:1 Warning: A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional. div contentEditable 내부에 component를 넣으니 React 오류 발생 아래와 같은 형태 import React, { ReactElement } from "react"; function TestComponent ({children}):ReactElement{ .. 2022. 6. 28. [책] 혼자 공부하는 얄팍한 코딩지식 📙 혼자 공부하는 얄팍한 코딩지식 코딩이 뭔지 모르는 사람부터 신입 개발자 면접을 준비하는 사람까지 모두에게 추천하는 책! 🤔 책을 읽으며 사실 저자인 고현민님은 유튜브 얄팍한 코딩사전을 통해서 원래 알고 있었다. 특유의 재치와 일상 비유를 이용한 설명으로 정말 도움을 많이 받았던 채널인데, 책이 나왔다니! 그냥 믿고 읽는다~ 그 중 재미있었던 챕터는 아래와 같은데, 실제 현업에서 웹앱을 개발하고 있어서 공감이 되기도 했고, 개발자면서도, 컴퓨터 시스템이 어떻게 돌아가는지 자세히 파악하고 있지 못했기 때문이다. IT 업계 용어 알기 - 스마트폰 앱이네 웹사이트 라고요? 프로그래밍 용어 알기 - 컴퓨터는 어떻게 일하나요? 개인적으로 개발자로서는 평소에 자주 듣던 용어의 어원이나 간단한 원리를 정리할 수 있.. 2022. 6. 26. "클로저가 뭐에요?" 를 답하지 못했다. 클로저가 뭐에요? 어떤 함수에서 선언한 변수를 참조하는 내부 함수를 외부로 전달할 경우 함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는현상을 말합니다. 클로저 어떤 함수에서 선언한 변수를 참조하는 내부 함수를 외부로 전달할 경우, (외부)함수의 실행 컨텍스트가 종료된 후에도 해당 변수가 사라지지 않는 현상 var outer = function () { var a= 1; var inner= function() { return ++a; } return inner; // - 1. 값이 아닌 함수 자체를 전달 } var outer2 = outer(); // - 2. foo함수의 실행컨텍스트 종료 console.log(outer2()); // 2 - 3. 앞서 반환 된 inner가 실행됨 cons.. 2022. 6. 23. JavaScript의 this와 바인딩 , 화살표함수가 생겨나게 된 배경 this 함수를 호출할 때 결정된다 브라우저 : window Node.js : global 자바스크립트의 모든 변수는 특정 객체의 프로퍼티이다. 특정 객체 : 렉시컬 환경 (Lexical Environment) 실행컨텍스트는 변수를 수집해서 LE의 프로퍼티로 저장 어떤 변수가 호출 당했을 때 LE의 프로퍼티에서 값을 조회해봄 그렇다면 전역 객체의 프로퍼티와 전역벼수로 선언한 것이 같을까? = window.a와 var a가 같을까? 할당할 때는 별다른 차이가 보이지 않지만 삭제를 하게 되는 경우 차이가 있다. var a = 'tami' delete a; console.log(a) // tami window.a= 'tami' delete window.a; con.. 2022. 6. 22. input 관련 이벤트 파헤치기 - input onChange onKeyUp onKeydown 회사에서 value에 따라 style이 변경해야 하는 기능을 가진 input을 만들어야 했는데, input event를 활용해서 해당 문제를 해결할 수 있었는데요. 정확히 왜 해결되었는지 원론적으로 접근해보고 싶어서 공부한 내용을 적었습니다. input event에 대한 내용은 김맥스 기술 블로그- input 요소 관련 키보드 이벤트 총정리 를 활용했는데 정말 정리가 너무 잘되어있습니다. 김맥스님 감사해요❤️ 사용 기술 스택 React 에 antd textarea사용 code sand box 예시에서는 일반 input과 textarea에 이벤트를 걸어보았습니다. input의 이벤트 onBlur 요소에 focus가 헤재되었을 때 발생하는 이벤트 onFocus 요소에 focus시 발생하는 이벤트 onKeyP.. 2022. 6. 1. webview long touch 막기( 미리보기 끄기) - iOS/Safari disable touch-callout information webview 서비스를 만들다 보면 운영체제 별로 다양한 이슈를 만나게 되는데요 오늘은 iOS webview에서 나온 QA중 long press(길게 누르기) 이슈를 적어보려합니다. 문제 상황 QA에 새로운 이슈 하나가 잡혔는데 iOS에서만 특정 요소를 길게 누를 경우 (long press) 미리보기가 열리는데 이걸 꺼달라는 요청이었습니다. 사실 미리보기는 정말 좋은데 이런 요청이 왜 나왓을까요? 바로 팀에서 webApp의 webview와 web을 완전히 분리하기로 결정했기 때문입니다. 그림으로 보면 아래와 같은데요, 다양한 서비스를 빠르게 시도하고 배포하기 위해 앱 내에는 webview서비스가 많은데, 이번에도 webview에서 먼저 시범적으로 해당 서비스를 만들었습니다. web채널과 app 내 인앱브.. 2022. 5. 29. JavaScript replace에 변수 활용하기 - 정규표현식 (regExp) 이용 서비스를 만들 때, JavaScript replace에 변수를 넣어야 한는 상황이 종종 생깁니다. 예를 들어 어떤 URL의 경로만 구하는 함수를 작성한다고 해봅시다. const red = 'apple' const sentence = 'I want red apple cookies'; const ans = sentence.replace(/red/gi,''); 내가 원한 것 : I want red cookies 실제 실행되는것 : I want apple cookies replace앞에 들어가는 것은 정규표현식 혹은 string그 자체이기 때문에 당연히 red가 치환되게 된다. new ReqExp 활용하기 🔗 MDN - RegExp const red = 'apple' const sentence = 'I want.. 2022. 5. 17. 이전 1 2 3 4 5 ··· 23 다음 반응형
