전체 글123 👋국비 후기 모음👋 (이력도 확인 가능!) 테오의 스프린트 12기 후기 ** 후기, 회고, 프로젝트 순으로 작성했습니다. 후기 생략하실 분들은 아래로 쭈욱 내려주세요! 짧다면 짧고 길다면 길었던 10/12 ~ 10/17의 기록. 6일간의 테오의 스프린트 12기 후기를 작성해본다. 프론트엔드 개발자로 전향하기 위해 우연히 알게된 테오의 오픈채팅방에 들어갔다. 그렇게 채팅방 염탐을 하던 중 테오의 스프린트 9기의 결과물들이 올라왔고 나도 신청을 해봐야겠다고 다짐했다. 10기 신청은 아직 실력이 부족하다는 판단을 했었고 11기 신청을 하려했지만.. 너무 바쁜 나머지 신청을 못해서 이번엔 꼭 하리라 다짐하고 12기는 언제쯤 하냐고 테오한테 물어본 뒤 그 시기쯤에는 카톡을 매일 확인했던 것 같다. 그렇게 기다리다가 올라오자마자 처음 타자로 신청 Get!! My nickname is .. 2022. 10. 19. Memoization (React.memo, useCallback, useMemo) 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. - 출처 위키피디아 React에서는 메모이제이션을 세 가지 방식으로 할 수 있다. React.memo() - HOC useCallback() - Hook useMemo() - Hook React.memo React.memo는 HOC다. 동일한 props로 동일한 렌더링을 한다면, React.memo를 사용하여 성능 향상을 누릴 수 있다. memo를 사용하면 React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용한다. App.js import Memo from './component.. 2022. 9. 28. 고차 컴포넌트 (HOC)란? Hook 예제 HOC를 공부하려다 보니 옛날 예제(클래스형 컴포넌트)들로 나와있다. 요즘엔 거의 다 Hook(함수형 컴포넌트)으로 코딩을 하기에 예제 이해하는데에 약간의 어려움이 있었다. 그래서 Hook으로 정리해보려고 한다. HOC란? 공식문서 - HOC(Higher-Order Components) 한 줄로 표현하자면 이렇다. 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수.(재사용성) 공식문서를 완벽히 이해하면 좋겠지만 클래스형 컴포넌트로 짜여 있어 한번에 와닿기가 힘들었다. 한 번 이해하고 나면 아주 쉬운 개념이라고 할 수 있다. 공식 문서의 예제와는 조금 다르게 더 쉬운 예제로 설명하고자 한다. 주의! 아래의 설명들은 무지막지하게 초간단 설명이므로 자세한 건 공식문서를 참고 App.js impor.. 2022. 9. 19. Recoil 직접 구현하기 (동작원리 이해) Recoil을 쓰다보니 직접 구현해보면 더 잘 이해할 수 있을거 같아서 자료를 찾아보았다. Atoms 먼저 Atom class를 선언해보자 class Atom { constructor(private value: T) {} // setter update(value: T) { this.value = value; } // getter snapshot(): T { return this.value; } } Recoil은 “atoms”이란 개념을 채택한다. Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다. atom이 업데이트 되면 각각의 구독된 컴포넌트들은 새로운 값을 반영하여 다시 렌더링된다. 수정된 Atom class type Disconnecter = { disconnect: () => void };.. 2022. 9. 14. 개발자 1년차 끝. 음... 너무 오랜만에 쓰니까 뭘 써야할지 모르겠다. ㅎㅎ.. 이 글을 쓰는 오늘은 22년 7월 18일. 21년 7월 19일 개발자로 첫 걸음을 한 날로부터 정확히 365일째 되는 날이다. 내일부터는 1년차 개발자가 아닌 2년차 개발자로 시작을 하게 된다. 날짜에 큰 의미를 둬봤자 뭐하겠냐만은.. 내 진로가 정해진 시점부터는 하나하나가 나에겐 크게 와닿는다. 20년 4월 웹퍼블리셔 국비를 시작으로 21년 1월 웹개발 국비, 21년 7월 취뽀 그리고 오늘까지 나름 열심히 달려온 것 같다. 1년동안 뭐했는지 적기에는 이미 [2021년 회고]에 자세히 적어놨다. 그로부터 오늘까지 추가로 뭘 했는지 정리하면 좋을거 같아 블로그를 켰다. 뭐 했어? 독립 청구팀에서 개발 JS, React.js 공부 방통대 1학년 .. 2022. 7. 18. [Git] commit이나 fetch를 해도 확인이 안될 때 // local과 remote sync가 안될 때... upstream을 확인해보자 간만에 기분 좋은 블로그를 쓰게 생겼다...!!! 문제가 된 부분과 해결방법은 아래 부분에 쓰겠습니다..!! 급하신 분은 바로 스크롤 다운 ㄱㄱ~! 우선 첫번째..! https://okky.kr/article/1168362 OKKY | git commit push관련 질문드립니다 선배님들! 1111111- 위의 폴더에서 코드 수정 후 커밋을 한 상태입니다. push 하기 전엔 저렇게 위화살표 숫자가 뜹니다. push하고 나면 저 숫자가 사라집니다. 보통은 이렇게 동작을 했습니다. 2222222- 여기 보 okky.kr 내가 질문한 글이다. 작성일 22.02.28. 이 때 해결 못 함... ㅠ 그렇게 그냥 좋은게 좋은거지.. 하는 마음으로 넘어감. 두번째. (사진 비율이 이상해서 참고사진 첨부함.) 작성일.. 2022. 5. 10. TOST 스터디 3기 후기. TOST 스터디 3기 후기. 기간 : 2022.01.10 ~ 2022.03.09 3월부터 방통대 시작이라 그전에 뭘 할 수 있을까 하다가 okky사이트에 올라온 스터디 매칭 스타트업 홍보글을 보게 되었다. 꽤 지난 일이라 정확히는 기억 안 나지만 12월 초 쯔음 모집을 했고 1월 초에 발표가 났었던 것 같다. 시작 스터디 모집 카테고리가 여러개였다. 토익, 취업스터디, 영어회화, 오픽, 코딩 등등.. 그중에 코딩을 당연히 선택했고 신청서를 작성했다. 신청서 질문들이 되게 많았던 것 같고 코딩 관련 카테고리에서는 코딩 테스트, 파이썬 기초문법 밖에 없었다. 그래서 신청서 마지막 즈음 뭘 하고 싶냐?라는 질문에 프로젝트 스터디도 있었으면 좋겠다고 작성했던 것 같다. 그런 사람들이 몇 있었는지 스터디 3기에서.. 2022. 3. 20. [JS] 프로그래머스 - 기능개발 내 풀이 function solution(pro, speeds) { let answer = []; let day = []; for (let i = 0; i 0) { let cnt = 1; for (let i = 1; i = day[i]) { cnt++; continue; } answer.push(cnt); day.splice(0, cnt); break; } } return answer; } 해설 처음에 문제 자체를 이해하기가 어려웠다. 아니 일단 문제를 읽기가 너무 귀찮아서 눈에 잘 안 들어왔다. 뭔가 기존에 프로그래머스 2단계를 풀 땐 거의.. 2022. 2. 20. [JS] 프로그래머스 - 프린터 내 풀이 function solution(pri, loc) { let prIndex = pri.map((a, index) => [a, index + 1]); let prCopy = prIndex.slice(); let obj = []; while (prIndex.length > 0) { for (let i = 0; i < prIndex.length; i++) { if (prIndex[0][0] < prIndex[i][0]) { let first = prIndex.shift(); prIndex.push(first); i = 0; } } obj.push(prIndex.shift()); } for (let i = 0; i < obj.length; i++) { if (prCopy[loc] === obj[i]) .. 2022. 2. 17. 이전 1 2 3 4 ··· 14 다음
