Jangchun Lee님 글 목록 - mysetting

Jangchun Lee

Seoul, Republic of Korea

Joined on 2021년 08월 01일

7:09 8/01

velog.io

mobile screenshot relative

7:09

velog.io

mobile screenshot

ginameee.log
https://velog.io/@ginameee

멍청합니다. 오늘 먹은 음식도 기억이 안납니다. 그래서 모든걸 기록합니다.

저작도구: velog

최종 피드 수집: 2024-12-25 08:45

전체 (141)

9d

2024.12.16

URLSearchParams.toString 은 자동으로 파라미터에 대해 URIEncoding을 수행한다.

000

23d

모노레포 구축/이관 (작성중)

yarn berry (with pnp) 를 사용해 모노레포를 구축하고, 기존프로젝트들을 migration 해본다.
프로젝트 생성
모노레포 프로젝트 생성
npm i -g yarn
cd {monorepo_directory}
yarn

000

27d

2024.11.29

비동기 함수의 이슈는 콜스텍이 없다.
비동기로 호출된 함수에서 이슈가 발생할경우, 콜스텍이 없다.
함수자체의 호출은 성공했다고 볼 수 있고, 비동기함수가 동작하는 순간 독립적인 context, callStack 을 갖게되기 때문.

000

1M

SEO 기본 체크리스트

쉽게 확인/수정할 수 있는 순으로 정리해본다.
lighthouse의 SEO 점수 체크
lighthouse 를 통하면 SEO 측면에서 어떤부분이 잘못됐는지, 기본적인 개선점은 무엇인지 알려준다.
이미지 체크
이미지에는 <img> 태

000

1M

접속한 사용자 위치 알아내기

해외에 있는 사용자들에 한해서 팝업을 보여주고 싶었다.
사용자가 해외인지 아닌지를 판별하기 위해 진행한 작업을 간단하게 정리해본다.
2가지 과정으로 이뤄진다.
IP 주소를 얻어내기
IP 대역을 참고하여 위치를 알아내기
모든 페이지

000

1M

2024.11.14 (작성중)

Nextjs 의 빌드 최적화 처리
nextjs 에서는 빌드과정에서 최적화과정을 수행한다.
이 결과로 종종 local과 다르게 동작하는 부분이 생길 수 있다.
api
Swallow route
최초 요청시 서버사이드에서 랜더링을 한

000

1M

2024.11.11

hydration
hydration 이슈가 발생했을때 해결방안
mounted 조건 추가
const Modal: React.FC = ({ isHide }) => {
const [isMounted, setIsMounted] = use

000

1M

2024.11.08

ip 주소 얻어오기
nextjs 에서 request 객체를 통해 주소를 얻어오고 싶다면,
이 때는 x-forwarded-for 라는 헤더값을 사용하면된다.
사실 request.ip 나 request.geo 등 다양한 값들을 제공하

000

1M

2024.11.07

AI 기반의 서비스를 어떻게 만들지?
생각보다 별개없었다.
준비물
사용하려는 LLM 의 api key 를 준비한다.
제공하려는 서비스를 위한 프롬프트를 준비한다.
현재의 질문이 어떤 서비스의 답변으로 사용되는지
어떤형태로 답변을

000

1M

2024.11.06

localization
사용자의 환경에 따라 특별한 동작을 수행하고 싶을 때, 두가지 방법을 생각해볼 수 있다.
(ex 해외에서 접속 시, 영문페이지 보여주기)
지역기반
geoip 를 사용하여 ip 기반으로 지역을 판단할 수 있다

000

1M

2024.11.01

padding 상대값
패딩의 상대값은 부모의 너비값을 따른다.
<div class="parent" style="position: relative; width:1000px;">
<div class="child" style="po

000

1M

2024.10.30

Image 압축
이미지는 웹성능개선에 있어서 가장 큰 영향을 미친다고 생각한다.
lazy loading 이나 가상 스크롤 혹은 preconnect를 통한 네트워크 요청/속도를 개선하는 것도 중요하지만 애초에 이미지를 최대한 압축하

000

11M

2024.01.17

채용과제를 진행함, 간만에 개발해보면서 느낀것들 간단히 적기
스캐폴딩
디렉토리 구조를 어떻게 가져갈까에 대한 고민이 항상 있다.
뭔가 공식처럼 패턴화해서 나만의 노하우를 갖고 싶었다.
처음에는 Atomic Design Patter

001

11M

2024.01.15

구직활동을 위해 거진 3달만에 개발을 손에 잡는다.
문법도 기억이 안나고 큰일이다.
그동안 일하면서 갖고있던 생각들을 복기하고 정리해본다.
개발전에 데이터구조를 먼저 확인/논의하자
정석대로라면 데이터설계 및 API가 먼저 개발된

001

1y

private github repo 접근안될때

회사레포의 경우 직원들만 접근이 가능하고, 접근권한이 없는 경우 permission denined 와 같은 에러가 아닌 not found 에러를 내뱉는다.
레포 접근시 사용되는 인증정보가 잘못되었을 확률이 높다.
1. 어디에 저장

000

1y

2023.08.09

GA가 동작안하는 경우
iframe 내부에서는 동작 안함
iframe 에서의 network request라고 하더라도, first-part cookie (부모페이지의 쿠키)를 사용하기 때문에, 부모페이지에서 GA 관련 쿠키가 없다

000

1y

2023.08.03

웹뷰 프로젝트를 진행하고있다.
할때마다 느끼는건데, 웹뷰는 프론트만 잘 구현한다고 되는게 아닌 것 같다.
회사별, Android, IOS 플랫폼별 웹뷰 정책이 너무 천차만별이라 어디선 되고 어디선 안되는게 너무 많다.
일단 진행하

000

1y

input file 같은파일 두번 onChange 무반응

input file에서 동일한파일을 연속으로 입력하게되면 onChange 이벤트가 발생하지않는다.
같은파일을 등록했을때도 onChange 이벤트를 발생하고싶다면 value를 초기화해주어야한다.
const handleUploadIm

0015

1y

2023.07.26

리펙토링
컴포넌트의 상태를 줄이는게 중요
상태를 줄일 수 있는 방법으로는 특정 상태와 관련된 로직들을 별도의 훅으로 분리시키는 것도 좋은 방법이다.
특정 패턴들을 일관화해서 하나로 묶어보자.
코드가 간결해지고 분기가 필요했던 부분

000

1y

2023.07.20

x-cache response header
x-cache는 CDN과 관련된 정보를 담고 있다.
다양한 정보가 있지만 주로 확인하는 정보는 cache hit 유무에 대한 정보로 볼 수 있다.
aws cloudfront 에서의 x-c

000

1y

검색결과의 썸네일

seo는 어렵다.
단순한 추측만으로 작업을 진행해야되기 때문이다.
검색결과에 노출시키는 것 까지는 성공했다.
하지만 검색결과의 썸네일 이미지가 거의 없거나, 있더라도 쓸모없는 이미지가 노출되곤 했다.
이를 해결하기위해 몇가지 방안

000

1y

사이드 프로젝트 만들 때 유용한 것

ai logo maker
chakra
starpi

000

1y

2023.04.13

SSR 환경에서의 onload
SSR에서 페이지를 처음에 진입했을 때 onload 이벤트가 씹히는 현상이 있다.
이때는 HTMLImageElement의 complete 속성을 사용하면된다.
https://developer.mozi

000

1y

2023.04.04

cookie vs storage
그 동안 request에 실리는 데이터가 아니면,
원하는 생명주기에 맞춰서 sessionStorage나 localStorage를 사용하는게 낫다고 생각해왔다.
그런데 한가지 간과한게있다. sess

000

1y

2023.03.22

카카오톡 OG Description이 안나오는 이슈
카카오톡에서 OG title이 길면(2줄이면) description이 짤린다.
description이 잘린다면, title글자수를 줄여보자
one link 이슈
안드로이드에서 a

001

1y

chrome inspect 안될 때

크롬 인스펙터가 디바이스를 제대로 인식하지 못할떄가 있다.
이럴땐 디버깅서버를 죽이고 다시 재시작해준다.
디바이스의 usb 디버깅모드도 껐다 켜주면 좋다.
근데 대부분 과도한 메모리사용으로 인식이 늦어지는 경우도 종종 있어서 재부

000

1y

웹뷰에서 ios app store 이동

웹뷰에서 app store를 이동하는 버튼을 만들고자 할 떄,
button이 아닌 a 태그를 사용하자.
// bad
<button onclick={() => window.location.href="앱스토어_주소"}>
앱스토어

000

1y

access git repository with git account

git account config 설정이 제대로 되어있지 않을 경우, private한 repostiory에 접근할 때 404에러가 발생한다.
가장 간단히 해결할 수 있는 방법은, 접근하고자하는 repository 주소에 계정정보를

000

1y

2023.03.09

웹뷰의 userAgent
웹뷰의 경우, userAgent에 앱 버전이 반드시 명시되는건 아니다.
자동으로 명시가 되는 줄 알았지만, 아니었다.
userAgent 세팅을 앱쪽에서 직접해주는듯하다.
따라서 웹에서 앱버전체크가 가능한지

000

1y

2022.03.06

CanIUse 꼭 확인하기
반응형으로 화면이 줄어들더라도 비율을 유지하기 위해 aspect-ratio라는 속성을 사용했다.
근데 IOS 14 에서 제대로 적용이 안되는 이슈가 있었다.
확인해보니 지원을 안하고있었다 제길..
cha

000

1y

css, 링크스타일 없애기

& > a,
a:active,
a:visited {
text-decoration: none;
font: inherit;
color: inherit;
}

000

1y

css, 링크스타일 없애기

& > a,
a:active,
a:visited {
text-decoration: none;
font: inherit;
color: inherit;
}

000

1y

css, 스크롤바 가리기

스크롤바 가리기
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
디스커버 적용할 때, 이미지 리사이즈서버를 적용

000

1y

css 두줄 말줄임

두 줄 말줄임 하는 방법, 단 webkit 기반 한정임
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;

000

1y

웹뷰 작업시 고려해야 할 부분

뷰포트
safe area 는 항상 염두해 두어야 한다.
safe area영역의 너비나 높이는 css에서 환경변수로 접근할 수 있다.
/* iOS 11.0 버전 */
constant(safe-area-inset-top)
cons

000

1y

이미지 사이즈 관련 이슈 간단정리

이미지 사이즈 관련해서 접했던 키워드들을 적어둔다.
css
이미지 비율을 유지한체 가운데정렬시키기
/* img 엘리먼트를 담고있는 컨테이너*/
object-fit: contain;
/* div에 bacground img를 세팅 *

002

1y

SSR / SSG / ISR

SSR
Server Side Rendering
요청이 들어올때마다 렌더링서버가 매번 페이지를 렌더링한다.
SSG
Static Site Generation
프로젝트를 빌드할때 미리 페이지를 구성해두는 것
ISR
Incremental

000

1y

pako, 압축절차 (작성중)

길고긴 JSON string을 줄이기위해 pkao라는 라이브러리를 사용한다.
import pako from "pako";
import response from "./data.json";
// 1. JSON string을 뽑아낸다.

000

1y

남은영역 height 가득 채우고싶을때

https://stackoverflow.com/questions/50043803/how-to-make-an-element-fill-the-remaining-viewport-height

000

1y

CSSTransition with emotion

CssTransition의 props인 classNames에는 각 transition stage(appear, enter, and exit)별로 적용시킬 스타일의 class나 id를 넘겨주어야 한다.
emotion과 함께 사용하기

000

1y

MutableRefObject vs RefObject

ref 를 사용하다보면 종종 이런 에러를 마주친다.
void) | RefObject | null | undefined'.
같은 ref인데 왜 타입에러가 발생하는 것인가, MutableRefObject와 RefObject의 차

000

1y

2023.02.10

모노레포
팀에서 모노레포 세미나를 진행해주셨다.
장점
"모노레포의 궁극적인 목표는 표준화의 자동화이다"
표준화를 위한 설정파일들 (eslint, tsconfig) 와 같은 파일들을 npm 모듈로 관리한다면, 버전이 올라감에 따라

000

1y

yarn berry 에서 swiper9.0 사용시 에러

이슈
swiper 설치하였으나 제대로 동작을 안함, 아래와같은 이슈를 내뱉음
https://nextjs.org/docs/messages/module-not-found
error - Error: swiper tried to acce

000

1y

2023.02.01

StaleTime vs CacheTime
staleTime - refetch 하는 기준이 되는 시간
cacheTime - fetch 되었을때, 캐싱된 데이터의 유지시간
react lazy query
useQuery의 enable

001

1y

simulator 인터넷 접속 안됨

https://stackoverflow.com/questions/46980164/cant-visit-website-on-ios-simulator-this-connection-is-not-private

000

1y

IOS 15, url 주소창 영역 피하기

https://twitter.com/gluebyte_/status/1407312318283730950
https://yceffort.kr/2021/09/safari-15-update
https://gist.github.com/kl

001

1y

2023.01.26

클립보드 복사
카카오 인앱 브라우저에서는 navigator.clipboard.writeText 사용이 불가하다.
executeCommand를 사용하자
function checkIsInAppBrowser (): boolean {

0056

1y

OG Debgging / Error report

Twetter, Facebook
이곳 에서 어떻게 보여지는지 체크해보자
Kakao에 og태그 정보갱신이 제대로 안될 때
Twetter, Facebook은 og:url 생략시 접속한 주소로 세팅되지만, kakao는 도메인기준으로 세

000

1y

2023.01.25

평소에 컴포넌트/파일를 꽤나 잘게 쪼갠다는 이야기를 듣는다.
사실 크게 잘게 쪼개지는 않는데, 팀원들에 비해 잘게 쪼개는 듯 하다.
내가 쪼개는걸 선호하는 이유는
가독성이 개선된다. (주관적인기준)
하나의 파일에서 500줄이상 넘

000

1y

2023.01.24

공유하기
window.navigator.share 를 사용하면된다.
단 https 위에서만 동작한다.
클립보드 복사하기
window.navigator.clipboard.writeText 를 사용하면된다.
localhost를 제외하

000

1y

2023.01.19

집에서 모바일로 개발 pc localhost 접속하기
같은 네트워크에 접속
내부망 ip 확인
ifconfig | grep "inet " | grep -v 127.0.0.1
핸드폰에서 내부망 IP로 접속

000

1y

2023.01.17

og tag를 동적으로 바꿀 수 있는가?
CSR 방식에선 불가능하다.
CSR은 브라우저에서 컨텐츠가 렌더링된다.
공유한 SNS에서는 렌더링자체를 진행하지 않기떄문에, 렌더링 되기전의 document의 meta 내용을 참조하게된다.

000

1y

Google Search Console - 소개

Search Console Traning 영상을 보고 정리한 내용임

000

1y

2023.01.05

useQuery의 재호출
useQuery는 첫 호출할 때 한번만 api를 call 한다.
만약 api를
같은 파라미터로 재호출하고싶다면 query.refetch를 사용한다.
다른 파라미터로 재호출하고싶다면, queryKey를 바꿔

000

1y

2023.01.02

EOL왜 필요할까?
원론적으로는 POSIX 규칙이 그렇게 정의되어있기 때문이라고 할 수 있다.
좀 더 자세한 설명
은 이 코멘트 참고하시면 좋을거같아요.
new line이 누락되었을시 git diff에서도 경고를 합니다.
이는

000

2y

2022. 12. 18

react-query의 적용이 무조건 옳은가?
어떤 장점이 있을까?
난 쌩으로 axios를 사용하는 것 보다 좋다고 본다.
react-query의 장점으로는 크게
순수 클라이언트의 앱 상태관리와 API 호출의 상태관리를 각각 독립

000

2y

2022.11.22

route 고민
조회/수정 페이지가 타이틀과 일부 UI를 제외한 나머지영역이 모두 동일할 때, route를 분리해야할까? 아니면 한 화면에서 flag를 갖고 화면의 일부만 바꾸는게 나을까?
page url은 보여지는 화면의 단위를

000

2y

2022. 11. 17

Server to Server 간의 통신은 이론상으로는 해킹이 불가능해 보인다.
해당 서버를 접근해서 트래픽을 까보지않는이상.. 근데 이미 해당서버에 접근했다는 것 자체가 계정자체가 다 털린거라,,
Proxy vs MiddleWa

001

2y

2022. 11. 16

페이지네이션을 구현할때 고민해야 할 것들
실시간으로 검색이 되는 목록이아닌이상, 현재 필터 UI에 입력되어있는 조건과, 가장 최근 검색시에 사용한 조건 2가지로 구분해야한다.
가장 최근 검색시에 사용한 조건은 페이지네이션을 위해

000

2y

2022. 11. 15

Optional Chaning이 함수호출시에도 활용이 가능하다.
onChange?.() <- component에서 onChange props가 optional 할 경우 별도의 예외처리없이 호출이 가능하다.
image의 o

000

2y

2022. 11. 11

라이브러리는 많이쓴다고 무조건 좋은걸까?
대부분 좋다. 사람들이 모일수록 hard test가 늘어나고 그곳에서 신뢰성이 늘어난다.
사람들이 많이 사용할 수록 interface가 general해 진다.
성능개선은 한 가지 개선한다고

000

2y

2022.11.07

AWS S3, CDN
S3의 저장비용보다 접근비용이 더 높다.
트래픽이 높은곳엔 반드시 CDN과 연결시켜놓도록 하자.
저장공간: 보증료
읽기 :월세
Toast Editor
Editor에서 이미지를 업로드했을때의 event가 있다.

000

2y

Passive Event Listener

최근 업무에서 특정 React 컴포넌트의 기본 wheel event의 동작을 막아달라는 니즈가 있었다.
위 내용을 처리하면서 대충 알고있던 Passive Event Listener 대해서 조금 더 자세히 들여다보게 되었다.
Pas

000

2y

2022.03.29

eslint + prettier
(eslint + prettier) + husky 환경을 구축중이다.
간단히 정리하면,
eslint: 코드 포맷 및 문법적 개선포인트까지 지적
prettier: 단순 코드 포맷만 지적
husky:

000

2y

S3, cloudfront 캐시 테스트

S3, cloudfront 간의 캐싱관련 테스트를 하면서 알게된점을 정리해본다.
캐시영역에 저장되는 기간
cloudfront --- S3 구조의 CDN에, 실제로 서비스를 하는 cloudfront에서 origin(S3)의 오브젝트

000

2y

2021.01.26

input 한글입력문제
IME가 필요한 문자의 경우 onChange 이벤트를 사용하게되면 마지막글자를 제대로 읽어오지못한다. onInput 이벤트를 사용하자.
참고
https://webruden.tistory.com/485

000

2y

npm 스크립트에 환경변수넘기기

npm 프로젝트를 빌드할 떄 특정 환경변수를 넘기는 방법이다.
빌드스크립트 (Shell) -> npm 스크립트 (node)
예제
package.json
{
"name": "npm-playground",
"version":

000

2y

2022.01.22

Figma 구현 스터디 중 궁금한것
아이콘은 무조건 svg로 뽑는것이 옳은가?

000

2y

자주쓰는 명령어 정리

커밋메세지 정리하기
remote repository로 올리기전에 커밋메세지를 정리하는 습관을 들이자.
다른 개발자와 한 브랜치에서 공동작업을 하고있을 경우, 이미 올라간 커밋메세지는 건들지말자 소스가 꼬여버린다.
여러개의 커밋메세

001

2y

2022.01.06

[IOS12] 의도치않은 하단바가 뜨는 이슈
<input type="text" readonly />이더라도 IOS12에서는 키패드가 없는 하단바가 생성이된다.
이를 막기위해선 onfocus="this.blur();" 를 추가하여

000

3y

2021.12.13

Cookie 이슈
Http 요청에 Cookie가 제대로 실려나가지 않는 이슈가 있다.
아직 미해결중이다... 내일와서 다시 봐야겠다.
** 테스트과정 **
withCredentials: true 를 해주었는데도 cookie가 안실

000

3y

globalProperties

vue3에서, App instance에는 Application Config라는 객체타입의 데이터가 있다.
말 그대로 Vue 앱의 환경과 관련된 정보가 담겨있는 객체다.
그 중 globalProeprties 라는 프로퍼티는 데이터는

001

3y

상호작용 콘텐츠의 올바른 용법

사용자와 상호작용하기위한 태그들을 알아본다.
<a> vs <button>
타겟 URL 설정이 가능하면 <a>, 없으면 <button>을 사용하자.
페이지 새로고침이 일어나지않는 해시값에 의한 URL이 변경이라도 <a> 태그여야 된

000

3y

HTML 개요 알고리즘 이해

Outline, Heading 에 대해 알아본다.
서점에서 목차를 보고 관심있는 주제가 있는지를 확인하듯이, 검색엔진도 Heading을 주요하게 본다.
Outline
Heading과 Section Element로 구현한다.
Hea

008

3y

검색 엔진 밥상 차려주기

HTML을 의미에 맞춰서 잘 작성하면 검색 엔진에 더 잘 노출될 수 있도록 만들 수 있다.
SEO에 영향을 주는 요인들
검색 결과 페이지 노출 대비 클릭률
페이지 타이틀
메타 디스크립션
로딩 속도
콘텐츠의 양, 질, 개연성
백링크

000

3y

HTML을 어떻게 공부해야 하는가

HTML 이란
문서의 골격을 제공
문서의 의미를 전달
분위기 느낌까지 전달 (문서를 어떻게 읽어야하는지에 대한 느낌)
예를들어 웹에서 의사소통을 할 때, 텍스트만 상요한다면 강조되는 부분이나 분위기를 전달할 수 없다.
학습경로
h

001

3y

Iterable Object

Iterable Object 에 대해 정리해본다.
Iterable이란 "반복가능"이라는 사전적인 뜻을 갖고있다.
즉 Iterable Object는 *"반복 가능한 객체"*는 의미다.
*"순회가 가능한 객체 데이터"*라고 이해해도

000

3y

2021.10.26

[Vue] Slot에는 v-show 불가
<slot :v-show="valuable" />
slot에는 v-show 사용이 불가능하다.
v-show는 해당 DOM을 그려놓고 display를 none으로 처리해준다.
내용이 동적으로

000

3y

2021.10.21

Storybook 이슈
스토리북을 적용하면서 발생한 이슈와 해결방법을 정리해본다.
router를 사용하는 story
storybook-react-router를 이용해보자 (참고)
redux store를 사용하는 story

000

3y

2021.10.20

과제중이다.
마크업은 거의 안해보았는데, 이번기회에 마크업도 열심히 공부할 수 있도록 해야겠다.
피그마를 통한 협업
assets를 다 받는다.
icon은 깨지지않도록 svg
나머지는 특성에 맞는 이미지파일로
눈으로 확인하여 큰 영

000

3y

ReactHookForm Submit 테스트 이슈

Testing 공부를 위해 간단한 todo-list 앱을 만들어 테스트중에있다.
예제코드를 보면 쉽게 따라할 수 있다.
form의 경우 react-form-hook을 사용하는데, submit 이벤트를 호출해도 jest에서 제대로

000

3y

2021.10.16

최근 프론트엔드 테스트에대해 관심이 생겼다.
https://www.youtube.com/watch?v=q9d631Nl0_4
이 영상이 매우 유익한 것 같다.
테스트 방법에 대한 고민
React test를 위한 도구로 jest 프레

000

3y

2021.10.15

회의할 땐
최근 다양한 회의에 참석할 일이 많았는데 느낀점을 정리해본다.
내가 회의의 주최자가 되었을땐, 최대한 간결하게 아젠다와 현재 진행상황에 대해서만 공유하자.
개인적인 사정이나 부가설명을 계속해서 덧붙이다보면 말이 길어진다

000

3y

실행컨텍스트와 this

Javascript에서 매번 헷갈리는 execution context와 this를 정리해본다.
this는 함수가 호출되는 시점에서, 함수의 소유자를 가르킨다.
즉, "this는 실행컨텍스트를 가르킨다".
Context란, 사전적

000

3y

2021.10.12

이미지 저장 정책이 변경되어 기능 수정 후 QA 진행중에 있다.
발생했던 이슈들과 해결했던 방법을 적어본다.
AOS Activity와 Webview
Activity는 앱의 컨텐츠를 담을 수 있는 컨테이너라고 생각하면 된다.
We

000

3y

Proxy, 2-way-binding

데이터가 바뀌면 데이터와 관련된 곳들도 update 시키는 테크닉
Angular나 Vue에서 지원을 하고있으며, Vue 문서를 확인해보니 Proxy를 이용하여 구현하는듯 했다. 간단한 2-way-binding을 만들어보았다.
!c

000

3y

2021.10.06

다른 프로젝트를 시작중이다.
새로운 영역의 추가가 용이해지도록 리팩토링을 진행하고있다.
부모레이어를 하나 더 둠
애매한 네이밍의 함수를 제거
복잡도를 높이는 혼합된 mixin 들을 하나로 합침
변동유무
개발할 때 항상 고민이 되

000

3y

Event Loop

Javascript가 비동기작업을 가능하도록 해주는 Event loop에 대해 정리해본다.
사전지식
Event Loop를 알아보기에 앞서 사전에 필요한 지식들에 대해 간단히 정리해본다.
Thread
Process의 일꾼
Threa

000

3y

Closure

외부에서 변수의 접근을 막아주는 환경
Closure는 폐쇄 라는 뜻을 갖고있다.
자바스크립트에서는 외부에서 변수에 접근하는 방법을 폐쇄해주는 환경이라고도 정의 할 수 있을 것 같다.
이처럼 클로저는 객체지향프로그래밍의 정보은닉라는

000

3y

Scope

자바스크립트의 핵심매커니즘인 Scope를 알아본다.
현재 실행중인 컨텍스트로, 변수가 저장되는 논리적인 공간
Scope는 범위라는 사전적인 뜻을 갖고있는 단어다.
자바스크립트에서 Scope는 변수의 유효범위를 의미하며 다양한 문장

000

3y

Hoisting

변수의 선언문이 가장 먼저 수행되는 것
호이스팅이란 변수의 선언문 부분이 Scope의 최상단으로 끌어올려져 수행되는 자바스크립트의 메커니즘이다.
선언문이라 하면 대표적으로 var, let, const, function, funct

000

3y

Function

자바스크립트의 Function에 대해 정의해본다.
"함수"를 한마디로 정의하면 아래정도가 될 것 같다.
값을 입력받아 다른 값을 반환하는 코드의 묶음(또는 블럭)
*"값을 반환하지 않는 함수가 있지않나요?"* 라고 생각할 수 있다

000

3y

2021.09.29

1년전에 개발했던 프로젝트가 추가개선이 된다고한다.
본격적인 개발을 하기앞서 기존코드의 리팩토링을 진행했다.
어떤 책에서 새로운 내용을 추가하는것보다 새로운 내용이 쉽게 추가되도록 기존내용을 수정하는것에 더 많은 시간이 투자된다고

000

3y

2021.09.27

최근 팀 내 스터디에서 atomic design을 적용하다보니 어느정도 나만의 기준도 생기고, 조금씩 구조화되가는걸 느끼고 있다. 다른업무랑 병행하느라 조금은 버겁긴하지만 그래도 의미있는 시간이다.
[React] custom ho

000

3y

2021.09.26

사내 클론코딩 스터디를 작업하고있다.
스스로 바닥부터 고민해볼 수 있는 기회라서 배우는건 많이 있지만 업무랑 겹치다보니 조금 버거운 면은 있다.
다음주가 마지막이니 잘 마무리할 수 있도록 하자.
Vuex mutation
mutat

000

3y

오픈채팅방

https://programmers.co.kr/learn/courses/30/lessons/42888에 대한 풀이다.
절차
입력값으로부터 nickname을 저장한다.
Enter, Change 일 때, 저장/변경한다.
입력값에 앞서

000