Moon Work

시작하며 Swift를 배우면서 가장 흥미로웠던 부분은 이 protocol이었다. typescript에서 제공하는 type과 interface을 통한 다형성과 유연성을 제공해주어 기존 js가 가진 불안한을 해소시켜 주었었다. 이번 protocol 정리와 다음에 정리한 extension을 통해 이후에 나올 Swift의 POP를 가능하게 하는지 이해할 수 있었으면 좋겠다. Protocol 프로토콜은 지켜야할 규칙, 즉 인터페이스로 struct, class, enum 등이 가져야 할 메소드나 프로퍼티의 청사진을 정의한다. 특정 기능을 실행하기 위해 프로토콜을 채택하고 그 요구사람을 구현하면 "해당 프로토콜을 준수한다"라고 말할 수 있다. Protocol 구조와 Protocol 채택 //프로토콜 정의 protoc..

함수형 프로그래밍 함수형 프로그래밍은 추상화와 함수의 모듈화를 통해 함수 단위의 사용과 코드의 재사용성을 높일 수 있는 프로그래밍 방식이다. 함수형 프로그래밍에서는 함수를 인자로 받고 함수를 다시 리턴하는 고차함수의 개념을 사용한다. 함수형 프로그래밍의 특징 순수함수 순수한수는 동일한 입력에 항상 동일한 값을 반환한다. 함수 내부의 값이 함수 외부의 값에 대한 SideEffect를 만들지 않는다. 비상태, 불변성 함수형 프로그래밍에서는 외부의 값을 직접 변경하는 것이 아닌 그 불변성을 유지 하기 위해 원본을 복사해서 그 일부를 변경해서 작업을 한다. React의 State 상태 변경과 동일하게 적용 선언형 함수 명령형 프로그래밍은 무엇을 어떻게 할 것인가레 주목하고, 선언형 프로그래밍은 무엇을 할 것인가..

시작하며 이전부터 유튜브의 skeleton UI를 좋아했다. 이미지와 영상이 대부분이라 로딩시간이 오래 걸리는데 아래와 같은 skeleton ui는 사용자가 대기하는 시간을 더 빠르게 느끼게 해주고 그 다음에 나올 화면에 대한 예측이 가능하게함으로 사용자 경험을 높일 수 있다. Skeleton UI skeleton UI는 사용자에게 화면을 보여주기 전에 나타나는 로딩 에니메이션으로 단순히 돌아가는 loading 애니메이션보다 더 나은 사용자 경험을 제공한다. 하지만 무조건 skeleton UI를 적용하는 것이 좋은 것은 아니다. 닐슨 로먼에서 발표한 자료에서는 1초 이하로 걸리는 작업에 대해 skeleton UI뿐 아니라 loading 상태를 나타내는 Progress Indicator를 보여주는 것은 오..

code 1 error 기존에 다른 호스팅 사이트를 사용하다가 netlify를 통해 호스팅을 시도해보려 했는데 계속 다음과 같은 에러가 발생하였다. 해결 build command에 문제가 있었다. 기존 CRA로 만든 앱의 package.json에 있는 command는 아래와 같이 생겼다. "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, npm run build command를 netlify에서 진행하는데 이때 build command 앞에 CI= 를 붙이면 정상적으로 netlify에서 build가 진행되..

시작하며개발을 어느정도 공부하면서 지금은 네이밍 규칙에 익숙해졌지만 처음에는 변수, 디렉토리, 파일 등의 이름이 제각각인 것 같아서 그 규칙을 파악하지 못해 헷갈릴 때가 정말 많았다. 코딩 컨벤션에 대한 내용을 공부하면서 네이밍 규칙에 대한 내용을 정리해보려 한다. 코딩 컨벤션이란개발을 하는데 코드 작성 규칙 없이 매번 다르게 작성할 경우 일관성도 떨어지고 가독성도 떨어지게 된다. 코딩 컨벤션을 통해 코드 작성 방식에 대한 약속, 규칙을 정해서 일관성과 안정성을 높일 수 있다. 이 글에서는 코딩 컨벤션의 네이밍 부분에 대해 다뤄보려 한다. Naming 종류종류설명예시kebab-case소문자 사용 | 띄어쓰기를 - 로 구분hello-worldlowerCamelCase소문자 사용 | 띄어쓰기를 대문자로 구..

시작하며 전역 상태 관리를 위해 redux를 공부해봤지만 redux가 작은 프로젝트에서 사용되기에는 초기에 구축에 있어서 피로가 상당했다. 그렇지만 가끔 로그인한 유저, themeColor와 같이 계속 prop을 넘겨주기에는 props drilling이 발생했다. redux와 같이 본격적으로 전역 상태 관리를 하지 않고 몇개의 변수에 대해 context API를 사용해서 props drilling을 줄이고자 context API에 대한 내용을 정리하게 되었다. Context API란 Context는 리엑트 컴포넌트 간에 값을 공유할 수 있게 도와준다. 주로 Context는 전역에서 필요한 값을 공유할 때 사용되지만 부분적인 역역에서 사용할 수 있다. 기존 Props를 통한 전달이 아닌 다른 방법 Cont..

시작하며매번 헷갈리는 useMemo, useCallback 이번 포스팅으로 머리에 타투로 새긴다. 메모이제이션수행한 연산값을 저장해두고 재사용함으로 중복연산을 피해서 성능 최적화를 할 수 있는 방법useMemo와 useCallback 모두 메모이제이션을 위한 최적화를 위해 사용한다. 리엑트에서 re-render하는 경우자신의 state가 변경된 경우부모로부터 받은 props가 변경 될 경우부모 컴포넌트가 리렌더링 될 때 useMemo: 값을 메모이제이션useMemo(()=>fn, deps)deps가 변할 때만 fn을 실행시켜서 값을 반환한다. useCallback: 함수를 메모이제이션useCallback(fn, deps)함수와는 상관없는 값이 변할 때 함수 컴포넌트가 불필요하게 업데이트 하는 것을 방지..

끝나지 않는 Cors 에러 서버에 대한 개념도 모를 때 부터 Cors는 나를 괴롭게 하였지만 이렇게 가끔씩 나타나는 이 에러는 등장만으로도 속에서 불이 나곤한다. jwt 토큰을 통한 XSS와 CSRF 공격 방어를 공부하는데 이 녀석을 또 만났는데 cors()를 적용해도 에러가 발생하는 이유를 정리해본다. 에러 코드 Client axios.defaults.withCredentials = true axios.post('http://localhost:8080/login', data) .then(response => ...) .catch(error => ...) Server ... const app = express(); const server = http.createServer(app); const PORT ..