전체 글
-
JS - Map개발 2022. 4. 13. 21:00
학습목표 ES6 이후 등장한 Map 객체가 Object와 어떤 차이가 있는지 인지하고 기본 사용법을 익혀보자. Object 자바스크립트에서 객체를 선언하고, 접근할때는 다음과 같은 방법으로 사용한다. 선언 let userObj = new Object() let userObj = {} 대체로 생성자로 선언하는 방식보다 리터럴 방식으로 많이 사용된다. 선언된 객체에 값을 정의하는 방식은 아래와 같다. 속성과 값 정의 userObj.name = 'LIMCHANSOO'; userObj.email = 'cslim0527@gmail.com'; userObj.phone = '01012341234' 선언과 속성과 값을 동시에 정의하기 위해서는 보통 리터럴 방식으로 객체 안의 key-value 쌍으로 값을 정의 할 수 ..
-
React - react hook form개발 2022. 3. 31. 23:32
학습목표 react-hook-form 패키지를 통해서 회원가입, 로그인 등 폼 양식을 작성하는 방법에 대해 알아보자. React Hook Form 이란 const Signup = (props) => { const {history} = props; //nickname, id, pwd const [nickname, set_nickname] = useState(""); const [id, set_id] = useState(""); const [pw, set_pw] = useState(""); const [pwCheck, set_pwCheck] = useState(""); //err message const [err_nickname, setErr_nickname] = useState(""); const [err..
-
TIL - CSS Module개발 2022. 3. 28. 00:40
CSS Module 방식 사용하기 CSS를 모듈 방식으로 클래스를 불러와 사용 할 수 있는 방법이다. 사용방법 CSS 파일 만들기 // 파일명 [ModuleFileName].module.css CSS Module 방식으로 작업 할 때는 작성 할 [파일명].module.css 으로 파일을 생성해야 한다. CSS 불러와 적용하기 먼저 CSS 파일 module 방식에 맞게 작성한다. // Home.module.css 파일 .wrapper { margin: 0 auto; max-width: 1024px; text-align: center; } .logo { color: orangered; } .kebab-case { color: goldenrod; } .camelCase { color: green; } .siz..
-
TIL - Next.js 연습 프로젝트 #2개발 2022. 3. 20. 20:33
학습 목표 Next.js 를 사용하여 간단한 상품 페이지를 만들어 보는 것이 목표 진행 상황 getServerSideProps 와 getStaticProps를 통한 Pre-rendering 작업 getStaticPaths의 활용으로 정적 파일 제공하기 isFallback 상태 대응방법과 getStaticProps에서 API fetching하여 객체 다루기 API Routes로 로그인 구현하기 진행 레포지터리 https://github.com/cslim0527/cna_practice GitHub - cslim0527/cna_practice: create-next-app practice create-next-app practice. Contribute to cslim0527/cna_practice devel..
-
TIL - Recoil 기초 튜토리얼개발 2022. 3. 18. 01:23
학습 목표 Recoil 기본 동작을 이해하기 위한 간단한 App 코딩해보기 학습 내용 Recoil State 추가 및 외부 컴포넌트와 상태 공유 atom: 전역관리 상태값 정의 useRecoilState: atom에 등록된 상태값과 set 함수 반환 useReocilValue: atom에 등록된 상태값 접근 selector를 사용한 atom 데이터 가공 selector는 atom 상태값에 접근하여 렌더링 하기 전 로직을 추가 할 수 있으며 미들웨어 처럼 비동기 로직 또한 selector에서 처리 가능하다. 단, selector는 write 할 수 없기 때문에 useRecoilValue로만 접근 가능하다. 진행 레포지터리 https://github.com/cslim0527/recoil_practice Gi..
-
TIL - Next.js 연습 프로젝트 #1개발 2022. 3. 18. 01:10
학습 목표 Next.js 를 사용하여 간단한 상품 페이지를 만들어 보는 것이 목표 진행 상황 Create Next App 프로젝트 세팅 https://makeup-api.herokuapp.com/ 화장품 API를 통한 데이터 활용 상품 리스트 페이지, 상품 상세 페이지 제작 다음 진도 https://www.youtube.com/watch?v=hvkeK71WXb8 진행 레포지터리 https://github.com/cslim0527/cna_practice GitHub - cslim0527/cna_practice: create-next-app practice create-next-app practice. Contribute to cslim0527/cna_practice development by creatin..
-
TIL - OKR/KPI업무상식 2022. 3. 17. 15:46
개발팀 OKR/KPI 그리고 업무 회사에서 목표와 목표 달성을 위한 내용은 중요하다. 이를테면 한 부서에서 프로젝트의 계획을 수립하고 그에 따른 성과를 수치화 하는 것으로 평가를 할 수가 있겠다. 하지만, 개발부서는 수치화 할 수 있는 지표가 서버의 상황, 응답속도 등이 대부분이고 단순히 ~한 결과물을 만들었다, ~한 결과물을 언제까지 개선했다. 등 간단한 설정만 하게되는데 이는 OKR/KPI 방법론에서 권장하지 않는 설정이 된다. 때문에 내가 몸담고 있는 회사에서는 형상관리 스시템인 Github의 마일스톤과 이슈 시스템을 지표로 개개인의 목표와 결과물을 수치화하여 지표로서 활용한다. OKR: Objective Key Result OKR은 Objective 와 Key Result로 구성되어있다. 두 요소..
-
TIL - 얄팍한 GraphQL & Apollo 학습일지개발 2022. 3. 15. 22:01
얄팍한 GraphQL 과 Apollo 강좌를 통한 학습 얄팍한 GraphQL & Apollo 강좌 학습목표 GraphQL이 무엇인지, 왜 사용하는지에 대해 이해하고 실무 프로젝트에 도입을 결정할때 타당성을 찾기 위함. 목차 기존의 REST API 한계와 GraphQL 강점 Apollo 서버 구축 React와 Apollo Client useQuery useMutation 학습 후기 기존의 REST API 한계와 GraphQL 강점 REST API는 데이터를 주고받는 주체들간 약속된 형식으로 클라이언트가 필요한 데이터 꾸러미를 서버에 요청 할 수 있다. 요청 형식URI GET localhost:3000/api/team GET localhost:3000/api/team/{id 번호} GET localhost:..