Jaypedia

현재 진행 중인 React 프로젝트에서 svg 파일들을 어디에 위치시킬지에 대한 고민이 있었다. public 폴더일까? src 폴더일까? 각각에 위치시키는 것이 어떤 차이점이 있을까? 오늘은 그런 의문점들을 해소하면서 정리해 보려고 한다. 블로그 글을 참고하여 src 폴더에 위치시키기로 했다. 가장 큰 이유로는 바로 경로가 잘못되었을 때 컴파일 단계에서 에러가 나서 알 수 있냐 아니냐의 여부였다. public에 이미지를 위치할 경우 컴파일 단계에서 에러가 발생하지 않아서 별로 좋지 않다고 생각했다. 반면 src 폴더에 이미지를 넣을 경우 경로가 틀렸을 때 바로 에러로 알려 주기 때문에 수정이 용이하다. 📂 이미지를 public 폴더에서 관리할 때 webpack에 의해 관리되지 않는다. 즉, minify ..

1. 실행 컨텍스트란? 자바스크립트의 동작 원리를 담고 있는 핵심 개념 자바스크립트가 scope를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식 hoisting이 발생하는 이유 closure의 동작 방식 closure를 지원하는 대부분의 언어에서 이와 유사하거나 동일한 개념이 적용되어 있음 task queue와 함께 동작하는 event handler와 비동기 처리 동작 방식 scope, hoisting, this, function, closure 등의 동작 원리를 담고 있는 자바스크립트의 핵심 개념 실행 가능한 코드가 실행되기 위해서 필요한 환경 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념 JS는 어떤 실행..

유연하고 재사용 가능한 UI 컴포넌트를 만들 수 있는 React를 스타일링하는 방법에는 여러 가지가 있다. 다양한 방법의 특징을 알아보면서 무엇을 선택할지에 대한 고민을 줄여보고자 포스팅을 해 본다. 1. import CSS file 가장 기본이 되는 방법으로는 Component로 CSS 파일을 바로 import 하는 방식이 있다. 간단하긴 하지만 단점이 존재한다. 어플리케이션의 규모가 클수록 컴포넌트가 많아지게 되는데, 그러면 css 파일을 관리하기 어려워지고 여러 컴포넌트에서 사용한 class name의 중복이 발생할 수 있다. 2. Styled Components * CSS-in-JS library (컴포넌트 파일 내에서 스타일을 지정하여 컴포넌트와 스타일을 한 파일 내에서 관리할 수 있게 됨) *..

1. 클로저는 무엇이며, 어떻게/왜 사용하나요? 참고 링크 💻 프론트엔드 면접 질문 - JS #1 이 글은 프론트엔드 직무 면접 질문과 관련된 Github 저장소 front-end-interview-handbook 번역본으로, 저장소에 Translations 폴더의 내용과 동일합니다. velog.io 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합입니다. "Lexical"은 렉시컬 범위 지정이 변수가 사용 가능한 위치를 결정하기 위해 소스 코드 내에서 변수가 선언된 위치를 사용한다는 사실을 나타냅니다. 클로저는 외부 함수가 반환된 후에도 외부 함수의 변수 범위 체인에 접근할 수 있는 함수입니다. "함수가 선언된 렉시컬 환경"이 뭘까? Reference Master the JavaScript Inte..

Why Github Wiki? 코드스쿼드 부트캠프에 참여한 지 벌써 3달이 넘는 시간이 훌쩍 지났고, 4월 4일부터 본격적으로 팀 프로젝트에 도입했다. 이제 정말 팀으로서 하나의 결과물을 내야 하는 것이다. 페어 프로그래밍과는 또 다른, 제대로 된 협업을 경험해 보는 것이다. 협업을 하면서 Github의 기능 중 하나인 Wiki를 사용해 보라는 제안이 있었다. 막상 적어보려고 하니 막막해서 무엇을 적으면 도움이 될지에 대해서 정리해 보려고 한다. My Goal 개발 문서 작성법을 알고, 추후 프로젝트에 적용시키기 [Git] github 위키 기능 및 사용법 소프트웨어 프로젝트에서 소스코드만큼 중요한 것이 개발문서다. 굳이 포스트를 할애하면서까지 개발문서의 중요성을 언급하지 않아도 개발문서의 중요성은 모두..

JavaScript Deep Dive 스터디 질의응답 정리 범위 : 13장 스코프, 14장 전역 변수의 문제점, 15장 let, const 키워드와 block level scope 1. 상위 스코프에 있는 변수를 하위 스코프에서 참조할 수 있는 이유는 무엇인가요? 반대로, 상위 스코프에서 하위 스코프를 참조할 수 없는 이유는 무엇인가요? (자바스크립트 엔진이 변수를 참조하는 방식을 설명해보세요.) 더보기 자바스크립트의 스코프는 계층적인 구조를 갖기 때문입니다. 이것을 Scope Chain이라고 합니다. 변수를 참조할 때, 자바스크립트 엔진은 이 Scope Chain을 통해 변수를 참조하는 Scope에서 시작해서 상위의 Scope로 이동하면서 선언된 변수를 검색합니다. 즉, Scope Chain이 있기 때..

보호되어 있는 글입니다.

이번엔 글쓰기 기능을 구현해 보자. 저번에 UI는 완성해 놓았다. Ant Design을 활용해서 깔끔한 UI가 완성되었다. 🚀 목표 글쓰기 버튼을 눌렀을 때, 임시 DB 파일인 data.json에 작성한 글이 등록되도록 하는 것이 목표이다. 이 역시 저번에 했던 영화 앱에서 했던 것과 매우 유사한데, 그 당시에는 TIL에만 간략하게 정리하고 따로 게시물로 정리해 놓진 않아서 이번 기회에 정리해 보려고 한다. 🤔 고민했던 것 글을 작성한 후 글쓰기 버튼을 눌렀을 때, 모달이 떠서 '정말 작성하시곘습니까?' 같은 안내 문구가 또 나오게 해야 하나 싶었다. 그런데 다른 웹 사이트의 글쓰기 기능을 본 결과, 있어도 그만 없어도 그만 같았다. 그래서 일단은 넣진 않는 걸로. ✅ 유효성 검사 글 제목이나 내용 중 ..

커뮤니티 페이지에서 카테고리 버튼을 눌렀을 때 해당하는 카테고리에 맞는 글만 보여지도록 구현해야 했다. 카테고리는 중복 선택이 안 된다는 것을 감안해서 Ant Design의 Radio Button을 활용하기로 했다. 기존에는 Tag 컴포넌트를 사용했었지만 Radio.Button으로 바꿔주었다. axios를 활용해 카테고리 배열을 가져온 후, categories가 undefined가 아니면 map을 돌려서 라디오 버튼을 생성해 준다. 이 때 "모든 글"을 볼 수 있도록 버튼이 하나 더 있어야겠다고 생각했다. 그래서 defaultValue에도 설정해 주었다. onChange 속성에는 함수를 넣어주었다. useState 훅을 활용해서 category를 바꿔 준다. 이렇게 onChange 이벤트가 일어날 때마다..

12월 2일부터 24일, 지금까지 계속 리액트로 미니 프로젝트를 진행 중이다. 중간에 다른 이벤트들이 있어서 잠깐 보류한 적도 있었지만, 그래도 계속해서 달려오고 있고, 31일에 최종 마무리를 해서 완성할 예정이다. 사실 이번 프로젝트는 리액트를 알고 활용하면서 작품을 만든다기보다는 리액트를 배워나가면서 하나의 프로젝트를 완성시켜보는, 공부와 경험을 위한 프로젝트이다. 그렇기 때문에 코드의 품질은 아직 신경쓰지 않고, 우선 기능 구현과 익숙해지는 것을 우선하면서 진행하고 있다. CRUD 기능을 구현하고 있는데, 그중에 Update 기능을 어떻게 구현했는지 풀어서 써 보려고 한다. 사실 기능 구현은 다 했기 때문에 구현만 끝내고 넘어갈 수도 있겠지만, 한 번 정리를 해 두면 나중에 다시 같은 기능을 구현할..