전체 글

드디어..! LeafyLog 메인 페이지 코딩을 시작했다. 위는 최종 디자인 시안이다. 주요 기술은 next.js와 typescript이다. 문제점1 프로젝트를 진행하면서 어려웠던 점은 next.js와 typescript였다. 나는 TopDown방식으로 공부하는 것을 좋아해서 이것들의 강의를 먼저 학습한 후 프로젝트를 만들기 보다 일단 이 둘로 프로젝트를 만드는 것을 시작했다. 초반부터 styled-components가 새로고침하면 동작하지 않는 등의 자잘한 문제가 있었다. 또한 타입스크립트를 쓰니 props을 넘길 때마다 무슨 타입인지 지정해줘야 하니 여간 번거로운게 아니었다. Typescript에 장점을 어느정도 알고 있음에도 불구하고 당장 프로젝트를 할 때 시간이 2배로 걸리니 이걸 왜 써야 하는가..

충남대 sw아카데미의 교육생으로서 팀프로젝트를 진행하게 되었다. 처음부터 nextjs를 쓰는 데 어려움 중 하나는 url에 직접 https://localhost:3000과 같이 입력하면 전체 페이지에 스타일이 적용되지 않는 문제가 있었다. 글을 쓰는 와중에 2가지 오류 중 한가지 오류는 찾을 수 있었다. 위와 같이 해결했고, 나머지 오류는 아래와 같다. 아니다.. 위에 것도 다시 오류가 뜬다. 해결책을 찾음 이는 nextjs에서 ssr을 할 때 styled component가 반영이 안 되어서 라고 한다. https://tesseractjh.tistory.com/164 [Next.js] Next.js에서 Prop `className` did not match 경고가 뜨는 이유 이 글은 Prop `prop..

처음에는 완전 나이브 하게 코드를 짰었다. for i in range(n): for j in range(n): if i==j: continue if len(phone_book[i]) > len(phone_book[j]):continue if phone_book[i] == phone_book[j][0:len(phone_book[i])]: print(phone_book[i]) return False 하지만 시간복잡도가 O(N^2)이다 보니 효율성 테스트에서 떨어지는 문제가 발생했다. def solution(phone_book): n = len(phone_book) phone_book.sort() for i in range(1,n): if phone_book[i-1] in phone_book[i] return..

파일의경로가 url 주소가 되는 기능 pages에 위와 같이 구성 products/1 와 같이 접근 가능 Link는 클릭했을 때 컴포넌트가 '준비'되면 페이지가 넘어감 a태그를 사용하면 페이지를 전부 다 새로 받아옴. Link로 외부 링크 연결할 때는 a태그 처럼 동작함

드디어 완성도 있는 개인 프로젝트를 만들 기회가 생겼다. 사실, 멘토님의 도움이 없었으면 시작하지도 않았을 프로젝트이다. 이번 기회에 많이 배워야지! 처음부터 내겐 도전적인 과제를 주셨다. 한 번도 피그마를 사용한 경험이 없는데 피그마로 와이어 프레임을 제작하라는 숙제였다. 막막했지만 바로 시작하고 어느정도 만족한 결과물이 나왔다. 깃허브 잔디밭을 보며 뿌듯했던 경험 다들 있을 것이다. 커밋 뿐만이 아니라 여러 학습들을 기록하고 이를 잔디밭으로 볼 수 있다면 동기부여에도 도움이 될 것고 무엇보다 자신이 학습한 내용과 목표를 비교할 수 있어 메타인지에도 도움이 될 것이다. (정직하게 성실히 기록한다는 가정하에) 목표 설정 기능과 진척도 기록 기능 그리고 목표에 대한 진척도의 퍼센테이지를 알려주는 기능. 그..

기대하던 멘토링 수업을 받게 되었다. 프로젝트 설계를 진행했는데 어떤 식으로 프로젝트를 설계할지 배울 수 있었고 기본적인 피그마 사용법을 익힐 수 있었다. 1. 여러 디자인 파일들을 모아서 어떤 컨셉으로 프로젝트를 만들지 정했다. 메인 컬러들을 정하고 기본적인 피그마 사용법을 익혔다. 2. 필요한 기능을 정리했다. 3. 필요한 기술 스택을 정리했다. 4. 블로그 관련 팁을 들었는데 매우 도움이 되었다. 4-1. 프로젝트를 진행하며 어려웠던 것을 어떻게 해결했는지. 1. webpack 혹은 CRA 을 써서 기본 셋업을 하기 2. 피그마로 디자인 만들기 3. typescript, recoil, nextjs 기본적인 공부 해놓기 첫주차지만 블로그 관련 팁도 주시고 꽤 알찼던 시간이었다. 과제도 열심히 하고 질..

정상적으로 코딩을 했음에도 불구하고 Link가 동작하지 않았다. 정확히는 url은 바뀌는데 컴포넌트가 바뀌지 않았다. 이를 영어로 번역하여 질문한 결과 아래와 같은 해결책을 찾을 수 있었다. 두 시간의 고생이 한 번에 사라지고 말았다. 결국 index.tsx에 있는 Strict Mode가 문제였다.. 지우니 잘 동작한다.. withRouter()라는 해결방법도 있는 것 같다. 나는 withRouter()를 적용하지는 않았다. https://stackoverflow.com/questions/43351752/react-router-changes-url-but-not-view

마법이라는 단어를 들먹이는 걸 보니 실력이 아직은 부족하다는 뜻이다. 타입스크립트를 이용하니 props을 전달할 때 아래와 같은 타입스크립트의 오류메세지들을 많이 만날 수 있었다. Binding element "something" implicity has an any type 내가 듣는 리액트 강의에서 interface를 통해 해결했던 것 같은데 나는 그게 잘 안되어서 any를 붙여줘서 해결하고 있다. 미래의 나에게 질문하고 싶다. 굳이 타입을 props에 명시해줘서 얻는 효과가 무엇인지 그리고 어떻게 이것을 능숙하게 코딩할 수 있는지