jyoon dev log

문제 발생 리액트 라이브러리 설치 중 npm ERR! code ERESOLVE가 발생했다. npm install --save enzyme enzyme-adapter-react-16 문제 해결 npm install 뒤에 ' --save --legacy-peer-deps ' 를 추가해주면 설치 완료.

단방향 해시 함수 보통 프로그래머는 아래의 두 가지 중 한 가지로 사용자의 패스워드를 저장한다. 단순 텍스트(plain text) 단방향 해시 함수(one-way hash function)의 다이제스트(digest) 단순 텍스트로 패스워드를 저장하는 것은 범죄를 저지르는 것이나 다름없다. 아직도 이런 방법을 사용하고 있다면 지금 당장 변경해야 한다. 단방향 해시 함수는 수학적인 연산을 통해 원본 메시지를 변환하여 암호화된 메시지인 다이제스트를 생성한다. 원본 메시지를 알면 암호화된 메시지를 구하기는 쉽지만 암호화된 메시지로는 원본 메시지를 구할 수 없어야 하며 이를 '단방향성'이라고 한다. 예를 들어 사용자의 패스워드가 "hunter2"라면 이 문자열을 흔히 사용하는 해시 알고리즘인 SHA-256으로 인..

1. 일반적으로 JavaScript를 불러오기 위해 요소를 요소가 끝나기 직전에 배치합니다. 이유가 무엇인가요? 요소가 끝나기 전에 요소를 작성을 보통 하는 이유는 HTML이 다 파싱되고 난 후에 JavaScript을 적용하기 위해서입니다.HTML이 다 불러와지지 않고, JavaScript를 실행(execute)하기 시작하면 JavaScript 프로그램에서 의도했던 바와 다르게 DOM에서 원하는 HTML 요소를 불러오지 못할 수 있습니다. 이를 방지하기 위해서 JavaScript를 불러오기 위한 요소는 요소가 끝나기 직전에 작성합니다. 2. 요소는 왜 요소의 자식 요소여야만 하나요? 요소는 목록 아이템(list item)을 보여주기 위한 요소입니다.(문제를 정의) 그래서 목록을 담는 요소의 자식 요소여야..

이번주는 메인 프로젝트 기획을 하고 설계단계에 들어갔다. 1. 요구 사항 정의서 작성 피그마를 보며 기능 정리를해보니 약 30개 분량의 정의서가 나왔다. 순서가 바꼈지만 이를 기반으로 API 명세서 작성 했다. 2. API 명세서 작성 지난 프리프로젝트 때는 백엔드에서 작성해준 API 명세서를 받아 보기만했는데 같이 정리하고 파라미터, URI 정리해보니 어떤 요소가 어디에 어떻게 들어가는지 이해됐다.

파일상에 useMemo를 사용한 적이 없는데 로컬 호스트가 열리지 않았다. 경고 react.development.js:207 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in t..

⛳️ 본격적으로 프로젝트 들어가기 전 팀 별 상시 커뮤니케이션 진행 방법을 정하면서 노션 페이지를 만들어 기록을 시작했다. 우리 팀은 능이 버섯 아닌 능히 할 수 있는 팀! 지난 금요일 첫 시작날부터 회의를 기록하고 있다. 프로젝트의 기록이 곧 자산이 될거라는 생각으로 가볍게 대화하는 커피챗도 기록하기. 매일 오전 10시에 소통하는 시간을 가져서 이슈가 없더라고 오버 커뮤니케이션을 지향하려고한다. 월요일에는 15분만 이야기 한다는데 1시간을 하기도했다. 대화를 하다보니 이것 저것 물어보고 질문하게 되니 서로 모르는 부분에 대해 알아가고 감을 잡을 수 있었다. 오늘은 요구사항 정의서를 작성했고 스택 오버 플로우 페이지의 메인 기능만 봤는데도 30개 가량의 리스트가 나왔다. 👀 이제 진짜 시작! ⛳️ 프로..

Git branch 브랜칭(branching)은 기존 개발중인 메인 개발 코드를 그대로 복사하여 새로운 기능 개발을 메인 개발 코드를 건드리지 않고 할 수 있는 버전 관리 기법이다. 기존 main 브랜치에서의 작업은 유지하고 새로운 feature 브랜치에서 자유롭게 코드를 추가 및 삭제할 수 있다. 브랜치 생성하기 / 변경하기 (git switch) 새로운 브랜치로 Git이 바라보는 곳, HEAD를 변경하는 작업을 switch라고 한다. 브랜치를 생성할 때는 생성(create)의 의미로 -c 를 붙인다. 기존에 있는 브랜치로 옮길 때는 붙이지 않는다. # feature라는 브랜치를 새로 생성하는 경우, -c를 붙입니다. git switch -c feature # checkout이라는 명령어도 사용할 수..

🌐 Github 리포지토리에 꼭 필요한 파일 README.md Pre-Project Github 리포지토리 README.md 파일은 아래 정보를 꼭 포함해야 한다. 프로젝트 이름 프로젝트 핵심 기능 소개 팀원 소개 .gitignore gitignore dotfile은 git으로 관리하지 않는 파일 모음이다. 여기에는 개인이 따로 관리해야 하는 중요한 secret token이나, 다른 동료와 공유할 필요가 없는 설정 파일, 그 외 공유할 필요 없는 파일을 기록하면 git이 이것을 파악하지 않고, push 할 때도 github 리포지토리에 push되지 않는다. LICENSE 해당 코드의 라이센스를 표기합니다. 깃허브에 public하게 공개된 리포지토리도 라이센스에 따라서 사용을 할 수도 있고, 하지 못 할 ..

Section4를 진행하면서 느꼈던 점 섹션3는 정말 순식간에 지나갔다. 섹션4 오니까 아니 언제...벌써 .. 시간이 ...이렇게.. 흘렀지...? 모먼트가 됐다. 마치 방학 막바지에 개학을 앞둔 학생처럼.. 솜사탕을 물에 씻은 너구리 처럼.. 첫시간은 반응형 웹을 구현해봤다. 미디어 쿼리로 화면 크기에 따라서 인터랙티브하게 변하는 반응형 웹이었는데 다들 능력자인지 유튜브 클론 코딩에 애플 클론 코딩에 3D 구현에.. 입이 떡 벌어지는 결과물이 나와서 넘 대단하고 신기했다. 우리팀도 잘했다고 생각했는데...!! 번들링과 웹팩, 리액트 심화에 들어가고 갑자기 서터레스를 받았는지 온 몸에 두드러기가 나서 밤에 응급실에 갔다. 음식 잘 못먹은 줄 알고 단순 식중독이라고 생각했는데 알르레기 검사해본 결과 음식..

Section3를 진행하면서 느꼈던점 자료구조 알고리즘 재귀부터 시작했던 섹션3. 재귀 파트하면 까도까도 나오는 마트료시카가 기억에 남는다. (실시간 세션에서 코스 크루 아윤님이 귀여운 그림으로 풀이해주셨는데 귀여운 그림 덕분인지 지루하지 않았다.) 페어와 코플릿 15문제를 풀면서 재귀 마스터가 되는 줄 알았지만~ 알고리즘은 너무 어렵다.. 재귀는 JSON 구조가 재귀 함수를 사용할 수 있는 트리 구조를 해결하기 위해 배우는 기초였고 JSON.stringify 와 JSON.parse 를 사용하여 자바스크립트 값과 JSON을 넘나드는 스프린트 시간을 가졌다. 마트료시카에 절여진 탓에 다음 유닛인 [사용자 친화 웹] UI/UX에서 피그마 시간이 너무 재밌었다. 유일한 엔터테이너 시간 같았달까. 포토샵과 일러..