RAILEND
코드숨_React_10주차_주간회고
Facts (사실, 객관) 코드숨 프로젝트 2주차 메인 페이지 및 결과 페이지 구현 Feelings (느낌, 주관) 생활 패턴이 엉망이다. 체력과 함께 집중력 저하를 느꼈던 한 주였다. 오래 달리기 위해선 균형을 잡을 필요가 있다. 라우터 basename 속성을 통해 base url을 설정했다. 로컬 환경과는 달리, 배포 페이지에서 빈 화면을 출력했기 때문에 필요한 작업이었다. base url을 문자열이 아닌 환경변수로 넣어주고 싶었는데 결국 실패했다. 깃허브 레포 설정에서 'Environment secrets'이나 'Repository secrets'에 변수를 설정해봤지만 여전히 환경변수를 찾지 못했다. 아직 정확한 방법을 모르겠다. 로컬에서도 환경 변수 설정이 필요하다. React Create App..
코드숨_React_9주차_주간회고
Facts (사실, 객관) 코드숨 개인 프로젝트 시작 Feelings (느낌, 주관) 프로젝트의 배포 환경 구축에 시간이 많이 걸렸다. firebase의 호스팅을 고려했다가 더 심플해 보이는 github page를 선택했다. React Create App 없이 개발 환경을 구축하다 보니 gh-pages 라이브러리 활용이 어려웠다. github action을 통한 배포 방법을 찾아서 자동으로 배포되도록 하는데 성공했다. 자동화가 이루어지니 왠지 모르게 기분이 좋았다. 도커를 사용하고 싶었는데 그 방법은 결국 찾지 못했다. 개발 환경 구축은 여전히 어렵다. 작업 단위를 작게 가져가는 것이 쉽지 않다. 중간에 바꿔야 하는 것들이나 생기거나 하고 싶은 것이 생기면 딴 길로 새는 경우가 있다. 계획했던 작업 범위..
코드숨_React_8주차_주간회고
Facts (사실, 객관) 코드숨 8주차 강의듣기 - 더 나아가기 코드숨 8주차 과제1: 레스토랑 앱 꾸미기 Feelings (느낌, 주관) 벌써 8주가 흘렀다. 배운 것을 헛되게 하고 싶지 않아서 틈틈이 복습을 하고 있다. 막상 개발자를 목표로 삼고 나니까 코드숨 이전에 잉여롭게 갈등하며 보냈던 세 달정도의 시간이 너무 아깝게 느껴졌다. 해야될 것들이 많다고 느끼고 있는 요즘이다. 시간 분배를 잘해서 하루하루를 성실하게 준비해야 한다. Findings (배운 점) emotion으로 CSS-in-JS를 경험했다. 스타일시트를 별도로 관리하는 것이 더 좋다고 생각했었는데, 여러 컴포넌트가 분리되는 상황에서는 이 방식이 더 적합할 수도 있겠다라는 생각을 했다. 경험을 더 해보면 장단점을 더 느낄 수 있을 것..
react-redux mock example
react-redux 모듈을 모킹하기 위해 '/__mocks__' 디렉토리를 생성하고 'react-redux.js'를 생성한다. // path: /__mocks__/react-redux.js export const useDispatch = jest.fn(); export const useSelector = jest.fn((selector) => selector({})); 테스트의 대상이 되는 컴포넌트는 아래와 같다. import { useDispatch, useSelector } from 'react-redux'; import { updateCheckedItem } from '../actions'; export default function App() { const dispatch = useDispatc..
Jest fetch mock example
// api.test.js import { fetchWeather, fetchLocation, } from './api'; import WEATHER from '../../fixtures/weather'; import LOCATION from '../../fixtures/location'; describe('api', () => { const mockFetch = (data) => { global.fetch = jest.fn().mockResolvedValue({ async json() { return data; }, }); }; describe('fetchWeather', () => { beforeEach(() => { mockFetch(WEATHER); }); it('returns weather', ..
테스트 시나리오
describe - context - it 단일 테스트라면 test를 사용, 여러 개의 테스트라면 describe - it 구조를 사용한다. describe는 테스트의 대상, it은 테스트의 내용에 서술한다. 문맥에 따라 서술되는 내용이 달라진다면 context를 사용할 수 있다. 특히 그 문맥이 서로 상반되는 것이라면 context를 적극적으로 활용하여, decsribe - context - it 구조로 테스트 시나리오를 작성하는 것이 좋다. Depth depth가 너무 깊은 것은 리팩터링을 해야 하는 강력한 신호로 간주해야 한다. 테스트 코드는 컴포넌트의 설명서와 같다. 그렇다면 테스트의 전체적 구성은 앱을 설계하는 것에 직결된다. 단일 테스트가 하나의 책임을 갖도록 작성하고 테스트만 보고도 각각의 ..
의미있는 마크업이란 무엇일까?
, 과 같은 요소는 특정한 의미를 나타내지 않는다. MDN은 을 다음과 같이 기술한다. HTML 요소는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 lang 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다. 또한 마찬가지로 통용 컨테이너로서 별다른 의미를 갖고 있지 않다. 이러한 태그들은 목적 또는 의도에 국한되지 않고 사용하기 편리하다는 장점이 있다. 하지만 코딩을 배우다 보면 의미있는 마크업을 해야 한다는 말을 자주 들었을 것이다. 왜 그럴까? 예를 들어, 은 '최상위 제목'이라는 의미가 담긴 태그 요소이다. 대신에 을 사용한다면 그 요소가 어떤 목적을 갖고 있는지 파악하기 어려울 것이다. 또는 페이지의 ..
코드숨_React_7주차_주간회고
Facts (사실, 객관) 코드숨 7주차 강의 듣기 - 로그인 과제 1: 레스토랑 로그인 페이지 및 리뷰 작성 페이지 구현하기 Feelings (느낌, 주관) 벌써 7주차도 끝났다. 모든 내용이 새로웠던 나로서는 배울 것들이 참 많은 시간이었다. 그러나 내 것으로 만들기 위한 충분한 노력을 기울였던가라고 자문해본다면 자신 있게 대답하지는 못할 것 같다. 남은 시간 동안 최종 과제를 진행하며 배운 것을 최대한 적용해봐야겠다. '왜'에 대한 질문이 너무 부족하다고 느낀다. 왜 이 도구를 써야 하는지, 왜 이렇게 코드를 작성하는지, 왜 이 테스트를 작성하는지 등등에 대한 충분한 고려가 없다. 기존 코드를 따라 관성적으로 작성할 때가 많다. 코딩테스트 준비도 해야만 할 것 같아 알고리즘을 풀어봤다. 역시 너무 ..
2021-09-29 TIL
Facts (사실, 객관) 코드숨 7주차 과정 시작 Feelings (느낌, 주관) 어느덧 코드숨 리액트 과정 7주차에 접어들었다. 그동안 충분히 해내었는지 스스로에게 되물어 보면 그렇다라고는 할 수 없을 것 같다. 항상 그렇듯이 적당히 했고, 사실은 적당한 수준에 미치지 못할 지도 모른다. 돌이켜 보면 깊은 학습보다는 주어지는 과제 해결에 치중했던 것 같다. 아직 남은 주간이 많다. 최종 과제를 진행하면서 그동안 배웠던 것을 충분히 써봐야 겠다. 오늘 유난히 심리상태가 무너졌다. 오전에만 해도 기분이 나쁘지 않은 편이었는데 일상에서 느끼는 몇몇 지점들이 나를 우울하게 했다. 사실 크게 바뀐 것은 없는데 여전히 특정 주제에 예민하게 느끼고 있다. 이건 극복해야 할 문제다. 같은 대상에 대해 좀 다르게 생..