전체 글
-
flutter - BlocWidget개발 2022. 10. 6. 21:53
설명만 읽어선 이해하기 어려울 것 같아서 실제 예제 코드가 있는 https://bloclibrary.dev/#/flutterlogintutorial 페이지를 보면서 따라가면 좋을 것 같다. BlocBuilder Bloc의 새로운 상태에 따라서 위젯을 만드는 클래스다. Bloc의 State가 변할 때마다 builder 함수가 여러번 불리게 되고 상태에 따라서 표현할 위젯을 바꿀 수 있다. 리턴 함수는 위젯 함수여야 한다. buildWhen 은 스테이트에 대해서 새롭게 위젯을 만들어야할지 말지를 리턴하는 함수다. 조건 문으로 특정 스테이트에 대해선 업데이트 하지 않도록 할 수 있다. BlocBuilder( buildWhen: (previousState, state) { // return true/false ..
-
flutter - Bloc, Cubit, Stream개발 2022. 10. 6. 21:40
Bloc 표현층과 비즈니스로직을 분리하고 코드를 빠르고 재사용 가능하게 짤 수 있는 플러터 아키텍처다. Bloc을 이해하려면 먼저 Stream에 대한 개념을 짚고 넘어가야한다. Stream 비동기적인 데이터들의 연속을 말한다. 파이프 안에 흐르는 물로 비유할 수 있는데 흐르는 물이 비동기적 데이터고 그 물을 둘러싸는 파이프가 Stream이라고 볼 수 있다. Dart의 코드로 표현하면 다음과 같다. Stream countStream(int max) async* { for (int i = 0; i < max; i++) { yield i; } } Stream을 소비(Consume) 하는 코드도 만들 수 있다. 비동기로 값을 리턴하기 위해 async 를 붙이고 Future로 리턴한다. Future sumStre..
-
typescript interface/type개발 2022. 9. 7. 20:30
javascript 에선 객체 타입이 따로 존재하지 않아 받은 객체의 모양을 알 수 없었는데 타입스크립트에서는 interface와 type을 이용해서 객체의 형태를 유추 할 수 있게 됐다. 오랜 기간 javascript 로만 프로젝트를 진행 했었는데 typescript의 interface 와 type 덕분에 런타임 에러를 확 줄일 수 있었다. Interface Car라는 interface를 사용했고 showCarInfo 함수에 정보를 노출하게 했다. 특정 객체만 받도록 형태를 지정할 수 있게 됐다. interface Car { name: string, color: string } function showCarInfo(car: Car) { console.log(car.name) console.log(car..
-
REST, REST API, RESTful개발 2022. 9. 2. 19:55
REST는 Representational State Transfer의 약자로 네트워크상에서 존재하는 애플리케이션을 만들기위한 아키텍처 스타일을 뜻한다. REST에는 6가지 아키텍처 가이드라인이 있는데 개발자라면 이미 몸소 체득했을 것이다. REST Guidelines Uniform Interface Resource 에 대한 요청을 통일되고 한정적으로 수행해야한다. 요청하는 Client 플랫폼에 종속되지 않고 사용할 수 있는 형태가 돼야함을 말한다. Client - Server 유저의 인터페이스는 클라이언트에서 데이터와 관련된 것은 서버에서 처리해 관심사를 분리한다. 다른 말로 하면 클라이언트와 서버가 따로 독립적으로 개선될 수 있어야 한다. Stateless 클라이언트와 서버는 요청을 완료 할 때 필요한..
-
nextjs 스크롤 저장 기억하기개발 2022. 8. 9. 20:00
일반적으로 뒤로가기 버튼을 클릭 할 때 유저는 현재 페이지에 진입하기 직전에 내가 있던 상태로 되돌아가는 것을 기대한다. 상태에는 내가 이전에 있던 페이지 경로 뿐만 아니라 보고 있었던 스크롤 위치도 포함된다. 그래서 아래 사이트처럼 내가 스크롤했던 위치를 잃어버리는 경우는 유저 경험에 크게 좋지 못한 케이스에 해당한다. 이런 상태로라면 책 팔기가 쉽지 않을 것 같다. 왜 이런 일이 발생하는 걸까? 앱개발을 했을 때는 새로운 화면 진입점마다 새로운 창을 만들어 줬기 때문에 이전 화면에서 읽어온 데이터와 스크롤 위치는 이전의 창에 그대로 저장돼 있어 딱히 상태 저장문제를 고려하지 않아도 됐다. 그런데 nextjs 에서 화면 이동시 사용하는 router.push 는 Activity와 달리 path만 이동하는..
-
지긋지긋한 CORS error. 이제 제대로 공부해보자.개발 2022. 7. 30. 14:13
프론트엔드 웹개발을 하다 보면 백엔드 서버에 보낸 요청이 CORS로 돌아오는 경우가 종종 있다. 분명히 나는 curl을 이용해서 테스트 했을 때는 문제가 없었는데 이상하게 브라우저상에서 요청을 보낼 때는 빨간 에러가 돌아오는것이 미칠 노릇일 것이다. 이번 포스트에서는 CORS 에러가 무엇인지, 그리고 어떻게 대응하는 것이 적절한 해결책인지 확인해보고자 한다. 1. CORS CORS는 Cross Origin Resource Sharing에 약자다. Origin은 url 주소상에서 프로토콜, Domain 이름, 포트까지 포함한 개념이다. 예로 로컬에 nextjs 프론트엔드 서버를 3000번으로 띄웠다면 http://localhost:3000 이 Origin에 해당한다. Same Origin이란 같은 Ori..
-
css - flex개발 2022. 7. 11. 20:38
flex는 container 내에 존재하는 요소를 배치하는 방법을 설정 할 수 있다. 기존에 밋밋한 방식 보다 다양하게 배치가 가능해 css 작업시 유용하게 써먹을 수 있다. display: flex, inline-flex flex로 선언된 요소는 부모의 width를 전부 차지하고 내부에 속한 요소는 가로로 정렬된다. inline-flex 로 선언된 요소는 자식 요소가 차지하는 width 만큼만 공간을 차지한다. flex-direction: column flex-direction 값을 설정하면 세로로도 정렬할 수 있다. 크게 row, column 으로 나뉘어 있고 row 인 경우에는 가로, column 인 경우에는 세로다. 이외에도 row-reverse, column-reverse가 있으며 역순으로 배치..
-
css - position개발 2022. 7. 10. 15:26
Position 은 문서에서 어떻게 요소를 배치할 것인지 결정하는 속성이다. 웹 프론트엔드 작업을 할 때마다 주먹구구 식으로 수정해왔는데 이번에 제대로 개념을 정리하고 가려고 한다. static position 속성의 기본 값이며 position 값을 채우지 않으면 자동으로 이 값으로 설정된다. 상위 부모를 배치 기준으로 삼으며 top, left, right, bottom 값은 유효하지 않다. 위에서부터 차곡차곡 쌓인다. 그림에서 static 2를 보면 static 요소 바로 밑에서 위치하는 것을 확인 할 수 있다. top이 먹지 않기 때문에 margin을 이용해서 여백을 만들었다 static position 의 기본값이다. 특별한 값을 세팅하지 않으면 위에서부터 차곡차고 쌓여간다. top, left, ..