2:13 6/07
hokeydokey.tistory.com
2:13
hokeydokey.tistory.com
자스민https://hokeydokey.tistory.com/
자스민은 javascript's mean의 준말입니다.
- 계명대학교 세무학과 , 컴퓨터공학과(복수전공중)
- 프론트엔드개발공부중 (ES6 기반)
- 스택 : HTML , JAVASCRIPT , CSS , REACT , NODE.JS , MYSQL
- 관심사 : 클린코드 , 정부사이트최신화, 웹보안 , 캐시카우, 회
- 좋아하는 프로그래머 : 존 손메즈 , 니콜라스
저작도구: tistory
최종 피드 수집: 2024-11-22 16:47
전체 (65)
11M
2023 프론트엔드 개발자 취업 팁
글에 들어가기 앞서.저는 현재 3년차 웹 프론트엔드 개발자입니다. 2023년은 제가 잘다니던 회사를 그만두고 개인의 자아실현과 안정된 직장을 얻기위해서 고군분투한 해였습니다. 처음에는 과도한 자신감으로 인하여, 면접과 이력서를
Tip
fe 면접
개발자 구직
+ 더보기
개발자 면접
개발자 면접후기
기술면접
레퍼런스체크
면접 후기
연봉협상
임원면접
프론트엔드 개발자
11M
app router의 기본 파일들 (page, layout, template)
기존 pages와 달리 app은 매우 복잡한 폴더 구조와 파일구조를 가지고 있다. 이는 폴더구조를 이용하여, 다양한 기능들을 제공하려는 노력으로 보이는데, 개인적으로 “폴더구조가 너무 깊어 복잡하고 쓰임이 정해진 파일들을 얼마나파일
frontend
layout props
+ 더보기
next.js 13
next.js layout
next.js page
next.js template
next.js template 사용방법
next.js 기본
next.js13
page props
1y
Next.js@v13 Pages Directory 단점
Next.js@v13의 등장Next.js@v13은 너무나도 많은 변화로 인하여, 많은 프론트엔드 개발자들이 기존 프로젝트 마이그레이션과 변화에 적응하는데, 큰 고통을 받고 있다. 물론 편리하고 좋은 기능들이 많이 추가 되었지만
고찰
app router
next.js page router
+ 더보기
next.js13
page vs app
page 단점
page 디렉토리
pages router
넥스트 js
앱 라우터
페이지 라우터
1y
redux-toolkit은 무엇을 해결하려고 했는가 ?
엄청난양의 보일러 플레이트 코드.redux는 flux-pattern을 이용한 전역 상태관리 라이브러리이다. [React, 라이브러리] react-redux . redux를 사용하기 위해서는 action , reducer, sto
REACT
react library
Redux
+ 더보기
redux 단점
redux-toolkit
redux-toolkit 초기
T
Toolkit
리액트
리액트 공부
리액트 전역상태관리
1y
1.1. 3D 공간의 이해
2차원 좌표 시스템.우리가 흔히 보는 평면좌표(Cartesian Coordinate System)는 수평방향인 x와 수직방향인y 축으로 나누어져 있다. 두 지점이 만나는 점을 (0,0)으로 두고 이동하는 방향에 따라 각 축의 좌
3D 기본
3d공간
3차원
+ 더보기
3차원 객체
three-fiver
three.js
면
선
점
좌표계 변환
1y
[용인, 애견운동장] 아크 플래닛 (비오는 날 좋은 애견 운동장 및 카페)
오늘은 가랑비가 오다말다 오다말다 해서, 실외애견운동장은 갈수가 없었다. 우리는 실내 애견카페 혹은 실내 애견운동장은 되도록이면 가지 않는 편인데, 그 이유는 너무 높은 밀도와 어설픈 실내 인테리어로 아이들이 쉽게 뛰어 놀 수장소
경기도 실내
경기도 실내 애견운동장
+ 더보기
실내
실내 애견
실내 애견놀이터
실내 애견운동장
애견 카페
애견놀이터
용인 실내 애견운동장
용인 애견카페
1y
Next.js StaticImageData With Storybook
nextJs/Image를 storybook에서 사용 할 때.Next.js에서는 import 키워드로 소스 파일로 끌어 올 때 StaticImageData라는 타입으로 전달 받게 된다. 이 타입의 형태는 다음과 같다.
interf
REACT
next.js storybook
next.js 스토리북 안되요
+ 더보기
next/image
nextjs 스토리북
staticIamge
staticImageData
넥스트 이미지 스토리북
스토리북
이미지 스토리북
1y
useMemo 및 memo 조금 더 자세히 사용해보기
Memoization이란 ?useCallback, useMemo, React.memo 와 같은 기능에서 사용되는 memo 라는 개념은 파라메터를 기준으로 이전에 리턴한 해당 함수의 결과값을 리턴하는 개념이다. 순수함수는 파라메터
REACT
2번 렌더
Memo
+ 더보기
react memo
useMemo
리액트
리액트 useMemo
리액트 메모
리액트 훅
재 렌더
훅
1y
useContext 조금 더 자세히 사용해보기
useContext란 ?useContext는 react에서 제공하는 훅으로, 하위 컴포넌트에게 context를 제공하는 훅입니다. “context”란 직역하면 환경이라는 의미이지만, 여기서는 리액트에서는 각 컴포넌트가 참조할 수
REACT
context api
ContextAPI
+ 더보기
react
react createContext
react hook
react useContext
리액트 렌더링
리액트 예제
리액트 함수
리액트 훅
1y
useEffect 조금 더 자세히 사용해보기
useEffect 란 ?useEffect 함수는 렌더링 이후 컴포넌트와 외부의 시스템을 연결해주기 위해 만들어진 훅이다. 별도로 컨트롤이 가능하다면, “useEffect”를 사용해, 사이드 이펙트를 발생시키기도 한다.
useEf
REACT
Hook
hook 기초
+ 더보기
hook예제
react
useEffect
useEffect 예시
useEffect 예제
리액트 훅
함수형 리액트
함수형 컴포넌트
1y
useState 조금 더 자세히 사용해보기
컴포넌트내에서의 상태 갱신React를 접하는 이들이 가장 먼저 사용해보는 컴포넌트의 상태를 관리하는 Hook이다. 아래의 간단한 코드를 보자. 아래의 예제는 두개의 버튼을 두어, numb라는 값을 1씩 증가시키거나, 감소시킨다.
REACT
react
react hook
+ 더보기
react useState
React 공부
State
useState
useState 비동기
useState배열
useState예제
프론트엔드 공부
1y
React resolve + css/sass 적용하기
기본 폴더 구조 및 파일 구조Note : /src/Components/Header.jsx , /src/Utils/Math.ts, /src/style/main.css , /src/Utils/index.ts , /src/UI/But
REACT
resolve 옵션
Sass
+ 더보기
scss
style-loader
webpack scss
리액트
리액트 css 파일
리액트 환경
리졸브 옵션
웹팩 css
1y
[광주,애견 운동장] 땡구네
나는 너무 사람이 많은 곳은 항상 힘들기 때문에, 약간 거리가 있더라도 적당한 인원과 강아지가 있는 곳을 선호 한다. 그런 이유에서 이 곳을 선호한다.전경
차량이 없이는 방문이 매우 어려운 곳이다. 그렇기 때문에
장소
경기도 반려동물
경기도 애견카페
+ 더보기
경기도 운동장
광주 애견운동장
광주애견카페
떙구네
반려동물
수원 애견운동장
애견 운동장
주말 애견
1y
React 시작 환경 구축하기
CRA의 문제점Tip : Jest는 테스팅 도구이다.
Tip : Parcel, Webpack, Rollup은 여러 파일들을 필요한 소수의 파일로만 다시 묶어주는 번들러이다.
Tip : Babel은 브라우저에서 지원하지 않는 최신
REACT
react webpack
react without cra
+ 더보기
react 환경
리액트
리액트 시작하기
리액트 웹팩
리액트 환경
리액트 환경구축
바벨 설정
웹팩 설정
1y
[수원, 공원] 청소년 문화센터 공원
집 근처에 위치하고 있어서 아침, 점심, 저녁마다 구름이 둥둥이와 함께 하는 공원이다.전경
수원 청소년 문화센터 공원이라는 이름에서 알 수 있듯이, 거대한 부지 안에 메인이되는 수원 청소년 문화센터가
장소
강아지와 함꼐
수원
+ 더보기
수원 경기도 공원
수원 공원
수원 반려견 공원
수원 애견공원
수원 청소년 문화 센터 공원
애견 동반
애견과 함께
청소년문화센터 공원
1y
[포천,애견 운동장] 몽드드뚜뚜
3.1절을 맞아 집사람과 함께 광주 땡구네를 다녀오려다가 하필 땡구네가 수요일 휴무날이라, 조용한 곳을 찾아 경기도 포천까지 다녀왔다.전경
공장과 물류창고가 있는 외진 곳에 있다보니, 진입하면서 "이런 곳에
장소
경기 북부 애견 운동장
경기도 운동장
+ 더보기
경기도 중형견
몽드드뚜뚜
반려견과 함께
애견 운동장
애견 카페
중형견 운동장
중형견 카페
포천 운동장
1y
[성남, 애견 운동장] 라드독
이번주에 다녀온 장소는 성남시 중원구에 위치한 라드독이다.지인분의 추천으로 알게된 곳인데, 가까운 성남에 대형, 소형이 나눠진 운동장이 있길래 다녀왔다.
전경
성남 농수산물 도매시장 뒷길을 통해 들어오면 통유
장소
강아지
강아지와 놀기 좋은 곳
+ 더보기
강아지와 놀수 있는
성남 강아지
성남 개
성남 애견
성남 애견운동장
애견
애견운동장
운동장
2y
통신 속도 향상을 위한 노력 (DNS편)
서론만약 도메인 이 뭔지, IP주소와 포트 에 대한 개념이 정립이 되지 않았다면 이전 포스트를 보고 이 포스트를 읽기를 추천한다.
통신 속도 향상을 위한 노력 (기본 지식편)
DNS
도메인은 인간이 이해하기 쉽고 기억하기 쉬운
기술
dns
네트워크
+ 더보기
도메인
도메인 네임 서비스
새로운 도메인 구매시 바로 적용되지 않을 때
서비스
웹
웹 통신
통신
통신속도
2y
통신 속도 향상을 위한 노력 (기본 지식편)
서론2022년이 되어, 기존 프로덕트를 갈아 엎어버리는 프로젝트를 하다보니, 예전만큼 시간이 많이 나지 않아 2022년에는 블로그 포스팅이 거의 없어 조금 아쉬웠다. 그 만큼 새로운 기술에 대한 공부나 이전 지식에 대해서 공부를
기술
IP
네트워크
+ 더보기
도메인
도메인 주소
지식
컴퓨터 통신
통신 네트워크
포트
프론트엔드
힛잇
3y
[GOF] 컴포지트 패턴
컴포지트 패턴활용 : 객체들의 관계를 트리구조로써 부분 전체 계층을 표현하는 패턴으로 사용자가 단일 객체 복합 객들도 모두 동일하게 다룰 수 있도록 할 때 사용 한다.
객체 구성
Component : 인터페이스를 정의하며, 컴포
Architecture
GOF
개발공부
+ 더보기
공부
디자인 패턴
자바스크립트 디자인 패턴
컴퍼지트 패턴
컴포지트 패턴
타입스크립트
트리구조
트리구조 활용