React를 이제 배우기 시작한 단계에서 야무 쌤께서 강조하셨던 순수성, 그리고 이를 위해 Side Effect를 어떻게 처리해야하는지, 아직 정확하게 설명할 순 없기에 이번 기회에 정리해보고, 두고두고 보려한다. 순수성(Purity) 리액트에서 순수성을 강조하는 것은 리액트 동작 원칙과 코드 효율성 향상 사이의 밀접한 관계를 반영한 것이라고 한다. 순수함이란? 보통 순수 함수를 말하며, 순수 함수를 사용하면 어플리케이션의 일관성 및 예측 가능성이 높아지고, 코드 재사용이 쉬워져서 개발 및 유지보수 프로세스를 효율적으로 만들어 준다는 차원에서 권장된다. 순수 함수: 동일 입력값에 따라 동일 출력값을 반환하는 함수 + 함수의 외부영역에 부수효과(Side Effect)가 없는 함수 부수 효과(Side Eff..
멋쟁이 사자처럼 프론트엔드 스쿨 어느덧 10주차에 이르렀다. 자바스크립트 프로젝트를 앞두고 마지막으로 비동기 v통신을 중심적으로 배우고 있는데, 그에 대한 정리를 해보고자 한다. 동기 통신 과 비동기 통신 Ajax를 다루기에 앞서, 비동기 통신이 왜 필요한 지에 대해 먼저 짚어보고자 한다. 기본적으로,웹에서는 요청과 응답이 순차적으로 이루어지는 방식(동기 통신 방식)을 이룬다. 동기 통신 방식 클라이언트가 서버에 데이터를 요청 => 서버는 해당 요청 처리 후 데이터를 응답 => 클라이언트는 서버의 응답을 받을 때까지 대기 즉, 요청과 응답이 완전히 끝날 때 까지 다음 동작을 실행하지 않고 대기한다. 이런 순서로 작동하는 동기 통신의 단점으로, 1. 응답 대기시간 증가: 서버에서 응답 시간이 오래 걸리는 ..
멋사 프론트엔드 스쿨 6기 과정 중 첫 프로젝트(HTML + CSS)를 하던 중, SEO도 고려할 것이라는 조건이 걸려 있어서 찾던 중 메타태그를 적절히 활용해야 접근성 측면에서 성능이 개선된다는 사실을 알았다. 우리는 흔히 html파일을 만들고 !+Tab만 누르면 기본적으로 위와 같은 html 기본 골격을 가진 자동완성을 이용하곤 하지만, head 내에 위치한 meta태그를 보며, 인코딩 방식이 UTF-8이고, 뷰포트를 장치 화면 너비에 맞게 설정한다라는 사실 외에 meta 태그에 대한 궁금증을 품어본 적이 없었던 것 같다. 프로젝트에서는 충분히 메타태그를 공부할 시간없이 구글링을 통해 open graph를 이용해 단순히 해결했지만, 프로젝트가 끝난 김에, 사용했던 메타태그를 기반으로 짧게나마 정리해보..
독학으로는 해결할 수 없고, 꼭 필요한 프로젝트. 그 중에서도 Git을 잘 활용해야하는 것은 당연한 일인 것 같다.멋사에서 처음으로 프로젝트(HTML+CSS)를 진행하며, 있었던 Git 활용을 어떻게 했었는지 적어보고자 한다.Git으로 협업하기1. 프로젝트용 저장소를 개설하고 기본 세팅을 해둔다. - 스크럼마스터(조장) 2. 해당 저장소를 fork후 clone한다. - 조원 3. git remote add \[별칭\] \[프로젝트용 저장소\] - 조원=> fork함으로써 조원 개인의 저장소url을 origin으로 설정되기에, 프로젝트용 저장소와 소통하기 위해서는 remote를 추가해줘야한다. // 예시: git remote add upstream "url" 4. git remote update - 조원=..
