- 전체보기(186)
- js(40)
- React(20)
- 기술면접(18)
- html(16)
- JavaScript(10)
- CSS(10)
- API(5)
- git(5)
- hoisting(4)
- Prettier(3)
- &&(3)
- github(3)
- typescript(3)
- callback(3)
- vscode(3)
- HoF(2)
- let(2)
- var(2)
- docker(2)
- 클로저(2)
- npm(2)
- http(2)
- filter(2)
- lodash(2)
- atomic(2)
- Flex(2)
- input(2)
- linux(2)
- graphql(2)
- ESLint(2)
- HoC(2)
- 통신(2)
- 배포(2)
- 쓰로틀링(2)
- frontend(2)
- cookie(2)
- 보안(2)
- 변수(2)
- 레이아웃(2)
- refetch(2)
- Map(2)
- DOM(2)
- sessionStorage(2)
- transform(2)
- 디바운싱(2)
- scope(2)
- 보일러플레이트(2)
- img(2)
- 정규식(2)
- accesstoken(2)
- margin(2)
- uuid(2)
- localstorage(2)
- json(2)
- const(2)
- 호이스팅(1)
- process(1)
- javasript(1)
- REST(1)
- JSON.parse(1)
- mac(1)
- Native Object(1)
- 모튤(1)
- lifecycle(1)
- BOM(1)
- 자동완성(1)
- 옵티미스틱UI(1)
- 컴포넌트(1)
- velog(1)
- try(1)
- false(1)
- datatype(1)
- 상수(1)
- instanceof(1)
- AMD(1)
- CommonJS(1)
- Module(1)
- TDD(1)
- pre-rendering(1)
- router(1)
- getServerSideProps(1)
- float(1)
- csrf(1)
- debounce(1)
- 비동기실행(1)
- Prototype(1)
- await(1)
- useEffect(1)
- ajax(1)
- modify(1)
- 개발언어(1)
- ReactHooks(1)
- node.js(1)
- ref(1)
- return(1)
- padding(1)
- 검색(1)
- class(1)
- branch(1)
- Presenter(1)
- setting(1)
- export(1)
- useApolloClient(1)
- True(1)
- Debouncing(1)
- webpack(1)
- Backend(1)
- 동기실행(1)
- login(1)
- material ui(1)
- refresh_token(1)
- fragments(1)
- Object.create(1)
- Sementic tags(1)
- error(1)
- single-threaded(1)
- template literals(1)
- XSS(1)
- 설치(1)
- https(1)
- Optimistic UI(1)
- box-sizing(1)
- antd(1)
- open API(1)
- Angular(1)
- gcs(1)
- z-index(1)
- CSS in JS(1)
- setPrototypeOf(1)
- build(1)
- refetchQuery(1)
- DOCTYPE(1)
- 시멘틱태그(1)
- useLazyQuery(1)
- disabled(1)
- State(1)
- useMemo(1)
- useRef(1)
- inline block(1)
- 리팩토링(1)
- this(1)
- 마크업(1)
- VirtualDOM(1)
- 테스트코드(1)
- refetchQueries(1)
- 파싱(1)
- hidden(1)
- 구조분해할당(1)
- 루트(1)
- useCallback(1)
- script(1)
- getStaticPaths(1)
- font(1)
- NAMING(1)
- storage(1)
- block(1)
- shorthand property(1)
- .git(1)
- inline(1)
- Host Object(1)
- restapi(1)
- custom hook(1)
- yarn build(1)
- failed to compile(1)
- data(1)
- meta(1)
- 명령어(1)
- readonly(1)
- 얕은 복사(1)
- 템플릿 리터럴(1)
- 실행 컨텍스트(1)
- yup(1)
- script defer(1)
- display(1)
- jest(1)
- translate(1)
- isPrototypeOf(1)
- kakao map(1)
- getPrototypeOf(1)
- trailing slash(1)
- getStaticProps(1)
- JSX(1)
- next.js(1)
- umd(1)
- transition(1)
- developer(1)
- Props(1)
- IIFE(1)
- 권한분기(1)
- Container / Presenter(1)
- Throttling(1)
- ES문법(1)
- LineHeight(1)
- ES6(1)
- grid(1)
- 패턴(1)
- redux(1)
- input type = text(1)
- emotion(1)
- 비구조화할당(1)
- container(1)
- react-quill(1)
- Apollo client(1)
- routing(1)
- ant Design(1)
- function(1)
- 정규표현식(1)
- 로그인(1)
- Meta Tags(1)
- virtual DOM(1)
- usequery(1)
- .sort(1)
- page(1)
- web(1)
- component(1)
- position(1)
- 깊은 복사(1)
- Closures(1)
- defaultValue(1)
- promise(1)
- script async(1)
- import(1)
- every(1)
- 동기(1)
- data fetching(1)
- 사용방법(1)
- JSON.stringfy()(1)
- shell(1)
- createRef(1)
- minimap제거(1)
- React Hooks(1)
- Visual Studio Code(1)
- apollo(1)
- 스코프(1)
- catch(1)
- server(1)
- Box Model(1)
- ApolloServer(1)
- 리액트(1)
서버에 포트 죽이기
서버 환경에서 개발을 할때 누군가 사용을 하지 않았지만 3000이 뜨지 않고 3001,3002 이보다 더 할때는 3003까지 갈때가 있다...그러면 나의 최후에 방법은 컴퓨터를 껐다 켜는 방법이다...근데 최근에 동료가 끄는 것을 목격을 하고 검색을 하기 시작하니 끄는
오름차순, 내림차순 .sort()
데이터 베이스에 내가 등록한 것들이 과거순으로 담기는 경우가 일반적일때가 많다.그럼 최신순으로 받으려면 오름차순, 내림차순으로 받을 수 있는 .sort() 메서드가 필요하다.인터넷에 알아보면 밑에와 같이 입력하면 된다는 것을 보고 그대로 사용을 했었다.그런데 배웠던 코
이벤트 정리 onClick, onFocus ...
onfocus : 포커스가 들어왔을때 onblur : 포커스를 잃었을때 onchange : select태그에서 선택을 바꾸었을때 onkeydown : 키보드를 눌렀을때 onkeyup : 키보드 땠을때 onmouseover :
input type = text 자동완성 디자인
🚧 ISSUEISSUE : input 태그에 자동완성이 켜져 있을 경우 배경색 불필요🛠 ISSUE 해결자동완성 시 스타일링은 CSS로 제어가 가능한데 :autofill 을 사용해 제어한다.:autofillhover, active 등과 같이 선택자에 추가하는 의사 클
Module not found
분명히 vscode에서 yarn build 했을 때는 오류 없이 잘 되는데왜 서버에 올리면 Module not found 라고 뜨는 거냐???
한국 오픈소스 프로젝트 랭킹 Top 100
개발자 플랫폼 GitHub의 데이터를 이용하여 한국 오픈소스 프로젝트를 선별하고 분석해보았습니다.GitHub은 개발자들이 프로그램의 코드를 올리고 공유할 수 있는 플랫폼으로 오픈소스 개발자들에게는 성지와 같은 곳입니다. 세상에 존재하는 대부분의 오픈소스 프로그램들은 G
[VSCode] Mac에서 Prettier 적용하는 방법
분명히 부트캠프에서 배운대로 설치를 진행해보았다.prettier 설치 명령어 입니다.아래의 명령어로 .prettierrc.json 설정파일을 생성합니다.혹은 + 버튼을 눌러서 직접 파일을 만들어주셔도 됩니다.만들게 되시면 prettierrc.json파일에 비어있는 객체
[리액트] 파일, 폴더, 페이지 naming
프로젝트를 시작하면서 초반에 구조를 잘 잡고 가야한다!!!그래서 맨 처음에 page를 잡고 그 밑에 컴포넌트를 만들어 관리하는데 page명은 대문자로 해도 상관이 없다 생각해서 만들었지만...난 분명히 대문자로 했는데 사이트에 접속해서 보면 알아서 소문자로 변경된다..
minimap 끄기 (mac 기준)
vscode를 사용하다가 보면 오른쪽에 내 코드를 작게 보여주는 minimap이 있습니다.이게 있으면 내 코드가 옆으로 적게 보이게 됩니다.그래서 이것을 꺼버리겠습니다.mac OS 기준으로 'Command + Shift + P' 를 누른다.텍스트창에 'minimap'
mac 단축키 vs window 단축키
⌘커맨드 (command)⌃컨트롤 (control)⌥옵션 (option)⇧쉬프트 (shift)⇪캡스락 (caps lock)⌘ 커맨드 (command) === CTRL⌃ 컨트롤 (control)⌥ 옵션 (option) === ALT⇧ 쉬프트 (shift)
mac 단축키 vs 윈도우 단축키 비교
⌘커맨드 (command)⌃컨트롤 (control)⌥옵션 (option)⇧쉬프트 (shift)⇪캡스락 (caps lock)⌘ 커맨드 (command) === CTRL⌃ 컨트롤 (control)⌥ 옵션 (option) === ALT⇧ 쉬프트 (shift)
CSS와 JS애니메이션의 차이점
웹사이트에 애니메이션 효과를 부여할 때 CSS의 transition / animation 속성을 사용할 수 있고 JS의 setInterval() / requestAnimationFrame() 을 사용할 수 있다. 하지만 각각을 사용할 때의 특징이 다르고 장단점이 있기
모듈 번들러, 트랜스파일러
현대의 프론트엔드 개발은 모듈단위로 파일을 엮어서 개발하는 방식이다. 즉, 모듈은 서로 의존성을 띄고 있는데 이런 점에서 다음과 같은 문제들이 생긴다.수많은 모듈들의 순서를 어떻게 처리할 것인가? (의존성 처리)모듈이 많아질수록 HTTP 요청이 많아질텐데 이로 인한 오
BOM vs DOM
브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델이다. 이를 통해서 브라우저의 새 창을 열거나 다른 문서로 이동하는 등의 기능을 실행시킬 수 있다. 전역객체로 window 가 있으며 하위 객체들로 location , navigator , doc
JS 엔진이 코드를 실행하는 과정
자바스크립트를 실행하기 위해선 자바스크립트 엔진이 필요하고 웹 브라우저는 자바스크립트 엔진을 내장하고 있다. 브라우저마다 엔진의 종류가 다르지만 코드를 실행하는 방식은 비슷하기 때문에 보통 어떻게 실행하는지 알아두는 것이 좋다. 업로드중..소스코드를 만나면 파싱하여 A
브라우저의 렌더링 과정
브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진 을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path) 라는 프로세스를 사용
CDN
CDN은 컨텐츠 전달 네트워크(Content delivery network 또는 content distribution network (CDN))의 약자로 말 그대로, 컨텐츠를 전달하는 네트워크를 구성하는 것이다.